Angular Tutorial: Beginner to Advanced

A free Angular course from beginner to advanced: 84 lessons on components, signals, forms, routing, HTTP, RxJS, SEO, SSR and testing, tested on Angular 22.

All levels · 84 lessons

1. Getting started

  1. 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.
  2. TypeScript Basics for Angular - The TypeScript you need for Angular: types, interfaces, classes, functions and generics, explained with short examples you can run.
  3. 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.
  4. Angular Course Roadmap and Complete Topic Index (Beginner to Advanced) - Every topic of this free Angular course on one page, from TypeScript and signals to forms, routing, RxJS and SSR, with legacy APIs clearly marked.

2. Your first app

  1. 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.
  2. 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.
  3. 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.
  4. Angular CLI Guide: ng new, ng update, Multiple Apps and Multiple Angular Versions - Learn the Angular CLI: ng new options, ng version, safe upgrades with ng update, several apps in one workspace and different Angular or Node versions.

3. Components and templates

  1. 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.
  2. 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.
  3. Angular Two-Way Binding: ngModel, ngModelChange and Input Events - Learn two-way binding in Angular with [(ngModel)], FormsModule and signals. Understand banana in a box, the $event.target error and when to use forms instead.
  4. 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.
  5. Angular Styling: Global Styles, Component Styles, View Encapsulation, Bootstrap and Font Awesome - Style Angular apps: global styles, component styles, view encapsulation, :host, CSS variables, Bootstrap and Font Awesome, plus responsive layouts.

4. Control flow and lists

  1. 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.
  2. 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.
  3. Angular ngIf, ngFor, ngSwitch and trackBy: Legacy Syntax and Migration - Read older Angular code: *ngIf, *ngFor with trackBy, and ngSwitch, why they are deprecated, and how to convert them to @if, @for and @switch.
  4. Angular ngClass, ngStyle, Class Binding and Style Binding Explained - Style elements from data in Angular: class and style bindings, ngClass and ngStyle, toggling classes, dynamic styles and which to use in modern code.

5. Signals and reactive state

  1. 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.
  2. 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

  1. 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.
  2. 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.
  3. 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.
  4. Angular Built-in Pipes: Date, Async, KeyValue and Using Pipes in Code - Format data in Angular templates with the built-in pipes: date, currency, async, keyvalue, json and slice. Write a custom pipe and use pipes in services.
  5. Angular Lifecycle Hooks: OnInit, OnDestroy, OnChanges, DoCheck and More - Understand Angular lifecycle hooks with examples: ngOnInit, ngOnChanges, ngDoCheck, ngOnDestroy, plus after render hooks, and when to use each one.
  6. Template Reference Variables, ng-container, ViewChild and ContentChild in Angular - Access elements and child components in Angular: template reference variables, ViewChild, ViewChildren, ContentChild, ng-container and ngTemplateOutlet.

7. Services and dependency injection

  1. 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.
  2. 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.
  3. Angular Hierarchical Dependency Injection: Providers, @Self, @SkipSelf, @Optional, @Host - Understand Angular hierarchical dependency injection: injectors, providedIn scopes, @Self, @SkipSelf, @Optional, @Host, viewProviders and singleton services.

8. Forms and validation

  1. 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.
  2. 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.
  3. 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.
  4. FormControl, FormGroup, FormBuilder, setValue, patchValue, valueChanges and statusChanges - Master reactive form basics: FormControl, FormGroup, FormBuilder, setValue versus patchValue, valueChanges and statusChanges, with simple examples.
  5. Angular Forms: Select Dropdowns, Checkboxes, Radio Buttons, Typed Forms and FormRecord - Build real forms in Angular: select dropdowns, checkboxes, radio buttons, typed forms with NonNullableFormBuilder, FormRecord and reading form values.
  6. Angular Advanced Form Validation: Custom, Async, Cross-Field and setValidators - Write custom validators in Angular: with parameters, injected services, async validators, cross-field checks, setValidators, and template-driven validators.

