Пользовательские директивы в Angular

Директивы позволяют расширять HTML. В этом уроке Вы познакомитесь с пользовательскими директивами и узнаете, как создавать собственные директивы.

Что такое директива?

Директивы изменяют внешний вид или поведение элементов DOM. Angular предоставляет встроенные директивы, такие как *ngIf и *ngFor.

Типы директив

• Компонентные директивы
• Атрибутные директивы — изменяют внешний вид или поведение
• Структурные директивы — изменяют структуру (например, *ngIf)

Создание атрибутной директивы

Создайте директиву с помощью Angular CLI:

ng generate directive highlight

ng generate directive highlight

Применение директивы

Используйте директиву как атрибут в шаблоне:

<p appHighlight>Highlighted Text</p>

<p appHighlight>Highlighted Text</p>

Логика директивы

Директивы содержат логику, которая изменяет элементы DOM. Например, Вы можете динамически задавать цвет фона.

constructor(private el: ElementRef) {
  this.el.nativeElement.style.backgroundColor = 'yellow';
}

Декоратор @HostListener

Используйте @HostListener, чтобы реагировать на события элементов с Вашей директивой:

@HostListener('mouseenter') onMouseEnter() {
  this.highlight('blue');
}

@Input() в директивах

@Input() позволяет передавать данные в директивы из шаблонов:

@Input() defaultColor: string;

Итоги

Вы научились создавать и использовать пользовательские директивы для расширения приложений Angular. Отличная работа!