title: Angular get reference to element to custom attribute directive inside of a projected template with ngTemplateOutlet
body: <p>I'm having an issue modifying the css and click event on a <a href="https://angular.io/guide/attribute-directives" rel="nofollow noreferrer">custom attribute directive</a></p>
  <p>The <code>DIV</code> in question is inside of a reference to a projected `' and passed into a nested child.</p>
  <p>Here is how it works</p>
  <p>add the ng-template to the parent.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;parent&gt;
    &lt;ng-template #editCellTemplate&gt;
      &lt;div customUpdateDirective&gt;Update&lt;/div&gt;
    &lt;/ng-template&gt;
    &lt;Child1&gt;
      &lt;Child2&gt;
        &lt;Child3&gt; RENDER editCellTemplate IN HERE &lt;/Child3&gt;
      &lt;/Child2&gt;
    &lt;/Child1&gt;
  &lt;/parent&gt;
  </code></pre>
  <p>The parent passes the refence to <code>#editCellTemplate</code> to child3 with an observable</p>
  <pre><code>export class Parent {
    // ...
  
    @ContentChild('editCellTemplate') public editCellTemplate?: TemplateRef&lt;any&gt;;
  
    // ...parent
  
    ngAfterViewInit() {
      if (this.editCellTemplate)
        this.editService.updateEditCellTemplate(this.editCellTemplate);
    }
  }
  </code></pre>
  <p>Here is the <code>customUpdateDirective</code>:</p>
  <pre><code>@Directive({
    selector: '[customUpdateDirective]',
  })
  export class CustomUpdateDirective {
    constructor(public el: ElementRef) {
      console.log(el); //issue here is el is a reference to the parent component and not the div the attribute is attached to.
    }
  }
  </code></pre>
  <p>inside of child3 I have this html to render the reference to the editCellTemplate in the loop:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;Child3&gt;
    &lt;!-- this renders the template in a for loop. Everything displays correctly --&gt;
    &lt;div *ngfor...&gt;
      &lt;ng-container *ngTemplateOutlet=&quot;editCellProjectedTemplate&quot;&gt; &lt;/ng-container&gt;
    &lt;/div&gt;
  &lt;/Child3&gt;
  </code></pre>
  <p>The issue is when I have a  reference to the directive <code>customUpdateDirective</code>, it's a refrence to <code>ParentComponent</code> and not the <code>Div</code></p>
  <pre><code>@Component({
    // ...
    providers: [CustomUpdateDirective],
  })
  export class Child3 implements OnInit {
    editCellProjectedTemplate!: TemplateRef&lt;any&gt; | null;
  
    private customUpdateDirective: CustomUpdateDirective;
  
    onInit() {
      this.editService.editTemplateObservable.subscribe((editTemplate) =&gt;
        this.setEditTemplate(editTemplate)
      );
    }
  
    setEditTemplate(template: TemplateRef&lt;any&gt;) {
      if (Object.keys(template).length &lt; 1) return;
  
      //setting the template renders the div inside of editCellProjectedTemplate for Child3
      this.editCellProjectedTemplate = template;
  
      //the problem starts here
      this.customUpdateDirective.el.nativeElement; //nativeElement is the a reference to the Child3 container and not the div it's instantiated on
    }
  }
  </code></pre>
  <p>How can I get a reference to the Element <code>&lt;div customUpdateDirective&gt;Update&lt;/div&gt;</code> that the <code>customUpdateDirective</code> is applied to when referencing a template? I want to add a click event and style the css.</p>
  <p>Here is a <a href="https://stackblitz.com/edit/angular-ivy-hgbjeu?file=src/app/child4.component.ts" rel="nofollow noreferrer">stack blitz</a>
  I've used DI to pass in the template for the demo instead of an observable. How can I get access to the custom element with the editDirective in the SB example?</p>