frontend-patterns

Files (1)

• SKILL.md

SKILL.md (first lines)

# Angular Frontend Patterns

Best practices and conventions for Angular development.

## Component Architecture

### Prefer Standalone Components
```typescript
@Component({
  selector: 'app-my-component',
  standalone: true,
  imports: [CommonModule, RouterModule, MyOtherComponent],
  templateUrl: './my-component.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class MyComponent {}
```

- Always use `standalone: true` for new components
- Always set `changeDetection: ChangeDetectionStrategy.OnPush`
- Import only what the template needs — no `SharedModule` catch-alls

### Smart vs Dumb Components
- **Smart (container)**: Inject services, manage state, handle side effects
- **Dumb (presentational)**: Accept inputs, emit outputs, no service injection
- Keep dumb components pure — same inputs → same rendered output

### Component File Structure
```
my-feature/
├── my-feature.component.ts
├── my-feature.component.html
├── my-feature.component.scss
├── my-feature.component.spec.ts
└── index.ts   ← public API barrel export
```

---

## Signals (Angular 17+)

Prefer signals over BehaviorSubject for local component state:

```typescript
// ✅ Signals
export class MyComponent {
  count = signal(0);
  doubled = computed(() => this.count() * 2);

  increment() {
    this.count.update(c => c + 1);
  }
}

// ❌ Avoid for simple local state
private count$ = new BehaviorSubject(0);
```

Use `toSignal()` to bridge observables into signals:
```typescript
data = toSignal(this.service.getData$(), { initialValue: [] });
```

---

## RxJS Patterns

### Async Pipe — Always Prefer Over Manual Subscribe
```html
<!-- ✅ -->
<div *ngIf="data$ | async as data">{{ data.name }}</div>

<!-- ❌ Avoid manual subscribe in components -->
```

### Unsubscription
```typescript
// ✅ takeUntilDestroyed (Angular 16+)
this.service.data$.pipe(
  takeUntilDestroyed(this.destroyRef)
).subscribe(data => this.data = data);

// ✅ async pipe (preferred — no manual sub needed)
```

### Error Handling in Streams
```typescript
this.service.load().pipe(
  catchError(err => {
    this.error.set(err.message);
    return EMPTY;
  })
).subscribe();
```

### Common Operators Cheatsheet
| Goal | Operator |
|------|----------|
| Map + flatten one active at a time | `switchMap` |
| Map + flatten all, preserve order | `concatMap` |
| Map + flatten all in parallel | `mergeMap` |
| Ignore new while processing | `exhaustMap` |
| Deduplicate rapid emissions | `debounceTime` |
| Suppress duplicate values | `distinctUntilChanged` |

---

## Services

```typescript
@Injectable({ providedIn: 'root' })
export class MyService {
  private http = inject(HttpClient);

  getData(): Observable<MyData[]> {
    return this.http.get<MyData[]>('/api/data').pipe(
      shareReplay(1)
    );
  }

From galorr/claude-code-starter, MIT.

More from galorr/claude-code-starter