title: How can i use *ngIf in the host of my Directive?
body: <p>I want to create a Directive that removes/adds itself to the DOM like *ngIf would do. What i have so far is:</p>
  
  <pre><code>@Directive({
      selector: '[myDirective]',
      host: {
          '[hidden]': 'hidden',
      }
  })
  export class MyDirective {
    constructor(private myService : MyService) {
    }
  
    hidden() {
      return !this.myService.valid;
    }
  </code></pre>
  
  <p>But what i need is something like:</p>
  
  <pre><code>@Directive({
      selector: '[myDirective]',
      host: {
          '*ngIf': 'hidden',
      }
  })
  ...
  </code></pre>
  
  <p>Sadly i can not use <code>'*ngIf': 'hidden'</code> in <code>host</code> of Directive. The error i get is:</p>
  
  <pre><code>Can't bind to 'ngIf' since it isn't a known property of 'button'.
  </code></pre>
  
  <p>Also <code>'[ngIf]': 'hidden'</code> is not working.</p>
  
  <p>So, how can i use ngIf in a Directive?</p>