Какие директивы в Angular ты знаешь? Как создать кастомную атрибутную и структурную директиву?

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

1. Компонентные директивы — это директивы с шаблоном (template), они определяют UI-компоненты.
2. Атрибутные директивы — изменяют внешний вид или поведение существующих элементов.
3. Структурные директивы — изменяют структуру DOM, добавляя или удаляя элементы.

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

Атрибутная директива изменяет поведение или стиль элемента. Пример простой директивы, которая меняет цвет текста:

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

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  constructor(private el: ElementRef, private renderer: Renderer2) {}

  @HostListener('mouseenter') onMouseEnter() {
    this.renderer.setStyle(this.el.nativeElement, 'color', 'red');
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.renderer.removeStyle(this.el.nativeElement, 'color');
  }
}

Использование в шаблоне:

<p appHighlight>Наведи на меня мышь</p>

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

Структурная директива изменяет DOM, например, условно отображает элементы. Пример директивы, которая отображает элемент, если условие истинно:

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[appIf]'
})
export class IfDirective {
  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef
  ) {}

  @Input() set appIf(condition: boolean) {
    if (condition) {
      this.viewContainer.createEmbeddedView(this.templateRef);
    } else {
      this.viewContainer.clear();
    }
  }
}

Использование:

<div *appIf="isVisible">Этот блок виден, если isVisible true</div>

Таким образом, атрибутные директивы влияют на поведение и стиль, а структурные — на структуру DOM.