title: Adding an event listener to the content of *ngTemplateOutlet or ng-template
body: <p>I need to add an event listener to either the content of a <code>ng-template</code> or <code>*ngTemplateOutlet</code> without knowing what the content might be. It could be a button or some custom component.</p>
  
  <p>I tried accessing the <code>elementRef</code> but that is not working as it is a comment node.</p>
  
  <p>When I add the <code>TemplateRef</code> via <code>ViewContainerRef.createEmbeddedView</code>, I can't find any access to the element reference of the added view.</p>
  
  <p>The other way I tried was getting accessing it via <code>@ViewChild("foo")</code> in my component and using a template outlet. No success.</p>
  
  <p><code>&lt;ng-container #foo *ngTemplateOutlet="foo"&gt;&lt;/ng-container&gt;
  </code> </p>
  
  <p>Does anyone have any suggestions?</p>
  
  <p><strong>Edit:</strong></p>
  
  <p>I have a component and I want consumers to optionally provide some children in the same manner the <a href="https://material.angular.io/components/stepper/overview" rel="nofollow noreferrer">Material Stepper</a> handles custom icons.</p>
  
  <pre><code>&lt;mat-vertical-stepper&gt;
    &lt;ng-template matStepperIcon="edit"&gt;
      &lt;custom-icon&gt;edit&lt;/custom-icon&gt;
    &lt;/ng-template&gt;
    &lt;ng-template matStepperIcon="done"&gt;
      &lt;custom-icon&gt;done&lt;/custom-icon&gt;
    &lt;/ng-template&gt;
  &lt;/mat-vertical-stepper&gt;
  </code></pre>
  
  <p>Looking at this example, I need access to the <code>&lt;custom-icon&gt;</code> and add event handlers to it, without actually knowing that it is a <code>&lt;custom-icon&gt;</code>.</p>