Добавление обработчиков событий

Angular позволяет определять обработчики событий для элементов в шаблоне: для этого укажите имя события в круглых скобках и выражение, которое будет выполняться при каждом возникновении события.

Прослушивание встроенных событий

Чтобы добавить обработчик события для элемента HTML, заключите событие в круглые скобки, (), где можно указать выражение-обработчик.

@Component({
  template: `
    <input type="text" (keyup)="updateField()" />
  `,
  ...
})
export class App{
  updateField(): void {
    console.log('Field is updated!');
  }
}

В этом примере Angular вызывает updateField каждый раз, когда элемент <input> генерирует событие keyup.

Можно добавлять обработчики для любых встроенных событий, например: click, keydown, mouseover и т. д. Подробнее см. в списке всех доступных событий элементов на MDN.

Доступ к аргументу события

В каждом обработчике события в шаблоне Angular предоставляет переменную с именем $event, содержащую ссылку на объект события.

@Component({
  template: `
    <input type="text" (keyup)="updateField($event)" />
  `,
  ...
})
export class App {
  updateField(event: KeyboardEvent): void {
    console.log(`The user pressed: ${event.key}`);
  }
}

Использование модификаторов клавиш

Чтобы перехватывать определённые события клавиатуры для конкретной клавиши, можно написать код, подобный следующему:

@Component({
  template: `
    <input type="text" (keyup)="updateField($event)" />
  `,
  ...
})
export class App {
  updateField(event: KeyboardEvent): void {
    if (event.key === 'Enter') {
      console.log('The user pressed enter in the text field.');
    }
  }
}

Однако это распространённый сценарий, поэтому Angular позволяет фильтровать события, указывая конкретную клавишу с помощью точки (.). Так код можно упростить:

@Component({
  template: `
    <input type="text" (keyup.enter)="updateField($event)" />
  `,
  ...
})
export class App{
  updateField(event: KeyboardEvent): void {
    console.log('The user pressed enter in the text field.');
  }
}

Также можно добавить дополнительные модификаторы клавиш:

<!-- Matches shift and enter -->
<input type="text" (keyup.shift.enter)="updateField($event)" />

Angular поддерживает модификаторы alt, control, meta и shift.

Для привязки к событиям клавиатуры можно указать клавишу или код клавиши. Свойства key и code входят в состав встроенного объекта события клавиатуры браузера. По умолчанию привязка событий предполагает использование значений key для событий клавиатуры.

Angular также позволяет указывать значения code для событий клавиатуры, добавляя встроенный суффикс code.

<!-- Matches alt and left shift -->
<input type="text" (keydown.code.alt.shiftleft)="updateField($event)" />

Это может быть полезно для единообразной обработки событий клавиатуры в разных операционных системах. Например, при использовании клавиши Alt на устройствах macOS свойство key возвращает клавишу с учётом символа, уже изменённого клавишей Alt. Это означает, что сочетание Alt + S возвращает значение key, равное 'ß'. Свойство code, однако, соответствует нажатой физической или виртуальной кнопке, а не полученному символу.

Прослушивание событий глобальных объектов

Перед именем события можно указать имя глобального объекта. Поддерживаются три глобальных объекта: window, document и body.

@Component({
  /* ... */
  host: {
    'window:click': 'onWindowClick()',
    'document:click': 'onDocumentClick()',
    'body:click': 'onBodyClick()',
  },
})
export class MyView {}

Отмена стандартного поведения события

Если обработчик события должен заменить стандартное поведение браузера, можно использовать метод preventDefault объекта события:

@Component({
  template: `
    <a href="#overlay" (click)="showOverlay($event)">
  `,
  ...
})
export class App{
  showOverlay(event: PointerEvent): void {
    event.preventDefault();
    console.log('Show overlay without updating the URL!');
  }
}

Если выражение обработчика события возвращает false, Angular автоматически вызывает preventDefault(), как и встроенные атрибуты обработчиков событий. Всегда предпочитайте явно вызывать preventDefault, поскольку так намерение автора кода становится очевидным.

Расширение обработки событий

Систему событий Angular можно расширять с помощью пользовательских плагинов событий, зарегистрированных через токен внедрения EVENT_MANAGER_PLUGINS.

Реализация плагина событий

Чтобы создать пользовательский плагин событий, унаследуйте класс EventManagerPlugin и реализуйте необходимые методы.

import {Injectable} from '@angular/core';
import {EventManagerPlugin} from '@angular/platform-browser';

@Injectable()
export class DebounceEventPlugin extends EventManagerPlugin {
  constructor() {
    super(document);
  }

  // Define which events this plugin supports
  override supports(eventName: string) {
    return /debounce/.test(eventName);
  }

  // Handle the event registration
  override addEventListener(element: HTMLElement, eventName: string, handler: Function) {
    // Parse the event: e.g., "click.debounce.500"
    // event: "click", delay: 500
    const [event, method, delay = 300] = eventName.split('.');

    let timeoutId: number;

    const listener = (event: Event) => {
      clearTimeout(timeoutId);
      timeoutId = setTimeout(() => {
        handler(event);
      }, delay);
    };

    element.addEventListener(event, listener);

    // Return cleanup function
    return () => {
      clearTimeout(timeoutId);
      element.removeEventListener(event, listener);
    };
  }
}

Зарегистрируйте пользовательский плагин с помощью токена EVENT_MANAGER_PLUGINS в списке providers приложения:

import {bootstrapApplication} from '@angular/platform-browser';
import {EVENT_MANAGER_PLUGINS} from '@angular/platform-browser';
import {App} from './app';
import {DebounceEventPlugin} from './debounce-event-plugin';

bootstrapApplication(App, {
  providers: [
    {
      provide: EVENT_MANAGER_PLUGINS,
      useClass: DebounceEventPlugin,
      multi: true,
    },
  ],
});

После регистрации пользовательский синтаксис событий можно использовать в шаблонах, а также со свойством host:

@Component({
  template: `
    <input
      type="text"
      (input.debounce.500)="onSearch($event.target.value)"
      placeholder="Search..."
    />
  `,
  ...
})
export class Search {
 onSearch(query: string): void {
    console.log('Searching for:', query);
  }
}

@Component({
  ...,
  host: {
    '(click.debounce.500)': 'handleDebouncedClick()',
  },
})
export class AwesomeCard {
  handleDebouncedClick(): void {
   console.log('Debounced click!');
  }
}