Про структурные директивы Angular

Простоейшая структурная директива show, аналог ngIf

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

  @Input() set show(condition: boolean) {
    if (condition) {
      this.viewContainer.createEmbeddedView(this.templateRef);
    } else {
      this.viewContainer.clear();
    }
  }
}
<div *show="condition">Будет отрисовано, если condition = true.</div>

Из директивы можно отправить "привет" вторым параметром отправив объект.

this.viewContainer.createEmbeddedView(this.templateRef, { hello: 'Привет из директивы' });

Терминологически правильно это называется контекст.

<div *show="condition; let message = hello">Из директивы пришло {{ message }}</div>

В специальное свойство $implicit отправляется значение по-умолчанию для шаблонных переменных.

this.viewContainer.createEmbeddedView(this.templateRef, {
    $implicit: 'Попадет в любой let без =',
    hello: 'Привет из директивы'
});
<div *show="condition; let m1; let m2; let m3"> m1, m2, m3 будет содержать "Попадет в любой let без ="</div>

Директива может принимать несколько Inputов.

domain-specific-language.png

Для примера директива суммы 2 слагаемых:

@Directive({
  selector: '[sum]',
})
export class SumDirective implements OnInit {
  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef
  ) {}

  @Input('sumFrom')
  from = 0;

  @Input('sumAnd')
  and = 0;

  ngOnInit(): void {
    this.viewContainer.createEmbeddedView(this.templateRef, {
      $implicit: this.from + this.and,
    });
  }
}

Пример использования:

<div *sum="let result from 2 and 3" >Сумма 2 + 3 = {{ result }}</div>

Похожие записи

#local variable внутри *ngIf

Представлены 2 варианта решения, как сослаться на локальную переменную шаблона (#myVar) за пределами шаблона:

  • @ViewChild
  • @ViewChildren
13 февраля 2019 г. в Angular

Angular. Can't set breakpoints in VS Code

Вариант решения проблемы, когда не срабатывают точки остановки при разработке Angular приложений в редакторе VS Code
10 апреля 2018 г. в Angular

Об subscribe() vs async

О предпочтительности использования async pipe. При OnPush стратегии не требуется вызывать markForCheck() внутри подписки +решение с несколькими | async pipes развёрнутых в одну переменную (внутри шаблона).

06 января 2019 г. в Angular