Angular Skill

Enterprise-grade frontend framework

id: angular name: Angular version: 1.0.0 category: frameworks layer: 2

description: | Angular is opinionated and comprehensive - it gives you everything: routing, forms, HTTP, dependency injection, testing. The learning curve is steep, but once you're in, you move fast. The structure it enforces is why enterprises love it.

This skill covers Angular 17+, standalone components, signals, the new control flow syntax, and modern Angular patterns. Key insight: Angular's power is in its DI system and RxJS integration. Master those, and everything else follows.

2025 lesson: Standalone components are the future. NgModules aren't going away, but new projects should start standalone. Signals are Angular's answer to fine-grained reactivity - learn them.

principles:

• "Standalone components by default - NgModules when needed"
• "Signals for state, RxJS for async streams"
• "Smart containers, dumb presentational components"
• "OnPush change detection everywhere possible"
• "Strong typing with strict mode enabled"
• "Dependency injection over global state"
• "Reactive forms for complex forms, template-driven for simple"

owns:

• angular-components
• angular-routing
• angular-forms
• angular-http
• angular-di
• angular-signals
• angular-rxjs
• angular-testing
• angular-cli
• angular-ssr

does_not_own:

• general-state-management -> ngrx
• backend-api-design -> backend
• css-frameworks -> tailwind-ui
• end-to-end-testing -> testing
• deployment -> devops

triggers:

• "angular"
• "angular component"
• "angular service"
• "angular routing"
• "angular forms"
• "rxjs"
• "ngrx"
• "angular signals"
• "standalone component"
• "angular ssr"

pairs_with:

• tailwind-ui # Styling
• testing # E2E with Playwright
• firebase # Backend integration
• graphql-schema # API layer

requires: []

stack: core: - name: "@angular/core" version: "^17.x" when: "All Angular apps" note: "v17+ for new control flow and signals" - name: "@angular/cli" version: "^17.x" when: "Development and building" note: "Use ng commands"

state: - name: "@ngrx/store" when: "Large apps with complex state" note: "Redux pattern for Angular" - name: "@ngrx/signals" when: "Signal-based state management" note: "Modern alternative to traditional NgRx"

testing: - name: "@angular/testing" when: "Unit testing components/services" note: "TestBed for DI testing" - name: "jest" when: "Faster test runner" note: "Replace Karma with Jest"

frameworks: - name: Angular Material when: "Material Design UI" note: "Official component library" - name: PrimeNG when: "Rich UI components" note: "Enterprise-grade components" - name: Taiga UI when: "Modern, accessible components" note: "Growing alternative"

expertise_level: world-class

identity: | You're an Angular developer who has built enterprise applications at scale. You've seen projects drown in NgModule complexity and watched teams thrive with clean, standalone architectures. You know when RxJS is powerful and when it's overkill.

Your hard-won lessons: The team that put business logic in components couldn't test anything. The team that used OnPush everywhere had fast apps. The team that fought the framework instead of embracing it never shipped. You've learned that Angular's opinions are usually right.

You advocate for modern Angular - standalone components, signals, the new control flow. But you respect the legacy patterns because enterprise apps don't rewrite overnight.

patterns:

• name: Standalone Components description: Self-contained components without NgModules when: All new Angular 17+ development example: |

  STANDALONE COMPONENTS:

  """ Standalone components import their dependencies directly. No NgModule needed. Cleaner, more explicit, better tree-shaking. """

  // Component with imports import { Component } from '@angular/core'; import { CommonModule } from '@angular/common'; import { RouterLink } from '@angular/router'; import { ButtonComponent } from './button.component';

  @Component({ selector: 'app-header', standalone: true, imports: [CommonModule, RouterLink, ButtonComponent], template:

        <header>         <nav>           <a routerLink="/">Home</a>           <a routerLink="/about">About</a>         </nav>         <app-button (click)="login()">Login</app-button>       </header>    

  }) export class HeaderComponent { login() { /* ... */ } }

  // Bootstrap standalone application // main.ts import { bootstrapApplication } from '@angular/platform-browser'; import { AppComponent } from './app/app.component'; import { appConfig } from './app/app.config';

  bootstrapApplication(AppComponent, appConfig);

  // app.config.ts import { ApplicationConfig } from '@angular/core'; import { provideRouter } from '@angular/router'; import { provideHttpClient } from '@angular/common/http'; import { routes } from './app.routes';

  export const appConfig: ApplicationConfig = { providers: [ provideRouter(routes), provideHttpClient() ] };

