Event Binding and Template Statements

Event binding lets your component respond to user interactions like clicks, key presses, and form submissions.

Basic Event Binding

@Component({
  selector: 'app-counter',
  template: `
    <button (click)="increment()">+</button>
    <span>{{ count }}</span>
    <button (click)="decrement()">-</button>
  `,
})
export class CounterComponent {
  count = 0;

  increment(): void {
    this.count++;
  }

  decrement(): void {
    this.count--;
  }
}

Accessing the Event Object with $event

@Component({
  selector: 'app-input-demo',
  template: `
    <input (input)="onInput($event)">
    <p>Last value: {{ lastValue }}</p>

    <button (click)="onClick($event)">Click me</button>
  `,
})
export class InputDemoComponent {
  lastValue = '';

  onInput(event: Event): void {
    this.lastValue = (event.target as HTMLInputElement).value;
  }

  onClick(event: MouseEvent): void {
    console.log('Clicked at:', event.clientX, event.clientY);
  }
}

Common DOM Events

Event Propagation and stopPropagation

@Component({
  selector: 'app-nested',
  template: `
    <div (click)="onParentClick()">
      Parent
      <button (click)="onChildClick($event)">Child</button>
    </div>
  `,
})
export class NestedComponent {
  onParentClick(): void {
    console.log('Parent clicked');
  }

  onChildClick(event: MouseEvent): void {
    event.stopPropagation();
    console.log('Child clicked (propagation stopped)');
  }
}

Event binding is essential for handling form interactions and keyboard shortcuts.

Form Submission

@Component({
  selector: 'app-login-form',
  template: `
    <form (ngSubmit)="onSubmit()">
      <input name="email" [(ngModel)]="email" placeholder="Email">
      <input name="password" type="password" [(ngModel)]="password" placeholder="Password">
      <button type="submit">Log in</button>
    </form>
  `,
})
export class LoginFormComponent {
  email = '';
  password = '';

  onSubmit(): void {
    console.log('Login:', this.email);
  }
}

Keyboard Events

@Component({
  selector: 'app-search',
  template: `
    <input
      (input)="onSearch($event)"
      (keydown.enter)="onEnter()"
      (keydown.escape)="onClear()"
      placeholder="Search...">
  `,
})
export class SearchComponent {
  onSearch(event: Event): void {
    const query = (event.target as HTMLInputElement).value;
    console.log('Searching:', query);
  }

  onEnter(): void {
    console.log('Enter pressed');
  }

  onClear(): void {
    console.log('Escape pressed');
  }
}

Global Keyboard Shortcuts with HostListener

@Component({
  selector: 'app-editor',
  template: `<textarea></textarea>`,
})
export class EditorComponent {
  @HostListener('document:keydown.control.s', ['$event'])
  onSave(event: KeyboardEvent): void {
    event.preventDefault();
    console.log('Save triggered');
  }

  @HostListener('document:keydown.control.z', ['$event'])
  onUndo(event: KeyboardEvent): void {
    event.preventDefault();
    console.log('Undo triggered');
  }
}