Angular Interpolation, Property Binding & Event Binding Tutorial

Event Binding:

Its used to event bind which is raised from DOM like keystroke mouse movement, Click and so on…

import { Component } from '@angular/core';
@Component ({
   selector: 'event',
   template:`button (click)="onSave()">Save</button>`
})
 export class EventComponent {
  onSave(){
    console.log('Clicked')
  }
}

Use of $event

Sometimes we need to get access to event object that was raised in the event handler for example with mouse movements the event object tell us X and Y position if you want to get access to the event object we need to add that parameter $event.

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: `
    <button (click)="onSave($event)">Save</button>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
   onSave($event){
    console.log('Clicked', $event)
  }
}