title: In Angular 2, How can I remove click event from a component / directive, if "click" was attached directly in an HTML tag?
body: <p>I'm using Ionic 3 that comes with Angular 4. I built a component that takes the original <code>(click)</code> event from current element and binds it to a new one (dinamically created in the component). What I'm trying to do, is to remove the original click event from current component.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!-- imageZoom() is defined in my view controller: page.ts --&gt;
  &lt;inline-spinner
      [src]="http://..."
      (click)="imageZoom($event)"&gt;&lt;/inline-spinner&gt;
  </code></pre>
  
  <p><strong>COMPONENT</strong></p>
  
  <pre class="lang-ts prettyprint-override"><code>export class InlineSpinnerComponent implements OnChanges {
  
      public img: any;
  
      @Output() click: EventEmitter&lt;any&gt; = new EventEmitter();
  
      constructor() {
  
          this.img = new Image();
  
          // I want to unbind/remove "click" from here if possible.
          // this.elementRef.nativeElement = &lt;inline-spinner&gt;
      }
  
      ngOnChanges() {
  
          // Just to show what I'm doing with the original click event
          this.img.addEventListener('click', () =&gt; { this.click.emit(this.img); });
      }
  }
  </code></pre>
  
  <p>Any help will be really appreciated. Thanks!</p>