Angularの構造ディレクティブ(Structural directives)でif文を作ってみる

Angularの構造ディレクティブで*ifと同じ機能をもつ *if2を作成(elseとかはなし)

TemplateRefでテンプレート(もとのHTML的なの)を、ViewContainerRefでテンプレートが挿入されていた場所を取得できるのでif2がtrueの場合は挿入、if2がfalseの場合はクリアする。

import {Directive, Input , OnChanges, TemplateRef, ViewContainerRef} from '@angular/core';
 
@Directive({
  selector: '[if2]'
})
export class If2Directive implements OnChanges {
 
  @Input() if2: boolean;
  constructor(
    private template: TemplateRef,
    private container: ViewContainerRef
  ) {}
 
  ngOnChanges() {
    if (this.if2) {
      this.container.createEmbeddedView(this.template);
    }else {
      this.container.clear();
    }
  }
}