-
Notifications
You must be signed in to change notification settings - Fork 27.1k
Description
I'm submitting a ...
[x] bug report - related issue https://github.com/angular/angular/issues/10148, but it's about testing.
Current behavior
I have two components: the first one is a simple child component with some input and basic support of [ngModel] directive via ControlValueAccesor interface. The second one is a parent component has onPush change detection strategy and populates a value into child component via [ngModel] directive (right after that it's marked for changes via ChangeDetectorRef class). When [ngModel] is updated child component still displays an old value in the template while the component object has actual value in target property.
As I can see NgModel directive updates target component asynchronously - https://github.com/angular/angular/blob/2.0.0/modules/%40angular/forms/src/directives/ng_model.ts#L191-L193 so the following scenario occurs
- Change detection executes for parent component.
- Change detection updates [ngModel] value
- [ngModel] schedules async task that updates child component
- Change detection executes for child component
- Actual value arrives in child component.
Expected/desired behavior
Change detection should work with already updated component to ensure that new value has been populated into UI.
So it looks like that last two steps should be swapped (or even better - [ngModel] can update child component synchronously).
Reproduction of the problem
Here is a tiny example with the issue. I'm expecting here that right after 2 seconds App Component should display "new value".
http://plnkr.co/edit/IabIsT3323GpZmQSPd4z?p=preview
new example can be found here http://plnkr.co/edit/KowgH96EtDbVJao13Hz5?p=preview, thanks to @andreialecu
if I use the following markup in the example above
<my-child [value]="value"></my-child>
instead of
<my-child [ngModel]="value"></my-child>
all work as expected
Please tell us about your environment:
- Angular version: 2.0.0-rc.05
- Browser: [ Chrome 52]
- Language: [TypeScript 1.8 | ES5]