title: Injecting template content from parent into child
body: <p>I have a 3rd party library component that I am trying to customize by adding some additional markup at a certain point.  I am using a structural directive to do this and currently I am programmatically adding and styling nodes using the renderer like so:</p>
  
  <pre><code>  const headerDiv = this.newDiv();
     el = this.nativeElement.querySelector('div.ui-dropdown-items-wrapper');
     this.renderer.appendChild(el, this.renderer.createText('sometext'));
  
  
    private newDiv(): Element {
     return this.renderer.createElement('div');
   }
  </code></pre>
  
  <p>The markup is like so:</p>
  
  <pre><code>&lt;div #containerDiv&gt;
    &lt;child-component *myStructuralDirective&gt;
    &lt;/child-component&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>is there a way to define an <code>&lt;ng-template&gt;</code> directly in the parent component's markup and inject that at a certain point using the renderer?  Something like this:</p>
  
  <pre><code>&lt;div #containerDiv&gt;
    &lt;child-component *myStructuralDirective&gt;
    &lt;/child-component&gt;
  &lt;/div&gt;
  &lt;ng-template #footer&gt;
     &lt;p&gt;Some other markup&lt;/p&gt;
  &lt;/ng-template&gt;
  </code></pre>
  
  <p>and then inject the content of #footer at some point of my choosing into the child-component.  Note - I have no access to the child since it's a compiled 3rd party lib.</p>
  
  <p>The gist of this is that I am trying to see if there is a better way to define the markup as a template variable that I can use in my structural directive, get access to that template and inject it at a certain point in the child component.</p>
  
  <p>Edit - 
  I am looking at <code>ViewContainerRef.insert</code>, unfortunately this can insert templates only based on location of other <code>ViewRef</code>s.  Since I cannot change the markup of the 3rd party component I can define a <code>ng-container</code> to mark the point of insertion and have to only use CSS selectors.  Not sure if there is a way to insert a template based on a element location.  I know these are 2 discrete concepts (Angular View abstractions vs direct DOM insertion) so i'm not optimistic this can be done! </p>