Что такое директивы и какие их виды существуют в Angular?

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

Директивы — это специальные классы в Angular, которые расширяют поведение HTML-элементов. Они позволяют изменять структуру DOM, добавлять стили или динамически управлять логикой компонента.

Виды директив в Angular

Angular делит директивы на три основные категории:

ТипНазначениеПримеры
АтрибутныеИзменяют внешний вид или поведение элементаngClass, ngStyle, customHighlight
СтруктурныеИзменяют структуру DOM (добавляют/удаляют элементы)ngIf, ngFor, ngSwitch
ПользовательскиеДирективы, созданные вами для добавления повторной логикиappTooltip, appValidate

Атрибутные директивы

Применяются к элементу как атрибуты. Они могут изменять:

  • стиль элемента (ngStyle)
  • класс (ngClass)
  • поведение через слушатели событий

Пример: ngClass

<div [ngClass]="{ active: isActive }">Текст</div>

Пример пользовательской атрибутной директивы

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  constructor(el: ElementRef) {
    el.nativeElement.style.backgroundColor = 'yellow';
  }
}

<p appHighlight>Подсвеченный текст</p>

Структурные директивы

Изменяют структуру DOM: добавляют/удаляют элементы.

Примеры

<div *ngIf="isVisible">Показать</div>
<ul>
  <li *ngFor="let item of items">{{ item }}</li>
</ul>
  • *ngIf — условный рендеринг.
  • *ngFor — перебор массива.
  • *ngSwitch — множественное ветвление.

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

import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({
  selector: '[appZoom]'
})
export class ZoomDirective {
  constructor(private el: ElementRef) {}

  @HostListener('mouseenter') onEnter() {
    this.el.nativeElement.style.transform = 'scale(1.1)';
  }

  @HostListener('mouseleave') onLeave() {
    this.el.nativeElement.style.transform = 'scale(1)';
  }
}

<img src="..." appZoom />

Отличие от компонентов

ХарактеристикаДирективаКомпонент
Селектор[appDirective] (атрибут)<app-component> (тег)
ШаблонНетЕсть
ИспользованиеКак поведение или стильКак UI-элемент

Совет:

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