aws-amplify / aws-amplify/amplify-ui
FR (Angular Authenticator) Re-export primitives and provide a way to reuse them with custom slots
- Dominant language
- TypeScript
- Stars
- 1.1k
- Forks
- 347
- Avg merge
- 18h 29m
- Merged PRs (30d)
- 9
Description
### 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](https://github.com/aws-amplify/amplify-ui/blob/be2c495c9de9373080328996f09d485d0819a190/examples/angular/src/pages/ui/components/authenticator/custom-slots/custom-slots.component.html#L23-L31) 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:
```ts
Sign in with My Provider
```
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 `` 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.
Contributor guide
Research direction
Start by locating AmplifyAuthenticatorModule and checking how it exports CheckboxComponent and imports ButtonComponent. Compare this with the custom-slot example in examples/angular/src/pages/ui/components/authenticator/custom-slots/custom-slots.component.html. Done means custom Angular slot templates can use the button primitive and the documented data attributes without hard-coded generated CSS classes.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100