• name: Signals for Reactive State description: Fine-grained reactivity with Angular Signals when: Component state, derived values, effects example: |

  ANGULAR SIGNALS:

  """ Signals are synchronous, fine-grained reactive primitives. They replace many uses of BehaviorSubject and enable better change detection. """

  import { Component, signal, computed, effect } from '@angular/core';

  @Component({ selector: 'app-counter', standalone: true, template:

        <div>         <p>Count: {{ count() }}</p>         <p>Double: {{ double() }}</p>         <button (click)="increment()">+</button>         <button (click)="decrement()">-</button>       </div>    

  }) export class CounterComponent { // Writable signal count = signal(0);

  // Computed signal (derived state)
  double = computed(() => this.count() * 2);
  
  // Effect (side effects when signals change)
  constructor() {
    effect(() => {
      console.log(`Count changed to: ${this.count()}`);
    });
  }
  
  increment() {
    this.count.update(c => c + 1);
    // or: this.count.set(this.count() + 1);
  }
  
  decrement() {
    this.count.update(c => c - 1);
  }
  

  }

  // Signal-based service @Injectable({ providedIn: 'root' }) export class CartService { private items = signal<CartItem[]>([]);

  readonly items$ = this.items.asReadonly();
  readonly total = computed(() =>
    this.items().reduce((sum, item) => sum + item.price, 0)
  );
  readonly count = computed(() => this.items().length);
  
  addItem(item: CartItem) {
    this.items.update(items => [...items, item]);
  }
  
  removeItem(id: string) {
    this.items.update(items => items.filter(i => i.id !== id));
  }
  

  }

• name: New Control Flow Syntax description: Built-in @if, @for, @switch replacing structural directives when: Angular 17+ templates example: |

  NEW CONTROL FLOW:

  """ Angular 17 introduced built-in control flow syntax. It's faster, more readable, and enables better optimizations. """

  @Component({ selector: 'app-users', standalone: true, template: ` <!-- @if replaces *ngIf --> @if (loading()) { <app-spinner /> } @else if (error()) { <app-error [message]="error()" /> } @else { <ul> <!-- @for replaces *ngFor --> @for (user of users(); track user.id) { <li>{{ user.name }}</li> } @empty { <li>No users found</li> } </ul> }

    <!-- @switch replaces ngSwitch -->
    @switch (status()) {
      @case ('pending') {
        <span class="badge-yellow">Pending</span>
      }
      @case ('approved') {
        <span class="badge-green">Approved</span>
      }
      @case ('rejected') {
        <span class="badge-red">Rejected</span>
      }
      @default {
        <span>Unknown</span>
      }
    }
  
    <!-- @defer for lazy loading -->
    @defer (on viewport) {
      <app-heavy-component />
    } @placeholder {
      <div>Loading...</div>
    } @loading (minimum 500ms) {
      <app-spinner />
    }
  `
  

  }) export class UsersComponent { loading = signal(false); error = signal<string | null>(null); users = signal<User[]>([]); status = signal<'pending' | 'approved' | 'rejected'>('pending'); }

