angular-best-practices

SKILL.md

Angular 21 Best Practices

TypeScript

Use strict type checking

Prefer type inference when type is obvious

Avoid any; use unknown when type is uncertain

Components

Always use standalone components (do NOT set standalone: true — it's the default in v20+)

Set changeDetection: ChangeDetectionStrategy.OnPush

Use input() and output() functions instead of decorators

Use computed() for derived state

Keep components small and single-responsibility

Prefer inline templates for small components

Use Reactive forms over Template-driven

Use class bindings instead of ngClass

Use style bindings instead of ngStyle

For external templates/styles, use paths relative to the component TS file

Do NOT use @HostBinding/@HostListener — use the host object in the decorator instead

State Management with Signals

Use signals for local component state

Use computed() for derived state

Keep state transformations pure and predictable

Do NOT use mutate on signals — use update or set instead

For complex derived state patterns, see references/signal-patterns.md.

Resources (Async Data)

Use resource() for async data fetching with signals:

const userResource = resource({
  params: () => ({ id: userId() }),
  loader: ({ params, abortSignal }) => fetch(`/api/users/${params.id}`, { signal: abortSignal }),
});

const userName = computed(() => userResource.hasValue() ? userResource.value().name : undefined);

Key resource patterns:

params returns undefined → loader doesn't run, status becomes 'idle'

Use abortSignal to cancel in-flight requests

Check hasValue() before accessing value() to handle loading/error states

Status values: 'idle', 'loading', 'reloading', 'resolved', 'error', 'local'

Templates

Use native control flow: @if, @for, @switch (NOT *ngIf, *ngFor, *ngSwitch)

Use async pipe for observables

Keep templates simple — no complex logic

Do NOT use arrow functions in templates (not supported)

Do NOT assume globals like new Date() are available

Services

Single responsibility per service

Use providedIn: 'root' for singletons

Use inject() function instead of constructor injection

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

Routing

Implement lazy loading for feature routes:

export const routes: Routes = [
  {
    path: 'admin',
    loadComponent: () => import('./admin/admin.page').then(m => m.AdminPage),
  },
];

File Naming

Routable view components: file-name.page.ts, file-name.page.html, file-name.page.css

Regular components: file-name.component.ts

Services: file-name.service.ts

Icons (ng-icon)

import { NgIcon, provideIcons } from '@ng-icons/core';
import { heroSparkles, heroTrash } from '@ng-icons/heroicons/outline';

@Component({
  selector: 'app-example',
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [NgIcon],
  providers: [provideIcons({ heroSparkles, heroTrash })],
  template: `<ng-icon name="heroSparkles" />`,
})
export class ExampleComponent {}

Images

Use NgOptimizedImage for all static images

NgOptimizedImage does NOT work for inline base64 images

Styling

Use Tailwind 4.1 for CSS (see tailwind skill if available)

Angular CDK is available when needed

Accessibility

MUST pass all AXE checks

MUST meet WCAG AA minimums: focus management, color contrast, ARIA attributes