how to generate dynamic rows of a table based on input from textbox

Question

I am working on a issue, where I need to generate dynamic rows of a table based on the input given by user through textbox.

My .ts code:

start(val){
    this.printVal=val;
    console.log('Value of start is',this.printVal);
    return new Array(val);
  }

.html code:

<div class="container col-lg-12">
  <input type="number" #data> &nbsp; 
  <button (click)="start(data.value)">Start</button>
  <br><br>
  <table>
    <ng-container >
<tr *ngFor="let item of [].constructor(printVal); let i = index"> //If instead of printVal, I give a number then it prints the desired output

  <td>{{i}}</td>

</tr>
    </ng-container>
  </table>
</div>

Actually i need to create a table like this

 | Input|sec|Multipilcation
 |------|---|------------------------------
 |10    |1  |10
 |10    |2  |20
 |10    |3  |30
 |10    |4  |40
 .
 .
 .
 10    |10  |100

Where 10 is the number provided through input box, after each second a row should get add and it value should get print and third column in multiplication of both and the table row should get continue till the input value provided.

Please, suggest me what I am doing wrong and how can I print dynamic rows based on the input provided.

*ngFor="let item of [].constructor(printVal); let i = index" Why ? — user4676340
– user4676340, Commented Apr 10, 2019 at 9:32
because i need to iterate on numbers, i found this solution on net — CoderBeginner
– CoderBeginner, Commented Apr 10, 2019 at 9:33
I am getting a number from input box and i need to iterate till the number provided and need to create number of rows based on the input provided — CoderBeginner
– CoderBeginner, Commented Apr 10, 2019 at 9:36
not use printVal, use data.value (the reference variable you use in your input) — Eliseo
– Eliseo, Commented Apr 10, 2019 at 9:43
Hello. Please take a look at this example: stackblitz.com/edit/… — MullisS
– MullisS, Commented Apr 10, 2019 at 9:50

porgo · Accepted Answer · 2019-04-10 09:55:56Z

1

printVal is an string variable, so when you are creating a new array like this:

[].constructor(printVal)

you will get for example [].constructor("3") so it is an array with one element.

You should cast value from input to number:

this.printVal = +val;

answered Apr 10, 2019 at 9:55

porgo

1,7513 gold badges19 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

CoderBeginner Over a year ago

Thank you so much for pointing out, what I was doing wrong. Since morning I was working on it. Thank you again :)

Raj Kumar · Accepted Answer · 2019-04-10 10:49:26Z

Take a look at the following code. Maybe it will give you an idea to achieve your goal.

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent  { 
  printVal=[0,3,5,6,7];
  
  start(val){
    this.printVal.push=val;
    console.log('Value of start is',this.printVal);
  }
}

<div class="container col-lg-12">
	<input type="number" #data> &nbsp; 
  <button (click)="start(data.value)">Start</button>
  <br><br>
  <ng-container >
  <table>
    <tr>
      <th>Input</th>
      <th>Second</th>
      <th>Multiplication</th>
    </tr>
    
<tr *ngFor="let item of printVal; let i = index"> 
 <td>{{printVal.length}}</td>
  <td>{{i}}</td>
   <td>{{item*i}}</td>
</tr>
  </table>
    </ng-container>
</div>

Collectives™ on Stack Overflow

how to generate dynamic rows of a table based on input from textbox

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related