Angular : how to trigger bindings manually?

Question

I've an angular material 5 component with an array of objects. It displays a modal dialog opening another component with a form to modify one object of the array.

When my dialog get closed, it sends back the modified object. So the parent take this result and update the array. But the displays does not get updated and this my issue.

Either my logic is wrong or I need to manually re-trigger the binding? What would you suggest?

Here the function opening the dialog and updating the array after it's 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?
      }
   });
}

Possible duplicate of Angular 2: How to detect changes in an array? (@input property) — Kim Kern
– Kim Kern, Commented Jan 30, 2018 at 22:52

Kim Kern · Accepted Answer · 2018-01-30 22:49:11Z

2

Angular's change detection will only trigger, when a new object is referenced but not when an object is modified. With this.contractors[index] = contractor, you only modify the array but the reference itself stays the same.

There are several different ways to solve this problem, like creating a new copy of the array, using Observables or manually triggering change detection by injecting and using ChangeDetectorRef:

constructor(private ref: ChangeDetectorRef) {}
// ...
this.ref.detectChanges();

answered Jan 30, 2018 at 22:49

Kim Kern

61.1k20 gold badges221 silver badges215 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular : how to trigger bindings manually?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related