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.
- 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 a reactive request: you give it a `re...
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