Event Binding: Click, Input, and User Actions

Angular makes it easy to respond to user actions like clicking buttons or typing.

Click event

Template:

<button (click)="increase()">Increase</button>
<p>Count: {{ count }}</p>

Component:

export class CounterComponent {
  count = 0;

  increase() {
    this.count++;
  }
}

Input event (typing)

Template:

<input (input)="onTyping($event)" placeholder="Type your name" />
<p>Hello {{ name }}</p>

Component:

export class NameComponent {
  name = '';

  onTyping(event: Event) {
    const input = event.target as HTMLInputElement;
    this.name = input.value;
  }
}

Pro tip: Keep templates simple

If you need 10 lines of logic, put it in the component method, not inside HTML.

Next: Property binding (set attributes and values safely).