Що таке директиви та які їх типи існують в Angular?

Що таке Директиви в Angular?

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

Типи Директив в Angular

Angular ділить директиви на три основні категорії:

Тип	Призначення	Приклади
Атрибутні	Змінюють зовнішній вигляд або поведінку елемента	`ngClass`, `ngStyle`, `customHighlight`
Структурні	Змінюють структуру DOM (додають/видаляють елементи)	`ngIf`, `ngFor`, `ngSwitch`
Користувацькі	Директиви, які ви створюєте для додавання повторно використовуваної логіки	`appTooltip`, `appValidate`

Атрибутні Директиви

Застосовуються до елемента як атрибути. Вони можуть змінювати:

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

Приклад: ngClass

html

<div [ngClass]="{ active: isActive }">Text</div>

Приклад Користувацької Атрибутної Директиви

typescript

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

html

<p appHighlight>Виділений текст</p>

Структурні Директиви

Змінюють структуру DOM: додають/видаляють елементи.

Приклади

html

<div *ngIf="isVisible">Показати</div>
<ul>
  <li *ngFor="let item of items">{{ item }}</li>
</ul>

*ngIf — умовний рендеринг.
*ngFor — ітерація масиву.
*ngSwitch — множинне розгалуження.

Створення Користувацької Директиви

typescript

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)';
  }
}

html

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

Відмінність від Компонентів

Характеристика	Директива	Компонент
Селектор	`[appDirective]` (атрибут)	`<app-component>` (тег)
Шаблон	Ні	Так
Використання	Як поведінка або стиль	Як UI елемент

Порада:

Використовуйте директиви для повторно використовуваної поведінки, яка не потребує шаблону. Якщо потрібен UI — краще створити компонент.

Що таке Директиви в Angular?Типи Директив в AngularАтрибутні ДирективиПриклад: ngClassПриклад Користувацької Атрибутної ДирективиСтруктурні ДирективиПрикладиСтворення Користувацької ДирективиВідмінність від Компонентів

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань