title: Angular: referencing EmbeddedViewRef from a component
body: <p>Quoting Angular core API docs page on <a href="https://angular.io/api/core/EmbeddedViewRef" rel="nofollow noreferrer">EmbeddedViewRef</a>:</p>
  
  <blockquote>
    <p>An embedded view can be referenced from a component other than the hosting component whose template defines it, or it can be defined independently by a TemplateRef.</p>
  </blockquote>
  
  <p>It's clear to me that for the latter I can create an <code>EmbeddedViewRef</code> instance from a <code>TemplateRef</code> instance, e.g.,</p>
  
  <p><strong>example.component.html</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;p&gt;Hip!&lt;/p&gt;
  &lt;ng-container #vc&gt;&lt;/ng-container&gt;
  &lt;ng-template #tpl&gt;
    &lt;p&gt;Hip!&lt;/p&gt;
  &lt;/ng-template&gt;
  &lt;p&gt;Hooray!&lt;/p&gt;
  </code></pre>
  
  <p><strong>example.component.ts</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>ngAfterViewInit() {
    const embeddedView = this.tpl.createEmbeddedView(null);
    this.vc.insert(embeddedView);
  }
  </code></pre>
  
  <p>But it still leaves me an open question about the former: how do we reference an embedded view from a component other than the hosting component whose template defines it?</p>