Чи можна створити власну директиву в Angular?

AngularJunior~1 хв читання

Так, в Angular можна створити власну директиву.

Принцип:

Створюється клас із декоратором @Directive.
Вказується селектор, через який директива застосовуватиметься до елемента.
Усередині класу можна керувати елементом через ElementRef, додавати стилі через Renderer2, слухати події тощо.

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

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

Використання в шаблоні:

html

<p appHighlight>Текст із жовтим фоном</p>

Висновок: власна директива дозволяє розширювати функціонал елементів і створювати повторно використовувану поведінку.

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

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

Premium

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