I am facing an issue trying to access the "box-message" class using "document.querySelectorAll('.box-message')" within a tree structure where the "*ngFor" directive is utilized.
After making an "http rest" request, the *ngFor directive finishes constructing the components and then I attempt to retrieve the "box-message" class using "document.querySelectorAll('.box-message')".
However, it seems like there is not enough time for the components to be fully built, resulting in the inability to fetch the "box-message" class.
I have attempted using AfterViewInit without success. Any suggestions on how to resolve this issue?
HTML
<ul class="ul-ads">
<li class="li-ads" *ngFor="let ads of ads">
<div class="box-message">{{ads.message}}</div>
</li>
</ul>
SCRIPT
export class AdsComponent implements OnInit {
ads!: Ads[];
public getAds(): Observable<any> {
return this.http.get<any>(`http://localhost:8080/apis/data/ads`,
{observe: 'response'});
}
ngOnInit(): void {
this.getAds().subscribe({
next: data => {
this.ads = responseData.body.content;
const boxMessage = document.querySelectorAll('.box-message');
console.log(boxMessage) // NodeList[]
}
});
}
}