essaji essaji - 1 year ago 118
Javascript Question

Angular 2 - How to set id attribute to the dynamically loaded component

I am using

to load the child component and it produces the following html:

<child-component> Child content here </child-component>

and here is how I am loading the component in the parent


How can I add the id attribute to the child component so that it produces the following html:

<child-component id="someId" > Child content here </child-component>

Answer Source

If possible I would add a field to ChildComponent and bind id to it:

  selector: 'child-component',
  host: {'[id]': 'id'}
class ChildComonent {
.then(cmp => = 'someId');

See also

A more hacky way would be

this.dcl.loadIntoLocation(Dynamic, this.ref, 'child').then((cmp) => { = 'someId';

Instead of accessing nativeElement properties directly it should be possible to do the same with Renderer.