docs(angular): document Angular 21 support and bump playground scaffolding to v21

docs/reference/support.md

@@ -44,6 +44,7 @@ The Ionic team has compiled a set of recommendations for using the Ionic Framewo
 
 | Framework | Minimum Angular Version | Maximum Angular Version | TypeScript |
 | :-------: | :---------------------: | :---------------------: | :--------: |
+|    v9     |           v18           |          v21.x          |  5.4+[^4]  |
 |    v8     |           v16           |        v20.x[^3]        |   4.9.3+   |
 |    v7     |           v14           |        v17.x[^2]        |    4.6+    |
 |    v6     |           v12           |        v15.x[^1]        |    4.0+    |
@@ -54,6 +55,7 @@ The Ionic team has compiled a set of recommendations for using the Ionic Framewo
 [^1]: Angular 14.x supported starting in Ionic v6.1.9. Angular 15.x supported starting in Ionic v6.3.6.
 [^2]: Angular 17.x supported starting in Ionic v7.5.4.
 [^3]: Angular 18.x supported starting in Ionic v8.2.0.
+[^4]: Ionic v9 supports TypeScript 5.4+ for compatibility with Angular 18. Using Angular 21 requires TypeScript 5.9 or later, per Angular's own requirements.
 
 **Angular 13+ Support On Older Versions of iOS**
 

docs/updating/9-0.md

@@ -16,7 +16,7 @@ For a **complete list of breaking changes** from Ionic 8 to Ionic 9, please refe
 
 ### Angular
 
-1. Ionic 9 supports Angular 17+. Update to the latest version of Angular by following the [Angular Update Guide](https://update.angular.io/).
+1. Ionic 9 supports Angular 18 through 21. Angular 16 and 17 are no longer supported. Update to a supported version of Angular by following the [Angular Update Guide](https://update.angular.io/).
 
 2. Update to the latest version of Ionic 9:
 
@@ -30,6 +30,76 @@ If you are using Ionic Angular Server and Ionic Angular Toolkit, be sure to upda
 npm install @ionic/angular@latest @ionic/angular-server@latest @ionic/angular-toolkit@latest
 ```
 
+#### Angular 21 Zoneless Default
+
+Angular 21 makes zoneless change detection the default. Ionic 9 relies on zone-based change detection, so you must opt back in with `provideZoneChangeDetection()`. Without it you will see `NG0909` errors and asynchronous updates (such as modal and popover lifecycle, and tab navigation) will not work.
+
+:::note
+This step only applies when you are on Angular 21. Angular 18 through 20 are unaffected and require no change.
+:::
+
+For standalone applications, add the provider to `bootstrapApplication`:
+
+```diff
+import { bootstrapApplication } from '@angular/platform-browser';
++ import { provideZoneChangeDetection } from '@angular/core';
+
+bootstrapApplication(AppComponent, {
+  providers: [
++   provideZoneChangeDetection(),
+    // ...other providers
+  ],
+});
+```
+
+For NgModule applications, pass it as `applicationProviders` on `bootstrapModule()`. Angular does not allow `provideZoneChangeDetection()` inside an NgModule's `providers` array:
+
+```diff
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
++ import { provideZoneChangeDetection } from '@angular/core';
+
+platformBrowserDynamic()
+-  .bootstrapModule(AppModule)
++  .bootstrapModule(AppModule, {
++    applicationProviders: [provideZoneChangeDetection()],
++  })
+  .catch((err) => console.error(err));
+```
+
+#### TypeScript
+
+Ionic 9 supports TypeScript 5.4 or later, matching the minimum for Angular 18. If you upgrade to Angular 21, it requires TypeScript 5.9 or later.
+
+#### CSS Imports
+
+Remove the `~` prefix from `@ionic/angular` CSS imports. Angular's current build pipeline no longer supports the webpack-loader prefix:
+
+```diff
+- @import '~@ionic/angular/css/core.css';
++ @import '@ionic/angular/css/core.css';
+```
+
+#### Event Types
+
+The narrow `*CustomEvent` types (such as `RefresherCustomEvent`) are no longer surfaced through Angular template type inference. Use `CustomEvent<*EventDetail>` and cast `event.target` where you call methods on it:
+
+```diff
+- import { RefresherCustomEvent } from '@ionic/angular';
+-
+- onRefresh(event: RefresherCustomEvent) {
+-   event.target.complete();
+- }
++ import type { RefresherEventDetail } from '@ionic/core';
++
++ onRefresh(event: CustomEvent<RefresherEventDetail>) {
++   (event.target as HTMLIonRefresherElement | null)?.complete();
++ }
+```
+
+#### Module Resolution
+
+If your app uses TypeScript `moduleResolution: "node"` (classic), imports from subpaths such as `@ionic/angular/standalone` can fail to resolve. Set `moduleResolution` to `"bundler"` in your `tsconfig.json`. Apps created with `ng new` on Angular 17 or later already use this.
+
 ### React
 
 1. Ionic 9 supports React 18+. Update to the latest version of React:
@@ -329,6 +399,13 @@ The `ionChange` event on `ion-select` now only fires when the value changes. Pre
 
 If your code relied on `ionChange` firing on every confirmation (for example, to detect that the user closed the overlay without changing anything), listen for `ionDismiss` instead, or use the `didDismiss` event on the underlying alert or action sheet.
 
+### Input and Searchbar
+
+The `autocorrect` property on `ion-input` and `ion-searchbar` is now a `boolean` (default `false`) instead of `'on' | 'off'`. Because the attribute coerces to `true` for any value other than the string `"false"`, `autocorrect="off"` now enables autocorrect.
+
+- Remove the attribute to keep autocorrect disabled (the default).
+- Use a property binding to enable it: `[autocorrect]="true"` (Angular), `autocorrect={true}` (React), or `:autocorrect="true"` (Vue).
+
 ## Need Help Upgrading?
 
 Be sure to look at the [Ionic 9 Breaking Changes Guide](https://github.com/ionic-team/ionic-framework/blob/main/BREAKING.md#version-9x) for the complete list of breaking changes. This upgrade guide only covers changes that require action from developers.

static/code/stackblitz/v9/angular/main.ts

@@ -1,3 +1,4 @@
+import { provideZoneChangeDetection } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
 import { RouteReuseStrategy, provideRouter, withPreloading, PreloadAllModules } from '@angular/router';
 import { IonicRouteStrategy, provideIonicAngular } from '@ionic/angular/standalone';
@@ -7,6 +8,8 @@ import { AppComponent } from './app/app.component';
 
 bootstrapApplication(AppComponent, {
   providers: [
+    // Angular 21 defaults to zoneless change detection; Ionic requires zone-based.
+    provideZoneChangeDetection(),
     { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
     provideIonicAngular(),
     provideRouter(routes, withPreloading(PreloadAllModules)),