How to display dynamic data and dynamic header on angular 7

Question

How to handle component.html headers and data in case of data and header columns changed every time ?

I work on angular app give it report id then it returned different result depend on report id

so may be if i pass reportid =1 it display

FinancialId FinancialName FinancialDate
1 cash 12/01/2020

if I pass reportid=2 then it display

InventoryId InventoryName InventoryQty InventoryPrice
1 Stor1 10 50

then it return data different and column headers different based on report id

so How to display this data dynamically on html component .

service.ts

export class DisplayreportService
{
constructor(private http : HttpClient) { }
GetReportDetailsByReportId(id : string){
return this.http.get('http://localhost:61265/api/report/Getreportdetails/id=' + id) .map(res=>res); } }

on reportdetails.component.ts

reportdetailslist: any[];
constructor(private router: ActivatedRoute, private _displayreport: DisplayreportService) { }
ngOnInit() {
const paramIndex = window.location.href.indexOf('id=');
if (paramIndex > 0) { let param = window.location.href.substring(paramIndex);
let param1 = param.split('&')[0];
let param2 = param.substr(param.indexOf('=') + 1);
this._displayreport.GetReportDetailsByReportId(param2).subscribe((data: any[]) => { this.reportdetailslist = data; });

How to show data on component.html below

<div> <table class="table table-hover" >
<thead>
<tr>
<th>
i dont know table header returned
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let rep of reportdetailslist">
idont know columns returned
</tr>
</tbody>
</table>

Siddharth Gajbhiye · Answer

Hello Ahmed You can try like this class = "table table-hover" > "reportid ==1" > FinancialId FinancialName FinancialDate "reportid ==2" > InventoryId InventoryName InventoryQty InventoryPrice "let rep of reportdetailslist" > idont know columns returned So this code will solve your problem of dynamic header and also it will bind data based on your report id ...just check what result you are getting in reportdetailslist tr * ngFor = "let rep of reportdetailslist" > ng-template * ngIf = "report==1" > td > {{reportdetailslist.financialId}} td > td > {{reportdetailslist.financialName}} td > td > {{reportdetailslist.financialDate}} td > ng-template > ng-template * ngIf = "report==2" > td > {{reportdetailslist.inventoryId}} td > td > {{reportdetailslist.inventoryName}} td > td > {{reportdetailslist.inventoryQty}} td > td > {{reportdetailslist.inventoryPrice}} td > ng-template > tr > Full Code : div > table class = "table table-hover" > thead > tr * ngIf = "reportid ==1" > th > FinancialId th > th > FinancialName th > th > FinancialDate th > tr > tr * ngIf = "reportid ==2" > th > InventoryId th > th > InventoryName th > th > InventoryQty th > th > InventoryPrice th > tr > thead > tbody > tr * ngFor = "let rep of reportdetailslist" > ng-template * ngIf = "report==1" > td > {{reportdetailslist.financialId}} td > td > {{reportdetailslist.financialName}} td > td > {{reportdetailslist.financialDate}} td > ng-template > ng-template * ngIf = "report==2" > td > {{reportdetailslist.inventoryId}} td > td > {{reportdetailslist.inventoryName}} td > td > {{reportdetailslist.inventoryQty}} td > td > {{reportdetailslist.inventoryPrice}} td > ng-template > tr > tbody > table > Please check and let me know thanks

Siddharth Gajbhiye · Answer

Hello ahmed can you send me the response JSON for 20 headers so that it can help me to build the logic for that

ahmed elbarbary · Answer

are there are any solution depend on any headers and any content please because on my service.ts I ont need header of report may be i have 20 report with 20 headers formate different from each other so How to handle that Pease ?

ahmed elbarbary · Answer

thank you for reply i need to do as following this .headerCols = Object.keys(data[0]); data.forEach((item) =>{ let values = Object.keys(item).map((key)=> item[key]); this .contentBody.push(values); }); how to represent above on component.html

ahmed elbarbary · Answer

thank you for reply I have 10 ype of reports not two type so i need solution for that if reportid=1 to 10 is more are there are any dynamic olution for that