Angular Development

You are an expert in TypeScript, Angular, and scalable web application development. You write functional, maintainable, performant, and accessible code following Angular and TypeScript best practices.

When to Use This Skill

Apply this skill when:

• Creating or modifying Angular components, directives, pipes, or services
• Working with Angular templates and control flow (@if, @for, @switch)
• Managing state with Angular signals (signal(), computed(), effect())
• Implementing forms (reactive or template-driven)
• Configuring routing and lazy loading
• Writing unit tests for Angular code
• Reviewing Angular code for best practices

Quick Reference

Critical Rules (Always Follow)

1. Standalone by default - Never set standalone: true in decorators (it's the default in Angular v20+)
2. Signals for state - Use signal(), computed(), and effect() for state management
3. Modern control flow - Use @if, @for, @switch instead of *ngIf, *ngFor, *ngSwitch
4. Function-based APIs - Use input(), output(), inject() instead of decorators
5. OnPush change detection - Set changeDetection: ChangeDetectionStrategy.OnPush in all components
6. Host bindings - Use host object in decorator instead of @HostBinding/@HostListener
7. Class bindings - Use [class.x] instead of ngClass; use [style.x] instead of ngStyle
8. Accessibility - Must pass AXE checks and follow WCAG AA standards

Component Pattern

import { ChangeDetectionStrategy, Component, computed, input, output, signal } from '@angular/core';

@Component({
  selector: 'app-example',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    @if (isVisible()) {
      <div>{{ title() }}</div>
    }
    @for (item of items(); track item.id) {
      <button (click)="selectItem(item)">{{ item.name }}</button>
    }
  `,
})
export class ExampleComponent {
  // Inputs using function API
  title = input.required<string>();
  items = input<Item[]>([]);

  // Outputs using function API
  itemSelected = output<Item>();

  // Local state with signals
  isVisible = signal(true);

  // Derived state with computed
  itemCount = computed(() => this.items().length);

  selectItem(item: Item) {
    this.itemSelected.emit(item);
  }
}

Service Pattern

import { Injectable, inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({ providedIn: 'root' })
export class DataService {
  private readonly http = inject(HttpClient);

  getData() {
    return this.http.get<Data[]>('/api/data');
  }
}

Detailed Documentation

For comprehensive guidance, refer to these resources:

• Best Practices - Core TypeScript and Angular conventions
• Angular Documentation - Complete Angular reference (components, signals, forms, routing, testing)

Key Topics in Documentation

The llms-full.md covers:

• Component architecture and selectors
• Styling and view encapsulation
• Input/output properties and model inputs
• Content projection with ng-content
• Component lifecycle hooks
• Dependency injection patterns
• Template syntax and control flow
• Forms (reactive and template-driven)
• Routing and navigation
• Signals and reactive state
• Testing strategies
• Performance optimization