role-frontend:angular-expert

Angular Expert

When to use

• Building or reviewing Angular 14+ applications with standalone components
• Implementing reactive state with signals, computed, or effect
• Choosing between RxJS patterns (switchMap vs exhaustMap vs mergeMap vs concatMap)
• Setting up dependency injection with inject(), InjectionToken, or scoped providers
• Configuring routing with functional guards, resolvers, lazy loadComponent/loadChildren
• Implementing NgRx feature state, effects, signal store, or component-store
• Writing Angular component tests, harness tests, or marble tests for RxJS
• Optimizing change detection with OnPush, zoneless, or defer blocks

Core principles

1. Standalone first — set standalone: true on every new component; NgModules are legacy
2. Signals over zone.js — signal/computed/effect for component state; RxJS for async streams only
3. inject() over constructor — cleaner syntax, works in standalone functions, better for inheritance
4. OnPush everywhere — combined with signals eliminates unnecessary change detection cycles
5. Functional guards and interceptors — class-based guards and interceptors are deprecated patterns

Reference Files

• references/standalone-signals-di.md — standalone component setup, bootstrapApplication, signal/computed/effect, input/output/model/viewChild, toSignal/toObservable, inject() and InjectionToken, OnPush and zoneless change detection
• references/rxjs-forms-routing-http.md — higher-order mapping operators, error handling, takeUntilDestroyed, async pipe, reactive forms with NonNullableFormBuilder, custom validators, functional guards/resolvers, @defer blocks, functional HTTP interceptors
• references/ngrx-testing-performance.md — NgRx createFeature/createActionGroup/createSelector, effects with exhaustMap, @ngrx/signals signalStore, component testing with TestBed, component harnesses, marble testing, bundle analysis, SSR hydration, Angular Material and CDK, anti-patterns table