how to create dynamic row in a table javascript angular 2

Question

I am creating a table based on dropdown selection. I am able to display the data for a single selection. I want to create a function for "new button" which will add a row and selected value will be display in new generated row. how can I achieve this using javascript or angular 2. PSI am just a beginner. thanks in advance.

Screenshot

 import { NgModule } from '@angular/core'; import { Component, OnInit } from '@angular/core'; import {SelectItem} from 'primeng/primeng'; import { FormsModule } from '@angular/forms'; import {ButtonModule} from 'primeng/primeng'; import {DataTableModule,SharedModule} from 'primeng/primeng'; @Component({ selector: 'app-test', templateUrl: 'app/test/test.component.html', styleUrls: ['app/test/test.component.css'] }) export class TestComponent implements OnInit { makes: SelectItem[]; selectedMake: string; motors: SelectItem[]; selectedMotorType: string; poles: SelectItem[]; selectedPole: string; } constructor() { this.makes = []; this.makes.push({label:'Select makes', value:null}); this.makes.push({label:'Siemens', value:{id:1, name: 'Siemens', code: 'Siemens'}}); this.makes.push({label:'ABS', value:{id:2, name: 'ABS', code: 'ABS'}}); this.motors = []; this.motors.push({label:'Select Motor Type', value:null}); this.motors.push({label:'IE1', value:{id:11, name: 'IE1', code: 'IE1'}}); this.motors.push({label:'IE2', value:{id:12, name: 'IE2', code: 'IE2'}}); this.motors.push({label:'IE3', value:{id:13, name: 'IE3', code: 'IE3'}}); this.poles = []; this.poles.push({label:'Select Pole Type', value:null}); this.poles.push({label:'2 Pole', value:{id:21, name: '2Pole', code: '2Pole'}}); this.poles.push({label:'4 Pole', value:{id:22, name: '4Pole', code: '4Pole'}}); this.poles.push({label:'6 Pole', value:{id:23, name: '6Pole', code: '6Pole'}}); } //code for button click new row generate rows = [{name: ''}]; name = "new"; addRow() { this.rows.push({name: this.name}); } //================= private textValue = "initial value"; private log: string ='result'; private kw: string = 'kw'; private frame: number = 0; DisplayResult(){ if(this.selectedMake.name=='ABS' && this.selectedMotorType.name=='IE1' ){ alert(this.selectedMake.name); this.log = 'IABVC5Z' '\\n' this.kw = 'new' '\\n' }} 

 <div class="container row"> <div class="col-sm-6"> <p class="col-sm-3" >Makes :</p> <p-dropdown class="col-sm-4" [options]="makes" [(ngModel)]="selectedMake" [style]="{'width':'200px'}" ></p-dropdown> </div> </div> <br> <div class="container row"> <div class="col-sm-6"> <p class="col-sm-3" >Motor Type :</p> <p-dropdown class="col-sm-4" [options]="motors" [(ngModel)]="selectedMotorType" [style]="{'width':'200px'}" ></p-dropdown> </div> </div> <br> <div class="container row"> <div class="col-sm-6"> <p class="col-sm-3" >Pole Type :</p> <p-dropdown class="col-sm-4" [options]="poles" [(ngModel)]="selectedPole" [style]="{'width':'200px'}" ></p-dropdown> </div> </div> <div class="col-sm-4"> <button class="" pButton type="button" class="ui-button-danger" (click)="addRow()" label = " Add New Motor"></button> <button class="" pButton type="button" (click)="DisplayResult()" label="Display Result"></button> </div> <table id="t01"> <tr> <th>S.No.</th> <th>Qty</th> <th>Type Refrence</th> <th>KW Rating</th> <th>Frame Size</th> <th>Voltage</th> <th>Frequency</th> <th>Features</th> </tr> <tr *ngFor=" let row of rows"> <td>1</td> <td><input type="qty" name="qty"></td> <td>{{log}}</td> <td>{{kw}}</td> <td>{{frame}}</td> <td>415 v</td> <td>50 Hz</td> <td></td> </tr> </table> 

Answer 1

All you need to do is write a function/method inside the component and then call that function/method in the click event if you select the add button

@Component({...})
export class TestComponent {
  addRow() {
    this.rows.push({
       make : this.make,
       model: this.model,
       pole: this.pole
    });
}

The addRow fires when the button is clicked

<button class="" pButton type="button" class="ui-button-danger" (click)="addRow()" label = " Add New Motor">Add New Motor</button>

I also added text between the button tags for display. You must update your table to select the appropriate values to display

<table id="t01"> 
  <tr> 
    <th>S.No.</th> 
    <th>Qty</th> 
    <th>Type Refrence</th> 
    <th>KW Rating</th> 
    <th>Frame Size</th> 
    <th>Voltage</th> 
    <th>Frequency</th> 
    <th>Features</th> 
  </tr>
  <tr *ngFor=" let row of rows"> 
    <td>{{ row.make.name }}</td> 
    <td><input type="qty" name="qty" [row.model]></td>
    <td>{{ row.model.log }}</td> 
    <td>{{ row.model.kw}}</td> 
    <td>{{ row.model.frame }}</td> 
    <td>{{ row.model.somethingElse }}</td>
    <td>{{ row.pole.simething }}</td> 
    <td>{{ row.pole.etc }}</td> 
  </tr> 
</table>

I didn't know your data, so just us m selected values from random fields, but that is how you would typically do that