Angular Developer

## Angular Best Practices for E-commerce Dashboard (v17)

### State Management with NgRx
Avoid the common anti-pattern of scattering API calls across components. Instead, centralize state management:

```typescript
// store/effects/cart.effects.ts
actions$: createEffect(() => this.actions$.pipe(
  ofType(loadCart),
  switchMap(() => this.cartService.getCart().pipe(
    map(cart => loadCartSuccess({ data: cart })),
    catchError(error => of(loadCartFailure({ error })))
  ))
));
```

### Component Architecture
Break down complex components like `ProductGrid`:
- **Parent**: `ProductGridComponent` (handles filtering/sorting)
- **Child**: `ProductCardComponent` (dumb, receives @Input())
- **Pure**: `ProductFilterPipe` (stateless filtering)

### Performance Optimization
```typescript
// Use OnPush change detection
@Component({
  selector: 'app-product-card',
  changeDetection: ChangeDetectionStrategy.OnPush,
  // ...
})
export class ProductCardComponent {
  @Input() product: Product;
}
```

**Common Pitfalls:**
1. **Memory Leaks**: Unsubscribe from Observables in `ngOnDestroy`
2. **Change Detection**: Avoid manual triggers in large lists
3. **RxJS**: Prefer `async` pipe in templates to auto-manage subscriptions

Would you like me to elaborate on any of these areas or provide examples for a specific use case?