title: Angular - How do directives "see" template & ViewContainer?
body: <p>I have a simple component which injects numbers after a delay via custom directive named <code>*appDelay</code></p>
  <p>I already know that <code>*</code> is a hint for Angular to de-sugar the syntax into something like</p>
  <pre><code>&lt;ng-template ...&gt;
  ...actual markup
  &lt;/ng-template&gt;
  </code></pre>
  <p>I also know that we can Inject components/templates to the <code>viewContainer</code> via :</p>
  <pre><code>  this.viewContainerRef.createEmbeddedView/Component(this.templateRef);
  </code></pre>
  <p>The directive code is :</p>
  <pre><code>@Directive({
    selector: '[appDelay]'
  })
  export class DelayDirective {
    constructor(
      private templateRef: TemplateRef&lt;any&gt;, private viewContainerRef: ViewContainerRef
    ) {  }
    
    @Input() set appDelay(time: number): void {
      setTimeout(()=&gt;{
        this.viewContainerRef.createEmbeddedView(this.templateRef);
      }, time);
    }
  }
  </code></pre>
  <p>The docs states :</p>
  <blockquote>
  <p>To access a ViewContainerRef of an Element, you can either place a
  Directive injected with ViewContainerRef on the Element, or you obtain
  it via a ViewChild query.</p>
  </blockquote>
  <p><strong>Question:</strong></p>
  <p>In a <em>general  pseudo form</em> : What are the template &quot;string values&quot; for <code>templateRef</code> and <code>viewContainerRef</code> ?</p>
  <p>IMHO the de-sugared template would be something like:</p>
  <pre><code>&lt;ng-template ...&gt;
     &lt;card *appDelay=&quot;500 * item&quot;&gt;
          {{item}}
     &lt;/card&gt;
  &lt;/ng-template&gt;
  </code></pre>
  <p>So the <code>ViewContainerRef</code> would be a reference to <code>&lt;ng-template ...&gt;</code></p>
  <p>And the templateRef will be a reference to the <code>&lt;card &gt;...&lt;/card&gt;</code></p>
  <p>— Is that correct ?</p>
  <p>(Also , is it possible to <code>console.log()</code> those HTML templates and see the actual markup ?</p>
  <p><a href="https://plnkr.co/edit/80AGn8bR4CiyH0ceP8ws?p=preview" rel="nofollow noreferrer">https://plnkr.co/edit/80AGn8bR4CiyH0ceP8ws?p=preview</a></p>