Event to fire when an angular *ngIf statement evaluates in template

Question

If I have the following:

<div *ngIf="user$ | async as user" class="container">
  <p>user.name</p>
</div>

Is there a way I can execute code when the div above finally appears on screen?

Answer 1

The ngIf will remove that DOM element and all attached components/directives. So you can just write a simple directive that executes an event when it's first created. When the ngIf transitions from false to true the directive will be created (again, and again, etc...)

@Directive({selector: '[after-if]'})
export class AfterIfDirective implements AfterContentInit {
    @Output('after-if')
    public after: EventEmitter<AfterIfDirective> = new EventEmitter();

    public ngAfterContentInit(): void {
        setTimeout(()=>{
           // timeout helps prevent unexpected change errors
           this.after.next(this);
        });
    }
}

Sample HTML:

<div *ngIf="user$ | async as user" class="container" (after-if)="your expression">
    <p>user.name</p>
</div>

Answer 2

A solution without the creation of a new directive is to take advange of @ViewChild behaviour:

Property decorator that configures a view query. The change detector looks for the first element or the directive matching the selector in the view DOM. If the view DOM changes, and a new child matches the selector, the property is updated.

The important part is If the view DOM changes wich means that in this case this'll only be triggered when the element is created or destroyed.

First declare a variable name for the element, for the sample i used #userContent

    <div #userContent *ngIf="user$ | async as user" class="container">
      <p>user.name</p>
    </div>

Then add a @ViewChild reference inside your component:

    @ViewChild('userContent') set userContent(element) {
      if (element) {
         // here you get access only when element is rendered (or destroyed)
      }
    }

This solution was provided inside another question, also @ViewChild behaviour detail is available here.