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 and angular 10 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: