For Multiple Dynamically Table Headers in angular 2+

Hello viewers, If you are going to make your table fully dynamically likewise TABLE HEAD, TABLE BODY , TABLE FOOTER i.e , ,

Then you must need to get list of HeadersData first according to that you show your table content too...

In this we need to loop our main table data with headerData in TABLE BODY

so, you can use as 

<tr *ngFor="let data of tableData; let i = index;">
    <ng-container *ngFor="let head of headerData; let h = index">
        <td>
            {{!data[head.headerEncodedName]?'':data[head.headerEncodedName]}}
        </td>        
    </ng-container> 
</tr>

By using this you can make your HTML table dynamically with the help of appropriate APIs