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

angular angular-ng-if angular-template
Sammy picture Sammy · Jun 10, 2017 · Viewed 11k times · Source

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

Reactgular picture Reactgular · Jun 24, 2017

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<void> = new EventEmitter<void>();

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

Sample HTML:

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

Related questions

*ngIf and *ngFor on same element causing error

I'm having a problem with trying to use Angular's *ngFor and *ngIf on the same element. When trying to loop through the collection in the *ngFor, the collection is seen as null and consequently fails when trying to access its …

Read More
Angular 4 default radio button checked by default

I'm trying to mark as a default a radiobutton depending on the value I get from my object, it can be True or False. What could I do to mark as a default radiobutton depending on the option? <label&…

Read More
*ngIf else if in template

How would I have multiple cases in an *ngIf statement? I'm used to Vue or Angular 1 with having an if, else if, and else, but it seems like Angular 4 only has a true (if) and false (else) condition. According to …

Read More