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
– Danny '365CSI' Engelman, Commented Dec 8, 2022 at 17:18

yktoo · Accepted Answer · 2022-12-09 07:53:33Z

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 9, 2022 at 7:53

yktoo

2,9961 gold badge27 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular Elements: Get a reference to host web component element

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related