How to attach angular input to dynamic angular web element

Question

We are trying to pass inputs to an angular web component. To make system robust, from api we will get two values

Script URL
Selector name ( below example component we are getting from db as well )

So we are able to add script dynamically and then added selector name by using createElement of renderer2. But now we are stuck as we want to pass inputs to that component like

<component [data]="'Hello'"></component>

so question is how we can add angular input tags in element which is added in DOM by using

renderer.createElement

Is it possible to pass or should change logic to add element ?
Main point is both javascript location and selector is dynamic.

Thanks in advance

Have a look at the docs, there are setAttribute / setProperty methods: angular.io/api/core/Renderer2 — Gunnar B.
– Gunnar B., Commented Jul 30, 2020 at 16:53
Oh, ok, from another answer I'm not quite sure if property binding is actually possible with this. — Gunnar B.
– Gunnar B., Commented Jul 30, 2020 at 17:02

Ilia Komarov · Accepted Answer · 2020-07-30 14:39:44Z

0

You should create your component via ComponentFactory like here (https://stackoverflow.com/a/50429222/7255496) and set component inputs manually.

answered Jul 30, 2020 at 14:39

Ilia Komarov

6533 silver badges6 bronze badges

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

1 Comment

Nitish Over a year ago

In my situation we dont have component class or anything as its dynamically loaded from third party. So we can't have instace of component

ecosystem31 · Accepted Answer · 2023-06-19 18:35:12Z

0

According to this link : https://angular.io/guide/elements#typings-for-custom-elements

I think you can just specify element.InputName = InputValue;

So In your case it should be

const comp = document.createElement('component');
comp.data = 'hello';

answered Jun 19, 2023 at 18:35

ecosystem31

3262 silver badges4 bronze badges

Collectives™ on Stack Overflow

How to attach angular input to dynamic angular web element

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related