how can i display my nested array in another table angular - arrays

Question

i want my nested json array 'orderdetials' to be displayed in another table dialog component , how can i do so?
here is a picture on how it should look enter image description here
i want only orderdetials to be displayed in another table when i click the button on each row as displayed in the picture
here is my .json
"OrderList": [
{
"id": "4",
"operationType": "retail",
"date": "2022-11-21T21:00:00.000Z",
"address": "Romnia",
"custname": "Omar",
"nettotal": 234,
"grosstotal": 987,
"totaltax": 0.008,
"totaldiscount": 0.034,
"quantityTotal": 700,
"orderdetials": [
{
"idd": "razor",
"price": 70,
"quantity": 3,
"discount": 0.06,
"tax": 0.03,
"total": 1000
}
i tried *ngfor but it didnt work .
here is my .html:
<table mat-table [dataSource]="dataSource" matSort>
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef mat-sort-header> ID. </th>
<td mat-cell *matCellDef="let element"> {{element.id}} </td>
</ng-container>
<ng-container matColumnDef="date">
<th mat-header-cell *matHeaderCellDef mat-sort-header > Date </th>
<td mat-cell *matCellDef="let element"> {{element.date | date}} </td>
</ng-container>
<ng-container matColumnDef="address">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Address </th>
<td mat-cell *matCellDef="let element"> {{element.address}} </td>
</ng-container>
<ng-container matColumnDef="custname">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Cust-Name </th>
<td mat-cell *matCellDef="let element"> {{element.custname}} </td>
</ng-container>
<ng-container matColumnDef="nettotal">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Net-Total </th>
<td mat-cell *matCellDef="let element"> {{element.nettotal | currency}} </td>
</ng-container>
<ng-container matColumnDef="grosstotal">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Gross-Total </th>
<td mat-cell *matCellDef="let element"> {{element.grosstotal | currency}} </td>
</ng-container>
<ng-container matColumnDef="totaltax">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Total-tax </th>
<td mat-cell *matCellDef="let element"> {{element.totaltax | percent}} </td>
</ng-container>
<ng-container matColumnDef="totaldiscount">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Total-Discount </th>
<td mat-cell *matCellDef="let element"> {{element.totaldiscount | percent}} </td>
</ng-container>
<ng-container matColumnDef="operationType" >
<th mat-header-cell *matHeaderCellDef mat-sort-header> Operation-Type </th>
<td mat-cell *matCellDef="let element"> {{element.operationType}} </td>
</ng-container>
<ng-container matColumnDef="quantityTotal" >
<th mat-header-cell *matHeaderCellDef mat-sort-header> Quantity Total </th>
<td mat-cell *matCellDef="let element"> {{element.quantityTotal + ' Items'}} </td>
</ng-container>
<!-- <ng-container matColumnDef="orderdetials">
<th mat-header-cell *matHeaderCellDef mat-sort-header> detials </th>
<td mat-cell *matCellDef="let element" *ngIf=""> </td>
</ng-container> -->
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
<tr class="mat-row" *matNoDataRow>
<td class="mat-cell" colspan="4">No data matching the filter "{{input.value}}"</td>
</tr>
</table>
.ts :
export interface PeriodicElement {
id : number;
date : string;
address : string;
custname : string ;
netTotal : number;
grossTotal : number;
Totaltax : number;
totaldiscount : number;
operationType : string;
quantityTotal : number ;
orderdetials : Detials[] | MatTableDataSource<Detials>;
}
export interface Detials {
idd : number;
price :number;
quantity : number;
discount : number;
tax : number;
total : number;
}
const ELEMENT_DATA: PeriodicElement[] = [];
#Component({
selector: 'app-detials-click',
templateUrl: './detials-click.component.html',
styleUrls: ['./detials-click.component.css']
})
export class DETIALSCLICKComponent implements OnInit {
displayedColumns: string[] =
['id','operationType','date','address','custname',
'nettotal','grosstotal','totaltax'];
// dataSource = new MatTableDataSource(ELEMENT_DATA);
dataSource: MatTableDataSource<any[]> = new MatTableDataSource<any[]>([ELEMENT_DATA]);
#ViewChild(MatSort) sort: MatSort = new MatSort;
#ViewChild(MatPaginator) paginator!: MatPaginator;
constructor(private api : ApiService,
private dialog : MatDialog,
private cd: ChangeDetectorRef) { }
ngAfterViewInit() {
this.dataSource.sort = this.sort;
this.dataSource.paginator = this.paginator;
}
ngOnInit(): void {
this.GetAllOrders();
}
applyFilter(event: Event) {
const filterValue = (event.target as HTMLInputElement).value;
this.dataSource.filter = filterValue.trim().toLowerCase();
}
GetAllOrders(){
this.api.getOrder().subscribe({
next: res => {
// console.log(res);
this.dataSource = new MatTableDataSource(res);
this.dataSource.sort = this.sort;
this.dataSource.paginator = this.paginator;
}, error :(err) => {
alert("Error while fetching the Orders!!")
}
})
}
}

Answer 1

You can pass orderdetials as dialog data. and use as table's datasource.
This might help you to inspire an idea: Stackblitz