Frontend Angular Component

Angular Component Development Workflow

Use when creating/modifying Angular 19 components with EasyPlatform base classes.

Decision Tree

What type of component?
├── Simple display (no state)     → AppBaseComponent
├── Mutable view model            → AppBaseVmComponent
├── User input form               → AppBaseFormComponent (see frontend-angular-form skill)
├── Complex state / CRUD / list   → AppBaseVmStoreComponent (see frontend-angular-store skill)
└── Reusable presentational       → AppBaseComponent + @Input/@Output

Rule: Always use AppBase* (not Platform* directly) to get auth/role context.

Workflow

1. Search existing components: grep "{Feature}Component" --include="*.ts"
2. Read design system docs (see Read Directives below)
3. Select base class from decision tree above
4. Create files: {feature}.component.ts, .html, .scss, optionally .store.ts
5. Implement using patterns from references
6. Verify checklist below

Key Rules

• Wrap content with <app-loading-and-error-indicator [target]="this">
• Use @for (item of items; track trackByItem) with ngForTrackByItemProp
• All subscriptions: .pipe(this.untilDestroyed()).subscribe()
• Store provided at component level: providers: [FeatureStore]
• All API calls through PlatformApiService subclasses (never HttpClient directly)
• Place logic in LOWEST layer: Entity/Model > Service > Component

File Location

src/Frontend/apps/{app-name}/src/app/features/{feature}/
├── {feature}.component.ts|html|scss
└── {feature}.store.ts (if using store)

⚠️ MUST READ Before Implementation

IMPORTANT: You MUST read these files before writing any code. Do NOT skip.

1. ⚠️ MUST READ .claude/skills/shared/angular-design-system.md — hierarchy, SCSS, platform APIs
2. ⚠️ MUST READ .claude/skills/shared/bem-component-examples.md — BEM HTML/SCSS examples
3. ⚠️ MUST READ .claude/skills/frontend-angular-component/references/component-patterns.md — list, form, simple component patterns
4. ⚠️ MUST READ target app design system: docs/design-system/README.md and 02-component-catalog.md

Anti-Patterns

• extends PlatformComponent when auth needed -> use AppBaseComponent
• private sub: Subscription + manual cleanup -> use this.untilDestroyed()
• constructor(private http: HttpClient) -> use PlatformApiService subclass
• Missing <app-loading-and-error-indicator> wrapper
• Template elements without BEM classes

Verification Checklist

• Correct AppBase* class selected
• Store provided at component level (if using store)
• Loading/error wrapped with app-loading-and-error-indicator
• All subscriptions use untilDestroyed()
• Track-by on @for loops
• Auth checks use hasRole() from base class
• All elements have BEM classes

IMPORTANT Task Planning Notes

• Always plan and break many small todo tasks
• Always add a final review todo task to review the works done at the end to find any fix or enhancement needed