MatTableDataSource from another component

Question

I have two components, Order and OrderDetail.

In Order I have a MatTableDataSource, which is filled from a service.

OrderComponent

before contructor

listData: MatTableDataSource<DocumentDetailModel>;
displayedColumns: string[]= [ 'row','itemCode', 'itemName', 'priceListCode', 'priceListName', 
'wareHouseCode', 'wareHouseName', 'quantity', 'unitValue', 'ivaPercentage', 'valueBeforeIVA', 
'totalValue', 'cost', 'stock', 'profitMargin', 'actions'];  
 @ViewChild(MatSort) sort: MatSort;
 @ViewChild(MatPaginator) paginator: MatPaginator;

event button get

this.service.getDocument(this.service.form.value.documentDate, this.service.form.value.documentType, this.service.form.value.documentNumber).subscribe((data: DataResponseDocumentModel) => {      
    if(data.code === 1) 
    { 
      this.service.form.patchValue(data.documentHeader);
      this.service.form.disable();          
      this.getDataTable(data.lstDocumentDetail);
    }
});

Function

getDataTable(lstDocumentDetail) {
  this.listData = new MatTableDataSource(lstDocumentDetail);
  this.listData.sort = this.sort;
  this.listData.paginator = this.paginator;
  this.listData.filterPredicate = (data, filter) => {
    return this.displayedColumns.some(ele => {
      return ele != 'actions' && data[ele].toLowerCase().indexOf(filter) != -1;
    });
  }
}

from OrderDetailComponent, I want to fill the MatTableDataSource when it closes, OrderDetail is a MatDialog.

Image MatTable

Image MatDialog

Code button Close MatDialog - OrderDetailComponent

onClose(){
  this.service.formDetail.reset();
  this.service.initializeFormDetailGroup();
  this.dialogRef.close();
}

this application is Angular 9.1.12

Answer 1

Did you try to get dialog close event?

 openDialog(): void {
    const dialogRef = this.dialog.open(OrderDialogComponent, {
      width: '250px',
      data: .....
    });

    dialogRef.afterClosed().subscribe(result => {
          Call Your reload Mat table function....        
    });
  }