Angular/elements OnPush input changes does not trigger change detection

[artaommahe]

🐞 bug report

Affected Package

The issue is caused by package @angular/elements

Is this a regression?

dunno

Description

• create custom elements via @angular/elements from component with input and changeDetection: ChangeDetectionStrategy.OnPush
• set it's initial input value from the application or change it
• component's CD is not triggered, template is not updated

🔬 Minimal Reproduction

Clone https://github.com/artaommahe/Angular-elements-input-update. There are two applications: widgets with custom element and main-app with custom element usage in other angular app.

Two ways to face the issue - from main-app or from plain js custom element usage.

Plain js

platform's code here https://github.com/artaommahe/Angular-elements-input-update/blob/master/projects/widgets/src/index.html#L11

• run widgets dev server yarn start widgets
• open http://localhost:4201/
• click inc button multiple times
• see no changes in widget's template
• click trigger widget CD button (runs markForCheck inside widget component)
• see changes
• uncomment this https://github.com/artaommahe/Angular-elements-input-update/blob/master/projects/widgets/src/app/some-widget/components/some-widget/some-widget.component.ts#L17
• update page and click inc button
• see changes

Other angular app

platform's code here https://github.com/artaommahe/Angular-elements-input-update/blob/master/projects/main-app/src/app/app.component.ts#L6

• run widgets dev server yarn start widgets --extra-webpack-config projects/widgets/webpack.config.js (we cant run two angular-cli apps in one browser tab webpack config changes Proposal: Ability to change webpack jsonp function name angular-cli#8902)
• run main-app dev server yarn start main-app
• open http://localhost:4200/
• click inc button multiple times
• see no changes in widget's template
• click trigger widget CD button (runs markForCheck inside widget component)
• see changes
• uncomment this https://github.com/artaommahe/Angular-elements-input-update/blob/master/projects/widgets/src/app/some-widget/components/some-widget/some-widget.component.ts#L17
• update page and click inc button
• see changes

or you can remove ChangeDetectionStrategy.OnPush in some-widget component and everything will work too

🔥 Exception or Error

🌍 Your Environment

Angular Version:

PS D:\projects\issues\angular-elements-input-update> yarn ng version                                                                  
yarn run v1.16.0
$ ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 10.1.2
Node: 12.18.1
OS: win32 x64

Angular: 10.1.2
... animations, cli, common, compiler, compiler-cli, core
... elements, forms, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1001.2
@angular-devkit/build-angular   0.1001.2
@angular-devkit/core            10.1.2
@angular-devkit/schematics      10.1.2
@schematics/angular             10.1.2
@schematics/update              0.1001.2
rxjs                            6.6.3
typescript                      4.0.3

Anything else relevant?

[gkalpak]

I can confirm this still happens with v10.2.0. Here is a StackBlitz reproduction.
I need to do some more digging to understand why it happens 😁

[gkalpak]

I have created #39452, although I am not sure it is the best way to fix it 😅

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}