@snteam/amplify-angular-core

Angular 20 components for building dynamic forms and list views with AWS Amplify Data.

Features

• 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

Installation

npm install @snteam/amplify-angular-core

Peer Dependencies

This package requires the following peer dependencies:

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

Usage

DynamicFormComponent

import { DynamicFormComponent } from '@snteam/amplify-angular-core';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [DynamicFormComponent],
  template: `
    <snteam-dynamic-form 
      [model]="'User'" 
      [itemId]="userId"
      (itemOutput)="onItemOutput($event)">
    </snteam-dynamic-form>
  `
})
export class ExampleComponent {
  userId = 'user-123';
  
  onItemOutput(item: any) {
    console.log('Form output:', item);
  }
}

ListViewComponent

import { ListViewComponent } from '@snteam/amplify-angular-core';

@Component({
  selector: 'app-list',
  standalone: true,
  imports: [ListViewComponent],
  template: `
    <snteam-list-view [modelName]="'User'"></snteam-list-view>
  `
})
export class ListComponent {}

Components

• 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

Services

• AmplifyModelService: Centralized service for Amplify Data operations
• AmplifyFormBuilderService: Generates Angular reactive forms from Amplify schemas
• QuestionControlService: Converts model fields to question objects

License

MIT

Contributing

Please read our contributing guidelines before submitting pull requests.

Support

For issues and questions, please use the GitHub issue tracker.