Angular 58: Capstone — Ship It
easy⏱ 5 mincourseangular
Everything you learned, in one file
Signals (signal, computed), standalone components with typed classes, the @for/track and @if control-flow syntax, inject() for dependency injection, and FormsModule's [(ngModel)] for two-way binding all show up here together — the same building blocks from lessons 1 through 57, just composed into one real feature instead of studied in isolation.
computed() gates the finish line
allDone = computed(() => this.items().every((item) => item.done)) recomputes automatically every time items changes, and it only reads as true when every single item's done flag is true. The template reacts to it with @if (allDone()) — no manual synchronization required anywhere.
allDone = computed(() => this.items().every((item) => item.done));
A service, injected the modern way, adds new items
ChecklistService is injected with private checklistService = inject(ChecklistService); instead of a constructor parameter — the same inject() pattern used for HttpClient back in the services module. It hands back a properly-shaped ChecklistItem, keeping id generation out of the component entirely.
You made it — this is what shipping looks like
Everything in this component is exactly what ng build --configuration production would compile, minify and hash into a real dist/ folder ready for Firebase Hosting, Netlify, or any static file server. From signal(0) in lesson 1 to a full checklist with DI and forms here — that's zero to hero.