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.

Answer 1

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