Building a Structural Directive in Angular

unless.directive.ts

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

@Directive({
  selector: '[appUnless]'
})
export class UnlessDirective {

  @Input() set appUnless(condition: boolean) {
    if (!condition) {
      this.vcRef.createEmbeddedView(this.templateRef);
    } else {
      this.vcRef.clear();
    }
  }

  constructor(private templateRef: TemplateRef<any>, private vcRef: ViewContainerRef) {
  }

}

app.component.html

<P *appUnless="true">True</P>
<P *appUnless="false">False</P>

References
https://github.com/mhdr/AngularSamples/tree/master/017/my-app

Related