The ability to handle user interaction and then work with - it is one of the key aspects of building dynamic applications. In this guide, we'll take a look at simple user interaction - event handling.
Event Handling
You can add an event handler to an element by:
- Adding an attribute with the events name inside of parentheses
- Specify what JavaScript statement you want to run when it fires
<button (click)="save()">Save</button>
For example, if we wanted to create a button that would run a transformText function when the click event is fired, it would look like the following:
// text-transformer.component.ts@Component({ standalone: true, selector: 'text-transformer', template: ` <p>{{ announcement }}</p> <button (click)="transformText()">Abracadabra!</button> `,})export class TextTransformer { announcement = 'Hello again Angular!'; transformText() { this.announcement = this.announcement.toUpperCase(); }}
Other common examples of event listeners include:
<input (keyup)="validateInput()" /><input (keydown)="updateInput()" />
$event
If you need to access the event object, Angular provides an implicit $event variable that you can pass to a function:
<button (click)="createUser($event)">Submit</button>