martinboue · martinboue · May 7, 2026 · May 7, 2026 · May 7, 2026
diff --git a/README.md b/README.md
@@ -10,7 +10,8 @@
 
 | Supported Angular versions  |
 |-----------------------------|
-| [v21](https://ngtips.com)   |
+| [v22](https://ngtips.com)   |
+| [v21](https://ngtips.com/21)|
 | [v20](https://ngtips.com/20)|
 | [v19](https://ngtips.com/19)|
 

diff --git a/TODO.md b/TODO.md
@@ -69,10 +69,10 @@
 - debugging
     - angular chrome devtools
     - json pipe
-- v21
-    - zoneless
 - v22
-    - ChangeDetectionStrategy: Default -> Eager
-    - Default change detection will be Eager
     - @Service decorator
+    - stable signal forms
+    - stable resource signals
+    - remove jest and web test runner supports
+    - remove ngIf, ngFor and ngSwitch directives
 
diff --git a/VERSIONING.md b/VERSIONING.md
@@ -12,15 +12,19 @@ When a new version of Angular is released, a new version of Angular Tips is crea
 ## Create a new version
 To create a new version of Angular Tips:
 
-1. Run: `npm run docusaurus docs:version <previous_version>`
+1. Run: `npm run docusaurus docs:version <previous_version_number>`.
+    - Make sure versions are in the correct order in [versions.json](./versions.json).
 2. Replace occurences of previous version with the new version number in `docs` folder, especially:
     - Links to Angular doc: `https://vX.angular.dev`
     - Links to Angular Material doc: `https://vX.material.angular.dev`
-    - [Getting started > Angular Version](./docs/getting-started.md#angular-version)
+    - [Getting started > Angular Version](./docs/getting-started.mdx#angular-version)
+    - Other occurences of `<previous_version_number>`.
 3. Update [docusaurus.config.ts](./docusaurus.config.ts):
     - Set `presets > docs > versions > current > label` to the new version number.
     - Add a new entry in `presets > docs > versions` for the previous version.
 4. Delete `draft: true` pages in the new `versioned_docs/version-vX` folder if any.
-5. Update 'Supported Angular Versions' table in [README.md](./README.md).
-6. Test the new version locally and make sure it builds correctly.
-7. Commit and push the changes.
+5. Remove `sidebar_class_name: new` and `sidebar_class_name: updated` in `docs` folder.
+6. Update 'Supported Angular Versions' table in [README.md](./README.md).
+7. Update `announcementBar` in [docusaurus.config.ts](./docusaurus.config.ts) if necessary.
+8. Update [What's new](./docs/upgrading/whats-new.mdx) and [Upcoming](./docs/upgrading/upcoming.mdx) pages.
+9. Test the new version locally and make sure it builds correctly.
diff --git a/docs/component/_category_.yml b/docs/component/_category_.yml
@@ -1,5 +1,4 @@
 label: Component
 position: 3
 link:
-  type: generated-index
-className: new
+  type: generated-index
diff --git a/docs/component/change-detection.mdx b/docs/component/change-detection.mdx
@@ -1,6 +1,5 @@
 ---
 sidebar_position: 4
-sidebar_class_name: new
 ---
 # Change detection
 
@@ -9,20 +8,15 @@ Change detection is a core concept in Angular that ensures the UI stays in sync
 ## General guidelines
 
 **Consider** using `ChangeDetectionStrategy.OnPush` for every components.
-- ❌  unspecified change detection strategy
-- ❌ `changeDetection: ChangeDetectionStrategy.Default`
-- ✅ `changeDetection: ChangeDetectionStrategy.OnPush`
+- ❌ `changeDetection: ChangeDetectionStrategy.Eager`
+- ✅ `changeDetection: ChangeDetectionStrategy.OnPush` (default)
 
 :::info[Why?]
 The main reason is sustainability. Angular is heading towards better reactivity with signals and Zoneless application, and using `OnPush` now will make migration to future major releases easier.
 
 In addition, `OnPush` strategy improves performances by reducing the number of change detection cycles, which is particularly interesting for large projects.
 :::
 
-:::tip
-You can set the default change detection strategy to `OnPush` in your `angular.json` file for components generated with Angular CLI.
-:::
-
 **Do** rely on reactive primitives to trigger change detection.
 
 - ✅ [Signals](../reactivity#signals) - reading a signal in a template registers it for updates, and calling `set()` or `update()` marks the view dirty.
@@ -42,7 +36,7 @@ See [Reactivity](../reactivity.mdx) for more details.
 
 Zoneless mode represents a major shift in Angular’s change detection strategy. Historically, Angular relied on Zone.js, a patching library that intercepted asynchronous tasks—timers, promises, events—to automatically trigger UI updates. With zoneless, this implicit mechanism is gone. Angular no longer monitors every async operation; instead, updates happen only when the framework knows something changed.
 
-**Consider** using [Zoneless](https://v21.angular.dev/guide/zoneless).
+**Consider** using [Zoneless](https://v22.angular.dev/guide/zoneless).
 
 :::info[Why?]
 Opting for Zoneless mode is a future-proof choice as Angular is moving towards this direction. While the performance enhancement is minimal (especially if you have already followed best practices, e.g. [`OnPush` change detection](../component/typescript-class#change-detection)), it can improve developer experience by providing clearer stack traces. Additionally, it'll help reduce bundle size and startup time.

diff --git a/docs/component/styling.mdx b/docs/component/styling.mdx
@@ -1,6 +1,5 @@
 ---
 sidebar_position: 3
-sidebar_class_name: updated
 ---
 # Styling
 This page covers best practices for styling in Angular, including structuring styles, using variables, scoping component styles, and avoiding common pitfalls.
@@ -217,7 +216,7 @@ While it's not a bad thing to use a CSS framework, it shouldn't be automatic. Th
 ✅ **[Tailwind CSS](https://tailwindcss.com/)**: utility-first CSS framework that provides low-level utility classes to build custom designs.
 
 :::note
-Since Angular v21, Tailwind CSS is natively supported and integrated with the Angular CLI, see [Angular guide](https://v21.angular.dev/guide/tailwind).
+Since Angular v21, Tailwind CSS is natively supported and integrated with the Angular CLI, see [Angular guide](https://v22.angular.dev/guide/tailwind).
 :::
 
 ✅ **[Bootstrap](https://getbootstrap.com/)**: CSS framework that provides a set of pre-designed components and utilities.

diff --git a/docs/component/template.mdx b/docs/component/template.mdx
@@ -178,7 +178,7 @@ It also indicates that the component does not have projectable content.
 ```
 
 :::tip
-You can run the [schematic migration](https://v21.angular.dev/reference/migrations/control-flow) to automatically replace directives above by control flow syntax.
+You can run the [schematic migration](https://v22.angular.dev/reference/migrations/control-flow) to automatically replace directives above by control flow syntax.
 :::
 
 **Do** use class binding instead of `ngClass` directive.

diff --git a/docs/component/typescript-class.mdx b/docs/component/typescript-class.mdx
@@ -75,7 +75,7 @@ export class UserPage {
 **Do** use `input()` signal and `output()` function instead of `@Input()` and `@Ouput()` decorators.
 
 :::tip
-You can run [schematic migrations](https://v21.angular.dev/reference/migrations) to automatically transform decorators to signals.
+You can run [schematic migrations](https://v22.angular.dev/reference/migrations) to automatically transform decorators to signals.
 :::
 
 **Do** type inputs and outputs.

diff --git a/docs/contributing.mdx b/docs/contributing.mdx
@@ -33,7 +33,7 @@ To submit a pull request:
 
 When adding a new tip:
 - It must be Angular related.
-- It must add value to the [official Angular documentation](https://v21.angular.dev/).
+- It must add value to the [official Angular documentation](https://v22.angular.dev/).
 - It must follow the [vocabulary](./getting-started.mdx#vocabulary).
 - If possible, provide bad and good examples.
   - Bad examples must be prefixed with "❌"

diff --git a/docs/dependency-injection.mdx b/docs/dependency-injection.mdx
@@ -114,5 +114,5 @@ export function injectBody(): HTMLElement {
 - ❌ Lifecycle hook
 
 :::info[Why?]
-Calling `inject()` or `assertInInjectionContext()` outside an injection context throws [error NG0203](https://v21.angular.dev/errors/NG0203). Make sure to call these functions only during construction or initialization phases.
+Calling `inject()` or `assertInInjectionContext()` outside an injection context throws [error NG0203](https://v22.angular.dev/errors/NG0203). Make sure to call these functions only during construction or initialization phases.
 :::
diff --git a/docs/form.mdx b/docs/form.mdx
@@ -4,15 +4,19 @@ sidebar_class_name: updated
 ---
 # Form
 
-Forms are a fundamental part of most web applications, enabling users to input data, submit information, and interact with your application. Angular provides two primary approaches to handling forms, each with robust solutions for validation, data binding, and state management, designed to address different use cases and levels of complexity.
+:::warning
+Angular v22 marked Signal forms as stable, this page is not yet updated to reflect this change.
+:::
+
+Forms are a fundamental part of most web applications, enabling users to input data, submit information, and interact with your application. 
+Angular provides multiple approaches to handling forms, each with robust solutions for validation, data binding, and state management, designed to address different use cases and levels of complexity.
+
+[Signal forms](#signal-forms) is the latest option based on Angular's signals.
 
 [Template-Driven form](#template-driven-forms) is the simplest approach that relies on directives in the template, suitable for simple forms with minimal complexity.
 
-[Reactive form](#reactive-forms) is a more structured and flexible solution, but verbose, it is ideal for complex forms with programmatic control.
+[Reactive form](#reactive-forms) is a more structured and flexible solution, but verbose, ideal for complex forms with programmatic control.
 
-:::warning
-Both approaches are expected to be superseded by [Signal Forms](#signal-forms) in future Angular versions, which will leverage Angular's signal-based reactivity system for improved performance and developer experience.
-:::
 
 ## General guidelines
 
@@ -39,11 +43,16 @@ Both approaches are expected to be superseded by [Signal Forms](#signal-forms) i
 
 ## Signal forms
 
-**Consider** not using signal forms, yet.
+**Consider** using signal forms.
+- ✅ Signal forms
+- ❌ Reactive forms
+- ❌ Template-driven forms
 
 :::info[Why?]
-Signal forms are experimental features in Angular v21 and are not recommended for production use as they may change in future releases.
-Use [Reactive forms](#reactive-forms) or [Template-driven forms](#template-driven-forms) instead.
+Signal forms is the new form solution leveraging Angular's signal-based reactivity system. It provides improved performance, developer experience and new features compared to other solutions.
+It was introduced to replace both reactive and template-driven forms.
+
+For compatibility reasons, using reactive and template-driven forms in existing code is fine, but prefer signal forms for new code.
 :::
 
 ## Template-driven forms

diff --git a/docs/general/code-style.mdx b/docs/general/code-style.mdx
@@ -6,7 +6,7 @@ sidebar_position: 1
 
 This page covers best practices and common mistakes when writing TypeScript code, focusing on those with the highest impact. It includes naming conventions, code clarity, consistency and more.
 
-The following guidelines are a complement to the [Angular official coding style guide](https://v21.angular.dev/style-guide) that we recommend to read first.
+The following guidelines are a complement to the [Angular official coding style guide](https://v22.angular.dev/style-guide) that we recommend to read first.
 
 ## General guidelines
 
@@ -57,7 +57,7 @@ The following guidelines are a complement to the [Angular official coding style
 :::warning[Exceptions]
 Avoid using `#` if you're targeting browsers that don't natively support them, as the downleveling can impact performance and bundle size.
 
-You're not concerned if you use [Angular's default browserlist](https://v21.angular.dev/reference/versions#browser-support).
+You're not concerned if you use [Angular's default browserlist](https://v22.angular.dev/reference/versions#browser-support).
 :::
 
 **Do** use plural form in names for iterables (array, set, ...).

diff --git a/docs/general/configuration.mdx b/docs/general/configuration.mdx
@@ -15,7 +15,7 @@ Standalone components are self-contained which is much easier to manage, and rem
 :::
 
 :::tip
-You can run the [schematic migration](https://v21.angular.dev/reference/migrations/standalone) to automatically convert your project to standalone.
+You can run the [schematic migration](https://v22.angular.dev/reference/migrations/standalone) to automatically convert your project to standalone.
 :::
 
 ## Git
@@ -106,7 +106,7 @@ Committing run configurations ensures that all team members have access to the s
 For example, running `npm run build` will first run the `prebuild` script, then `build`, and finally `postbuild`.
 :::
 
-**Do** use the [`application` builder](https://v21.angular.dev/tools/cli/build-system-migration).
+**Do** use the [`application` builder](https://v22.angular.dev/tools/cli/build-system-migration).
 ```json title="✅ angular.json"
 {
   "projects": {

diff --git a/docs/getting-started.mdx b/docs/getting-started.mdx
@@ -20,12 +20,12 @@ This guide will give you thoughtful opinions on Angular's features, you may not
 
 ## Angular version
 
-This documentation assumes that you are using the latest minor version of **Angular v21**.
+This documentation assumes that you are using the latest minor version of **Angular v22**.
 
 :::note
 Angular Tips follows the same major versioning as Angular itself, starting with v19.
 
-If you're using an older version of Angular, we recommend you read Angular Tips v19. While many of the recommendations remain relevant, some may not be applicable to your specific version. Refer to the official [changelog](https://github.com/angular/angular/releases), [update guide](https://v21.angular.dev/update-guide) and [API reference](https://v21.angular.dev/api) to identify unstable and missing features.
+If you're using an older version of Angular, we recommend you read Angular Tips v19. While many of the recommendations remain relevant, some may not be applicable to your specific version. Refer to the official [changelog](https://github.com/angular/angular/releases), [update guide](https://v22.angular.dev/update-guide) and [API reference](https://v22.angular.dev/api) to identify unstable and missing features.
 :::
 
 ## Vocabulary

diff --git a/docs/i18n.mdx b/docs/i18n.mdx
@@ -47,7 +47,7 @@ Angular will use `LOCALE_ID` by default for everything related to internationali
 
 **Consider** using one of the following:
 
-✅ **[Angular built-in i18n](https://v21.angular.dev/guide/i18n)**: compile-time internationalization library that is part of Angular.
+✅ **[Angular built-in i18n](https://v22.angular.dev/guide/i18n)**: compile-time internationalization library that is part of Angular.
 
 - ❌ Does not support runtime language switching (needs window refresh)
 

diff --git a/docs/performance.mdx b/docs/performance.mdx
@@ -1,6 +1,5 @@
 ---
 sidebar_position: 13
-sidebar_class_name: new
 ---
 
 # Performance
@@ -106,7 +105,7 @@ Do not overuse lazy loading at route level. In particular, avoid having nested l
 
   `@loading` block is displayed while the deferred content is being loaded.
 
-  More about deferred loading in the [Angular documentation](https://v21.angular.dev/guide/templates/defer).
+  More about deferred loading in the [Angular documentation](https://v22.angular.dev/guide/templates/defer).
 </details>
 
 ```html title="✅ defer"
@@ -134,7 +133,7 @@ This can be useful for components that are not immediately visible and non essen
 
   Incremental hydration occurs on the initial page load only, it does not apply to subsequent navigations which are handled on the client-side.
 
-  More about incremental hydration in the [Angular documentation](https://v21.angular.dev/guide/incremental-hydration).
+  More about incremental hydration in the [Angular documentation](https://v22.angular.dev/guide/incremental-hydration).
 </details>
 
 ```html title="✅ incremental hydration"
@@ -240,7 +239,7 @@ If your application does not have strict SEO requirements (e.g. a private app no
 
   Event replay is the process of capturing and replaying user interactions that occur before the Angular application is fully bootstrapped on the client. This ensures that any user actions, such as clicks or form inputs, are not lost during the hydration process, between the time the server-rendered HTML is displayed and the time the Angular application becomes interactive.
 
-  More about hydration and event replay in the [Angular documentation](https://v21.angular.dev/guide/hydration).
+  More about hydration and event replay in the [Angular documentation](https://v22.angular.dev/guide/hydration).
 </details>
 
 ```ts title="✅ app.config.ts"

diff --git a/docs/reactivity.mdx b/docs/reactivity.mdx
@@ -1,5 +1,6 @@
 ---
 sidebar_position: 6
+sidebar_class_name: updated
 ---
 
 # Reactivity
@@ -76,7 +77,7 @@ nbDevelopersInTeam = computed(() => this.teamDevelopers().length);
 
 ### Writable and derived state
 
-**Do** use [`linkedSignal()`](https://v21.angular.dev/guide/signals/linked-signal) for writable state that depends on another signal.
+**Do** use [`linkedSignal()`](https://v22.angular.dev/guide/signals/linked-signal) for writable state that depends on another signal.
 
 ```ts title="✅ Selecting an item from a reactive array"
 // Reactive array of users (could also be a computed(), input() or other).
@@ -133,15 +134,10 @@ constructor() {
 
 ### Fetching data
 
-**Consider** not using `resource()`, `rxResource()` or `httpResource()` signals, yet.
-
-:::info[Why?]
-`resource()`, `rxResource()` and `httpResource()` are experimental features in Angular v21 and are not recommended for production use as they may change in future releases.
-:::
-
-:::warning[Exceptions]
-Since these new tools will most likely become the future of Angular, and that they are an important missing piece, you can make an exception here and use them now. But be careful though, there's a high risk that the API may change as it's not stable yet.
-:::
+**Consider** using resource signals to fetch data.
+- ✅ `resource()`
+- ✅ `httpResource()`
+- ✅ `rxResource()`
 
 ## RxJs
 
@@ -151,6 +147,10 @@ Since these new tools will most likely become the future of Angular, and that th
 - ✅ Complex event handling (e.g. debounce, throttle, etc.)
 - ...
 
+:::info[Why?]
+Resource signals are reactive and integrate seamlessly with signals. They provide additional features compared to RxJS, such as automatic refetching, loading and error state management and manual reload.
+:::
+
 **Consider** using [signals](#signals) instead of RxJs `BehaviorSubject`.
 
 ### Interoperability with signals

diff --git a/docs/testing.mdx b/docs/testing.mdx
@@ -1,6 +1,5 @@
 ---
 sidebar_position: 10
-sidebar_class_name: updated
 ---
 # Testing
 

diff --git a/docs/ui-libraries/angular-material.mdx b/docs/ui-libraries/angular-material.mdx
@@ -38,7 +38,7 @@ CSS classes, HTML structure and private CSS variables are Material's internal im
 }
 ```
 
-**Do** override CSS [system variables](https://v21.material.angular.dev/guide/system-variables).
+**Do** override CSS [system variables](https://v22.material.angular.dev/guide/system-variables).
 ```css title="✅ System variables"
 @include mat.theme-overrides((
   primary-container: green
@@ -51,7 +51,7 @@ Angular Material provides public and stable APIs to customize the look of compon
 
 ## Custom components
 
-**Consider** using [Angular CDK](https://v21.material.angular.dev/cdk).
+**Consider** using [Angular CDK](https://v22.material.angular.dev/cdk).
 - ❌ Work around the limitations of Angular Material's components
 - ✅ Build custom components with CDK utilities
 

diff --git a/docs/ui-libraries/index.mdx b/docs/ui-libraries/index.mdx
@@ -19,7 +19,7 @@ Headless UI libraries are not so popular and advanced in the Angular ecosystem c
 
 **Consider** using one of the following:
 
-✅ **[Angular Material](https://v21.material.angular.dev/)**: the official Angular component library that implements Material Design. It provides essential UI components and is well-maintained by the Angular team.
+✅ **[Angular Material](https://v22.material.angular.dev/)**: the official Angular component library that implements Material Design. It provides essential UI components and is well-maintained by the Angular team.
 
 - ✅ High quality components
 - ✅ Always up to date with Angular releases
@@ -55,7 +55,7 @@ Other popular libraries that have not yet been evaluated:
 
 **Consider** using the following:
 
-✅ **[Angular CDK](https://v21.material.angular.dev/cdk)**: a set of low-level and unstyled primitives for building UI components.
+✅ **[Angular CDK](https://v22.material.angular.dev/cdk)**: a set of low-level and unstyled primitives for building UI components.
 
 - ✅ High quality primitives
 - ✅ Well-maintained by the Angular team
-Original file line number
+Diff line change
@@ Expand Up @@
     ```
     :::tip
-    You can run the [schematic migration](https://v21.angular.dev/reference/migrations/control-flow) to automatically replace directives above by control flow syntax.
+    You can run the [schematic migration](https://v22.angular.dev/reference/migrations/control-flow) to automatically replace directives above by control flow syntax.
     :::
     **Do** use class binding instead of `ngClass` directive.
@@ Expand Down @@