Creating dynamic md-expansion-panel component inside md-accordion

Question

I am dynamically creating component inside md-accordion component as below

<md-accordion [displayMode]="displayMode" [multi]="multi"
                class="md-expansion-demo-width">
    <ng-container #piechartsContainer>

    </ng-container>
</md-accordion>

@ViewChild("piechartsContainer", {read: ViewContainerRef}) pieChartContainer: ViewContainerRef;

let componentFactory = this.componentFactoryResolver.resolveComponentFactory(CreatePieChartElement);
let componentRef = this.pieChartContainer.createComponent(componentFactory);

here is the component I am inserting

@Component({
  selector: 'app-create-pie-element',
  template: 
    <md-expansion-panel>
      <md-expansion-panel-header>{{title}}</md-expansion-panel-header>
    </md-expansion-panel>
  ,
  styles: [],
  encapsulation: ViewEncapsulation.None,
})

It is obvious according to angular that it will look <md-accordion><app-create-pie-element><md-expansion-panel>.... in html structure. How to achieve <md-accordion><md-expansion-panel> this structure,

This answer is helpful when creating components by loops. Please help me. Thanks in advance.

Answer 1

One possible solution could be having ng-template that will wrap CreatePieChartElement template:

CreatePieChartElement.html

<ng-template #tmpl>
  <md-expansion-panel>
    <md-expansion-panel-header>{{title}}</md-expansion-panel-header>
    <p>Some text</p>
  </md-expansion-panel>
</ng-template>

CreatePieChartElement.ts

@ViewChild('tmpl') template: TemplateRef<any>;

Then in parent component

let componentFactory = this.resolver.resolveComponentFactory(CreatePieChartElement);
let componentRef = componentFactory.create(this.pieChartContainer.injector);
...
this.pieChartContainer.createEmbeddedView(componentRef.instance.template);

Plunker Example