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
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()" />


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