Dynamically created component model is not being reflected in the template on change

🐞 bug report

Affected Package

The issue is caused by package 'not sure'

Is this a regression?

No

Description

Dynamically created component model is not being bind to the view on model change. Reproduced the issue in below stackblitz project.

🔬 Minimal Reproduction

https://stackblitz.com/edit/angular-tyhfku

🌍 Your Environment

Angular Version:

@angular/common7.2.5
@angular/compiler7.2.5
@angular/core7.2.5
@angular/forms7.2.5
@angular/platform-browser7.2.5
@angular/platform-browser-dynamic7.2.5
@angular/router7.2.5
core-js2.6.5
rxjs6.4.0
zone.js0.8.29

Anything else relevant?

[alexzuza]

No, it shouldn’t since config.active = true and view.oldValue[i] is also true so component will never receive updated value. What you can do it to use two-way binding and don’t mutate state. https://stackblitz.com/edit/angular-5qansx?file=src/app/hero.component.ts

[alexzuza]

@azimsodikov I suspect you’re expecting that after you changed the active property by clicking on the line inside app-section component and then clicked on the Restore State button it should revert your primitive value to the default value, right?

The first we can try is to to remove dynamic loading https://stackblitz.com/edit/angular-zsphvy?file=src%2Fapp%2Fsection.component.ts

As we can the dynamic component is not a problem here.

Now, let’s think when ngOnChanges should be called.

It should be called when Angular (re)sets data-bound input properties.

parent component

const config= { foo: false };

<app-section [active]="config.foo"></app-section>

child component

@Component({
  selector: 'app-section',
  template: `<h1 (click)="active = !active" >click me to change state</h1>`,
})
export class SectionComponent implements OnChanges  {
  @Input() active: boolean;

  ngOnChanges() { 
    /* no changes */
    console.log(this.active);
  }
}

When Angular updates property it sets value to that property and also updates view.oldValue to keep track changes.

• When does Angular update an input property?
• When there is a change or in other words when view.oldValue is not identical to current value.

The first time the ngOnChanges is called is when we set default value so it changes from undefined to false.

Note that we deal with primitive value here. So we have AppSectionInstance.active = false; view.oldValue = false;

Now you click on the line and change AppSectionInstance.active to false. view.oldValue remains the same. And when you’re trying to update config Angular can’t recognize the change since new value(false) is not changed(view.oldValue = false)