Topolearn

Learn Angular

Batteries-included TypeScript framework with signals and standalone components

26 lessons · 5 hours · 4 levels · covers Angular 22

Angular is a complete, opinionated framework from Google for building web applications in TypeScript, with routing, forms, HTTP, testing and server rendering built in. Modern Angular is built on standalone components, signals for fine-grained reactivity and a new template control flow, and runs zoneless by default. It is popular for large enterprise apps where consistency and long-term structure matter.

Sign in free to track progressOfficial docs ↗

Before you start

Angular builds on these; the tree links to the exact lessons you need.

TypeScriptEssentials level

How deep do you want to go?

1. EssentialsRead and write simple code, do the everyday basics9 lessons · 2 hours in total
2. PracticalUse it productively at work, with the usual idioms17 lessons · 3 hours in total
3. AdvancedThe less common features, performance and trade-offs23 lessons · 5 hours in total
4. ExpertInternals and the edge cases experts know26 lessons · 5 hours in total

The Angular tree

AngularThe Angular CLI and project structureThe Angular CLI andproject structureComponentsComponentsTemplate bindingsTemplate bindingsEvent bindingEvent bindingControl flow: @if, @for, @switchControl flow: @if,@for, @switchSignals: signal and computedSignals: signal andcomputedInputs and outputsInputs and outputsServices and dependency injectionServices anddependency injectionPipesPipeseffect, linkedSignal and untrackedeffect, linkedSignaland untrackedTwo-way binding with model()Two-way bindingwith model()Content projection and queriesContent projectionand queriesLifecycle hooks, DestroyRef and render hooksLifecycle hooks,DestroyRef and ren…RoutingRoutingHttpClient and interceptorsHttpClient andinterceptorsAsync data with resource and httpResourceAsync data withresource and httpR…Signal formsSignal formstsc and tsconfig.jsontsc and tsconfig.jsonType annotations and inferenceType annotations andinferenceUnion and literal typesUnion and literaltypesObject types and interfacesObject types andinterfaces
Essentials and Practical shown (17 of 26 lessons); the full list is below. Click a lesson to read it.

All 26 lessons, in order

Getting started

  1. The Angular CLI and project structure · Essentials · 10 min

    Create, serve and build an app with the Angular CLI, and know what the generated files do.

  2. Components · Essentials · 12 min

    Define a component with @Component: selector, template, styles and imports, and use it from another component.

  3. Services and dependency injection · Essentials · 12 min

    Put shared logic and state in services and get them anywhere with inject().

Templates

  1. Template bindings · Essentials · 11 min

    Show data with interpolation and bind DOM properties, attributes, classes and styles with square brackets.

  2. Event binding · Essentials · 9 min

    Respond to user actions with (event) bindings, read $event, and use key event filters.

  3. Control flow: @if, @for, @switch · Essentials · 11 min

    Render conditionally and repeat elements with the built-in @if, @for (with track) and @switch blocks.

  4. Pipes · Essentials · 9 min

    Format values in templates with built-in pipes like date, currency and json, and write a custom pure pipe.

Signals and reactivity

  1. Signals: signal and computed · Essentials · 12 min

    Hold state in signals, update it with set and update, and derive values with computed.

  2. effect, linkedSignal and untracked · Practical · 13 min

    Run side effects when signals change, create writable state that resets from a source, and read signals without tracking.

  3. RxJS and signals interop · Advanced · 13 min

    Bridge Observables and signals with toSignal, toObservable, takeUntilDestroyed, rxResource and outputFromObservable.

Components

  1. Inputs and outputs · Essentials · 12 min

    Pass data into components with input() and send events out with output().

  2. Two-way binding with model() · Practical · 9 min

    Build components that support [(value)] two-way binding with model() signals.

  3. Content projection and queries · Practical · 12 min

    Pass markup into components with ng-content and reach child elements and components with viewChild and contentChild.

  4. Lifecycle hooks, DestroyRef and render hooks · Practical · 11 min

    Run code at the right moment: ngOnInit, ngOnChanges, ngOnDestroy, DestroyRef, afterNextRender and afterRenderEffect.

  5. Attribute directives and host bindings · Advanced · 12 min

    Add reusable behaviour to elements with attribute directives, host bindings and listeners, and compose them with hostDirectives.

Routing, HTTP and testing

  1. Routing · Practical · 15 min

    Configure routes, render them with router-outlet, link with routerLink, lazy-load components and read params as inputs.

  2. HttpClient and interceptors · Practical · 14 min

    Call APIs with HttpClient, type responses, handle errors and add cross-cutting behaviour with functional interceptors.

  3. Async data with resource and httpResource · Practical · 13 min

    Load async data as signals with httpResource and resource: reactive params, loading and error state, reload and abort.

  4. Route guards, resolvers and redirects · Advanced · 12 min

    Protect routes with functional guards (canActivate, canMatch, canDeactivate) and preload data with resolvers.

  5. Testing components and services · Advanced · 15 min

    Unit-test Angular code with TestBed and Vitest: configure providers, render components, await stability and mock HTTP.

Forms

  1. Signal forms · Practical · 15 min

    Build typed, validated forms from a signal model with form(), schema validators and the [formField] directive.

  2. Reactive forms · Advanced · 14 min

    Work with the established FormGroup/FormControl API: typed forms, validators, formControlName and valueChanges.

Performance and internals

  1. Deferrable views with @defer · Advanced · 12 min

    Lazy-load parts of a template with @defer, triggers like on viewport and on interaction, prefetching and placeholder blocks.

  2. Change detection: zoneless and OnPush · Expert · 16 min

    Understand how Angular decides what to re-render: signals, OnPush (now the default), zoneless scheduling and markForCheck.

  3. Hierarchical injectors and providers · Expert · 16 min

    Master the injector tree: environment vs element injectors, provider types, InjectionToken, multi providers and resolution modifiers.

  4. SSR, hydration and render modes · Expert · 16 min

    Render Angular on the server, choose per-route render modes, hydrate with event replay and incremental hydration, and avoid SSR pitfalls.