Про структурные директивы 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>

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

let-* $implicit in Angular template

Синтаксис let-* позволяет объявить переменную в шаблоне , использования ключа $implicit позволяет устанавливать значение по-умолчанию для объявленной переменной.

29 августа 2018 г. в Angular

@Directive v/s @Component in Angular

Компоненты создают DOM элементы и добавляют к ним поведение, а директивы только добавляют поведение к существующим DOM элементам

13 августа 2018 г. в Angular

RxJs Subjects

Выдержки из доклада Андрея Алексеева (Tinkoff) про RxJs (Subject, Behaviour Subject, Replay Subject, Async Subject). Применение в Angular.