# Angular > Senior Angular & frontend expert for modern Angular (v17+) development. Covers Signals, standalone components, zoneless apps, SSR/hydration, state management, RxJS, routing, forms, testing, performance, accessibility, and security. Use PROACTIVELY for any Angular work. - Skill: `brenordv/angular` (Agent Skill, multi-file: 5 files) - Install (CLI): `npx skillmds@latest add brenordv/angular` - Raw SKILL.md: https://api.skillmd.com/api/skills/brenordv/angular/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: brenordv (https://skillmd.com/u/brenordv) - Updated: 2026-09-22 - Page: https://skillmd.com/skills/brenordv/angular --- # Angular You are a senior frontend engineer and Angular expert. You build scalable, performant, accessible Angular applications using modern patterns: Signals, standalone components, zoneless change detection, SSR with hydration, and strict TypeScript. You write production-grade code with OnPush change detection, proper dependency injection, and comprehensive error handling. You never ship code without considering performance, accessibility, and maintainability. > **Shared Knowledge**: This skill builds on `brain/knowledge/general-problem-solving.md`, `brain/knowledge/coding-general.md`, and `brain/knowledge/testing.md`. Always apply those principles alongside the framework-specific guidance below. > **Language-Specific Testing**: See `testing-guidelines.md` in this skill folder for framework-specific testing patterns. ## When to Use This Skill - Building or maintaining Angular applications (v17+) - Implementing Signals-based reactive patterns - Creating standalone components, directives, or pipes - Configuring routing, lazy loading, guards, resolvers - Setting up state management (Signals, NgRx, ComponentStore) - Implementing forms (reactive or template-driven) - Optimizing performance (bundle size, rendering, SSR) - Writing tests (unit, integration, e2e) - Handling HTTP, interceptors, error handling - Ensuring accessibility and security ## Do Not Use This Skill When - Migrating from AngularJS (1.x) -- use a dedicated migration skill - Working with React, Vue, or other frameworks - Pure TypeScript issues unrelated to Angular --- ## 1. Signals: The Reactive Primitive Signals are Angular's fine-grained reactivity system, replacing zone.js-based change detection for local and shared state. ```typescript import { signal, computed, effect } from '@angular/core'; // Writable signal const count = signal(0); count.set(5); count.update(v => v + 1); // Computed (derived, memoized) const doubled = computed(() => count() * 2); // Effect (side effects, auto-tracks dependencies) effect(() => { console.log(`Count: ${count()}`); }); ``` ### Signal Inputs, Outputs, and Model ```typescript import { Component, input, output, model } from '@angular/core'; @Component({ selector: 'app-user-card', standalone: true, template: `

{{ name() }}

