Conditionally apply click event in Angular 4

angular 4 conditional click event
how to call a component on button (click in angular 6)
angular 6 (click) not working
typescript onclick event type angular
angular trigger click
angular click event on div
how to use ngif directive and display detail after click event in angular
angular 6 href=#'' (click)

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

There is no way to do enable/disable bindings.

It's possible to do that imperatively

@ViewChild('.user') aUser:ElementRef; 

clickHandler(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

Condition based click event in Angular 2, _clickHandler); } to unsubscribe use this.aUser.nativeElement. removeEventListener('click', this._clickHandler); See also Dynamically add event listener in� This page will walk through Angular 4 NgIf-Then-Else example. NgIf conditionally includes a template based on the value of expression. It adds or removes the HTML element in DOM layout.

You can just do it like this

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

Conditionally apply click event in Angular 4 - angular - html, When browse is clicked, openFileBrowser($event) is called with $event as the argument. This is so we can use preventDefault() to prevent the� To add a conditional class in Angular we can pass an object to `ngClass` where key is the class name and value is condition i.e., true or false

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 :

private myClickHandler(event): void {
    if (this.isOverflown) {;

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>

How to Programmatically Trigger 'Click' Event in Angular 4 & 5, Conditionally apply click event in Angular 4. Posted on May 7, 2019 by lzo. Is it possible to define a condition in the template based on which a click handler is� Renderer has been deprecated in Angular 4.0.0-rc.1, read the update below. The angular2 way is to use listen or listenGlobal from Renderer. For example, if you want to add a click event to a Component, you have to use Renderer and ElementRef (this gives you as well the option to use ViewChild, or anything that retrieves the nativeElement)

Had a similar issue, this worked for me:

<p (click)="item.isClickable ? item.onClick() : return;">
 Hello Mom!

Conditionally apply click event in Angular 4 – Angular Questions, When a user interacts with an application in the form of a keyboard movement, a mouse click, or a mouseover, it generates an event. These events need to be� (I think you need to be on latest unstable Angular to use ng-attr-, I'm currently on 1.1.4) I faced a similar problem recently and decided to just create a conditional filter: angular.module('myFilters', []).

You need to inject ElementRef and Renderer into your component and use its listen method on the element reference of interest.

this.renderer.listen(this.elementRef.nativeElement, 'click', callbackFunction)

Angular 4 - Event Binding, Some of our events don't have a description or/nor a location. This is a perfect use case to use conditional rendering. 2. ngIf. One of the reasons why Angular has� From the angular documentation: "The asterisk is "syntactic sugar" for something a bit more complicated. Internally, Angular translates the *ngIf attribute into a <ng-template> element, wrapped around the host element, like this.

Conditional rendering using ngIf, Have Angular register a single event handler at the top of the This means that multiple (click) registration would result in a single document. Both the NgStyle and NgClass directives can be used to conditionally set the look and feel of your application. NgStyle gives you fine grained control on individual properties. But if you want to make changes to multiple properties at once, creating a class which bundles those properties and adding…

Render/Core: Conditionally add event handlers to DOM elements , ngClass is Angular 2's way of allowing you to apply classes and styles based on what's With [ngClass] , we can conditionally apply CSS classes to our component elements. <button (click)="update.emit({text:message})">Click me! we can add a (mousedown) event to our input that sets isMouseDown to true , as well� Get input value on button click event; Angular Button Click Event Example. Added below changes in app.component.html ie component template HTML file Created an HTML input button Added click event to a button, Here used bracket() symbol. the name placed inside is bracket is an event This will be called when the button is clicked by user Next is

Apply CSS Classes Conditionally with Angular 2's ngClass from , This directive executes at priority level 0. Usage. as attribute: <ANY ng-click=" expression">� Angular supports two design approaches for interactive forms. You can build forms by writing templates using Angular template syntax and directives with the form-specific directives and techniques described in this tutorial, or you can use a reactive (or model-driven) approach to build forms.

  • There is no way to do enable/disable bindings. You can use @ViewChild('.user') aUser:ElementRef; and then this.aUser.nativeElement.addEventListener(...); or removeEventListener()
  • What are you trying to achieve exactly when you want to avoid binding ? Why is binding problematic to you ?
  • I have a component in which the click behavior is needed only if the user supplies a value for one of the @Input. So, I knew only these two ways, of which I do not want to use an ng-if due to the large template being duplicate. So, I was wondering if there is a declarative way to not register the handler at all if a condition is not met. Does this explain what was I trying?
  • Just put if (!isOverflown) {return} at the beginning of the method, it'll achieve the same result.
  • @Pac0 not speaking of particular case but in general, event listeners are kind of things that you prefer to have less rather than more. you want to attach them as late as possible, de-attach as early as possible and not use if you don't need them. Its not just about final effect handled in listener method, its about having listener method attached itself. So he is looking for a way to not have it unless he needs it. And its a good practice.
  • removeEventListener won't work in your code because bind method creates new function
  • Renderer.listen returns function that we can call to unsubscribe
  • Ok, that sounds great. Do you think my updated answer would work?
  • This is a great answer and solution
  • simple and great answer