angular

Angular Component Patterns

Overview

Build accessible, token-driven Angular components using modern patterns including signals, standalone components, and the new control flow syntax. Covers component architecture, TypeScript integration, services, and consuming design tokens.

When to Use

• Creating an Angular component library
• Building components that use design tokens
• Setting up a design system in Angular
• Converting designs to Angular components

The Process

1. Identify component type: Primitive, composite, or layout?
2. Choose styling approach: Component styles, CSS Modules, or Tailwind?
3. Define inputs/outputs: Use signal-based inputs with transforms
4. Implement with tokens: CSS custom properties via styles or host bindings
5. Add accessibility: ARIA, keyboard handling, focus management
6. Create services: Extract shared state and logic

Angular 17+ Features Quick Reference

Feature	Purpose	Example
input()	Signal-based input	variant = input<'primary'>('primary')
output()	Event emitter	clicked = output<void>()
model()	Two-way binding	value = model<string>('')
computed()	Derived signals	isDisabled = computed(() => ...)
@if/@for	Control flow	@if (loading) { ... }
Standalone	No NgModule needed	standalone: true

Project Structure

src/
├── lib/
│   ├── components/
│   │   ├── primitives/
│   │   │   ├── button/
│   │   │   │   ├── button.component.ts
│   │   │   │   ├── button.component.html
│   │   │   │   ├── button.component.css
│   │   │   │   ├── button.component.spec.ts
│   │   │   │   └── index.ts
│   │   │   ├── input/
│   │   │   └── text/
│   │   ├── composite/
│   │   │   ├── card/
│   │   │   ├── modal/
│   │   │   └── dropdown/
│   │   └── layout/
│   │       ├── stack/
│   │       ├── grid/
│   │       └── container/
│   ├── services/
│   │   └── theme.service.ts
│   ├── directives/
│   │   └── focus-trap.directive.ts
│   ├── tokens/
│   │   └── tokens.css
│   └── index.ts
└── public-api.ts