Angular Event Binding Example Tutorial

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, angular 13, angular 14, angular 15, angular 16 and angular 17 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...