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

A solution without the creation of a new directive is to take advange of @ViewChild and @ViewChildren 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.

1. ViewChild

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.

2. ViewChildren

Another solution without using a new directive is to subscribe to @ViewChildren change observable, instead of using @ViewChild put it like this:

@ViewChildren('userContent') private userContent: QueryList<any>; 

And then subscribe to it change observable:

userContent.changes.pipe(takeUntil(this.$d)).subscribe((d: QueryList<any>) => { if (d.length) { // here you get access only when element is rendered } }); 

I've preferred the @ViewChildren way because to me it was easier to handle observables than validations inside setter's, also this approach is closer to the "Event" concept.

3. ngAfterViewInit()

NOTE: this option doesn't apply to OP question, as he's rendering a div, not a component.

As a general recommendation, when possible, avoid using any approach listed in this question. Instead, add an event triggered inside the ngAfterViewInit method of your child component. This is way more natural as Angular is intended to be used.

Child component:

// declare the event @Output() public created= new EventEmitter<any>(); // later on, trigger the event every time the component is rendered ngAfterViewInit() { this.created.next(); } 

Parent component:

<my-user-content-component #userContent (created)="onUserContentCreated($event)"></my-user-content-component> 

@ViewChild('userContent') userContent: MyUserContentComponent; onUserContentCreated() { // here you get access only when element is rendered using `this.userContent` } 

Note about Observables:

All observables need to be unsubscribed, otherwise you'll provoke memory leaks; there's a lot of ways to prevent that, as a recommendation, my favorite way is the RxJs function takeUntil, this part: pipe(takeUntil(this.$d)) and the following at your ngOnDestroy method:

private $d = new Subject(); ngOnDestroy() { this.$d.next(); this.$d.complete(); } 

The reason I recommend this way is because the amount of extra code to implement it is very low, also; you can use the same variable for all of your subscriptions in the component (this.$d). For more details/options about unsubscription approaches see this other related question/answer.