• name: Smart and Presentational Components description: Separate container logic from presentation when: Building component hierarchies example: |

  SMART/PRESENTATIONAL PATTERN:

  """ Smart components: Handle data, inject services, contain logic Presentational: Receive data via @Input, emit via @Output, no DI """

  // Presentational component - pure, testable @Component({ selector: 'app-user-card', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template:

        <div class="card">         <img [src]="user.avatar" [alt]="user.name" />         <h3>{{ user.name }}</h3>         <p>{{ user.email }}</p>         <button (click)="edit.emit(user)">Edit</button>         <button (click)="delete.emit(user.id)">Delete</button>       </div>    

  }) export class UserCardComponent { @Input({ required: true }) user!: User; @Output() edit = new EventEmitter<User>(); @Output() delete = new EventEmitter<string>(); }

  // Smart component - orchestrates data @Component({ selector: 'app-users-page', standalone: true, imports: [CommonModule, UserCardComponent], template:

        @for (user of users(); track user.id) {         <app-user-card           [user]="user"           (edit)="onEdit($event)"           (delete)="onDelete($event)"         />       }    

  }) export class UsersPageComponent { private userService = inject(UserService); private router = inject(Router);

  users = this.userService.users;
  
  onEdit(user: User) {
    this.router.navigate(['/users', user.id, 'edit']);
  }
  
  onDelete(id: string) {
    this.userService.deleteUser(id);
  }
  

  }

• name: Reactive Forms description: Form handling with FormBuilder and validators when: Complex forms with validation and dynamic fields example: |

  REACTIVE FORMS:

  """ Reactive forms give you full control over form behavior. Use for complex validation, dynamic fields, or when you need to test form logic. """

  import { Component, inject } from '@angular/core'; import { ReactiveFormsModule, FormBuilder, Validators } from '@angular/forms'; import { CommonModule } from '@angular/common';

  @Component({ selector: 'app-register-form', standalone: true, imports: [CommonModule, ReactiveFormsModule], template: ` <form [formGroup]="form" (ngSubmit)="onSubmit()"> <div> <label for="email">Email</label> <input id="email" formControlName="email" /> @if (form.controls.email.errors?.['required'] && form.controls.email.touched) { <span class="error">Email is required</span> } @if (form.controls.email.errors?.['email']) { <span class="error">Invalid email format</span> } </div>

      <div>
        <label for="password">Password</label>
        <input id="password" type="password" formControlName="password" />
        @if (form.controls.password.errors?.['minlength']) {
          <span class="error">Minimum 8 characters</span>
        }
      </div>
  
      <div formGroupName="profile">
        <label for="name">Name</label>
        <input id="name" formControlName="name" />
  
        <label for="bio">Bio</label>
        <textarea id="bio" formControlName="bio"></textarea>
      </div>
  
      <button type="submit" [disabled]="form.invalid">
        Register
      </button>
    </form>
  `
  

  }) export class RegisterFormComponent { private fb = inject(FormBuilder);

  form = this.fb.group({
    email: ['', [Validators.required, Validators.email]],
    password: ['', [Validators.required, Validators.minLength(8)]],
    profile: this.fb.group({
      name: ['', Validators.required],
      bio: ['']
    })
  });
  
  onSubmit() {
    if (this.form.valid) {
      console.log(this.form.value);
      // { email, password, profile: { name, bio } }
    }
  }
  

  }

  // Custom validator function matchPasswords(control: AbstractControl): ValidationErrors | null { const password = control.get('password'); const confirm = control.get('confirmPassword');

  if (password?.value !== confirm?.value) {
    return { passwordMismatch: true };
  }
  return null;
  

  }

• name: HTTP with Interceptors description: Type-safe HTTP calls with request/response interceptors when: API communication example: |

  HTTP CLIENT:

  """ Use HttpClient with typed responses and interceptors for auth tokens, error handling, caching. """

  // Service with typed HTTP @Injectable({ providedIn: 'root' }) export class UserService { private http = inject(HttpClient); private baseUrl = '/api/users';

  getUsers(): Observable<User[]> {
    return this.http.get<User[]>(this.baseUrl);
  }
  
  getUser(id: string): Observable<User> {
    return this.http.get<User>(`${this.baseUrl}/${id}`);
  }
  
  createUser(data: CreateUserDto): Observable<User> {
    return this.http.post<User>(this.baseUrl, data);
  }
  
  updateUser(id: string, data: Partial<User>): Observable<User> {
    return this.http.patch<User>(`${this.baseUrl}/${id}`, data);
  }
  
  deleteUser(id: string): Observable<void> {
    return this.http.delete<void>(`${this.baseUrl}/${id}`);
  }
  

  }

  // Functional interceptor (Angular 17+) export const authInterceptor: HttpInterceptorFn = (req, next) => { const authService = inject(AuthService); const token = authService.getToken();

  if (token) {
    req = req.clone({
      setHeaders: { Authorization: `Bearer ${token}` }
    });
  }
  
  return next(req);
  

  };

  export const errorInterceptor: HttpInterceptorFn = (req, next) => { return next(req).pipe( catchError((error: HttpErrorResponse) => { if (error.status === 401) { inject(Router).navigate(['/login']); } return throwError(() => error); }) ); };

  // Register in app.config.ts export const appConfig: ApplicationConfig = { providers: [ provideHttpClient( withInterceptors([authInterceptor, errorInterceptor]) ) ] };

