Downgraded Angular component with no change detection in AngularJS

Question

For performace reasons I am using Angular's downgradeComponent, https://angular.io/api/upgrade/static/downgradeComponent.

My Angular component:

export class MyComponent {
  @Input() field: any;
}

Template:

<span>Angular value is {{field.value}}</span>
<mat-select [(ngModel)]="field.value">
...

Everything works great inside that component when the select changes the fields value changes accordingly. However when I use this downgraded component in AngularJS I am not seeing the change picked up.

<span>AngularJS value is {{inputField.value}}</span>
<my-component [field]="inputField"></my-component>

I was fairly sure this was due to change detection not being propagated from Angular to AngularJS as outlined here: https://angular.io/guide/upgrade-performance#change-detection-with-downgrademodule.

Reading further it does mention this:

For example, if a downgraded component defines an @Input(), chances are that the app needs to be aware when that value changes. Thus, downgradeComponent() automatically triggers change detection on that component.

Why am I not seeing the change on the AngularJS side? Do I need to force a digest cycle somehow, somewhere?

Answer 1

In hybrid app components interact using @Input and @Output, e.g.:

<my-component [field]="inputField" [my-output]="foo()"></my-component>

When inputField changes in angularjs, it will run angular change detection. When myOuput fires in angular, it will run angularjs change detection.

So, you need either add @Output to your component or run $rootScope.$apply()/$digest.