Angular Course Roadmap and Complete Topic Index (Beginner to Advanced)

This page is the map of the whole course. Use it to see what exists, to jump to a topic, or to plan your learning. Every lesson has a short example, the logic behind it, a "Try it yourself" task and a quick check.

How to use this page

• New to Angular? Start at section 1 and follow the "Next" link at the end of each lesson.
• Know the basics? Pick a topic below and jump straight in.
• Reading old code? Look for the lessons marked legacy. They explain APIs that still exist but that new code should avoid, and they show the modern replacement.

Legacy APIs you will meet in old projects

• NgModules: see NgModules and migrating to standalone.
• ***ngIf, *ngFor, *ngSwitch**: see the legacy structural directives lesson. Use @if, @for and @switch instead.
• `CanLoad`: replaced by canMatch, in guards, resolvers and preloading.
• `APP_INITIALIZER`: replaced by provideAppInitializer, in application configuration.
• `retryWhen`: replaced by retry with a delay option, in RxJS error handling.
• SystemJS and Webpack: explained in module loaders.

1. Getting started

• What is Angular? A Beginner's Introduction: What Angular is, what problems it solves, how its building blocks fit together, and when it is the right choice for your next web app.
• TypeScript Basics for Angular: The TypeScript you need for Angular: types, interfaces, classes, functions and generics, explained with short examples you can run.
• Install Node.js and the Angular CLI: Set up your computer for Angular: install Node.js, the Angular CLI and a code editor, check the versions and fix the most common errors.

2. Your first app

• Create Your First Angular App with the CLI: Create a new Angular project with ng new, start the development server, open it in the browser and edit the page to see it update instantly.
• Angular Project Structure Explained: A guided tour of the files the Angular CLI creates, including main.ts, app.ts, app.config.ts and angular.json, and how they work together.
• Your First Angular Component: Generate and build an Angular component with ng generate, understand the @Component decorator and use the new component inside your root component.
• Angular CLI Guide: ng new, ng update, Multiple Apps and Multiple Angular Versions: Master the Angular CLI: create projects with ng new, check your version, upgrade safely with ng update, host several apps in one workspace, and run projects with different Angular and Node versions.

3. Components and templates

• Displaying Data in Angular with Interpolation: Show values from your component class in the template with {{ }} interpolation, including expressions, method calls, objects and what is not allowed.
• Property Binding and Event Binding in Angular: Control element properties with [brackets], react to clicks and typing with (parentheses), and toggle classes and attributes with practical examples.
• Angular Two-Way Binding: ngModel, ngModelChange and Input Events: Learn two-way binding in Angular with [(ngModel)] and signals, split it into [ngModel] and (ngModelChange), use input and change events and fix the EventTarget value error.
• Angular Signals: Reactive State for Beginners: Learn what Angular signals are, how to create, read, set and update them, and why they are the recommended way to keep your screen in sync with data.
• Angular Styling: Global Styles, Component Styles, View Encapsulation, Bootstrap and Font Awesome: Style Angular apps the right way: global styles, component styles, :host, view encapsulation modes, class and style binding, responsive design, and adding Bootstrap and Font Awesome with the CLI.

4. Control flow and lists

• Conditional Rendering in Angular with @if, @else and @switch: Show or hide parts of a template with Angular's built-in @if, @else if, @else and @switch blocks, with examples for empty states and loading screens.
• Rendering Lists in Angular with @for and track: Display lists with Angular's @for block, learn why track matters, handle empty lists with @empty and use built-in variables like $index and $last.
• Angular ngIf, ngFor, ngSwitch and trackBy: Legacy Syntax and Migration: Read older Angular code with *ngIf, *ngFor, ngSwitch and trackBy, compare each with @if, @for and @switch, and migrate a project with the control-flow schematic.
• Angular ngClass, ngStyle, Class Binding and Style Binding Explained: Style elements dynamically in Angular with [class.name], [style.width.px], ngClass and ngStyle. Learn which one to choose, with a status badge and a progress bar example.

5. Signals and reactive state

• Computed Signals and Effects in Angular: Derive values from other signals with computed(), understand lazy and cached results, and learn when an effect() is the right tool.
• Signals in Practice: Build a Shopping Cart: Combine signals, computed values, @for and @if to build a small shopping cart with quantities, removal, totals and an empty state.

6. Reusable components

