title: How can I get the angular view hierarchy from a directive?
body: <p>Angular version 6+</p>
  
  <p>I'm working on a directive that can be placed on any element for the purposes of general usage logging. For context, it would look something like the following:</p>
  
  <pre><code>@Directive({
    selector: '[log]'
  })
  export class LogDirective {
    @Input() log: string; // the log message
    @Input() logOn: string; // event name to trigger logging
  
    constructor(private renderer: Renderer2,
                private elementRef: ElementRef) {
    }
  
    ngOnInit() {
      this.renderer.listen(this.elementRef.nativeElement, this.logOn, () =&gt; {
        // log the message, etc.
      }
    }
  }
  </code></pre>
  
  <hr>
  
  <pre><code>&lt;div log="Clicked the element" logOn="click"&gt;Click Me&lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <p>This works fine, but I thought it would be cool to automatically get some type of parent hierarchy so that could be logged. That way someone could look at the log and see pretty easily where this was logged from. Something like "AppComponent -> SomeOtherComponent -> ParentCompnent". Is there something that can be injected to this directive that could determine where it lives in the view hierarchy?</p>