Master Angular v22: from fundamentals to production
Standalone components, signals, modern control flow, dependency injection, routing, and reactive forms. Monaco editor with static verification—learn by doing.
Let’s figure it out.
Ask me about this course or where to start.
- Step 1
Angular 1: What Is Angular? Your First Standalone Component
Angular is a full, opinionated application framework: components, dependency injection, routing, for...
Start Lesson - Step 2
Angular 2: Templates & Interpolation
A component's template is just HTML with a few extra superpowers. The simplest one is interpolation:...
Start Lesson - Step 3
Angular 3: Property & Attribute Bindings
Square brackets bind an expression to a DOM property: [src]="url" sets the actual img.src property, ...
Start Lesson - Step 4
Angular 4: Event Binding
Parentheses bind a DOM event to a handler: (click)="save()" runs save() whenever the element is clic...
Start Lesson - Step 5
Angular 5: Signals — Reactivity Basics
A signal is a small reactive container for a value. Create one with signal(initialValue), read its c...
Start Lesson - Step 6
Angular 6: Conditional Rendering with @if
Angular's modern control-flow syntax lives directly inside the template: @if (condition) { ... } @el...
Start Lesson - Step 7
Angular 7: List Rendering with @for
@for (item of items(); track item.id) { ... } loops over a collection and renders its block once per...
Start Lesson - Step 8
Angular 8: Two-Way Binding
[(ngModel)]="value" combines a property binding and an event binding into one "banana in a box" synt...
Start Lesson - Step 9
Angular 9: Computed Signals
computed(() => ...) creates a read-only signal derived from other signals. Angular automatically fig...
Start Lesson - Step 10
Angular 10: Class & Style Bindings
[class.active]="isActive()" toggles a single CSS class on and off based on a boolean expression — th...
Start Lesson - Step 11
Angular 11: Signals Deep Dive — Objects, Arrays & Immutable Updates
Signals are shallow: Angular only detects a change when a signal is written to a brand-new value ref...
Start Lesson - Step 12
Angular 12: computed() Deep Dive — Chaining & Purity
A `computed()` can read another `computed()` — Angular builds a dependency graph and only recalculat...
Start Lesson - Step 13
Angular 13: effect() — Running Side Effects
`effect(() => {...})` runs its callback once immediately, then automatically re-runs it whenever any...
Start Lesson - Step 14
Angular 14: effect() Cleanup & Injection Context
An effect's callback can register a cleanup function — via the `onCleanup` parameter Angular passes ...
Start Lesson - Step 15
Angular 15: input() — Signal Inputs
`input<T>(default)` declares a signal-backed component property the PARENT sets via a template bindi...
Start Lesson - Step 16
Angular 16: output() — Signal Outputs
`output<T>()` declares an event a component can emit upward, replacing `@Output() foo = new EventEmi...
Start Lesson - Step 17
Angular 17: model() — Two-Way Bound Signal Props
`model<T>(default)` declares a signal-backed prop that supports two-way binding: the parent uses ban...
Start Lesson - Step 18
Angular 18: Lifecycle Hooks — ngOnInit, ngOnChanges, ngOnDestroy
Angular calls specific methods on your component class at specific moments — implement `OnInit`/`OnC...
Start Lesson - Step 19
Angular 19: Legacy vs. Signals — A Migration Mindset
You will meet plenty of existing Angular code written the old way: Zone.js-driven change detection, ...
Start Lesson - Step 20
Angular 20: untracked() & Effect Scheduling
Reading a signal inside `effect()` or `computed()` automatically registers it as a dependency. Somet...
Start Lesson - Step 21
Angular 21: Component Basics & Composition
Every Angular UI is a tree of components: small, self-contained classes that each own a selector, a ...
Start Lesson - Step 22
Angular 22: Content Projection with <ng-content>
Whatever markup a parent writes BETWEEN a component's opening and closing tags gets projected wherev...
Start Lesson - Step 23
Angular 23: Multi-Slot Content Projection
A single default `<ng-content />` slot works when a child only needs one blob of projected markup, b...
Start Lesson - Step 24
Angular 24: @ContentChild
`<ng-content>` only lets a child DISPLAY whatever the parent projects into it — it doesn't give the ...
Start Lesson - Step 25
Angular 25: @ViewChild
`@ContentChild` reaches into content the PARENT projected in; `@ViewChild` reaches into elements and...
Start Lesson - Step 26
Angular 26: Dependency Injection & inject()
Angular's dependency injection means components don't construct their own dependencies — they declar...
Start Lesson - Step 27
Angular 27: [ngClass] / [ngStyle] Deep Dive & Host Bindings
A single `[class.x]="cond"` binding toggles one class; `[ngClass]="{ a: condA, b: condB }"` toggles ...
Start Lesson - Step 28
Angular 28: Custom Attribute Directives
Components have a template; directives don't — they attach BEHAVIOR to an existing element instead. ...
Start Lesson - Step 29
Angular 29: @switch for Multi-Branch Control Flow
A chain of `@if / @else if / @else if / @else` works for multi-branch rendering, but once you're com...
Start Lesson - Step 30
Angular 30: Component Composition Capstone
This module's ideas compose: `<ng-content>` projects arbitrary markup into a slot, `@ContentChildren...
Start Lesson - Step 31
Angular 31: Template-Driven Forms Deep Dive
Template-driven forms let Angular build the form model for you from the template itself: you sprinkl...
Start Lesson - Step 32
Angular 32: Reactive Forms Basics
Reactive forms flip the template-driven model on its head: instead of letting the template infer the...
Start Lesson - Step 33
Angular 33: Reactive Forms Validation
Validators are plain functions that Angular runs against a control's value to decide whether it's va...
Start Lesson - Step 34
Angular 34: FormArray — Dynamic Form Fields
A `FormArray` is the reactive-forms answer to a variable-length list of fields — a `FormGroup` gives...
Start Lesson - Step 35
Angular 35: Angular Router Basics
The Angular Router maps URL paths to components. A `Routes` array of `{ path, component }` pairs des...
Start Lesson - Step 36
Angular 36: Route Parameters & Guards
Real routes usually need to carry data in the URL itself — `path: 'user/:id'` captures whatever segm...
Start Lesson - Step 37
Angular 37: Angular Animations
The `@angular/animations` package lets you describe animations declaratively, as data, right alongsi...
Start Lesson - Step 38
Angular 38: Module D Capstone — A Form + Routing Feature
This capstone stitches together everything from Module D into one small, realistic feature: a sign-u...
Start Lesson - Step 39
Angular 39: Services & providedIn: 'root'
A service is just a plain class — what makes it special is the `@Injectable({ providedIn: 'root' })`...
Start Lesson - Step 40
Angular 40: HttpClient Basics
`inject(HttpClient).get<T>(url)` returns an RxJS `Observable<T>` — nothing happens until something s...
Start Lesson - Step 41
Angular 41: RxJS Observables Fundamentals
A Promise resolves once with a single value. An Observable is a stream: it can push zero, one, or ma...
Start Lesson - Step 42
Angular 42: Combining Signals + RxJS
`toSignal(observable$, { initialValue })` reads an Observable's latest emitted value as a signal — t...
Start Lesson - Step 43
Angular 43: Custom Services with Signals as a State Store
The same pattern you'd recognize as a 'store' in Pinia, Zustand, or a Svelte store maps directly ont...
Start Lesson - Step 44
Angular 44: Dependency Injection Tokens
`inject()` works great for classes, but sometimes what you want to inject is a plain value — a confi...
Start Lesson - Step 45
Angular 45: HTTP Interceptors
An interceptor sits between every HttpClient call and the network, letting you transform requests (o...
Start Lesson - Step 46
Angular 46: State Management Patterns
Everything you've built since lesson 43 — a service with a private signal, a computed selector, and ...
Start Lesson - Step 47
Angular 47: The Resource API
`resource()` is a declarative primitive for async data tied to reactive parameters: you give it a `p...
Start Lesson - Step 48
Angular 48: Module E Capstone
Time to combine everything from this module into one small, realistic feature: a signal-based store ...
Start Lesson - Step 49
Angular 49: TypeScript with Angular
Angular isn't a JavaScript framework with optional typings bolted on — it's TypeScript-first by desi...
Start Lesson - Step 50
Angular 50: Testing Components
Angular ships with first-class testing support built on Jasmine and the Angular `TestBed`. `TestBed....
Start Lesson - Step 51
Angular 51: Standalone APIs & bootstrapApplication
Every Angular app needs an entry point that boots the root component into the browser. Modern Angula...
Start Lesson - Step 52
Angular 52: Performance — OnPush Change Detection & track
By default, Angular re-checks every component on every change-detection cycle — cheap for small apps...
Start Lesson - Step 53
Angular 53: Accessibility Basics
Accessibility isn't a separate library in Angular — it's plain HTML semantics and a handful of templ...
Start Lesson - Step 54
Angular 54: Error Handling
Uncaught errors anywhere in an Angular app — a broken template expression, a failed subscription, a ...
Start Lesson - Step 55
Angular 55: Environment Variables & Configuration
Angular CLI apps keep per-environment settings in plain TypeScript files — `environment.ts` for deve...
Start Lesson - Step 56
Angular 56: Production Build & Deployment
`ng build --configuration production` compiles the app Ahead-of-Time (AOT), minifies and tree-shakes...
Start Lesson - Step 57
Angular 57: Migration Mindset — NgModules vs Standalone
Before standalone components, every Angular app needed at least one `@NgModule` — a root `AppModule`...
Start Lesson - Step 58
Angular 58: Capstone — Ship It
This is it — the last stop. Every piece from this course lands in one component: `signal()` and `com...
Start Lesson