• Angular Component Inputs: Pass Data to Child Components: Make components reusable by passing data in with the input() function, including required inputs, default values and a course card example.
• Angular Component Outputs and Two-Way Binding with model(): Send events from a child component to its parent with output(), emit data, and keep two components in sync with the model() function and [(value)] syntax.
• Angular Pipes: Format Dates, Currency and Text: Format data in templates with Angular's built-in pipes such as date, currency, percent and uppercase, and write your own custom pipe step by step.
• Angular Built-in Pipes: Date, Async, KeyValue and Using Pipes in Code: Master Angular's most useful built-in pipes: date formats, the async pipe for Observables, keyvalue for objects, slice and json, and how to use pipes inside components and services.
• Angular Lifecycle Hooks: OnInit, OnDestroy, OnChanges, DoCheck and More: Understand the Angular component lifecycle with ngOnInit, ngOnDestroy, ngOnChanges, ngDoCheck and the after-view and after-content hooks, plus modern alternatives like afterNextRender.
• Template Reference Variables, ng-container, ViewChild and ContentChild in Angular: Learn template reference variables, ng-container, viewChild, viewChildren, contentChild and QueryList. Focus inputs, read child components and control the DOM the Angular way.

7. Services and dependency injection

• Angular Services and Dependency Injection Explained: Learn what Angular services are, how dependency injection gives components the services they need, and how to create and inject your first service.
• Share State Between Components with an Angular Service: Build a signal-based service that stores tasks, expose read-only state and actions, and use it in two separate components that stay in sync.
• Angular Hierarchical Dependency Injection: Providers, @Self, @SkipSelf, @Optional, @Host: Understand how Angular looks up dependencies up the tree. Learn @Injectable, @Inject, Injector, singleton services, providedIn root and platform, viewProviders and the self, skipSelf, optional and host options.

8. Forms and validation

• Angular Reactive Forms for Beginners: Build your first Angular reactive form with FormGroup, FormControl and FormBuilder, handle submission, read typed values and reset the form.
• Angular Form Validation: Built-in and Custom Validators: Add required, email and length validators, show friendly accessible error messages, write a custom validator and compare two fields in a registration form.
• Angular Template-Driven Forms with ngModel: Learn template-driven forms in Angular with FormsModule and ngModel, add required and email validation, and know when to choose them over reactive forms.
• FormControl, FormGroup, FormBuilder, setValue, patchValue, valueChanges and statusChanges: Learn the building blocks of Angular reactive forms in depth: FormControl, FormGroup, nested groups, FormBuilder, setValue versus patchValue, reset, valueChanges and statusChanges, with examples.
• Angular Forms: Select Dropdowns, Checkboxes, Radio Buttons, Typed Forms and FormRecord: Build every kind of Angular form field: select dropdowns with objects and compareWith, radio groups, checkboxes, multi-select, plus typed forms and FormRecord for dynamic keys.
• Angular Advanced Form Validation: Custom, Async, Cross-Field and setValidators: Write custom validators with parameters, inject services into validators, check usernames with async validators, validate across fields, change rules with setValidators and build template-driven validator directives.

9. Routing and navigation

• Angular Routing Basics: Pages, RouterLink and RouterOutlet: Learn Angular routing step by step. Define routes, show pages with RouterOutlet, link with RouterLink, highlight the active link and add a not-found page.
• Angular Route Parameters and Query Parameters: Read route parameters and query parameters in Angular with component input binding, build a product list and detail page, and navigate from code with Router.
• Angular Router Navigation: ActivatedRoute, Query Params, Route Data and Router Events: Navigate in code with Router.navigate, read ActivatedRoute params, query params and route data, style links with RouterLinkActive, listen to router events and get the current URL.
• Angular Route Guards: Protect Pages with CanActivateFn: Protect Angular routes with functional guards. Build a login service, an authGuard with CanActivateFn and a redirect back to the page the user wanted.
• Angular Guards: CanActivateChild, CanDeactivate, Resolve, canMatch and Preloading: Learn the rest of Angular route guards: canActivateChild, canDeactivate for unsaved changes, resolve for data before a page, canMatch (the replacement for CanLoad) and a custom preloading strategy.
• Angular Lazy Loading: Load Routes and Components on Demand: Speed up your Angular app with lazy loading. Use loadComponent and loadChildren, see separate chunks in the build output and learn when to defer with @defer.

10. HTTP and RxJS

