CODEWITHSUNDEEP
angular
Daniel Stephens
Daniel Stephens

Reputation: 3209

Is there an event function in Angular that is executed after `ngOnChanges`?

I use Angular and use a template to render a list of items by using *ngFor. Each item in the list has an img tag and I load only the images of the items that are visible in the viewport.

That means, I have 2 events here where this is checked. In ngAfterViewInit (for the first draw) and in the mouse wheel event. Example:

@HostListener("mousewheel")
scroll(event: MouseEvent) {
    clearTimeout(this.timeout);
    this.timeout = setTimeout(() => {
        this.load_Images_Visible_In_The_Viewport();
    }, 250);
}

If the parent component updates the list (which is an @Input) I can't trigger the function load_Images_Visible_In_The_Viewport because where can I do that? ngOnChanges is too soon before *ngFor is executed.

I am looking for a function like: ngUpdateViewAfterChanges. Does something like this exist in Angular? Any help is highly appreciated!

Upvotes: 1

Views: 985

Answers (1)

R. Richards
R. Richards

Reputation: 25141

Since you're using @Input properties, then ngOnChanges would be the lifecycle to go with.

If it happens too soon, then maybe you need to check the proper SimpleChange that is passed into ngOnChanges(changes: SimpleChanges) to see if the change is the first change (isFirstChange()), and ignore that one.

SimpleChanges is a parameter that gets passed into ngOnChanges. It is available every time an ngOnChanges lifecycle hook fires. You can evaluate the contents of that, and act accordingly.

From the Angular docs cited below:

ngOnChanges(changes: SimpleChanges) {
    for (const propName in changes) {
        const chng = changes[propName];
        const cur  = JSON.stringify(chng.currentValue);
        const prev = JSON.stringify(chng.previousValue);
        this.changeLog.push(`${propName}: currentValue = ${cur}, previousValue = ${prev}`);
    }
}

References:

Upvotes: 1

Related Questions