Sometimes we have an event bound to an element and for any reason we have to avoid that this event is triggered, so we have to disable that event. To do such tasks, in vanilla Javascript we have a method like preventDefault(). We will see how to disable events in Angular.
You can find more info here:
https://www.w3schools.com/jsref/event_preventdefault.asp
The way to accomplish this with Angular is very similar, and we can do do it through the $event object. This object contains information about an event, and it has properties like $event.target to reference the element which triggered the event. You can find more info about Event Binding in angular here
The way to pass the event as a parameter to a method would be like this:
<button (click)="showModal($event)">Push button</button>
So, if we want to prevent that this click event is not triggered, all we have to do is using the preventDefault() method, this way:
<button (click)="showModal( $event.preventDefault() )">Push button</button>
Example to apply what we have learned
We will see more clearly with this example.
Let´s assume we have a search bar. When we click on this bar, we will show the search history made by this user. Each element of this list will have some styles added to tell the users they can click the element to perform a new search with this text. It would be something like this:
But, what if the search is empty? We will show a text to invite the user to enter a valid search. We will use the same HTML element we have to show the search history, but of course, this time, the element should not be clickable, because it is not a part of our search history. Something like this:
As we see, “please enter valid search” has different styles and we have prevented the click event from being triggered. Nothing will happen if the user clicks on it.
How have we done it with Angular? This is the piece of code:
<ul class="d-flex flex-fill navbar-nav mb-lg-0">
<li class="w-100">
<input class="form-control me-2" type="search" placeholder="Search Gifs..." aria-label="Search" (keyup.enter)="search($event)" (click)="displaySearchHistory()" #searchInputElement>
<ul id="search-history" [@openClose]="isOpen ? 'history-open' : 'history-closed'" >
<span *ngIf="isClickable;else enterValidSearch">
<li class="clickable-list" *ngFor="let item of this._gifsService.historicObserv$ | async" (click)="search($event)">
{{item}}
</li>
</span>
<ng-template #enterValidSearch>
<li (click)="$event.preventDefault()">Please enter valid search</li>
</ng-template>
</ul>
</li>
</ul>
Note: There are parts of the code which are beyond the scope of this article and have nothing to do with how to disable events in angular, since I used things like Angular animations to apply smoother transitions when we show the list. If you want details about Angular animations check official examples here. Also you can see we used Observables and async pipe to show data. I recommend you to see this article to know a bit more about it.
Also the code we used on displaySearchHistory() and search() methods, or to validate if a search is empty or not, will not be detailed here. Many times angular forms are used to do those kinds of validations, but I used plain Javascript. The trim() method was very useful to accomplish it 🙂
The important things we must focus here are the (click) events, and the $event object.
What we did here is validate against a boolean property called isClickable if we will allow the click event to be triggered or not.
In the case isClickable is true, a <li> HTMLelement with the search history will be shown. Notice we will apply a class called "clickable-list" to show some styles when we hover over the result. Just in case you are curious, my css rules are:
.clickable-list{
/*
to make each LI element fill all the width of the UL element. As we can see on browser´s console
it has a padding-left of 2rem, we adjust the margin left as the same negative value.
The padding left here is to move the text a bit
*/
margin-left: -2rem;
padding-left: 2rem;
}
.clickable-list:hover{
background-color:#FFC107;
color: white;
}
As we said before, we will be able to control our (click) event and pass it to the search() method with the $event object as parameter. That is why we have written (click)="search($event)"
<span *ngIf="isClickable;else enterValidSearch">
<li class="clickable-list" *ngFor="let item of this._gifsService.historicObserv$ | async" (click)="search($event)">
{{item}}
</li>
</span>
With this object we will be able to perform several operations we will need on our code.
But in the case isClickable property is false, we will show a different <li> element. This time, as we said, no operation can be triggered when the user clicks this element. The way to prevent this is using angular ng-template element. With a template variable called enterValidSearch we will reference this template on the *ngIf statement and will show it in the case isClickable is false (that will be validated in our .ts code and, as said, is beyond the scope of this article).
<ng-template #enterValidSearch>
<li (click)="$event.preventDefault()">Please enter valid search</li>
</ng-template>
Also we can see we can prevent (click) event from firing with $event.preventDefault()
And that´s it! I hope this article is helpful to learn how to disable events in Angular. Please contact me if you see any errors or things I could improve.
*Featured image by Gerd Altmann found in Pixabay