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 and angular 9 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...




Hardik Savani
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.

We are Recommending you: