0

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

uminder
  • 23,831
  • 5
  • 37
  • 72
miguelher007
  • 3
  • 1
  • 1
    Hi, what exactly is not working in your code? I see that you are trying reset the form when closing the dialog with `this.service.formDetail.reset();`. What is a return type of this call? Is it void, or Observable? – mat.hudak Dec 20 '20 at 06:18
  • What you want is refresh the order mat table. As far as I know, dialog ref always return to it's parent with a state saying it was closed. All you have to do, is get this return and call the same function you used to populate the mat-table. Or, implement a facade pattern, which can reload things for you. – Tiago Silva Dec 20 '20 at 11:34
  • yes, I want that every time I close the dialog my table is updated. – miguelher007 Dec 21 '20 at 21:31

1 Answers1

0

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....        
    });
  }
Tiago Silva
  • 223
  • 2
  • 6
  • but the closing event is done from a different component than my table. – miguelher007 Dec 21 '20 at 21:32
  • No, the closing event takes place on the caller component. If i understood, your table call the dialog. As the dialog is closed, it will respond to afterClosed() subscription. – Tiago Silva Dec 22 '20 at 01:56