9. Routing and navigation

  1. 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.
  2. 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.
  3. Angular Router Navigation: ActivatedRoute, Query Params, Route Data and Router Events - Navigate in Angular with Router.navigate and RouterLink, read ActivatedRoute params, query params and data, use RouterLinkActive and router events.
  4. 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.
  5. Angular Guards: CanActivateChild, CanDeactivate, Resolve, canMatch and Preloading - Learn canActivateChild, canDeactivate, resolvers, canMatch (replacing CanLoad) and a custom preloading strategy, with tested Angular route guard examples.
  6. 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

  1. 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.
  2. 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.
  3. Angular HTTP: Query Parameters, Headers, PUT, PATCH and DELETE Requests - Use HttpClient fully: GET, POST, PUT, PATCH, DELETE, URL query params with HttpParams, headers with HttpHeaders, typed responses and error handling.
  4. 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.
  5. RxJS Observables Explained: Create from Arrays, Strings, Events with of, from and fromEvent - Create RxJS Observables in Angular: of, from, interval, timer, fromEvent, the pipe function and the map operator, with simple examples and cleanup.
  6. RxJS take, takeUntil, takeWhile, first, last, single, skip and tap Operators - Use RxJS filtering operators in Angular: filter, tap, take, takeUntil, takeWhile, first, last, single, skip and skipWhile, with clear examples.
  7. RxJS scan, reduce, debounceTime, debounce, delay and delayWhen Explained - Learn RxJS scan, reduce, debounceTime and delay with practical Angular examples such as a running total, a search box and delayed messages.
  8. RxJS Error Handling: throwError, catchError, retry, retryWhen and finalize - Handle errors in RxJS and Angular: throwError, catchError, retry with backoff, the deprecated retryWhen, finalize and safe unsubscribing.
  9. RxJS Subjects in Angular: Subject, BehaviorSubject, ReplaySubject and AsyncSubject - Understand RxJS Subjects in Angular: Subject, BehaviorSubject, ReplaySubject and AsyncSubject, with easy examples and when to use signals instead.

11. Testing, accessibility and performance

  1. 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.
  2. 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.
  3. 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

  1. 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.
  2. 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.
  3. 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.
  4. 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

  1. 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.
  2. 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

  1. 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.
  2. 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.
  3. 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.
  4. Angular ElementRef, Renderer2, HostBinding, HostListener and Legacy Decorators - Work with the DOM safely in Angular: ElementRef, Renderer2, HostBinding, HostListener and the host element, with examples and when to avoid direct DOM access.

15. Architecture, configuration and errors

  1. 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.
  2. 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.
  3. 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.
  4. Angular App Configuration, Environment Variables and provideAppInitializer - Configure an Angular app: ApplicationConfig, environment files, runtime config.json, provideAppInitializer (not APP_INITIALIZER), Location and hash URLs.
  5. Angular Error Handling: Global ErrorHandler, Custom Handlers and HTTP Errors - Handle errors properly in Angular: a global ErrorHandler, an HTTP error interceptor with friendly messages, logging to a server and tested examples.
  6. Angular NgModules (Legacy), Module Routing, Lazy Modules and Migration to Standalone - Read older NgModule code: declarations, imports, exports, module routing and lazy modules, then migrate to standalone with the official Angular schematic.

16. Advanced forms, state and RxJS

  1. 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.
  2. 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.
  3. Angular Signal Forms: Build Forms with Signals in Angular 22 - Learn Angular Signal Forms: build a form from a signal model, add validation and show errors. Compare it with reactive forms and decide which to use.
  4. 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.
  5. 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

  1. 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.
  2. 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.
  3. 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.
  4. Angular SEO: Title, Meta Tags, Canonical URLs, Lazy Images and SSR - Make an Angular app SEO friendly: Title and Meta services, route titles, Open Graph, canonical links, NgOptimizedImage, lazy images and SSR.

18. Quality, security and delivery

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. Angular Troubleshooting: 404 on Refresh, ExpressionChanged, EventTarget and SSL on Localhost - Fix common Angular errors: 404 on refresh, ExpressionChangedAfterItHasBeenChecked, the EventTarget value error and ng serve over HTTPS on localhost.
  6. Angular Module Loaders: SystemJS, Webpack and Today's esbuild and Vite Build - Understand module loaders and bundlers: why old Angular tutorials mention SystemJS and Webpack, and how esbuild, Vite and dynamic import work today.
  7. 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.