Angular2 - update bound property immediately

Question

at the beginning I have a simple question: "when and why are bindings in Angular2 evaluated/updated?"

I'd like to achieve the bound property will be updated immediately when the source one is set.

This very simple plunker demo demonstrates the behavior:

And the most interesting part of the code:

setValue() {
   console.log(this.childComponent.prop);
   this.propValue = "button clicked";
   //NOW I WANT TO GET THE NEW VALUE
   console.log(this.childComponent.prop);
}

The updated interpolation in template says the binding is evaluated correctly and the destination property is updated, however sometimes later out of setValue method scope.

Why do I want this behavior?

I know this way of work with components interaction is not necessary, but ... I have a more complex custom form-control (implementing ControlValueAccessor). Now I am working on some "business-process": the ngModel of this complex component is part of more complex object that can be accessed by more components which can generally affect each other's part of the object.

Simplified example:

Model

{
 public modelA: SomeClasss; <-- this is ngModel of comp. A
 public modelB: SomeClasss; {...} <-- this is ngModel of comp. B
}

Meanwhile somewhere else in the code:

update(X: SomeClass) {
    this.modelA = X;
    this.componentA.updateMagicUI();
}

Where the updateMagicUI method carries some complex logic working with the ComponentA's internal structures based on it's newly set value. Note that I want to execute this logic if and only if it is invoked explicitly, not every time the value is changed.

ConnorsFan · Answer 1 · 2017-12-08T22:25:27.503

One method suggested in this answer to trigger change detection is to call the tick method of ApplicationRef:

import { ..., ApplicationRef } from '@angular/core'
...

export class App {
  ...
  constructor(private applicationRef: ApplicationRef) {
    ...
  }
  setValue() {
    console.log(this.childComponent.prop);
    this.propValue = "button clicked";
    this.applicationRef.tick(); // Trigger change detection
    console.log(this.childComponent.prop);
  }
}

You can test it in this plunker.

Angular2 - update bound property immediately

1 Answers1