Show list of angular components v2 or v4

Question

I need to display a list of angular components from a ts file . How I can doing?

  // file ResolventePage.ts

  listFormulas: IFormula[] = [{
     name: "Formula 1",
     description: "a description",
     element: AComponent1
  }, {
     name: "Formula 2",
     description: "a description 2",
     element: AComponent2
  }, ... ]

But I do not know how to place it dynamically within the cycle:

 <ion-item *ngFor="let item of listFormulas">
   <ion-label>{{ item.name }}</ion-label>

   <!-- Here I need to render the component "item.element" -->
 </ion-item>

Thank you very much for any help.

Answer 1

If I understood correctly each element in your listFormulas is and angular Component.

Option 1

First import all components in your .ts file, for example:

import { AComponent1} from './AComponent1';
import { AComponent2} from './AComponent2';
// ...

Then try this quick hack:

<ion-item *ngFor="let item of listFormulas">
  <ion-label>{{ item.name }}</ion-label>

  <{{item.element.name}}></{{item.element.name}}>
</ion-item>

Option 2

If this doesn't work then here's a plunker of the proper but kind of advanced way to do this. This is a demo from the very detailed official documentation for loading components dynamically .