Delayed ChangeDetection for Angular Elements in Edge

[divyanshumehta]

Description

Change detection is delayed in edge, On clicking a button inside a webcomponent it does not trigger change detection but clicking anywhere else in the webcomponent triggers the change detection. So the change is triggered when i click on the button and then somewhere outside the button.

Expected Results

ChangeDetection should happen on first click only

Browsers Affected

• [ ] Chrome
• [ ] Firefox
• [x] Edge
• [ ] Safari
• [ ] IE 11

I thought it might be related to https://github.com/webcomponents/webcomponentsjs/issues/838 but the change detection does take place when i click again.

I dont know if it is a correct place, but since my webcomponent works fine in FireFox and Chrome I think it is error in the Polyfill

[KumVishal]

Hi @divyanshumehta ,

Even I am also running into such issues and totally clueless on what to do next. Please let me know if you find any workaround for this.

Thanks in advance

[divyanshumehta]

@KumVishal one work around is to use angular-elements without Zone.js, and taking care of change detection mannually. You can find several article on zoneless change detection in angular

[aomarks]

Hello. Would you be able to provide a repro (e.g. on glitch.com) to help debug this issue? It sounds like there may be an incompatibility between zone and the webcomponents polyfills.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.