Conditionally apply click event in Angular 4

Solution 1:

You can just do it like this

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

Solution 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

Solution 3:

I would suggest you write a handler that performs the conditional action, this is the simplest way IMHO :

In Component template :

<a class='user' (click)="myClickHandler($event)"></a>

in Component code .ts :

myClickHandler(event): void {
  if (this.isOverflown) {
    this.menu.toggle(event);
  }
}

EDIT after comment : if you really want to avoid binding (I don't understand why, but anyway) you can have a conditional component using *ngIf:

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