Conditionally apply click event in Angular 4

Question

Is it possible to define a condition in the template based on which a click handler is attached?

For instance, the closest I can get is evaluating a condition at the entry of the click method.

<a class='user' (click)=" isOverflown? menu.toggle($event): '' "></a> 

Is there a way in which I can avoid binding to the click event altogether if the flag isOverflown is false?

Also, I dont want to use ng-if on the element and duplicate the template. ie: create one element that has click binding and create another that doesn't, then show/hide them using ng-if

Answer 1

You can just do it like this

<a class='user' (click)="isOverflown && menu.toggle($event)"></a> 

Answer 2

There is no way to do enable/disable bindings.

It's possible to do that imperatively

@ViewChild('.user') aUser:ElementRef;   clickHandler(event) {   console.log(event); } _clickHandler = this.clickHandler.bind(this);  ngAfterViewInit() {   this.aUser.nativeElement.addEventListener('click', this._clickHandler);  }   

to unsubscribe use

this.aUser.nativeElement.removeEventListener('click', this._clickHandler);  

See also Dynamically add event listener in Angular 2