Angular @HostListener. Легко и просто добавляем обработчики событий

Насколько часто нам требуется добавлять обработчик какого-то события на страницу? Да практически постоянно. Тем радостнее узнать, что команда Angular позаботилась об этом как следует и создала простой и изящный способ – функцию декоратор @HostListener.

Пользоваться просто и легко, если вы хотя бы раз видели функции-декораторы в Angular. Если не видели, тоже ничего сложного:

@HostListener('eventName', [args])

Первый строковый аргумент – название события DOM, которое мы собираемся слушать и как-то реагировать на его появление. Давно знакомые и родные: click, focus, blur, keypress и т.д.
Второе – необязательный массив аргументов, которые можно передать функции-обработчику, при возникновении события.

Осталось указать функцию-обработчик, которая будет запускаться каждый раз, когда возникает нужное нам событие.

Например, мы хотим обрабатывать событие click у компонента, выводя алерт с сообщением. Пример учебный и выполнен профессионалами, пожалуйста не повторяйте его на живых людях!

@HostListener('click')
onClick(): void {
  alert('хуяк!');
}

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

Что если, внутри компонента нам нужно повесить обработчик события, который будет срабатывать глобально, а не только в текущем компоненте? Тоже достаточно просто. Перед названием события, добавляете: “window:” или “document:” и вуаля! Событие слушается глобально по всей странице:

@HostListener('document:click')
onClick(): void {
alert('хуяк!');
}

Давайте представим другую ситуацию, у нас есть компонент бокового меню, которое должно закрываться по клику снаружи компонента. Для этого как раз и понадобится параметр $event.target, в качестве второго аргумента.

  @HostListener("document:click", ["$event.target"])
  onClick(element: Element): void {
    if (!element.closest(".user-menu")) this.isOpen = false;
  }

1. Вешаем глобальный обработчик события клик на документ внутри компонента – document:click
2. Вводим параметр $event.target – содержащий dom-элемент, по которому случился клик
3. Определяем родителя этого элемента – и если это не наш компонент меню – закрываем меню
4. Профит!

Если нужно обрабатывать нажатие определенной клавиши – нет ничего проще. Забудьте про проверку keyCode, она в прошлом.

@HostListener('keydown.enter')
onEnterClick(): void {
  alert('нажата клавиша Enter!');
}

Да, вам не показалось. Просто точка и название клавиши.

А если нужна обработка комбинации клавиш? Ни слова больше!

@HostListener('document:keydown.control.r', ['$event'])
onControlPClick(event: KeyboardEvent): void {
event.preventDefault();
alert('Не пытайтесь перезагрузить страницу!');
}

Здесь уже обработчик глобальный, поэтому не будет лишним сделать preventDefault() чтобы наш код сработал, вместо перезагрузки страницы. На всякий случай сообщаю, пользователь никогда в жизни не вернется на ваш сайт, увидев подобное.

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

Что еще нужно знать? Обработчик, навешенный через @HostListener будет жить, пока жив его компонент. Способа его корректно удалить не задекларировано, поэтому вы сильно-то не увлекайтесь. И в случае чего, используете контролируемый способ – старый добрый addEventListener.

Спасибо за внимание – лайк, шер, репост.

Учебный пример с работающими событиями.