• Angular HttpClient: Get Data from an API with a Service: Fetch data from a REST API in Angular with HttpClient. Set up provideHttpClient, type the response, build a service and show data with toSignal.
• Angular HTTP: Loading State, Error Handling and POST Requests: Build a robust Angular data flow. Track loading and error state with signals, retry failed requests, send data with POST and update the list after saving.
• Angular HTTP: Query Parameters, Headers, PUT, PATCH and DELETE Requests: Learn HttpClient in full. Pass URL and query parameters with HttpParams, set HTTP headers, send PUT, PATCH and DELETE requests, read full responses and upload and download data.
• RxJS Basics for Angular: Observables and Operators: Understand RxJS in Angular without the confusion. Learn Observables, subscribe, map, filter, switchMap and debounceTime, and build a live search box.
• RxJS Observables Explained: Create from Arrays, Strings, Events with of, from and fromEvent: Learn how to create Observables in RxJS: of, from, range, interval, timer, fromEvent, defer and new Observable, subscribe with next, error and complete, and chain map and filter with pipe.
• RxJS take, takeUntil, takeWhile, first, last, single, skip and tap Operators: Learn the RxJS filtering and utility operators with examples: tap, take, takeUntil, takeWhile, takeLast, first, last, single, skip, skipWhile, skipUntil, skipLast and distinctUntilChanged.
• RxJS scan, reduce, debounceTime, debounce, delay and delayWhen Explained: Understand the RxJS operators scan, reduce, debounceTime, debounce, throttleTime, delay and delayWhen with simple examples and tests, and learn when to use each in Angular.
• RxJS Error Handling: throwError, catchError, retry, retryWhen and finalize: Handle errors in RxJS and Angular: throwError, catchError with fallbacks and rethrow, retry with count and exponential backoff, the deprecated retryWhen, finalize, and how to unsubscribe safely.
• RxJS Subjects in Angular: Subject, BehaviorSubject, ReplaySubject and AsyncSubject: Learn RxJS Subjects with clear examples: Subject, BehaviorSubject, ReplaySubject and AsyncSubject, a notification service, hot versus cold Observables and when signals are the better choice.

11. Testing, accessibility and performance

• Test Angular Components and Services with Vitest: Write unit tests for Angular 22 with Vitest. Test a signal component with TestBed, test an HTTP service with HttpTestingController and run tests with ng test.
• Angular Accessibility: Build Apps Everyone Can Use: Learn the essential Angular accessibility habits: semantic HTML, labels, keyboard support, focus after navigation, live regions and quick Lighthouse checks.
• Angular Performance and Production Build Checklist: Make an Angular app faster. Learn the production build, bundle budgets, OnPush, track in loops, images with NgOptimizedImage and a simple pre-release checklist.

12. Projects and deployment

• Angular Project 1: Build a Task Manager App Step by Step: Build a complete Angular Task Manager with signals, reactive forms, filters, priorities and localStorage saving. Full verified code and a unit test included.
• Angular Project 2: Employee Management Dashboard (Guided): A guided Angular project: build an employee dashboard with a searchable, sortable table, department filter, detail route and add form. Starter code included.
• Angular Project 3: Online Learning Platform (Capstone): A capstone Angular project: build a learning platform with courses, lessons, progress tracking, a login guard and lazy routes. Plan, starter code and checklist.
• Deploy an Angular App: Netlify, Firebase and Nginx: Deploy your Angular app step by step. Build for production, fix refresh 404 errors with an SPA fallback and publish to Netlify, Firebase or Nginx.

13. Advanced signals and data loading

• Angular effect() and linkedSignal(): Advanced Signals: Go deeper with Angular signals. Learn when to use effect(), why computed() is usually better, how linkedSignal() resets state and how untracked() avoids loops.
• Angular resource() and httpResource(): Signal-Based Data Loading: Load data the signal way with httpResource() and resource(). Get loading, error and reload states built in, and learn when to use RxJS instead.

14. Directives and dynamic UI

• Angular Custom Directives: Attribute Directives and Host Bindings: Build reusable behaviour with Angular directives. Create highlight and click-outside directives, use host bindings and listeners, and add inputs and outputs.
• Angular Content Projection: ng-content, ng-template and Template Outlets: Build flexible Angular components with ng-content slots, ng-template, ngTemplateOutlet and contentChild so parents can customise how a card or list renders.
• Angular Dynamic Components and Host Directives: Render Angular components chosen at run time with NgComponentOutlet and ViewContainerRef, then compose behaviour without inheritance using host directives.
• Angular ElementRef, Renderer2, HostBinding, HostListener and Legacy Decorators: Work with the DOM safely in Angular. Learn ElementRef, Renderer2, @HostBinding, @HostListener, the old @Input and @Output with EventEmitter, and the modern host property.

15. Architecture, configuration and errors

