Angular 20 components for building dynamic forms and list views with AWS Amplify Data
Angular 20 components for building dynamic forms and list views with AWS Amplify Data.
- DynamicFormComponent: Generates dynamic forms based on Amplify Data models
- ListViewComponent: Displays paginated lists of Amplify Data model items
- Standalone Components: Built with Angular 20 standalone architecture
- TypeScript Support: Full TypeScript support with type definitions
- AWS Amplify Integration: Seamless integration with AWS Amplify Data
``bash`
npm install @snteam/amplify-angular-core
This package requires the following peer dependencies:
`bash`
npm install @angular/core@^20.3.0 @angular/common@^20.3.0 @angular/forms@^20.3.0 @angular/material@^20.3.0 @angular/cdk@^20.3.0 aws-amplify@^6.0.0 @aws-amplify/ui-angular@^6.0.0 rxjs@~7.8.0
`typescript
import { DynamicFormComponent } from '@snteam/amplify-angular-core';
@Component({
selector: 'app-example',
standalone: true,
imports: [DynamicFormComponent],
template:
[itemId]="userId"
(itemOutput)="onItemOutput($event)">
})
export class ExampleComponent {
userId = 'user-123';
onItemOutput(item: any) {
console.log('Form output:', item);
}
}
`typescript
import { ListViewComponent } from '@snteam/amplify-angular-core';
@Component({
selector: 'app-list',
standalone: true,
imports: [ListViewComponent],
template:
})
export class ListComponent {}
- DynamicFormComponent: Main form component for creating/editing Amplify Data models
- ListViewComponent: Main list component for displaying Amplify Data models
- DynamicFormQuestionComponent: Renders individual form fields
- DynamicFormGroupComponent: Handles nested form groups
- RecordRelationshipsComponent: Manages model relationships
- AmplifyModelService: Centralized service for Amplify Data operations
- AmplifyFormBuilderService: Generates Angular reactive forms from Amplify schemas
- QuestionControlService: Converts model fields to question objects
MIT
Please read our contributing guidelines before submitting pull requests.
For issues and questions, please use the GitHub issue tracker.