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


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


selector: 'my-app',

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

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


export class AppComponent {

name = 'Angular Event Binding Example -';

types = [



'Super Admin'



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




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





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

<div> Type :

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

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



<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: