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
document.querySelector('.teste')
is returning null....– thxmxx
Yeah, I figured it out, but how do I fix it? Because he’s taking the class, and I even put it on to get the ID and it won’t go
– Maria
I tested here with class and tb was not, but by id gave.
– thxmxx
I’m not sure, but I believe that at the moment ngOnInit runs the view is not fully loaded and possibly the element does not yet exist. Take a look at life Cycle Hooks https://angular.io/guide/lifecycle-hooks#ondestroy. Try replacing ngOnInit with ngAfterViewInit
– Paulo Gustavo
I tested here, but still null
– Maria
It worked here: https://stackblitz.com/edit/angular-fvhftk
– Paulo Gustavo
yet here it doesn’t work, and I have no idea why
– Maria