title: Declare variable in structural directive
body: <p>I have a custom structural directive in my angular app like this: </p>
  
  <pre><code>@Directive({
    selector: '[appIfData]'
  })
  export class IfDataDirective {
  
    private hasView = false;
  
    @Input()
    set appIfData(condition: boolean) {
      if (condition &amp;&amp; !this.hasView) {
        this.viewContainerRef.clear();
        this.viewContainerRef.createEmbeddedView(this.templateRef);
        this.hasView = true;
      } else if (!condition) {
        this.viewContainerRef.clear();
        const factory = this.componentFactoryResolver.resolveComponentFactory(ContentMessageComponent);
        const messageComponentRef = this.viewContainerRef.createComponent(factory);
        messageComponentRef.instance.message = 'No data is available yet';
        messageComponentRef.instance.icon = 'fas fa-info';
        this.hasView = false;
      }
    }
  }
  </code></pre>
  
  <p>Using it in the html template : </p>
  
  <pre><code>&lt;ng-container *appIfData="(referenceService.documentUserTypes$ | async) as userDocTypes"&gt;
  </code></pre>
  
  <p>But I can't access the declared variable 'userDocTypes' in the rest of the template like i was doing when using <code>ngIf</code> for example.</p>
  
  <p>I guess it's a normal behavior but I can't find a good way to do this.</p>
  
  <p>Any help would be greatly appreciated.</p>
  
  <p>EDIT : </p>
  
  <p>this is how i am using it, it is in a child element.
  As said before it works fine if I just change it to *ngIf : </p>
  
  <p><a href="https://i.stack.imgur.com/OTMAe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OTMAe.png" alt="enter image description here"></a></p>
  
  <p>EDIT 2 : </p>
  
  <p>Updated directive </p>
  
  <pre><code>@Directive({
    selector: '[appIfData]'
  })
  export class IfDataDirective {
  
    private hasView = false;
  
    @Input()
    set appIfData(data: any) {
      if (data &amp;&amp; !this.hasView) {
        this.viewContainerRef.clear();
        this.viewContainerRef.createEmbeddedView(this.templateRef, { appIfData: data });
        this.hasView = true;
      } else if (!data) {
        this.viewContainerRef.clear();
        const factory = this.componentFactoryResolver.resolveComponentFactory(ContentMessageComponent);
        const messageComponentRef = this.viewContainerRef.createComponent(factory);
        messageComponentRef.instance.message = 'No data is available yet';
        messageComponentRef.instance.icon = 'fas fa-info';
        this.hasView = false;
      }
    }
  </code></pre>