aws-amplify / aws-amplify/amplify-ui
FR: Add support for Angular Change detection and "OnPush" mode
- Dominant language
- TypeScript
- Stars
- 1.1k
- Forks
- 347
- Avg merge
- 18h 29m
- Merged PRs (30d)
- 9
Description
### Before creating a new issue, please confirm:
- [X] I have [searched for duplicate or closed issues](https://github.com/aws-amplify/amplify-ui/issues?q=is%3Aissue+) and [discussions](https://github.com/aws-amplify/amplify-ui/discussions).
- [X] I have tried disabling all browser extensions or using a different browser
- [X] I have tried deleting the node_modules folder and reinstalling my dependencies
- [X] I have read the guide for [submitting bug reports](https://github.com/aws-amplify/amplify-ui/blob/main/CONTRIBUTING.md#bug-reports).
### On which framework/platform are you having an issue?
Angular
### Which UI component?
Authenticator
### How is your app built?
angular cli (v15) / Node v18.15.0
### What browsers are you seeing the problem on?
Firefox, Safari
### Which region are you seeing the problem in?
eu-west-1
### Please describe your bug.
When using the `amplify-authenticator` component inside a component with `ChangeDetectionStrategy.OnPush`, nothing is rendered.
### What's the expected behaviour?
The `amplify-authenticator` component should take care of change detection on its own.
### Help us reproduce the bug!
I've setup a sample repository : https://github.com/QuentinFchx/amplify-ui-change-detection
When you serve the project, you should see a blank page : the `amplify-authenticator` is not rendered.
As a _workaround_, you can uncomment the following lines at https://github.com/QuentinFchx/amplify-ui-change-detection/blob/main/src/app/app.component.ts#L24
```
this.unsubscribe = this.authenticator.subscribe(() => {
this.cdRef.detectChanges();
}).unsubscribe;
```
AFAIK, the issue seems to come from https://github.com/aws-amplify/amplify-ui/blob/main/packages/angular/projects/ui-angular/src/lib/components/authenticator/components/authenticator/authenticator.component.ts#L89.
I'm not sure what is the purpose of the `hubSubject`, but the callback is never called, thus :
- the `detectChanges` in the callback is never called
- `isHandlingHubEvent` is never set to `true`, thus the `detectChanges` of the `authenticator` subscription (a few lines below) is never called
### Code Snippet
_No response_
### Console log output
_No response_
### Additional information and screenshots
_No response_
Contributor guide
Assessment
This issue has not been assessed yet.