Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що таке директива в Angular?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

**Директива** в Angular, це клас, який **змінює поведінку або зовнішній вигляд елементів DOM**. Вона дозволяє додавати функціональність без створення нового компонента.

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

1. **Атрибутні (Attribute directives)** - змінюють **зовнішній вигляд або поведінку** наявних елементів.
Приклади: `ngClass`, `ngStyle`.
2. **Структурні (Structural directives)** - змінюють **структуру DOM**, додаючи або видаляючи елементи.
Приклади: `*ngIf`, `*ngFor`, `*ngSwitch`.
3. **Компонентні (Component)** - технічно теж директива з шаблоном, оскільки компонент, це директива з UI.

Приклад атрибутної директиви:

```typescript
import { Directive, ElementRef, Renderer2 } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  constructor(el: ElementRef, renderer: Renderer2) {
    renderer.setStyle(el.nativeElement, 'background-color', 'yellow');
  }
}
```

> Висновок: директиви дозволяють **додавати поведінку та керувати DOM** без створення окремого компонента.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати114 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.