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() { } }