How to display dynamic data and dynamic header on angular 7

ahmed elbarbary

6y2.8kTypeScript

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

class="table table-hover" >
i dont know table header returned
"let rep of reportdetailslist">
idont know columns returned

5 Replies

Know the answer? Post it — somebody with the same question will find it here.

Siddharth Gajbhiye6y ago
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 elbarbary6y ago
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 elbarbary6y ago
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 elbarbary6y ago
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
Siddharth Gajbhiye6y ago
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