How to use Event Binding in Angular

There is multiple event binding can be add in angular.

(click)="myMethod()"
   // on click
(dblclick)="myMethod()" // on double click

(focus)="myMethod()"  // An element has received focus
(blur)="myMethod()"   // An element has lost focus

(submit)="myMethod()"  // A submit button has been pressed

(scroll)="myMethod()"

(cut)="myMethod()"
(copy)="myMethod()"
(paste)="myMethod()"

(keydown)="myMethod()"
(keypress)="myMethod()"
(keyup)="myMethod()"

(mouseenter)="myMethod()"
(mousedown)="myMethod()"
(mouseup)="myMethod()"


(drag)="myMethod()"
(dragover)="myMethod()"
(drop)="myMethod()

Click Event to call function in .ts file

on Click event “onBtnClick()” function is called.

 <button  (click)="onBtnClick()" > Say Hello </button> 

import { Component, OnInit } from '@angular/core'; 

@Component({
  selector: 'app-test',
  template: `
  <h2> Welcome {{name}} </h2>
  <button  (click)="onBtnClick()" > Say Hello </button> 
 <h2> {{textHello}} </h2>
  `,
  styles: [`   `]
})
export class TestComponent implements OnInit {
  public name = "Amey Raut"; 
  public textHello= ""   
  constructor() { }
  ngOnInit() {
  }
  onBtnClick (){
    this.textHello = " Hello "
  }
   
}

Click Event to call function and send event details to .ts file

is it same as example below but we ad $event to the function parameter

 <button  (click)="onBtnClick($event)" > Say Hello </button> 

import { Component, OnInit } from '@angular/core'; 

@Component({
  selector: 'app-test',
  template: `
  <h2> Welcome {{name}} </h2>
  <button  (click)="onBtnClick($event)" > Say Hello </button> 
 <h2> {{textHello}} </h2>
  `,
  styles: [`   `]
})
export class TestComponent implements OnInit {
  public name = "Amey Raut"; 
  public textHello= ""   
  constructor() { }
  ngOnInit() {
  }
  onBtnClick (event){
    this.textHello = " Hello "
    console.log(event.type)
// will display "click" type event
  }
   
}

Event binding (In HTML) without calling any function in .ts file

here we directly assign the text to the variable declare in ts file

 <button  (click)="textHello =' hello'" > Say Hello </button>
 <h2> {{textHello}} </h2> 

import { Component, OnInit } from '@angular/core'; 

@Component({
  selector: 'app-test',
  template: `
  <h2> Welcome {{name}} </h2>
  <button  (click)="textHello =' hello'" > Say Hello </button> 
 <h2> {{textHello}} </h2>
  `,
  styles: [`   `]
})
export class TestComponent implements OnInit {
  public name = "Amey Raut"; 
  public textHello= ""   
  constructor() { }
  ngOnInit() {
  } 
   
}