Add rows by button click

Asked Mar 28 '19 at 10:33

Active Mar 28 '19 at 11:21

Viewed 228 times

I have a template with form.

<div class="row">
  <select name="tvParam+{{paramIndex}}}" class="form-control col-md-3" [(ngModel)]="selectedParam[paramIndex]">
    <option *ngFor="let param of parametrs">{{param}}</option>
  </select>
  <div class="col">
    <input type="text" class="form-control" name="tvParamValue" [(ngModel)] = "paramet[paramIndex]" (change)="passData()">
  </div>
  <div class="col-auto">
    <button type="button" class="btn btn-primary" (click)="addRow()">+</button>
  </div>
</div>

I need to repeat this part of my form when I click on button. How can I do this in Angular2+?

UPD

I tried to use another one component. But how can I pass data between them? I have to pass selectedParam and text, entered in input.

BaseComponent:

 <div *ngFor="let re of paramRows">
  <app-home></app-home>
 </div>

Component with row template

    <div class="row mt-3">
<select name="tvParam+{{paramIndex}}}" class="form-control col-md-3" [(ngModel)]="selectedParam[paramIndex]">
<option *ngFor="let param of parametrs">{{param}}</option>
</select>
<div class="col">
<input type="text" class="form-control" name="tvParamValue" [(ngModel)] = "paramet[paramIndex]">
</div>
<div class="col-auto">
  <button type="button" class="btn btn-primary" (click)="addRow()">+</button>
</div>
</div>

edited Mar 28 '19 at 11:21

asked Mar 28 '19 at 10:33

Vitalii Pshenychniuk

2

Make a component and insert in `
your-component-tag
` – Viszman Mar 28 '19 at 10:37
Possible duplicate of [Add new row in a table using ng-repeat](https://stackoverflow.com/questions/45504966/add-new-row-in-a-table-using-ng-repeat) – Pavlo Kovchuk Mar 28 '19 at 10:39
That was to AngularJS not Angular2+ as @Vitakuu asked – Viszman Mar 28 '19 at 10:51
Like @Viszman stated, iterate over an array using `*ngFor` and on every button click handler add an item to that array. Give it a shot, if you get stuck come back and update your question with the specifics of what is not working and the updated code. – Igor Mar 28 '19 at 10:54
check out this: https://stackblitz.com/edit/angular-1qrvlh – Vega Mar 28 '19 at 11:06
And how can I share data between components?@Viszman – Vitalii Pshenychniuk Mar 28 '19 at 11:07
It works but when i change selection at dropdown list it changes at all rows. @Vega – Vitalii Pshenychniuk Mar 28 '19 at 11:12
Updated code @Igor – Vitalii Pshenychniuk Mar 28 '19 at 11:22

Add rows by button click

0 Answers0