Event to fire when an angular *ngIf statement evaluates in template
Solution 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<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>
Solution 2
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 last way because to me it was easier to handle observables than validations inside setter's
, also this approach is closer to the "Event" concept.
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.
Related videos on Youtube
Sammy
Updated on September 16, 2022Comments
-
Sammy over 1 year
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?-
ShabbY almost 7 yearsCant you Just subscribe in Code to the user$ observable?
-
-
Paul about 6 yearsI couldn't get this to work in my project for ages but when I added [ ] around the after-if at the top I got it working, eg : @Directive({ selector: '[after-if]' })
-
Ryan Haney about 3 yearsThe subscribe function returns a subscription that you must store a reference to and unsubscribe to when the component is destroyed (e.g. in ngOnDestroy). Is there a way to make this less verbose?
-
luiscla27 about 3 yearsThere's a lot of ways @Ryan, my favorite is the RxJs function
takeUntil
, there's a lot more detail in this answer: stackoverflow.com/a/41177163/1657465 -
Ryan Haney about 3 yearsI think what I'm looking for is something like the "custom ngSubscribe directive". IOW, something to manage registration and removal of the subscription (similar to the async pipe). The amount of boilerplate code for each subscription is undesirable. The code you have written above does not unsubscribe. When the component is destroyed, the subscription lives on. You can prove this by logging inside the subscription.
-
luiscla27 about 3 years@RyanHaney, thank you for your feedback, I've just added the
unsubscribe
method for the sake of developers that might not know that all observables need to be unsubscribed -
Ryan Haney about 3 yearsI just happened upon this interesting package: npmjs.com/package/@w11k/ngx-componentdestroyed.
-
luiscla27 about 3 yearsLooks the same than the
takeUntil
approach, but with thengOnDestroy
method inside the extended class