Перейти к содержанию

Директивы

📅 30.09.2026

Директивы добавляют поведение элементам и компонентам в приложениях Angular.

Директива может менять вид элемента, его поведение или то, как он встаёт в DOM. Вместе с Angular поставляется несколько встроенных директив, и свои можно написать самостоятельно.

Когда использовать директиву

Директивы сильнее всего там, где нужно упаковать переиспользуемое поведение и повесить его на уже существующий элемент или компонент.

Обычные случаи:

  • Один и тот же вид или поведение на многих элементах, например автофокус или всплывающая подсказка.
  • Чтение или запись DOM, атрибутов или классов элемента-хоста.
  • Поведение для чужого компонента без правки его исходного кода.

Если нужно отрисовать свою разметку или вести кусок интерфейса со своим шаблоном, берите компонент — это директива со своим шаблоном.

Короткий пример

Допустим, элемент должен подсвечиваться, когда на него наводят мышь, и менять цвет фона на жёлтый. Вместо одной и той же обработки событий на каждом элементе это поведение оформляют директивой и применяют там, где нужно.

Директива appHighlight задаёт цвет фона элемента-хоста, когда указатель входит, и сбрасывает его, когда указатель уходит:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
import {Directive, signal} from '@angular/core';

@Directive({
  selector: '[appHighlight]',
  host: {
    '(mouseenter)': 'isHovered.set(true)',
    '(mouseleave)': 'isHovered.set(false)',
    '[style.background-color]': 'isHovered() ? "yellow" : null',
  },
})
export class HighlightDirective {
  protected isHovered = signal(false);
}

Метаданные host слушают события мыши и обновляют сигнал isHovered, а стиль background-color элемента-хоста привязан к значению сигнала.

Директиву применяют, добавляя её селектор атрибутом элемента:

1
<p appHighlight>Highlight me!</p>

Каждый элемент с атрибутом appHighlight получает одно и то же поведение при наведении, а логика описана в одном месте.

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

В Angular три основных вида директив:

Вид директивы Подробности
Компоненты Задают переиспользуемый интерфейс со своим шаблоном.
Директивы атрибутов Меняют внешний вид или поведение элемента, компонента или другой директивы.
Структурные директивы Меняют раскладку DOM, добавляя и удаляя элементы DOM.

Что дальше

Подробнее о каждом виде — в следующих руководствах.

Источник: https://angular.dev/guide/directives

Комментарии