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

question from:https://stackoverflow.com/questions/45985022/conditionally-apply-click-event-in-angular-4

Answer 1

You can just do it like this

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