CODEWITHSUNDEEP
angular
Aiguo
Aiguo

Reputation: 3566

Notify when an element is rendered in the DOM: Angular 4

I have a div in my template which contains a bunch of information, but because the information is dynamically populated by making an API call I have an *ngIf condition on the div:

<div class="user-information" *ngIf="userInfoLoaded">
  <div [id]="userInfoObj.id">
     ........
  </div>
</div>

I'm trying to grab the nested div with id=userInfoObj.id to do something with it, but the problem I'm facing is that I don't know when the API comes back with a response, so something like:

ngAfterViewInit(): void {
  console.log(document.getElementById(this.userInfoObj.id));
}

would not work because it won't be rendered in the DOM until we have the actual response. So is their a way to let the component know when this particular div is rendered in the DOM? Somebody suggested me to use a Promise, but I'm not sure how that would work in this case.

Upvotes: 2

Views: 3903

Answers (1)

Andreas Hadjithoma
Andreas Hadjithoma

Reputation: 650

You can try AfterContentChecked which gets triggered everytime the dom changes

Upvotes: 1

Related Questions