FR (Angular Authenticator) Re-export primitives and provide a way to reuse them with custom slots

[coyoteecd]

On which framework/platform would you like to see this feature implemented?

Angular

Which UI component is this feature-request for?

Authenticator

Please describe your feature-request in detail.

In our Angular 14 project we're using a custom slot to offer integration with a proprietary auth provider. Our code follows the example provided here to add a custom sign-in button.

We cannot get the data-xxx attributes to work as shown in the example, and I suspect this is because the AmplifyAuthenticatorModule does not re-export the ButtonComponent it uses. Maybe I misunderstand the example, I expected we would be able to use Amplify buttons in the same way as built-in Authenticator components already do:

<ng-template amplifySlot="sign-in-footer">
   <button amplify-button type="button" data-fullwidth="true" data-size="small">Sign in with My Provider</button>
</ng-template>

Right now we have to hard-code the actual CSS classes that Amplify generates, which is not very future-proof.

Please describe a solution you'd like.

Re-export ButtonComponent in the AmplifyAuthenticatorModule; this way the third party apps that use AWS Amplify can use <button aws-amplify></button> declarations within their custom components. The module already exports CheckboxComponent, so in fact, maybe it should re-export all the built-in primitives that it imports.

We love contributors! Is this something you'd be interested in working on?

• [ ] 👋 I may be able to implement this feature request.
• [ ] ⚠️ This feature might incur a breaking change.

[sreeramsama]

We will track this in our Angular primitives issue.