Render Component Dynamically

Question

I have this array:

this.dashboard = [
     {name: '<app-incassi-provvigioni></app-incassi-provvigioni>'},
     {name: '<app-scheda-punti-vendita></app-scheda-punti-vendita>'}
]

I populate this array on the ngOnInit cycle. I was wondering how can I render the components when I read my array in the html like that:

<gridster [options]="gridsterOptions">
    <gridster-item [item]="item" *ngFor="let item of dashboard">
        <!-- your content here -->
        {{item.name}}
    </gridster-item>
</gridster>

Of course right now it returns the string contained in the object but I'm trying to find a solution to render the component. It is possible to do that?

More details: I am developing a dashboard type app where I retrieve the list of the user dashlet from the DB and I'm trying to render those components dynamically once the main app component is ready. using Angular 7 & Gridster2.

Answer 1

rather passing component tag name("app-incassi-provvigioni" in your case), pass the component name (TestComponenet), then call the function from your view and render it as dynamically with Directive.

eg:

<gridster [options]="gridsterOptions">
  <gridster-item [item]="item" *ngFor="let item of dashboard">
    <div class="inner">
      <ng-template dynamic-template> </ng-template>
    </div>
  </gridster-item>
</gridster>

dynamic-template is a directive, that help us to load the component.