Angular

Last Updated: 6/15/2023

Event Binding

  • Respond/Handle events raised by DOM like keystrokes, mouse movements, click
  • Specify the name of the event in parenthesis instead of brackets component.html
<button (click)="onSave()">Save</button>

component.ts

onSave() {
	console.log("button clicked");
}

Passing event object

  • To receive the event object raised by event handler, pass $event
  • $event represent the standard DOM event object
<button (click)="onSave($event)">Save</button>

onSave($event) {
	console.log("button clicked", $event);
}

Event Bubbling

  • All DOM events bubble along the DOM tree unless the handler prevents further bubbling
  • This is standard event propagation mechanism in DOM
<div (click)="onDivClicked()"><button (click)="onSave($event)">Save</button></div>

onSave($event) {
	console.log("button clicked", $event);
}
onDivClicked() {
	console.log("div clicked");
}
  • To preventing event bubbling $event.stopPropagation()

Event Filtering

  • To handle specific state or filter the event

Standard Way

<input (keyup)="onKeyUp()">

onKeyUp($event) {
	if($event.keyCode == 13) {
		console.log("enter was pressed");
	}
}

Angular Way

<input (keyup.enter)="onKeyUp()">

onKeyUp() {
	console.log("key pressed");
}
Previous
Next