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.
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