Angular Event Binding

Back to: Angular Tutorials For Beginners and Professionals

Angular Event Binding with Examples

In this article, I am going to discuss the Angular Event Binding with examples. Please read our previous article where we discussed Angular Style Binding in Detail. As of now, the bindings that we have discussed in this article series flow the data in one direction i.e. from a component class property to an HTML element property. But if you want to flow the data in the opposite direction i.e. from HTML Element to Component, then you need to use Event Binding. At the end of this article, you will understand the following pointers in detail.

1. What is Event Binding in Angular?
2. How Does Event Binding work in Angular?
3. Angular Event Binding Example

What is Event Binding in Angular?

When a user interacts with an application in the form of a keyboard movement, button click, mouse over, selecting from a drop-down list, typing in a textbox, etc. it generates an event. These events need to be handled to perform some kind of action. This is where event binding comes into the picture and in Angular Application, we can use event binding to get notified when these events occur.

How Does Event Binding work in Angular?

Let us understand how Event Binding works in Angular Application with an example.

The following image shows the syntax for binding to the click event of a button. Within parentheses on the left-hand side of the equal sign, we have the target event, (click in this case) and on the right-hand side, we have the template statement such as Component properties or methods. In this case, it is the component method i.e. onClick() method which is going to be called when the button click event occurs.

With event binding, you can also use the on- prefix alternative as shown in the image below. This is known as the canonical form. It’s up to you which approach you follow. Behind the scene, they are going to perform the same task.

Angular Event Binding Example:  

Let us understand Angular Event Binding with an example. Please modify the app.component.ts file as shown below.

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: `<div>
                <button (click)="onClick()">Click Me </button>
              </div>`

})
export class AppComponent {
  onClick(): void {
    console.log('Button is Clicked');
   }
}

Now, run the application and launch the browser developer tools by pressing the F12 key. Once you open the browser developer tools click on the Console tab as shown in the image below. Notice every time you click the button, ‘Button is Clicked’ message is displayed on the console.

Another Example: 

When the page loads for the first time, we want to display only the First Name and Last Name of the student. We also display the “Show Details” button as shown in the below image. 

When the user clicks on the “Show Details” button, we want to display the “Gender“, “Age“, “Mobile”, and “Branch” as well. The text on the button should be changed to “Hide Details” as shown in the below image and when the user clicks on the “Hide Details” button, then the “Gender“, “Age“, “Mobile”, and “Branch” should be hidden and the button text should be changed to “Show Details”. 

 

We can achieve this very easily in angular with the help of event binding. Here we will make use of one of the angular directives i.e. “ngIf“.

Modify app.component.ts file:

Notice we have introduced “ShowDetails” boolean property. The default value is false, so when the page loads for the first time, we will have “Gender”, “Age”, “Mobile”, and “Branch” hidden. We also have a method, ToggleDetails(), which will toggle the value of ShowDetails. 

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls:['./app.component.css']
})
export class AppComponent {
    ColumnSpan: number = 2;
    FirstName: string = 'Anurag';
    LastName: string = 'Mohanty';
    Branch: string = 'CSE';
    Mobile: number = 9876543210
    Gender: string = 'Male';
    Age: number = 20;
    
    ShowDetails: boolean = false;

    ToggleDetails(): void {
        this.ShowDetails = !this.ShowDetails;
    }
}

Modify app.component.html file:

Notice the click event of the button element is bounded to ToggleDetails() method. To dynamically change the text on the button, we are using a ternary operator:

 {{ShowDetails ? ‘Hide’ : ‘Show’}} Details

We used ngIf structural directive on “Gender”, “Branch”, “Mobile” and “Age” <tr> elements. The * prefix before a directive indicates, it is a structural directive. Besides ngIf, there are other structural directives which we will discuss in our upcoming articles.

The ngIf directive conditionally adds or removes content from the DOM based on whether or not an expression is true or false. If “ShowDetails” is true, “Gender”, “Branch”, “Mobile” and “Age” <tr> elements are added to the DOM, else removed.

<table>
    <thead>
        <tr>
            <th attr.colspan="{{ColumnSpan}}">
                Student Details
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>First Name</td>
            <td>{{FirstName}}</td>
        </tr>
        <tr>
            <td>Last Name</td>
            <td>{{LastName}}</td>
        </tr>
        <tr *ngIf='ShowDetails'>
            <td>Branch</td>
            <td>{{Branch}}</td>
        </tr>
        <tr *ngIf='ShowDetails'>
            <td>Mobile</td>
            <td>{{Mobile}}</td>
        </tr>
        <tr *ngIf='ShowDetails'>
            <td>Gender</td>
            <td>{{Gender}}</td>
        </tr>
        <tr *ngIf='ShowDetails'>
            <td>Age</td>
            <td>{{Age}}</td>
        </tr>
    </tbody>
</table>
<br/>
<button (click)='ToggleDetails()'>
    {{ShowDetails ? 'Hide' : 'Show'}} Details
</button>

Modify app.component.css file:

Modify the app.component.css file as shown below.

table {
    color: #369;
    font-family: Arial, Helvetica, sans-serif;
    font-size:large;
    border-collapse: collapse;
}
td {
    border: 1px solid black;
}
thead{
    border: 1px solid black;
}

Now run the application and you will see everything is working as expected as per our requirement.

In the next article, I am going to discuss two-way data binding in angular with examples. Here, in this article, I try to explain Angular Event Binding with Examples. I hope this article will help you with your needs. I would like to have your feedback. Please post your feedback, question, or comments about this article.