Get Angular component class from DOM element

Question

I believe the answer to this is "no", but is there a method/service in Angular where I can pass in a component's root DOM node (e.g. <foo-component>) and receive the component instance (e.g. FooComponent)?

I couldn't find an associated SO post on this.

Example:

<foo-component id="foo"></foo-component>

const fooElement: HTMLElement = document.getElementById('foo');
const fooInstance: FooComponent = getInstanceFromElement(fooElement);

Is there a method in Angular like getInstanceFromElement?

Edit:

I can't use ViewChild... I'm looking for a global service I can use. Suppose I am not invoking this method from the component class. I'm well acquainted with ViewChild/ContentChild and they are not what I'm looking for. Suppose I am in a globally injected service and am trying to do something like the following:

class MyService {
  constructor() {}

  getInstanceFromElement(element: HTMLElement): Component<T> {
    // Is there some special helper service I can use here?
  }
}

Answer 1

Try like this:

Working Demo

Template:

<foo-component #foo></foo-component>

TS:

  @ViewChild('foo', { static: false }) fooComponent: FooComponent;

  ngAfterViewInit() {
    console.log(this.fooComponent)
  }

Answer 2

Yes, there is. @ViewChild() was the right hint here. Let me give you an example:

@ViewChild('editorStepsDomElements', { static: false, read: ElementRef }) fooComponentDomElement: ElementRef;
@ViewChild('fooComponent', { static: false, read: FooComponent }) fooComponent: FooComponent;

So basically you can define in the ViewChild() what you want to get. Just set the read parameter to either ElementRef (for getting the DOM element), or to the respective component you want to get.