Anna F Anna F - 3 years ago 122
Javascript Question

How to use placeholder with inputs in table with ngFor Angular2

I have an array

public example = [['hallo', 'fruit', 'rose'], ['apple','book']]


And I want to make a table of inputs, which values depends on which part do I use now
http://localhost:4200/app?part=1
and

http://localhost:4200/app?part=2


I get this information in my component

this.part = this.activatedRoute.snapshot.queryParams['part'];


What I want to have is table of inputs like this for first part Part1 example
and table of inputs like this
enter image description here
if I have second part.

I tried this code

<table>
//choose 0 or 1 array in example array (this works!)
<tr *ngFor="let a of example[part-1]">
<td><input> </td>
</tr>
</table>


My problem is that if I try to insert placeholder or ngFor to inputs I don't get my result...how could I fix this problem?

Answer Source

It's not super clear to me what you are trying to achieve but you could try with:

  <table>
    //choose 0 or 1 array in example array (this works!)
    <tr *ngFor="let a of example[part-1]">
      <td><input [placeholder]="a"></td>
    </tr>
  </table>

This would give you inputs with the placeholder "hello", "apple", etc..

If what you want is each input has only a letter placeholder then just add another *ngFor on the td

  <table>
    //choose 0 or 1 array in example array (this works!)
    <tr *ngFor="let a of example[part-1]">
      <td *ngFor="let b of a.split('')"><input [placeholder]="b"></td>
    </tr>
  </table>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download