How data and control move through an Angular app, learned by building one: CareDesk, a small clinic portal. Each topic adds a piece, from an empty shell to login, forms and an API. Every snippet is built and run on Angular 22.
Pages use what ng new gives you today: standalone components, input() / output() / model(), signals, @if / @for, functional guards and OnPush by default. Older forms appear only in "Before / After" cards.
Cyan: data down (inputs, [property]). Orange: events up (outputs, (event)). Violet: two-way (model(), [(x)]). The same colours on every page.
Go in order: each page starts with a "Building CareDesk" strip showing what it adds and what came before. The code on page n is the real CareDesk project at step n.
Topics marked added aren't in the original notes; they fill gaps that matter for modern Angular and interviews.