# Best way to dynamically add components to a page?

**URL:** <https://forum.ionicframework.com/t/best-way-to-dynamically-add-components-to-a-page/99688>\
**Category:** ionic-v3\
**Created:** [July 26, 2017, 8:10pm UTC](https://forum.ionicframework.com/t/best-way-to-dynamically-add-components-to-a-page/99688 "2017-07-26T20:10:05Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![GeassEffect](https://avatars.discourse-cdn.com/v4/letter/g/aeb1de/32.png) [@GeassEffect](https://forum.ionicframework.com/u/GeassEffect)\
**Post date:** [July 26, 2017, 8:10pm UTC](https://forum.ionicframework.com/t/best-way-to-dynamically-add-components-to-a-page/99688/1 "2017-07-26T20:10:05Z")

</div>

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.

```auto
addRoutineToList()
  {
    var routine="Rudern";
    this.routinelist.push(routine);
    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>';
      list.appendChild(temp);
    }
  }

```

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?

Daniel

---

<div class="post-metadata">

**Author:** ![AaronSterling](https://avatars.discourse-cdn.com/v4/letter/a/51bf81/32.png) [@AaronSterling](https://forum.ionicframework.com/u/AaronSterling)\
**Post date:** [July 26, 2017, 8:12pm UTC](https://forum.ionicframework.com/t/best-way-to-dynamically-add-components-to-a-page/99688/2 "2017-07-26T20:12:20Z")

</div>

What does dynamically add mean?

---

<div class="post-metadata">

**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\
**Post date:** [July 26, 2017, 8:18pm UTC](https://forum.ionicframework.com/t/best-way-to-dynamically-add-components-to-a-page/99688/3 "2017-07-26T20:18:48Z")

</div>

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:

```auto
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-card-header>Bankdrücken</ion-card-header>
<ion-card-content>
<ion-item>
  <ion-label>Gewicht</ion-label>
  <ion-input type="number" [(ngModel)]="routine.weight" (ionBlur)="weightToast(routine.weight)"></ion-input>
</ion-item>
<ion-item>
  <ion-label>Reps</ion-label>
  <ion-input type="number" [(ngModel)]="routine.reps" (ionBlur)="repToast(routine.reps)"></ion-input>
</ion-item>
</ion-card-content>
</ion-card>

```