Handling User Interaction

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>

Event Handling

$event

Next Step