How to create dynamic table in html and angular

Question

I need to present in Html a dynamic table that I don't know what is the template of each row: Some times it contains 2 columns, sometimes 4...

I need something like this:

    <div>
   <h1>Angular HTML Table Example</h1>
   <table>
      <thead>
         <tr>
            <th>#ID</th>
            <th>Name</th>
            <th>Email</th>
            <th>Phone</th>
            <th>Address</th>
            <th>Action</th>
         </tr>
      </thead>
      <tbody>
         <tr *ngFor="let item of ItemsArray">
            <th>{{ item.id }}</th>
            <td>{{ item.name }}</td>
            <td>{{ item.email }}</td>
            <td>{{ item.phone}}</td>
            <td>{{ item.address }}</td>
           
         </tr>
      </tbody>
   </table>
</div

And instead of:

<tr *ngFor="let item of ItemsArray">
        <th>{{ item.id }}</th>
        <td>{{ item.name }}</td>
        <td>{{ item.email }}</td>
        <td>{{ item.phone}}</td>
        <td>{{ item.address }}</td></tr>

somethong like:

 <tr *ngFor="let item of ItemsArray">
<ngFor="let property of item.structure>  
            <td>{{ property }}</td>

Do you have any advice for me?

Thanks

The *ngFor should be inside of the td tag so that it creates a cell for each column. Furthermore you should iterate over a Object.keys(item) so you can do *ngFor="let key of keys" ... item[key]. — user13258211
– user13258211, Commented Jul 14, 2020 at 6:33

Sandeep Adiseshu · Accepted Answer · 2020-07-14 06:58:41Z

2

You can get keys of list item by using below code and render header column

Object.keys(list);

This is stackblitz code

You can see required code in Product component file. I hope it works for you scenario

answered Jul 14, 2020 at 6:58

Sandeep Adiseshu

786 bronze badges

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

4 Comments

Coral Adar Over a year ago

Should I write it in typescript? or HTML?

Shruti B Over a year ago

Just change the html code to this, <tr *ngFor="let item of ItemsArray"> <ngFor="let property of Object.keys(item)> <td>{{ item[property] }}</td>

Sandeep Adiseshu Over a year ago

you should write Objecy.keys(list) in typescript. Have a look at stackblitz.com/edit/…

Coral Adar Over a year ago

The object looks like json without keys- somthing like that :["12", "firstItem"]

Coral Adar · Accepted Answer · 2020-07-14 11:57:51Z

0

This is the solution:

<tbody class="f">
             <ng-container *ngFor="let message of this.allMessages | filter:term | paginate: config  ;let i = index"> 
            <tr >
                <td>{{ i+1 }}</td>
                    <ng-container *ngFor = "let j of this.messageIndex">
                        <td>{{message.data[0][j]}}</td>
                    </ng-container>
             </tr> 
             </ng-container> 
        </tbody>

answered Jul 14, 2020 at 11:57

Coral Adar

316 bronze badges

Collectives™ on Stack Overflow

How to create dynamic table in html and angular

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related