Angular Course: Build Web Applications with TypeScript
Angular is an intermediate-level course of 5 lessons (about 1 h 33 min), with 20 exercises and 15 quiz questions. Prerequisites: TypeScript. Exercises run in the browser, with nothing to install.
- Front-end
- Intermediate
- 5 lessons
- 1 h 33 min
- 20 exercises
- Exercises run in the browser
The course in brief
This course teaches you to build a modern Angular application in TypeScript: standalone components and signals, services and dependency injection, RxJS observables and the HTTP client, validated reactive forms, routing with lazy loading and guards. The code exercises focus on the logic of services, validators and routes, checked automatically; components are built in hands-on tasks with verifiable results.
What you will be able to do
- Create an application with the Angular CLI and write standalone components with their templates
- Manage state with signals and make components communicate with input() and output()
- Organize logic in injected services and choose the scope of their providers
- Use RxJS observables and HttpClient without subscription leaks
- Build typed reactive forms with built-in, custom and group validators
- Configure the router: parameters, lazy loading, not-found page and functional guards
Syllabus: 5 lessons
- Create a project with the Angular CLI and understand the structure of a standalone application
- Write a component with its template: interpolation, property and event bindings, @if and @for
- Manage local state with signals and pass data with input() and output()
Standalone componentsTemplates and control flow blocksSignals (signal, computed)input() and output()
- 02
Services and Dependency Injection
- Create a service that groups shared logic or state
- Inject dependencies with inject() or the constructor and choose their scope
- Replace one dependency with another (token, abstraction, test double)
- 03
RxJS, Observables and the HTTP Client
- Explain what an observable is and how it differs from a promise
- Compose RxJS operators (map, filter, debounceTime, switchMap, catchError)
- Call an API with HttpClient and consume the result without leaks (async, toSignal, takeUntilDestroyed)
RxJS observablesRxJS operatorsHttpClientSubject and BehaviorSubject
- 04
Reactive Forms and Validation
- Choose between template-driven forms and reactive forms
- Build a typed reactive form with FormBuilder, FormGroup and FormControl
- Validate with built-in and custom validators and display accessible errors
- 05
Routing, Lazy Loading and Guards
- Declare an application's routes with provideRouter, parameters and redirects
- Navigate with routerLink and Router, and read route parameters
- Lazy-load pages and protect routes with functional guards
Final project
Order Management Application with Angular
Build the interface of a fictional grocery store that manages its online orders: catalog with live search, product page, cart, account creation and a restricted admin area. The application uses standalone components and signals, injected services, HttpClient on a simulated API (JSON files or local server), validated reactive forms and a router with lazy loading and guards.
Deliverables
- An Angular CLI project that starts with ng serve and builds with ng build
- Components communicating via input() and output(), with @for (track) and @if
- PanierService and SessionService provided at the root, and an API service whose URL comes from an InjectionToken
- A live search with debounceTime, switchMap and catchError, with no unfinished manual subscription
- A reactive sign-up form with custom and group validators
- A router with loadComponent, loadChildren for the admin area, not-found page and login and role guards
Assessment criteria
- Components focused on display, logic and shared state in services
- Signals updated without mutation, derived values in computed
- Observables properly composed and subscriptions managed (async, toSignal, takeUntilDestroyed)
- Accessible forms: errors after interaction, explicit messages tied to fields
- Routes correctly ordered, parameters converted, guards returning true or a UrlTree
Frequently asked questions
Do I need to know TypeScript before learning Angular?
Yes. Angular is written and used in TypeScript: classes, interfaces, generics and union types come up everywhere. The TypeScript course is a prerequisite.
Does this course cover NgModules?
The course uses standalone components, which have become the norm in recent versions. It explains the historical role of NgModules so that you can read and evolve an older project.
Do I need to master RxJS to use Angular?
You need to know the basics: observables, subscription and a few operators (map, filter, switchMap, catchError), used by the HTTP client, forms and the router. The course presents them alongside signals, which simplify state management.
Why don't the code exercises contain Angular components?
The code exercises are checked automatically without installing Angular: they focus on logic (services, validators, observables, routes) in TypeScript or JavaScript. Components, forms and routes are built in guided tasks in your own project.
This course, told for your job
Say what you want to be able to do: “Angular” takes its place in your path, with examples from your field. The concepts stay those of the course.