1. Introduction

The document’s PDF is HERE.

The document’s codes are HERE.

This document is a product of Anthropic’s AI Claude. It follows the course “Step-by-Step Introduction to the NestJS Web Framework,” from which it shifts the perspective:

In the course [NestJS], the server generates the pages HTML (view engine [Handlebars]); the browser simply displays them;
in this course, the pages are generated in the browser by an application [Angular]; the server, now reduced to a simple server JSON, provides only data.

The application’s pages, however, remain unchanged: they are those of the [RdvMedecins] application already presented with the other frameworks (login with CAPTCHA, doctor’s schedule, appointment window, patient portal, doctor and client management, account creation, French and English).

This document follows the same structure as its predecessors: first, numerous short examples, each focusing on a specific concept from [Angular], followed by a complete case study—the [Angular] client for the [RdvMedecins] application—with all files annotated. It follows the outline of the course “Step-by-Step Introduction to the Vue.js Framework”: readers familiar with [Vue.js] will find the same examples, written in the style of [Angular]. Since [Angular] is a more feature-rich framework, there are more examples: 25 instead of 20.

A course already exists on this topic: An Example of an Angular/NestJS Client/Server (2026), which covers both the server and the client. This document differs in its approach: the server is treated as a black box, with only the API and JSON of interest to us, and we learn [Angular] step by step before tackling the full client.

1.1. Angular’s Role in a Web Application

The application has two parts, which communicate with each other only through requests:

1: The [Angular] application, running in the browser, sends a HTTP request to the server, for example, [GET /api/schedule?doctorId=1&day=2026-10-05];
2: The server responds with data JSON: this doctor’s schedule for that day. It does not generate any pages;
3: Using this data, [Angular] updates the page displayed in the browser without reloading it.

The following diagram compares the two architectures:

The browser loads only a single, nearly empty page—HTML—upon startup. Everything else is generated by [JavaScript] code: this is known as a single-page application (SPA, for [Single Page Application]). When the user clicks on an internal link, no page is requested from the server: the [Angular] router changes the displayed URL and replaces the page’s content.

[Angular] is a framework created by Google. Its first version, [AngularJS] (2010), was completely rewritten in 2016: it is this rewrite, in [TypeScript], that is now simply called [Angular], and which releases a new major version every six months. It is based on three ideas:

components: the interface is broken down into reusable pieces (a navigation bar, a form field, a confirmation window, etc.). A component is a [TypeScript] class, associated with a HTML template and a CSS style;
Responsiveness, based on signals: A component’s data is stored in signals. When one of them changes, [Angular] automatically updates the parts of the page that display it. We never write code that directly modifies the page;
Dependency injection: Components do not create the objects they need (server access, logged-in user, language, etc.) on their own; they request them, and [Angular] provides them. This is the mechanism that the [NestJS] course has already presented on the server side—[NestJS] was, in fact, inspired by it.

Unlike [Vue.js], [Angular] is an “all-in-one” framework: router, forms, HTTP client, animations, and tests are provided by the [Angular] team itself, along with recommended usage guidelines.

We will use [Angular] 22, with its most recent features: standalone components ([standalone]), signals, new template syntax ([@if], [@for]), signal-based forms, and change detection without [zone.js] ([zoneless]), which is the default behavior in [Angular] 22.

1.2. Tools Used

The examples were written and tested using the following tools (their installation is described in the appendix):

[Node.js] 24 (or at least 22.22.3: this is the requirement for [Angular] 22) and its package manager [npm];
the editor [Visual Studio Code], with the extension [Angular Language Service];
a recent browser ([Chrome], [Firefox], [Edge]), if possible with the extension [Angular DevTools];
the command-line tool [curl], which displays the raw HTTP responses;
the DBMS [MySQL] (or [MariaDB]), for example, the one from [Laragon] under [Windows]: it is required for the JSON server, as described in the chapter introducing it.

The libraries are those of the [package.json] files: [Angular] 22.2 (the core, the router, the forms, the HTTP client), the command-line tool [Angular CLI] (command [ng]), [RxJS] 7.8 (observables), [ngx-translate] 18 (languages), [TypeScript] 6.0, [Bootstrap] 5.3.

1.3. Examples

The codes in the document are organized into three folders:

deliverable/
├── examples-angular/          the 25 small Angular examples
├── rdvmedecins-nestjs-json/   the RdvMedecins JSON server (the "black box")
└── rdvmedecins-angular/       the Angular client of the case study

The examples folder is a workspace named [Angular] ([workspace]): it contains twenty-five small applications—one per example—that share the same libraries:

examples-angular/
├── 01-first-application/
├── 02-signals/
├── ...
├── 25-server-errors/
├── common/              code shared by examples 24 and 25
├── node_modules/
├── angular.json         the description of the twenty-five applications
├── package.json
├── proxy.conf.json      the proxy to the JSON server (examples 22 to 25)
└── tsconfig.json

Install the libraries once, in a console opened to the [examples-angular] folder (in [VS Code]: Terminal menu / New Terminal):

npm install

Then run a sample by entering its name:

npm start 01-first-application

The [Angular] development server compiles the example and serves it on port 4200: open it at http://localhost:4200/. This server does not need to be restarted when you modify a file: each saved file is immediately recompiled, and the browser page updates automatically. Stop it using [Ctrl-C] in the console before running the next example (only one example at a time can occupy port 4200).

Examples 22 through 25 query the server JSON [RdvMedecins]: you will need to have it installed and running, as explained in the chapter dedicated to it.

1.4. Document Contents

Chapter	Contents	Examples
Getting Started	An Angular workspace, signals, templates, events, forms (ngModel, signal-driven forms, reactive forms), validation, pipes	01–09
Components	Inputs, outputs, `model()`, content projection, lifecycle, services and dependency injection, directives, confirmation dialog	10–16
Routing	the router, navigation guards	17 and 18
Observables and shared state	RxJS, signaling services	19 and 20
Internationalization	An application in French and English	21
The server, a black box	Installation of the JSON server, its API, curl examples	-
Interacting with the server	HttpClient, connection and cookies, interceptor, API access layer, httpResource, server errors	22 to 25
Case Study	The Angular client of the RdvMedecins application	-
Deployment	The compiled client, served by the JSON server	-

Each example is presented with its complete code, commented line by line, and a screenshot of its execution. The code itself is extensively commented: these comments are part of the course.