Introduction
Essentials

Handling User Interaction

Handle user interaction in your application.

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:

  1. Adding an attribute with the events name inside of parentheses
  2. 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>

Next Step