How to destroy HostListener in Angular2

Question

I am creating a page in which animation will occur on scrolling down the page, when the element is visible on the viewport its corresponding animation will occur. As I'm using Angular2, thought of writing scroll function using it. I searched the whole day and found that HostListener will satisfy what I looked for. But, my problem is "Multiple pages have been used". Hence I need the scroll function to occur only one the required page. Is there any solution for this.

I also think of some possible solution as listed:

We can destroy the Listener
Adding a Listener for a particular page

If the above mentioned are possible then how could we do that.

My Code:

import {Component,HostListener} from '@angular/core';
@Component({
    selector: 'my-app',
    templateUrl:'src/html/home.html',
})

export class Home {
    @HostListener('window:scroll', ['$event'])
onScroll(e){
// My animation code
}
}

HTML Code:

<div (window:resize)="onResize($event)">
//some code
</div>

https://stackoverflow.com/questions/35080387/dynamically-add-event-listener-in-angular-2/35082441#35082441 — yurzui, Sep 13 '17 at 13:49
@AngularInDepth.com Is there any chance it can be possible soon? — yurzui, Sep 13 '17 at 14:05
Indirect duplicate of: https://stackoverflow.com/questions/43573489/angular-4-how-to-trigger-an-animation-when-a-div-comes-into-the-viewport — Vega, Sep 13 '17 at 14:49

Max Fahl · Answer 1 · 2018-06-28T13:30:46.390

I'm not sure I understand your question completely. Do you want to stop listening for the scroll-event whenever you've reached a certain scroll point? In that case, just create your own listener in ngOnInit and call removeEventListener on window when you're no longer interested in these events.

import {Component,HostListener} from '@angular/core';

@Component({
    selector: 'my-app',
    templateUrl:'src/html/home.html',
})
export class Home {

    private boundScrollCallback: Function;

    ngOnInit() {
        /**
         * Need to bind the onScroll function so that "this" in
         * onScoll will result in the component instance itself.
         * Otherwise this.removeScrollLiteners() will not work in that context.
         */
        this.boundScrollCallback = this.onScroll.bind(this);

        window.addEventListener('scroll', this.boundScrollCallback);
        /**
         * Need this as well as resizing the window may result
         * in a change of scroll position.
         */
        window.addEventListener('resize', this.boundScrollCallback);
    }

    onScroll(e){
        if (true /** Logic to check scroll position goes here */) {
            // Animation code

            this.removeScrollLiteners(); // Stop listening for events.
        }
    }

    /**
     * Remove the event listeners.
     */
    private removeScrollLiteners() {
        window.removeEventListener('scroll', this.boundScrollCallback);
        window.removeEventListener('resize', this.boundScrollCallback);
    }

    ngOnDestroy() {
        this.removeScrollLiteners(); // Stop listening for events.
    }
}

I would otherwise look at IntersectionObserver to solve this problem since it makes these kinds of things easier to deal with.

How to destroy HostListener in Angular2

1 Answers1