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 {

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';

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



Related Post

Leave a Reply

Your email address will not be published. Required fields are marked *