Cannot read Property 'setAttribute' of null com ngFor

Question

I have an ngFor that adds several strings, and this data comes from an api

<p class="teste" *ngFor="let element of objeto_retorno" >Filial {{ element.FILIAL }} = {{ element.TOTAL }} </p>

and no ts:

  ngOnInit() {
    document.querySelector('.teste').setAttribute('class','cor')
  }

But he keeps making that mistake: Cannot read Property 'setAttribute' of null

I believe it is because of ngFor, but I’m not able to solve it, someone can give me a light?

Answer 1

I recommend using Angular itself, you don’t have to do things like that manually.

Use querySelector and querySelectorAll for elements that change constantly with Angular is quite unnecessary and on top of that problematic.

And then apply directly (if it is in fact at the time that the elements are populated/generated):

<p class="teste" *ngFor="let element of objeto_retorno" >Filial {{ element.FILIAL }} = {{ element.TOTAL }} </p>

Just for the record, the problem is that even ngAfterViewInit resolve first, if the data is repopulated the DOM is changed, usually the elements do not even exist yet, even if the screen has been loaded, even if it is imperceptible to you maybe the elements take a few milliseconds to be generated, and so something like that will not work right:

 document.querySelector('.teste').setAttribute('class','cor')

But if what you want is to apply as an event occurs then do something like:

<p [class]="propriedadeDaClasse ? 'cor': 'teste'" *ngFor="let element of objeto_retorno" >Filial {{ element.FILIAL }} = {{ element.TOTAL }} </p>

This example above would be the equivalent of setAttribute (changing the class), note that propriedadeDaClasse can be an "if" too, something like:

<p [class]="x != y ? 'cor': 'teste'" *ngFor="let element of objeto_retorno" >Filial {{ element.FILIAL }} = {{ element.TOTAL }} </p>

Both the hypothetical variable propriedadeDaClasse, how much x and y must be within the scope of this of your class, something like, examples:

export class FooBar {
    propriedadeDaClasse = false;
}

Or:

export class FooBar {
    x = 1;
    y = 2;
}

Now if you want to keep the "test" class along with "color" you will have to do so:

<p [class]="propriedadeDaClasse ? 'teste cor': 'teste'" *ngFor="let element of objeto_retorno" >Filial {{ element.FILIAL }} = {{ element.TOTAL }} </p>

So in this way Angular itself will understand when the DOM is changed and apply the classes as needed.

---

If they are classes (varied colors) the best would be to apply the color to a variable, something like:

export class FooBar {
    mainColor = ''; //começa sem cor, mas pode trocar '' por algo como 'cor'

     ...
}

Then in the:

<p [class]="mainColor + ' teste'" *ngFor="let element of objeto_retorno" >Filial {{ element.FILIAL }} = {{ element.TOTAL }} </p>

Thus concatenates mainColor + ' teste' both classes, which will generate things like:

class="cor1 teste"

or:

class="cor2 teste"

Ai within the class just change the color at any time, for example:

this.mainColor = 'cor1';

Or:

this.mainColor = 'cor2';

And in css:

.cor1 {
    color: red;
}

.cor2 {
    color: blue;
}

They are just examples, you adapt to your need

Answer 2

Try to do the querySelector by an id.

document.querySelector('#idteste').setAttribute('class','cor');

console.log('document.querySelector(\'#idteste\')', document.querySelector('#idteste'))
console.log('document.querySelector(\'.teste\')', document.querySelector('.teste'))

<p id="idteste" class="teste" *ngFor="let element of objeto_retorno" >

Edit: Plunker

It has to be put on ngAfterViewInit for at this stage the GIFT will be fully charged.