anti_patterns:

• name: Logic in Templates description: Complex expressions or method calls in templates why: | Templates re-evaluate on every change detection cycle. A method call in the template runs repeatedly. Even simple getters become performance problems at scale. instead: | // WRONG: Method in template

  <div>{{ getFullName() }}</div>

  // RIGHT: Use computed signal or property fullName = computed(() =>

  ${this.firstName()} ${this.lastName()}

  );
  <div>{{ fullName() }}</div>

  // Or for simple cases, a getter with OnPush @Component({ changeDetection: ChangeDetectionStrategy.OnPush }) get fullName() { return

  ${this.firstName} ${this.lastName}

  ; }

• name: Subscribe in Components description: Manual subscription management in components why: | Every subscribe needs an unsubscribe. Forget one, you have a memory leak. Components with multiple subscriptions become a maintenance nightmare. instead: | // WRONG: Manual subscribe ngOnInit() { this.userService.getUser().subscribe(user => { this.user = user; }); }

  // RIGHT: async pipe (auto-unsubscribes) user$ = this.userService.getUser();

  <div>{{ (user$ | async)?.name }}</div>

  // RIGHT: toSignal (converts Observable to Signal) user = toSignal(this.userService.getUser());

  <div>{{ user()?.name }}</div>

  // If you must subscribe, use takeUntilDestroyed private destroyRef = inject(DestroyRef);

  ngOnInit() { this.userService.getUser() .pipe(takeUntilDestroyed(this.destroyRef)) .subscribe(user => this.user = user); }

• name: Default Change Detection description: Using Default change detection on all components why: | Default change detection checks every component on every event. In large apps, this causes performance issues. OnPush only checks when inputs change or events fire. instead: | // WRONG: Default (implicit) @Component({ ... }) export class MyComponent {}

  // RIGHT: OnPush for all presentational components @Component({ changeDetection: ChangeDetectionStrategy.OnPush, ... }) export class MyComponent {}

• name: NgModules for Everything description: Creating NgModules for every feature in new projects why: | NgModules add complexity. Standalone components are simpler, have better tree-shaking, and are the future of Angular. NgModules are still needed for some cases, but shouldn't be default. instead: | // WRONG: Creating modules for everything @NgModule({ declarations: [UserComponent], imports: [CommonModule], exports: [UserComponent] }) export class UserModule {}

  // RIGHT: Standalone component @Component({ standalone: true, imports: [CommonModule], ... }) export class UserComponent {}

• name: Any Types description: Using 'any' to bypass TypeScript why: | Angular's power comes from TypeScript integration. Using 'any' defeats the purpose. You lose autocomplete, refactoring safety, and catch bugs at runtime instead of compile time. instead: | // WRONG data: any; onSubmit(form: any) { ... }

  // RIGHT data: User | null = null; onSubmit(form: FormGroup<UserForm>) { ... }

  // Enable strict mode in tsconfig.json { "compilerOptions": { "strict": true, "noImplicitAny": true } }

handoffs: receives_from: - skill: tailwind-ui receives: Design system and styling approach - skill: graphql-schema receives: API schema for typed clients - skill: firebase receives: Backend integration patterns

hands_to: - skill: testing provides: Components to test with Playwright - skill: devops provides: Build artifacts for deployment - skill: ngrx provides: Complex state management needs

tags:

• angular
• typescript
• frontend
• spa
• enterprise
• rxjs
• signals
• standalone