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

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

Отладка Angular в VS Code

Настройка Visual Studio Code используя расширение Debugger for Chrome для отладки Angular приложений
03 декабря 2017 г. в Angular

Angular environment variables

Создание и использования переменных окружения в Angular с использованием CLI >= 6 версии.

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

Upload файла в Angular по клику кнопки

Создано простейшее nestjs приложение, принимающее файлы. Выбор и отправка файла по клику подразумевает, что на форме отсутствует input для файла. Отправка запроса осуществляется с отслеживанием прогресса.

Angular Resolver

Resolver гарантированно получает асинхронные данные до создания компонента исходя из параметров маршрута.