CODEWITHSUNDEEP
angularangular9
sHaRjAs
sHaRjAs

Reputation: 303

Dynamically loading columns data into table in Angular 9

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" },

Upvotes: 1

Views: 381

Answers (1)

Avinash Dalvi
Avinash Dalvi

Reputation: 9311

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>

Upvotes: 1

Related Questions