title: How to detach Angular 2 global event
body: <p>I am writing a directive in Angular 2 that attaches an event handler with global events like window's scroll event using host attribute in the metadata section. The code is given below:</p>
  
  <pre><code>&lt;html&gt;
   ...
   &lt;body&gt;
      &lt;div listen-to-scroll&gt;
         Some big fat content is here
      &lt;/div&gt;
   &lt;/body&gt;
  &lt;html&gt;
  </code></pre>
  
  <p>And the .ts file look likes for <code>listen-to-scroll</code> directive as follows:</p>
  
  <pre><code>@Directive({
     selector: '[listen-to-scroll]',
     host: {
       (window:scroll): '_handleScrollEvent($event)'
     }
   })
   export class ListenToScrollDirective {
      _handleScrollEvent(event: Event) {
           console.log('event occurred');
       }
   }
  </code></pre>
  
  <p>I observed that the scroll handler registered by the directive was always active. So how to deregister it from listening from scroll event? I am expecting something clean just like registering for the event via host object.</p>