• Angular Injection Tokens and Providers: Configuration and Testing: Master Angular dependency injection with InjectionToken, useValue, useClass, useFactory and multi providers, and learn how provider scope affects instances.
• Angular HTTP Interceptors: Auth Tokens, Errors and Loading State: Handle cross-cutting HTTP concerns in one place. Write functional Angular interceptors for auth headers, global error handling, retries and a loading indicator.
• Angular Project Architecture: Features, Folders and Clean Boundaries: Structure a growing Angular app with feature folders, smart and presentational components, facades, strict TypeScript, linting and clear boundaries.
• Angular App Configuration, Environment Variables and provideAppInitializer: Configure an Angular app: ApplicationConfig, environment files, runtime config.json, provideAppInitializer (the modern APP_INITIALIZER), the Location service and hash or path URLs.
• Angular Error Handling: Global ErrorHandler, Custom Handlers and HTTP Errors: Handle errors in Angular properly: a global custom ErrorHandler, user friendly HTTP error messages with an interceptor, retry and loading states, and how to log errors to your server.
• Angular NgModules (Legacy), Module Routing, Lazy Modules and Migration to Standalone: Understand NgModules so you can read older Angular code: declarations, imports, exports, module routing, lazy loaded modules, folder structure and how to migrate to standalone components step by step.

16. Advanced forms, state and RxJS

• Angular Custom Form Controls with ControlValueAccessor: Build your own Angular form control with ControlValueAccessor. A star rating that works with formControlName, validation, disabled state and touched tracking.
• Angular FormArray and Dynamic Forms: Add and Remove Fields: Build dynamic Angular forms with FormArray. Add and remove rows, validate each row, calculate totals and generate fields from a configuration object.
• Angular Signal Forms: Build Forms with Signals in Angular 22: Learn signal-based forms in Angular 22. Bind a signal model with form(), validate with required, email and validate(), submit with formRoot and compare it with reactive and template-driven forms.
• Angular State Management with a Signal Store Pattern: Manage Angular state with signals. Build a testable store with selectors, async actions and optimistic updates, and learn when to use NgRx Signals.
• Advanced RxJS Patterns for Angular: Combine, Share and Flatten: Level up your RxJS in Angular. Compare switchMap, concatMap, mergeMap and exhaustMap, combine streams, share results with shareReplay and avoid memory leaks.

17. Advanced routing, rendering and SEO

• Advanced Angular Routing: Resolvers, Child Routes, Preloading and Transitions: Go further with Angular routing: child routes, resolvers, route data, canMatch, preloading, view transitions and router events for fast, polished navigation.
• Angular Change Detection and Zoneless Apps: How Updates Really Work: Understand when Angular updates the screen. Learn zoneless change detection, signals with OnPush, common stale-view bugs, markForCheck and afterNextRender.
• Angular Server-Side Rendering (SSR) and Hydration: Fast, SEO-Friendly Pages: Add server-side rendering to Angular with ng add @angular/ssr. Learn render modes, hydration, titles and meta tags, browser-only code and allowed hosts.
• Angular SEO: Title, Meta Tags, Canonical URLs, Lazy Images and SSR: Make an Angular app search friendly: the Title and Meta services, dynamic page titles from routes, Open Graph tags, canonical links, NgOptimizedImage and lazy images, and why SSR matters for SEO.

18. Quality, security and delivery

• Advanced Angular Testing: Guards, Interceptors, Routing and Component Inputs: Test the hard parts of Angular with Vitest: functional guards, HTTP interceptors, routed pages with RouterTestingHarness, component inputs, outputs and fakes.
• Angular End-to-End Testing with Playwright: Test Like a User: Add end-to-end tests to an Angular app with Playwright: setup, accessible locators, auto-waiting assertions, test isolation and running tests in CI.
• Angular Security Best Practices: XSS, Tokens, CSRF and Headers: Secure your Angular app: built-in XSS protection, avoiding bypassSecurityTrust, safe token storage, CSRF, Content Security Policy and server-side checks.
• Angular CI/CD with GitHub Actions: Test, Build and Deploy Automatically: Automate Angular with GitHub Actions: lint, unit tests, production build and Playwright tests on every push, then deploy safely with repository secrets.
• Angular Troubleshooting: 404 on Refresh, ExpressionChanged, EventTarget and SSL on Localhost: Fix the most common Angular problems with simple explanations: Requested URL not found after refresh, ExpressionChangedAfterItHasBeenChecked, Property value does not exist on EventTarget, and HTTPS on localhost.
• Angular Module Loaders: SystemJS, Webpack and Today's esbuild and Vite Build: Learn what module loaders are and why old Angular tutorials mention SystemJS and Webpack. See how today's Angular builds with esbuild and Vite, and how lazy loading uses dynamic import.
• Angular Advanced Capstone: Build and Ship a Production-Ready App: The final Angular project: plan and ship a production-ready app with feature architecture, a signal store, SSR, tests, security headers and CI/CD.

Next, continue with Create Your First Angular App with the CLI.