Angular Event Binding Example

By Hardik Savani March 29, 2020 Category : Angular

Here, i will show you how to works how to bind event in angular. you can understand a concept of how to bind click event in angular. if you want to see example of bind event in angular then you are a right place.

you can see event binding in angular 8. Alright, let’s dive into the steps.

You can easily event binding in angular 6, angular 7, angular 8, angular 9, angular 10, angular 11, angular 12 and angular 13 application.

In this post, i will give you simple exsample of click event binding with button and change event bing with select box.

So, let's see bellow simple example with demo and output.

src/app/app.component.ts

import { Component } from '@angular/core';

@Component({

selector: 'my-app',

templateUrl: './app.component.html',

styleUrls: [ './app.component.css' ]

})

export class AppComponent {

name = 'Angular Event Binding Example - ItSolutionStuff.com';

types = [

'User',

'Admin',

'Super Admin'

]

chaneType(event){

console.log('Call on change event.');

console.log(event);

}

buttonClick(event){

console.log('Call on click event.');

console.log(event);

}

}

src/app/app.component.html

<h1>{{ name }}</h1>

<div> Type :

<select (change) = "chaneType($event)">

<option *ngFor = "let i of types">{{i}}</option>

</select>

</div>

<button (click)="buttonClick($event)">Click Me!</button>

You can see bellow preview:

You can see bellow output:

Call on change event.

preview-98637320847d9dfba629b.js:1 Event {isTrusted: true, type: "change", target: select, currentTarget: select, eventPhase: 2, …}

preview-98637320847d9dfba629b.js:1 Call on click event.

preview-98637320847d9dfba629b.js:1 MouseEvent {isTrusted: true, screenX: 1095, screenY: 288, clientX: 33, clientY: 106, …}

I hope it can help you...