Angular Elements: Get a reference to host web component element

Question

When using Angular Elements, we'd usually have something like this to build an app as a web component:

export class AppModule implements DoBootstrap {

    ngDoBootstrap(appRef: ApplicationRef): void {
        customElements.define('foo', createCustomElement(AppComponent, {injector: appRef.injector}));
    }
}

With the above, when a host tag is inserted in the host application, the relevant DOM fragment looks like this:

...
<foo>
    #shadow-root
        (AppComponent's contents)

Is there a way to inject a reference (like ElementRef) to the <foo> element hosting the web component into AppComponent's constructor?

?? isn't that what ``this.getRootNode().host`` does ?? (I ditched Angular when they called 2.0 an _Upgrade_) — Danny '365CSI' Engelman, Dec 08 '22 at 17:18

score 0 · Answer 1 · answered Dec 09 '22 at 07:53

0

As it turns out, the ElementRef injected into the constructor points exactly to that element (the <foo> tag), which is a parent to Shadow DOM:


constructor(private readonly el: ElementRef) {
    // el.nativeElement is <foo>
}

answered Dec 09 '22 at 07:53

yktoo

2,696
1
23
35

Angular Elements: Get a reference to host web component element

1 Answers1