Best Practices & Common Mistakes
A capstone review of the habits that separate a well-built Angular app from one that fights the framework.
Component Architecture
- Default to standalone components for all new code — they're simpler and are the modern recommended approach.
- Keep components small and focused; extract a subtree once it takes on its own clear responsibility.
- Prefer ng-content for passing markup, and @Input()/input() for passing data — don't force one to do the other's job.
- Set changeDetection: OnPush on presentational components fed entirely by inputs.
Signals, State & Services
- Prefer signal()/computed()/input() for new code — they enable more precise, efficient updates than plain properties.
- Keep local, single-component state in a signal; reach for a shared, providedIn: 'root' service only for state genuinely used across unrelated components.
- Always inject services through the constructor or inject() — never construct one with new.
- Unsubscribe from any long-lived Observable subscription in ngOnDestroy, or use the async pipe to avoid the issue entirely.
Common Mistakes, Revisited
Angular compares references — always create a new object/array so change detection (or a computed signal) correctly notices the update.
This bypasses Angular's DI system entirely, creating a disconnected instance that won't share state or be mockable in tests the standard way.
Any subscription that outlives a single emission needs a matching unsubscribe() in ngOnDestroy — or use the async pipe, which handles this automatically.
Guards run entirely client-side — always enforce real authorization on your backend API as well.
Where to Go From Here
Build a Real Project
A task manager with a signal-based store and reactive forms exercises nearly everything covered in this course.
Read the Official Docs
angular.dev is Angular's modern documentation site, kept current with standalone components and signals.
Explore Angular Universal & NgRx
If you need SSR or large-scale state management, both build directly on everything you've learned here.
FAQs
Only if you'll maintain an existing NgModule-based codebase — for new projects, the standalone components and signals covered in this course are the recommended starting point.
A small e-commerce product catalog with a signal-based cart store and route guards for a checkout flow touches components, signals, routing, forms, and services all at once.
Summary
You've now covered components and templates, standalone components and Signals, services and dependency injection, RxJS, the Angular Router, template-driven and reactive forms, and Angular Universal for SSR — the full surface of building a production Angular application. The best next step is building something real with it.