Generating dynamic markup involving custom HTML elements in Angular 2

Question

I am trying to dynamically generate markup in a component, where the markup to be created involves other custom components. Something along the lines of:

<my-component></my-component>

and in myComponent.ts

ngOnInit(){
    const el: HTMLElement = this.elementRef.nativeElement;

    let labels = ['one', 'two', 'three'];
    labels.forEach((label) => {
        let b = document.createElement('my-subcomponent');
        el.appendChild(b);
    });
}

mySubcomponent.html template:

<span>test</span>

The children <my-subcomponent> elements do render into the markup, but bare, without the <span> template. I think I am missing an equivalent of Angular1's $compile service, or I am doing the right code in wrong lifecycle moment. Would appreciate someone shed some light on me.

Community · Accepted Answer · 2017-05-23 12:18:02Z

2

Angular2 doesn't process bindings or matching component or directive selectors in any way for dynamically added HTML. Angular2 only processes HTML added statically to components templates.

You can add components dynamically for example like shown in Angular 2 dynamic tabs with user-click chosen components

edited May 23, 2017 at 12:18

CommunityBot

11 silver badge

answered Oct 5, 2016 at 5:00

Günter Zöchbauer

662k235 gold badges2.1k silver badges1.6k bronze badges

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

3 Comments

user776686 Over a year ago

Thanks for the link. In this strategy, is there a way to attach attributes to C1, C2, C3 (in the plunkr) so that they would accept them as inputs?

Günter Zöchbauer Over a year ago

No, you can't use inputs and outputs in dynamically added components. The linked answer shows how to pass data in and out imperatively though.

user776686 Over a year ago

Thanks for your explanation

Collectives™ on Stack Overflow

Generating dynamic markup involving custom HTML elements in Angular 2

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related