How can I get the angular view hierarchy from a directive?

Question

Angular version 6+

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:

@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, () => {
      // log the message, etc.
    }
  }
}

---

<div log="Clicked the element" logOn="click">Click Me</div>

---

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?

Answer 1

you can inject ViewContainerRef to the directive to get access to hosting component. you can then use that to both read the current component and the parent component of that component.

doing so recursively will get you the result you're after.

something like this (i'll leave the recursion algorithm to you):

constructor(private viewContainerRef: ViewContainerRef) { }

private clicked() {
    console.log(this.viewContainerRef['_view'].component);
    console.log(this.viewContainerRef['_view'].parent.component);
    console.log(this.viewContainerRef['_view'].parent.parent.component);
  }

(1) Stackblitz demo

(1)ignore the rest of the app there, I googled for an "angular directive template" of someone and changed it to get this quickly

(2)of course, disclaimer, "you shouldn't be reading _attributes on angular because it can be changed without notification in future versions and you'll have no support for those" etc, etc etc..