Angular

Signals, dependency injection, and RxJS — the framework's own answer to reactivity, for teams standardized on it.

0 of 30 lessons complete~427 min total

Start track

The Angular Mental ModelAngular isn't a library you assemble a stack around — it's a framework that already made most of the stack's decisions for you. That's the whole trade.12 min
The CLI and Project Anatomy`ng new` doesn't just scaffold folders — it wires up a real esbuild/Vite build pipeline and a working DI-configured app in one command. Here's what it actually generates and why.12 min
Standalone ComponentsA standalone component declares its own dependencies right there in the decorator — no NgModule required. This has been the default since Angular v17, and it changes how you read every component.12 min
Component AnatomyThe @Component decorator is doing more than you think — selector, template, styles, and host bindings are four separate concerns bolted onto one class.12 min
Signals Fundamentalssignal(), computed(), and effect() are the reactive primitive underneath everything modern Angular does — no subscribe, no operators, just a value you call as a function.15 min
Control Flow Syntax: @if, @for, @switchAngular's templates finally speak plain conditionals — @if, @for, and @switch are built into the compiler, not directives you import.14 min
Signal Inputsinput() and input.required() turn component inputs into read-only signals — no more @Input() decorator, no more 'is this defined yet' guessing.12 min
output() and model()output() replaces @Output()/EventEmitter for one-way events out of a component. model() goes further — it's a two-way-bindable signal that makes [(x)] syntax work.13 min
Content Projectionng-content lets a parent hand a component actual markup to render inside itself — Angular's answer to React's children prop, with named slots built in.12 min
Component LifecyclengOnInit and ngOnDestroy still matter — but in a signals-first component, effect() often replaces the hooks you used to reach for in between.14 min
Custom DirectivesA directive is a component without a template — it attaches behavior to an element instead of rendering one. Host bindings and host listeners are how it talks to the DOM.14 min
PipesA pipe is a pure function you can call from a template with `|` syntax — formatting for display, without cluttering the component class with presentation logic.12 min