Angular 10 - Event Binding

In Angular, event binding is utilized to handle the events raised by the utilizer actions like button click, mouse movement, etc. When the DOM event transpires at an element(e.g. click, key down, etc...) it calls the designated method in the particular component.

Syntax

<button (click)="onShow()">Show</button>

Let us consider an example to understand this better.

Example1:Using click event on the input element.

app.component.html

<h1> 
Knowledgefactory
</h1>
<input (click)="myAction($event)" value="Knowledgefactory">

app.component.ts

import { Component } from '@angular/core';     
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
myAction(event) {
alert(event.toElement.value)
}
}
In the app.component.html file, we have defined a button and added a function to it using the click event.
Upon clicking the button, the control will come to the function myAction and a dialog box will appear.




Example2:Using keyup event on the input element.

app.component.html

<input (keyup)="onKeyUp($event)">   
<p>{{message}}</p>

app.component.ts

import { Component } from '@angular/core';     
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
message = '';
onKeyUp(x) {

// Appending the updated value
// to the variable
this.message += x.target.value + ' + ';
}
}




More...


Popular posts from this blog

Spring boot video streaming example-HTML5

DataTable-Pagination example with Spring boot, jQuery and ajax

10 Best Job Posting Sites 2021-2022

Spring boot web project free download:User Registration System

Spring Boot + JPA/Hibernate One to Many mapping example

5 Hardest Puzzle,100% fail answers

Java security AES,SHA256,SHA512,MD5-Spring Boot Project Free Download

Spring Boot-AngularJS-Bootstrap-JPA-CRUD

ReactJS - Bootstrap - Buttons

Spring Boot file upload/download example