Dynamically append one component into another component

Question

Here is my stackblitz link: DEMO

I am trying to append the 'table' component inside the #test of app component, when the visualization type is 'table'. For which, I am calling the createTable() which creates and appends <app-table> tags into the #test div.

<app-table> tag is present in the DOM but not the content of table.component.html (i.e, table works!) This could be because it is a mere tag and not a compiled component.

How do I get the content of table component displayed inside of app component?

Answer 1

Try this

 createTable() {
    this.container.clear(); 
    const factory = this.resolver.resolveComponentFactory(TableComponent);
    this.componentRef = this.container.createComponent(factory);  

  }

Your Forked Example:https://stackblitz.com/edit/dashboard-inchara-3xrjkj

Answer 2

Use ComponentFactoryResolver to add components dynamically. This is further explained in the Angular Docs. Added a full solution in stackblitz: ComponentFactoryResolver. In summary this is what I did:

table creation in app.component.ts:

createTable(container) {
  let componentFactory = this.componentFactoryResolver.resolveComponentFactory(TableComponent);
  let viewContainerRef = this.insTable.viewContainerRef;
  viewContainerRef.clear();
  let componentRef = viewContainerRef.createComponent(componentFactory);
  // let e = document.createElement("app-table");
  // container.appendChild(e);
}

The directive used as and anchor point table.directive.ts:

import { Directive, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[ins-table]',
})
export class TableDirective {
  constructor(public viewContainerRef: ViewContainerRef) { }
}

And the app.component.html:

<div #charts id="test">
  <ng-template ins-table></ng-template>
</div>

And the app.module.ts with proper declarations to make it all work:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ChartModule } from 'angular-highcharts';

import { AppComponent } from './app.component';

import { HttpClientModule } from '@angular/common/http';
import { TableComponent } from './table/table.component';
import { TableDirective } from './table/table.directive';

@NgModule({
  imports: [BrowserModule, ChartModule, HttpClientModule],
  declarations: [AppComponent, TableComponent, TableDirective],
  bootstrap: [AppComponent],
  providers: [HttpClientModule],
  entryComponents: [
    TableComponent
  ]
})
export class AppModule { }