Display same row each time one clicks an ionic button

Ionic Framework ionic-v3
1

My view is like the above:

<ion-item>
        <ion-row>
          <ion-col col-4>
            first item
          </ion-col>
          <ion-col col-4>
          2 item
          </ion-col>
          <ion-col col-4>
           third item
          </ion-col>
          <button ion-button round outline icon-only (click)="addnewItem()">
             <ion-icon ios="ios-add" md="md-add"></ion-icon>
          </button>
        </ion-row>
      </ion-item>


    <ion-list>
      <ion-item>
        <ion-row>
          <ion-col col-4>
            <ion-item>
              <ion-input type="text" [(ngModel)]="reference"> </ion-input>
              <button ion-button clear item-right>   <ion-icon ios="ios-create" color="airlabtechcolor" md="md-create"></ion-icon></button>
            </ion-item>
          </ion-col>
          <ion-col col-4>
            <ion-item>
              <ion-input type="text" [(ngModel)]="type"> </ion-input>
              <button ion-button clear item-right>   <ion-icon ios="ios-create" color="airlabtechcolor" md="md-create"></ion-icon></button>
            </ion-item>
          </ion-col>
          <ion-col col-4>
            <ion-item>
              <ion-input type="text" [(ngModel)]="reparage"> </ion-input>
              <button ion-button clear item-right>   <ion-icon ios="ios-create" color="airlabtechcolor" md="md-create"></ion-icon></button>
            </ion-item>
          </ion-col>
          <button ion-button round outline icon-only (click)="addToReference()">
             <ion-icon ios="ios-add" md="md-add"></ion-icon>
          </button>
        </ion-row>
      </ion-item>
    </ion-list>

When i click on addNewItem button, i will have another line that contains my inputs

ionic

How i can manage that

2

Read up on the usage of ngFor.

3

I used Nested Model Driven Forms. I do not have an idea what’s call before

4

rc4?! That’s totally useless. Read about reactive forms and the fundamentals of data display, focusing on the part about ngFor.

1 Like
5

As I am a lazy person. I took the basics of the plunker I shared and I do not use a nested directive.

DeborahK/Angular2-ReactiveForms

Am I on the right direction?