Repeat ion-rows on click

Ionic Framework ionic-v3
1

Hi All,

I am trying to add rows on (click). Following is the html:

<ion-grid class="items">
    <ion-label>Item Purchased</ion-label>
    <ion-row>
      <ion-col col-4><ion-input [(ngModel)]="item" type="text" placeholder="Item Name"></ion-input></ion-col>
      <ion-col col-4><ion-input [(ngModel)]="quantity" type="text" placeholder="Quantity"></ion-input></ion-col>
      <ion-col col-4><ion-input [(ngModel)]="amount" type="number" placeholder="Item Rate"></ion-input></ion-col>
    </ion-row>
  </ion-grid>
  <button ion-button small color="secondary" (click)="addItems" end>Add more items</button>

I need help in writing the click function. Kindly help

2

The click function is the least of your problems. If you mean that you want the template to display multiple <ion-row>s, with the “Add more items” button adding one each time it is clicked, you are going to have to change the way you are binding everything to loop across an array with ngFor.

3

Correct. Got that! <ion-row *ngFor="let row of rows">

4

Then all the [(ngModel)] bindings need to change to row.item and so forth. If that is done properly, and the rows property is initialized to an empty array on startup, your addItems() function should be as simple as this.rows.push({}).

5

Yup. It is addrow(): void { this.rows.push({ firstCol: '1 of 2', secondCol: '2 of 2', thirdCol: '3 of 3' }); }

Thanks rapropos for the help!