title: How to destroy HostListener in Angular2
body: <p>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 <strong>scroll function</strong> 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.</p>
  
  <p>I also think of some possible solution as listed:</p>
  
  <ol>
  <li>We can destroy the Listener</li>
  <li>Adding a Listener for a particular page</li>
  </ol>
  
  <p>If the above mentioned are possible then how could we do that.</p>
  
  <p>My Code:</p>
  
  <pre><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
  }
  }
  </code></pre>
  
  <p>HTML Code:</p>
  
  <pre><code>&lt;div (window:resize)="onResize($event)"&gt;
  //some code
  &lt;/div&gt;
  </code></pre>