FR: Add support for Angular Change detection and "OnPush" mode

[QuentinFchx]

Before creating a new issue, please confirm:

• [X] I have searched for duplicate or closed issues and 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.

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

[reesscot]

@QuentinFchx Thank you for reporting this issue, we are looking into it.

[esauerbo]

Hi @QuentinFchx, I'm changing this to a feature request because our Authenticator component currently isn't designed to support the OnPush change detection strategy. That being said I think this makes sense to implement, and we will try to work this into our roadmap.

I'll also add a note of this to our docs site to avoid future confusion.