Dynamically loading columns data into table in Angular 9

Question

I want to get table head data dynamically how i do that??

My HTML:-

<table border="1">
                <thead>
                    <tr *ngFor="let SR of StockReport;">
                        <td>
                            <b></b>
                        </td>
                        <td><b></b></td>
                        <td><b></b></td>
                        <td><b></b></td>
                        <td><b></b></td>
                      
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let SR of StockReport;let inx=index">
                        <td style="width: 11%;">{{inx+1}} </td>
                        <td>{{SR.ItemName}} </td>
                        <td align="right">{{SR.Inward}} </td>
                        <td align="right"> {{SR.Outward}}</td>
                        <td align="right">{{SR.Stock}} </td>

                    </tr>
                </tbody>
            </table>

In the above code, the columns are getting created successfully but the table head data is not working

json data:- { "ItemName": "CV CPU", "Inward": "50.00", "Outward": "0.00", "Stock": "50.00" },

can you create stackblitz ?

Avinash Dalvi
– Avinash Dalvi

2020-06-26 10:39:36 +00:00
Commented Jun 26, 2020 at 10:39 — Avinash Dalvi
– Avinash Dalvi, Commented Jun 26, 2020 at 10:39
try my code given in answer.

Avinash Dalvi
– Avinash Dalvi

2020-06-26 10:43:39 +00:00
Commented Jun 26, 2020 at 10:43 — Avinash Dalvi
– Avinash Dalvi, Commented Jun 26, 2020 at 10:43

Avinash Dalvi · Accepted Answer · 2020-06-26 12:02:34Z

1

Demo : https://stackblitz.com/edit/angular6-keyvaluepipe-demo-zcesna

<table border="1">
                <thead>
                    <tr>
                        <td> Sr. No.</td>
                        <td *ngFor="let key of tableHeader ">
                            <b>{{key}}</b>
                        </td>
                         
                      
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let SR of StockReport; let i = index">
                        <td style="width: 11%;">{{i+1}} </td>
                        <td>{{SR.BranchID}} </td>
                         <td align="right">{{SR.Brand}} </td>
                       
                        <td align="right">{{SR.Inward}} </td>
                        
                        <td align="right">{{SR.ItemID}} </td>
                         <td>{{SR.ItemName}} </td>
                         <td>{{SR.ItemSubGrp}} </td>
                         <td align="right">{{SR.ModelNO}} </td> 
                         
                          <td align="right"> {{SR.Outward}}</td>
                          <td align="right">{{SR.Stock}} </td>

                    </tr>
                </tbody>
            </table>

edited Jun 26, 2020 at 12:02

answered Jun 26, 2020 at 10:43

Avinash Dalvi

9,4299 gold badges34 silver badges60 bronze badges

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

10 Comments

sHaRjAs Over a year ago

thats not working there appear key index only not key names

sHaRjAs Over a year ago

it's works bt i want it directly through api response

Avinash Dalvi Over a year ago

whatever API response you are getting JSON map it to variable then use in template. This is approach you have to use. I given sample JSON in component. If you feel this works dont forget to accept and upvote answer. Thanks

Avinash Dalvi Over a year ago

@sHaRjAs you got my points ? you have to handle in API call.

sHaRjAs Over a year ago

How i randomly select these keys and keyvalues

|

Collectives™ on Stack Overflow

Dynamically loading columns data into table in Angular 9

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related