@deltastone/ngx-ds: Enterprise Angular Component Library

🌟 Introduction

@deltastone/ngx-ds is a robust, scalable Angular component library designed for building enterprise-grade web applications with complex data management, advanced form handling, and seamless integration capabilities.

🚀 Core Design Principles

1. Architectural Philosophy

• Type Safety: Comprehensive TypeScript typing
• Modularity: Loosely coupled, highly extensible components
• Performance: Optimized for large-scale applications
• Accessibility: Built-in support for internationalization and responsive design

2. Key Technical Innovations

Intelligent Relation Management

The library provides advanced relation handling across different cardinality types:

// Many-to-Many Relation Example
@Component({
  template: `
    <ngx-ds-input-relation-autocomplete [(ngModel)]="selectedTeamMembers" [model]="projectModel" [multiple]="true">
    </ngx-ds-input-relation-autocomplete>
  `,
})
export class TeamManagementComponent {
  // Automatically handles complex relation loading and management
}

Dynamic Form Generation

Intelligent form generation with runtime validation and access control:

export class UserFormComponent extends FormPageComponent<UserEntity> {
  constructor(userService: UserService) {
    super(
      userService,
      'User Management',
      UserModel,
      // Automatic permission and validation setup
    );
  }
}

3. Authentication Ecosystem

Multi-Strategy Authentication

• OAuth Integration
• Social Login Providers
• Role-Based Access Control
• Granular Permission Management

@Injectable()
export class AuthorizationService {
  // Fine-grained permission checking
  canPerformAction(action: string, resource: string): boolean {
    return this.sessionService.user.can(action, resource);
  }
}

4. Data Management Patterns

Advanced Query Building

• Type-safe database querying
• Complex filtering
• Relation pre-loading
• Aggregation support

const complexQuery = userService
  .getQuery()
  .and('department', FilterOperator.$eq, 'Engineering')
  .orderBy('lastName', SortDirection.asc)
  .populate('projects')
  .setLimit(50);

5. Internationalization Architecture

Dynamic Translation Loading

• Server-side and client-side translation
• Context-aware translations
• Performance-optimized loading

// Dynamic translation with fallback
@Pipe({name: 'smartTranslate'})
export class SmartTranslatePipe {
  transform(value: any, definition: FieldDefinition): string {
    // Intelligent translation with type awareness
  }
}

6. UI Component Ecosystem

Powerful Input Components

• Autocomplete with relation support
• Conditional builders
• Rich text editing
• Code editing
• Complex validation

@Component({
  template: ` <ngx-ds-input-condition [(ngModel)]="complexFilter" [model]="dataModel"> </ngx-ds-input-condition> `,
})
export class AdvancedFilterComponent {}

7. Routing and Navigation

Intelligent Routing Strategies

• Guard-based navigation
• Lazy loading
• Permission-aware route resolution

export const routes: Routes = [
  {
    path: 'admin',
    canActivate: [AuthGuard, AdminPermissionGuard],
    loadChildren: () => import('./admin/admin.module'),
  },
];

8. Performance Optimization

Lazy Loading Strategies

• Module-level code splitting
• Intelligent component loading
• Minimal initial bundle size

9. Security Features

Built-in Security Mechanisms

• CSRF Protection
• XSS Prevention
• Role-Based Access Control
• Secure Script Execution Environment

🔧 Installation

npm install @deltastone/ngx-ds

Configuration Example

@NgModule({
  imports: [
    AuthModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: createTranslationLoader,
      },
    }),
  ],
})
export class AppModule {}

I18n

To use the library in your project, you need to import the module assets in your app.module.ts to load the i18n translations

export function HttpLoaderFactory(http: HttpBackend): MultiTranslateHttpLoader {
  return new MultiTranslateHttpLoader(http, ['./assets/i18n/', './assets/form/common/i18n/']);
}

Alternatively, you can use the SRR Loaders to load the translations with ng universal.

TranslateModule.forRoot({
  loader: {
    provide: TranslateLoader,
    useFactory: (loader: ServerSideTranslateLoader) => loader,
    deps: [ServerSideTranslateLoader],
  },
  defaultLanguage: 'en',
});

Use the server side loader in the ssr module and the browser loader in the browser module. The server side loader needs the path to the translations. Provided with 'clientPath' as extraProvider in the backend ssr module.

Furthermore, you need to import the assets folder in your angular.json file.

{
  "glob": "**/*",
  "input": "node_modules/@deltastone/ngx-ds/assets/form/common",
  "output": "assets/form/common"
}

Available assets are form/common, form/editor

Input Code

The code input requires some external resources from the monaco editor. To include these add this to the project assets:

{
  "glob": "**/*",
  "input": "node_modules/monaco-editor",
  "output": "/assets/monaco/"
}

It also requires installation of raw-loader

🌐 Browser & Environment Support

• Angular 16+
• Modern Browsers
• Server-Side Rendering
• Progressive Web App Ready

🤝 Contributing Guidelines

1. Follow TypeScript best practices
2. 100% test coverage for new features
3. Comprehensive documentation
4. Performance benchmark testing

📄 License

[Specify Licensing Details]

🚨 Limitations & Considerations

• Requires comprehensive backend support
• Performance scaling with very large datasets
• Specific Angular version compatibility

🆘 Support Channels

• GitHub Issues
• Community Forums
• Professional Support Options

Would you like me to elaborate on any specific section or provide more detailed technical insights?