Angular UI / Presentation Layer Best Practices

When to Use

• Creating new components, feature folders, or routed views in an Angular app
• Configuring the router, lazy-loaded routes, route data/resolvers, or navigation
• Building reactive (typed) or template-driven forms and validation
• Consuming HTTP APIs with HttpClient, and wiring functional interceptors
• Adding route guards (CanActivate, CanMatch) and an auth/bearer-token interceptor
• Implementing client-side error handling (global ErrorHandler, HTTP error interceptor)
• Reviewing or restructuring an existing Angular app to align with best practices

This skill covers the UI / presentation layer (the client analogue of a web API's HTTP layer). For dependency injection, the typed-config/provide pattern, and modern TypeScript idioms that apply to any Angular surface, see angular-fundamentals. For reactive data and state management, see angular-state.

Core Principles