Dynamically add rows/columns to a grid

Ionic Framework
1

I’m working on a form-entry application, and there’s a section where users are asked to enter 1-to-N “Samples” from their data. I plan to store this data in an array, but I’m not sure how to properly display it in the UI.

For our original web app, we simply used a table and appended a row onto the end of it. Experimenting with tables in Ionic went nowhere, so I’m left using a grid. Is there an easy way to say “When user clicks this button, append <ion-row>…</ion-row> code to a given <ion-grid> element”?

2

Here is a tutorial from Josh Morony: https://www.joshmorony.com/dynamic-infinite-input-fields-in-an-ionic-application/

Based upon what you have described, I imagine all that you would need to do is rely upon a *ngFor statement to create the total number of rows.

1 Like
3 
<ion-grid>
<ion-row>
<ion-col size="12">
<ion-item *ngFor="let var of array">
{{var}}
</ion-item>
</ion-col>
</ion-row>
</ion-grid>
2 Likes
4

You know, I hate to say this and I realize I need to slow down, but I didn’t even realize that two-way binding meant adding a new object to my “samples” array would mean a new row appears there automatically. Just never occurred to me.

Thanks for the help, I really appreciate it.

5

Almost, the *ngFor belongs in the ion-col, not the ion-item.

6

no u r wrong. test first.

7

The *ngFor actually belongs with .

The Original Poster stated he wanted a new row with each entry.