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

• Search existing components: grep "{Feature}Component" --include="*.ts"

• Read design system docs (see Read Directives below)

• Select base class from decision tree above

• Create files: {feature}.component.ts , .html , .scss , optionally .store.ts

• Implement using patterns from references

• 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.

• ⚠️ MUST READ .claude/skills/shared/angular-design-system.md — hierarchy, SCSS, platform APIs

• ⚠️ MUST READ .claude/skills/shared/bem-component-examples.md — BEM HTML/SCSS examples

• ⚠️ MUST READ .claude/skills/frontend-angular-component/references/component-patterns.md — list, form, simple component patterns

• ⚠️ 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