Hello Devs, 

In this tutorial, we will learn Event Binding in Angular Example

You can easily do event binding in angular 6, angular 7, angular 8 and angular 9 application.

Follow this step by step guide below. 



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 - rathorji.in';

  

  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>


May this example help you.