Best way to dynamically add components to a page?

Hello ionic-community!

in my App, I have a card on a page. This page has a floating action button which I want to use to dynamically add new cards to the page.

I have no real approach on how to properly do this. My code is no where near finished and it also isn’t really dynamic.

    var routine="Rudern";
    for(routine in this.routinelist)
      var temp = document.createElement("temp");
      var list = document.getElementById("routineList");
      temp.innerHTML='<ion-card>\n' +
        '      <ion-card-header>Bankdrücken</ion-card-header>\n' +
        '      <ion-card-content>\n' +
        '        <ion-item>\n' +
        '          <ion-label>Gewicht</ion-label>\n' +
        '          <ion-input type="number" [(ngModel)]="weight" (ionBlur)="weightToast(weight)"></ion-input>\n' +
        '        </ion-item>\n' +
        '\n' +
        '        <ion-item>\n' +
        '          <ion-label>Reps</ion-label>\n' +
        '          <ion-input type="number" [(ngModel)]="reps" (ionBlur)="repToast(reps)"></ion-input>\n' +
        '        </ion-item>\n' +
        '\n' +
        '      </ion-card-content>\n' +
        '    </ion-card>';

This is the important bit. InnerHTML ofc doesn’t work, as I’m using ion components.
This is the only approach I’ve been able to figure out so far. I googled for a long time and nothing quite appeals to my problem. ng-bind-html isn’t supported if I’m not mistaken. Everything else I found seems to have 4 different typescripts in order for this to work. Is adding a card to a list of cards at runtime really this difficult?


What does dynamically add mean?

Keep template stuff in templates and controller stuff in controllers. Do not access the DOM manually from controller code.

Build an array in the controller, and iterate across it with *ngFor in the template:

export interface Routine {
  weight: number;
  reps: number;

export class RoutinesPage {
  routines = [] as Routine[];

  addRoutine(): void {
    this.routines.push({weight: 0, reps: 0});

<ion-card *ngFor="let routine of routines">
  <ion-input type="number" [(ngModel)]="routine.weight" (ionBlur)="weightToast(routine.weight)"></ion-input>
  <ion-input type="number" [(ngModel)]="routine.reps" (ionBlur)="repToast(routine.reps)"></ion-input>