How to attach html element to angular

Question

I'm using third party js tool, which inject some html code into the page, as far as I know it using runOutsideAngular.
I need to find one of the element of that generated content and inject my component into it. What I'm trying to do is

const element=document.getElementById("page");

const factory = this.componentFactoryResolver.resolveComponentFactory(MyComponent);
const ref = factory.create(this.injector, [],element);
this.applicationRef.attachView(ref.hostView);

But this code doesn't work because that "page" element isn't tracked by angular. (If I inject my component into any tag defined in angular template it works)

How can I achieve this?

grinay · Accepted Answer · 2022-02-10 10:52:43Z

0

Thanks. I finally figure out.

so basically what i had to do is to run everything inside the angular zone.

    this.ngZone.run(() => {
      const element=document.getElementById("page");
      const factory = this.resolver.resolveComponentFactory(PdfRedactionComponent);
      const ref = factory.create(this.injector, [], element);
      this.app.attachView(ref.hostView);
    });

And now everything is working as I expected.

answered Feb 10, 2022 at 10:52

grinay

7681 gold badge9 silver badges24 bronze badges

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

Collectives™ on Stack Overflow

How to attach html element to angular

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