ng-alain-component-developmentlisted
Install: claude install-skill aiskillstore/marketplace
# ng-alain Component Development Skill
This skill helps create enterprise UI components using ng-alain and ng-zorro-antd.
## Core Libraries
### @delon Packages
- **@delon/abc**: Business components (ST, SV, SEModule, etc.)
- **@delon/form**: Dynamic schema-based forms (SF)
- **@delon/auth**: Authentication and authorization
- **@delon/acl**: Access Control List
- **@delon/theme**: Theming and layout system
- **@delon/util**: Utility functions
### ng-zorro-antd
- Complete Ant Design component library
- Icons, layouts, forms, tables, modals, etc.
## Common Patterns
### 1. ST (Simple Table) Component
```typescript
import { Component, signal, inject } from '@angular/core';
import { STColumn, STData, STComponent } from '@delon/abc/st';
import { SHARED_IMPORTS } from '@shared';
@Component({
selector: 'app-task-table',
standalone: true,
imports: [SHARED_IMPORTS, STComponent],
template: `
<st
[data]="tasks()"
[columns]="columns"
[loading]="loading()"
[page]="{ show: true, showSize: true }"
(change)="handleChange($event)"
/>
`
})
export class TaskTableComponent {
private taskService = inject(TaskService);
loading = signal(false);
tasks = signal<STData[]>([]);
columns: STColumn[] = [
{
title: 'ID',
index: 'id',
width: 80,
fixed: 'left'
},
{
title: 'Title',
index: 'title',
width: 200
},
{
title: 'Status',
index: 'status',
type: '