I have an Angular Material 5 component that contains an array of objects. This component displays a modal dialog which opens another component with a form to modify one object from the array.
After the dialog is closed, it sends back the modified object. The parent component then takes this result and updates the array. However, the display does not get updated, and this is my issue.
Do you think there's an error in my logic or do I need to manually re-trigger the binding? What would you recommend?
Below is the function responsible for opening the dialog and updating the array after it has been closed:
openDialog(event: any, id: number) {
const index = this.contractors.findIndex(x => x.Id === id);
const dialogRef = this.dialog.open(ContractorEditComponent, {
width: '600px',
data: { contractor : this.contractors[index] }
});
dialogRef.afterClosed().subscribe((contractor: ContractorModel) => {
if (contractor !== null) {
this.contractors[index] = contractor; // update my collection with new value
// Should I re-trigger data binding manually here to update the UI?
}
});
}