In Angular one-way bindings, like property binding, attribute binding, flow is from Component to template but Angular event binding goes the other direction from template to component. Event binding allows you to listen and respond to certain events such as keystrokes, mouse movements, clicks, and touches sent by the host elements.
Syntax of Angular event binding
Event binding is denoted by round brackets () and the syntax is as given below.
(event name) = "event handler expression/method"
Angular event binding syntax consists of a target event name within parentheses on the left of an equal sign, and a template statement with in quotes on the right.
For example-
Here event binding listens for the button's click events, calling the component's onSave() method whenever button is clicked.
Angular Even binding examples
1. First example shows how to disable a button after it is clicked. It uses both property and event binding. A boolean flag is bound to the "disabled" property of the button, when button is clicked using click event a method is called which toggles the boolean flag.
Component (Typescript code)
import {
Component
} from '@angular/core';
import { User } from './user.model';
@Component({
selector: 'app-user',
templateUrl: './user.component.html'
})
export class UserComponent {
flag : boolean = false;
// toggle the flag
onButtonClick(){
this.flag = !this.flag;
}
}
Template (HTML file)
<div class="container">
<div class="row">
<div class="col-md-12">
<label for="name" class="form-label">Name:</label>
<input class="form-control" placeholder="Enter name" id="name">
</div>
</div>
<div class="row mt-3">
<div class="col-md-12">
<button class="btn btn-primary" (click)="onButtonClick()" [disabled]="flag">Submit</button>
</div>
</div>
</div>
In the button element, click event is bound to a method onButtonClick(). When the button is clicked onButtonClick() method is called on the component which toggles the boolean flag field. Initially value of flag is false thus in the method it becomes true.
2. Binding with input event of input element to get the value of input field.
<div class="container">
<div class="row">
<div class="col-sm-12">
<label for="name" class="form-label">Name:</label>
<input type="text" class="form-control" (input)="updateUserName($event)" id="name">
</div>
<p>{{ userName }}</p>
</div>
</div>
In the input element, input event is bound to a method updateUserName and $event is passed as an argument. $event denotes the data emitted with the event.
Component
import {
Component
} from '@angular/core';
import { User } from './user.model';
@Component({
selector: 'app-user',
templateUrl: './user.component.html'
})
export class UserComponent {
userName : String;
updateUserName(event : Event){
this.userName = (event.target as HTMLInputElement).value;
}
}
In the component there is a userName property, value from the passed $event argument is extracted in the method updateUserName() and assigned to the userName.
3. Using the mouseover event to display the selected item. In the example User records are displayed in a table and the user name, over which mouse pointer is hovering is displayed in the separate <div> section using the mouseover event.
User Model class
export class User {
name : string;
age : number;
joinDate : Date;
constructor(name: string, age : number, joinDate : Date) {
this.name = name;
this.age = age;
this.joinDate = joinDate;
}
}
Component
import {
Component
} from '@angular/core';
import { User } from './user.model';
@Component({
selector: 'app-user',
templateUrl: './user.component.html'
})
export class UserComponent {
users: User[];
userName = '';
constructor(){
// Adding User instances to users array
this.users = [new User('Jack', 56, new Date('2005-03-25')),
new User('Lisa', 32, new Date('2012-05-09')),
new User('Jayesh', 28, new Date('2014-10-21'))] ;
}
}
Template
<div class="container">
<div class="bg-warning my-4">
Selected User: {{userName || '(None)'}}
</div>
<table class="table table-sm table-bordered">
<tr>
<th>Name</th>
<th>Age</th>
<th>Joining Date</th>
</tr>
<tr *ngFor="let user of users">
<td (mouseover)="userName=user.name">{{user.name}}</td>
<td>{{user.age}}</td>
<td>{{user.joinDate | date:'dd/MM/yyyy'}}</td>
</tr>
</table>
</div>
In the table (mouseover) event is used with the <td> element.
Build the example and run it, initial display should be as given below.
With mouse over selection.
That's all for this topic Angular Event Binding With Examples. If you have any doubt or any suggestions to make please drop a comment. Thanks!
>>>Return to Angular Tutorial Page
Related Topics
You may also like-