amplify-ui icon indicating copy to clipboard operation
amplify-ui copied to clipboard

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

Open QuentinFchx opened this issue 7 months ago • 2 comments

Before creating a new issue, please confirm:

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

QuentinFchx avatar Jan 10 '24 14:01 QuentinFchx