{{ role() }} `, }) export class UserCardComponent { id = input.required(); name = input.required(); role = input('User'); // With default select = output(); // Output isSelected = model(false); // Two-way binding } // Usage: ``` ### Signal Queries ```typescript import { viewChild, viewChildren, contentChild } from '@angular/core'; export class ContainerComponent { searchInput = viewChild('searchInput'); items = viewChildren(ItemComponent); header = contentChild(HeaderDirective); } ``` ### Signals vs RxJS Decision Guide | Use Case | Signals | RxJS | |-----------------------|--------------------|-----------------------------------| | Local component state | Preferred | Overkill | | Derived/computed | `computed()` | `combineLatest` | | Side effects | `effect()` | `tap` | | HTTP requests | No | HttpClient returns Observable | | Event streams | No | `fromEvent`, operators | | Complex async flows | No | `switchMap`, `mergeMap` | | Debounce/throttle | No | `debounceTime` | --- ## 2. Standalone Components All new components should be standalone. No NgModule required. ```typescript @Component({ selector: 'app-header', standalone: true, imports: [RouterLink], template: `
Home About
`, }) export class HeaderComponent {} ``` ### Bootstrapping Without NgModule ```typescript // main.ts import { bootstrapApplication } from '@angular/platform-browser'; import { provideRouter } from '@angular/router'; import { provideHttpClient } from '@angular/common/http'; import { AppComponent } from './app/app.component'; import { routes } from './app/app.routes'; bootstrapApplication(AppComponent, { providers: [provideRouter(routes), provideHttpClient()], }); ``` --- ## 3. New Control Flow Syntax Always use the built-in control flow over legacy structural directives. ```html @if (user(); as user) { Welcome, {{ user.name }} } @else if (loading()) { } @else { Sign In } @for (item of items(); track item.id) { } @empty { } @switch (status()) { @case ('active') { Active } @case ('inactive') { Inactive } @default { Unknown } } ``` --- ## 4. Dependency Injection ### Modern inject() Function ```typescript @Component({...}) export class UserComponent { private http = inject(HttpClient); private userService = inject(UserService); users = toSignal(this.userService.getUsers()); } ``` ### Injection Tokens ```typescript export const API_BASE_URL = new InjectionToken('API_BASE_URL'); // Provide in bootstrap bootstrapApplication(AppComponent, { providers: [ { provide: API_BASE_URL, useValue: 'https://api.example.com' }, ], }); // Inject @Injectable({ providedIn: 'root' }) export class ApiService { private baseUrl = inject(API_BASE_URL); } ``` --- ## 5. Routing ### Lazy Loading Routes ```typescript export const routes: Routes = [ { path: 'dashboard', loadComponent: () => import('./dashboard/dashboard.component').then(m => m.DashboardComponent), }, { path: 'admin', loadChildren: () => import('./admin/admin.routes').then(m => m.ADMIN_ROUTES), }, ]; ``` ### Functional Guards and Resolvers ```typescript export const authGuard: CanActivateFn = (route, state) => { const auth = inject(AuthService); const router = inject(Router); if (auth.isAuthenticated()) return true; return router.createUrlTree(['/login'], { queryParams: { returnUrl: state.url }, }); }; export const userResolver: ResolveFn = (route) => { return inject(UserService).getUser(route.paramMap.get('id')!); }; // In routes { path: 'user/:id', loadComponent: () => import('./user.component'), canActivate: [authGuard], resolve: { user: userResolver }, } ``` --- ## 6. Zoneless Angular Zoneless apps skip zone.js entirely, yielding smaller bundles, cleaner stack traces, and better micro-frontend compatibility. ```typescript // main.ts import { provideZonelessChangeDetection } from '@angular/core'; bootstrapApplication(AppComponent, { providers: [provideZonelessChangeDetection()], }); ``` All components must use `ChangeDetectionStrategy.OnPush` and Signals for state. Signal updates automatically trigger change detection without zone.js. --- ## 7. SSR and Hydration ### Setup ```bash ng add @angular/ssr ``` ### Hydration Configuration ```typescript // app.config.ts import { provideClientHydration, withEventReplay } from '@angular/platform-browser'; export const appConfig: ApplicationConfig = { providers: [provideClientHydration(withEventReplay())], }; ``` ### Incremental Hydration with @defer ```html @defer (hydrate on viewport) { } @defer (hydrate on interaction) { } ``` See §12 for the full `@defer` trigger reference. ### TransferState for SSR Data Avoid refetching on the client data already fetched during server rendering. See `references/ssr.md` for the full `TransferState` service. --- ## 8. State Management ### Selection Criteria ``` Small app, simple state -> Signal services Medium app, moderate state -> Component stores / NgRx SignalStore Large app, complex flows -> NgRx Store (actions, effects, devtools) Heavy server interaction -> NgRx Query + Signal services ``` See `references/state-management.md` for full examples: Signal Service, NgRx SignalStore, NgRx Store (actions/reducer/effects), and bridging Signals with RxJS. --- ## 9. Forms ### Reactive Forms (Preferred) Use reactive forms with typed controls. See `references/forms.md` for the full form component with signal-tracked submit state and per-field validation. --- ## 10. HTTP Client and Interceptors ```typescript // Functional interceptor import { HttpInterceptorFn } from '@angular/common/http'; export const authInterceptor: HttpInterceptorFn = (req, next) => { const auth = inject(AuthService); const token = auth.getToken(); if (token) { req = req.clone({ setHeaders: { Authorization: `Bearer ${token}` } }); } return next(req); }; // Provide in bootstrap bootstrapApplication(AppComponent, { providers: [ provideHttpClient(withInterceptors([authInterceptor])), ], }); ``` --- ## 11. Performance Optimization ### Priority 1: Change Detection (CRITICAL) - Always use `ChangeDetectionStrategy.OnPush` - Use Signals for all component state - Enable zoneless for new projects ### Priority 2: Eliminate Async Waterfalls (CRITICAL) ```typescript // WRONG - Sequential fetching this.userService.getUser(id).subscribe(user => { this.postsService.getPosts(user.id).subscribe(posts => { ... }); }); // CORRECT - Parallel forkJoin({ user: this.userService.getUser(id), posts: this.postsService.getPosts(id), }).subscribe(); // CORRECT - Flatten dependent calls this.route.params.pipe( map(p => p.id), switchMap(id => this.userService.getUser(id)), ).subscribe(); ``` ### Priority 3: Bundle Optimization (CRITICAL) - Lazy load all feature routes with `loadComponent` / `loadChildren` - Use `@defer` for heavy below-fold components (§12) - Avoid barrel file re-exports (breaks tree-shaking) - Dynamically import heavy third-party libraries ### Priority 4: Rendering Performance (HIGH) ```html @for (item of items(); track item.id) { } ``` - Use virtual scrolling (`CdkVirtualScrollViewport`) for large lists - Use pure pipes instead of methods in templates - Use `computed()` for derived data (memoized) - Use `NgOptimizedImage` for images ### Priority 5: Memory Management ```typescript import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; // Auto-cleanup subscriptions this.data$.pipe( takeUntilDestroyed(inject(DestroyRef)) ).subscribe(); // Better: convert to signal, no subscription needed data = toSignal(this.service.data$, { initialValue: null }); ``` --- ## 12. Deferrable Views (@defer) ```html @defer (on viewport) { } @placeholder {
} @loading (minimum 200ms) { } @error {

Failed to load

} ``` | Trigger | When to Use | |------------------|--------------------------------------| | `on idle` | Low-priority, hydrate when idle | | `on viewport` | Hydrate when element enters viewport | | `on interaction` | Hydrate on user interaction | | `on hover` | Hydrate when user hovers | | `on timer(ms)` | Hydrate after delay | The same triggers drive incremental hydration in SSR (§7), written as `hydrate on `. Use `@defer` for: analytics charts, comment sections, chat widgets, below-fold content, heavy third-party components. --- ## 13. Component Composition ### Content Projection ```typescript @Component({ selector: 'app-card', template: `
`, }) export class CardComponent {} ``` ### Host Directives ```typescript @Component({ selector: 'app-button', standalone: true, hostDirectives: [ { directive: TooltipDirective, inputs: ['tooltip: title'] }, ], template: ``, }) export class ButtonComponent {} ``` --- ## 14. Testing Test component behavior through the rendered template, not class internals. Test loading, error, and empty states explicitly for every async component. - Unit: Jasmine + Karma or Jest. - E2E (preferred for new projects): Playwright, or Cypress. Use `data-testid` attributes for stable selectors. Test critical user flows: navigation, form submission, error states. See `testing-guidelines.md` for TestBed setup, signal-input testing (`componentRef.setInput`), HttpClient mocking, and full e2e examples. --- ## 15. UI State Patterns ### Loading State Rule Show loading indicator ONLY when there is no data to display. ```html @if (error()) { } @else if (loading() && !items().length) { } @else if (!items().length) { } @else { } ``` ### Error Handling ```typescript async save() { this.saving.set(true); try { await this.service.save(this.data); this.toast.success('Saved'); } catch (error) { console.error('Save failed:', error); this.toast.error('Failed to save. Please try again.'); } finally { this.saving.set(false); } } ``` ### Button States Always disable buttons during async operations to prevent double submissions. ```html ``` --- ## 16. Accessibility - Use semantic HTML (`