ionic-team · ShaneK · Jul 16, 2026 · Dec 11, 2025 · Dec 11, 2025 · Dec 12, 2025
@@ -22,3 +22,4 @@ yarn-debug.log*
 yarn-error.log*
 
 static/**/node_modules/
+.idea
@@ -19,6 +19,7 @@ Thanks for your interest in contributing to Ionic's documentation! :tada: Check
 - [Reporting Issues](#reporting-issues)
 - [Pull Request Guidelines](#pull-request-guidelines)
 - [Deploying](#deploying)
+  - [Archiving a Version](#archiving-a-version)
 - [License](#license)
 
 ---
@@ -175,6 +176,33 @@ When submitting pull requests, please keep the scope of your change contained to
 
 The Ionic documentation's `main` branch is deployed automatically and separately from the [Ionic site](https://github.com/ionic-team/ionic-site) itself. The Ionic site then uses a proxy for paths under `/docs` to request the deployed documentation.
 
+### Archiving a Version
+
+Archived versions are served from a frozen Vercel deployment instead of being rebuilt on every `main` deploy, which keeps build times and memory usage low. Two files control this:
+
+- [`versions.json`](./versions.json): lists the versions Docusaurus rebuilds on every deploy.
+- [`versionsArchived.json`](./versionsArchived.json): maps each archived version to the frozen deployment URL the version picker links to.
+
+The archived URL has to point at a build that _included_ the version, so you build it first, then move it to `versionsArchived.json`:
+
+1. **Build the version.** Make sure it is in `versions.json`. If you are refreshing an already-archived version, move it out of `versionsArchived.json` and back into `versions.json`. Commit, push and let Vercel deploy.
+2. **Promote the deployment.** In the Vercel dashboard, open that deployment and **Promote to Production** so it does not get cleaned up. Wait for the build to finish before pushing again, or it may get canceled.
+3. **Copy its URL.** Use the deployment's unique `ionic-docs-<hash>-ionic1.vercel.app` URL, not the branch or production alias.
+4. **Archive it.** Remove the version from `versions.json`, then add it to `versionsArchived.json` with `/docs/<version>` appended and no trailing slash (a trailing slash causes a brief 404 flash):
+
+   ```json
+   {
+     "v6": "https://ionic-docs-<hash>-ionic1.vercel.app/docs/v6"
+   }
+   ```
+
+5. **Open a PR.** Once merged, the version picker links to the archive and `main` stops building that version.
+
+Removed versions keep their `versioned_docs/` and `versioned_sidebars/` content, so they can be rebuilt anytime by adding them back to `versions.json`.
+
+> [!NOTE]
+> Ionic v3 and v4 use other build tools and are not managed here.
+
 ---
 
 ## License

@@ -2,7 +2,7 @@
 arbitrary: <% pascalComponent = h.changeCase.pascal(component) %>
 to: "<%= `static/usage/v${version}/${name}/${path}/vue.md` %>"
 ---
-```html
+```vue
 <template>
   <<%= component %>></<%= component %>>
 </template>

@@ -13,6 +13,7 @@ Udemy
 Vetur
 Wistia
 WCAG
+CDK
 
 actionsheet
 fabs

@@ -0,0 +1,213 @@
+---
+title: Overlay Components
+sidebar_label: Overlays
+---
+
+<head>
+  <title>Angular Overlay Components: Modals, Popovers with Custom Injectors</title>
+  <meta
+    name="description"
+    content="Learn how to use overlay components like modals and popovers in Ionic Angular, including passing custom injectors for dependency injection."
+  />
+</head>
+
+Ionic provides overlay components such as modals and popovers that display content on top of your application. In Angular, these overlays can be created using controllers like `ModalController` and `PopoverController`.
+
+## Creating Overlays
+
+Overlays can be created programmatically using their respective controllers:
+
+```typescript
+import { Component } from '@angular/core';
+import { ModalController } from '@ionic/angular/standalone';
+import { MyModalComponent } from './my-modal.component';
+
+@Component({
+  selector: 'app-home',
+  templateUrl: './home.component.html',
+})
+export class HomeComponent {
+  constructor(private modalController: ModalController) {}
+
+  async openModal() {
+    const modal = await this.modalController.create({
+      component: MyModalComponent,
+      componentProps: {
+        title: 'My Modal',
+      },
+    });
+    await modal.present();
+  }
+}
+```
+
+## Custom Injectors
+
+By default, overlay components use the root injector for dependency injection. This means that services or tokens provided at the route level or within a specific component tree are not accessible inside the overlay.
+
+The `injector` option allows you to pass a custom Angular `Injector` when creating a modal or popover. This enables overlay components to access services and tokens that are not available in the root injector.
+
+### Use Cases
+
+Custom injectors are useful when you need to:
+
+- Access route-scoped services from within an overlay
+- Use Angular CDK's `Dir` directive for bidirectional text support
+- Access any providers that are not registered at the root level
+
+### Usage
+
+To use a custom injector, pass it to the `create()` method:
+
+```typescript
+import { Component, Injector } from '@angular/core';
+import { ModalController } from '@ionic/angular/standalone';
+import { MyModalComponent } from './my-modal.component';
+import { MyRouteService } from './my-route.service';
+
+@Component({
+  selector: 'app-feature',
+  templateUrl: './feature.component.html',
+  providers: [MyRouteService], // Service provided at route level
+})
+export class FeatureComponent {
+  constructor(private modalController: ModalController, private injector: Injector) {}
+
+  async openModal() {
+    const modal = await this.modalController.create({
+      component: MyModalComponent,
+      injector: this.injector, // Pass the component's injector
+    });
+    await modal.present();
+  }
+}
+```
+
+The modal component can now inject `MyRouteService`:
+
+```typescript
+import { Component, inject } from '@angular/core';
+import { MyRouteService } from '../my-route.service';
+
+@Component({
+  selector: 'app-my-modal',
+  templateUrl: './my-modal.component.html',
+})
+export class MyModalComponent {
+  private myRouteService = inject(MyRouteService);
+}
+```
+
+### Creating a Custom Injector
+
+You can also create a custom injector with specific providers:
+
+```typescript
+import { Component, Injector } from '@angular/core';
+import { ModalController } from '@ionic/angular/standalone';
+import { MyModalComponent } from './my-modal.component';
+import { MyService } from './my.service';
+
+@Component({
+  selector: 'app-feature',
+  templateUrl: './feature.component.html',
+})
+export class FeatureComponent {
+  constructor(private modalController: ModalController, private injector: Injector) {}
+
+  async openModal() {
+    const myService = new MyService();
+    myService.configure({ someOption: true });
+
+    const customInjector = Injector.create({
+      providers: [{ provide: MyService, useValue: myService }],
+      parent: this.injector,
+    });
+
+    const modal = await this.modalController.create({
+      component: MyModalComponent,
+      injector: customInjector,
+    });
+    await modal.present();
+  }
+}
+```
+
+### Using with Angular CDK Directionality
+
+A common use case is providing the Angular CDK `Dir` directive to overlays for bidirectional text support:
+
+```typescript
+import { Component, Injector } from '@angular/core';
+import { Dir } from '@angular/cdk/bidi';
+import { ModalController } from '@ionic/angular/standalone';
+import { MyModalComponent } from './my-modal.component';
+
+@Component({
+  selector: 'app-feature',
+  templateUrl: './feature.component.html',
+})
+export class FeatureComponent {
+  constructor(private modalController: ModalController, private injector: Injector) {}
+
+  async openModal() {
+    const modal = await this.modalController.create({
+      component: MyModalComponent,
+      injector: this.injector, // Includes Dir from component tree
+    });
+    await modal.present();
+  }
+}
+```
+
+### Popover Controller
+
+The `PopoverController` supports the same `injector` option:
+
+```typescript
+import { Component, Injector } from '@angular/core';
+import { PopoverController } from '@ionic/angular/standalone';
+import { MyPopoverComponent } from './my-popover.component';
+
+@Component({
+  selector: 'app-feature',
+  templateUrl: './feature.component.html',
+})
+export class FeatureComponent {
+  constructor(private popoverController: PopoverController, private injector: Injector) {}
+
+  async openPopover(event: Event) {
+    const popover = await this.popoverController.create({
+      component: MyPopoverComponent,
+      event: event,
+      injector: this.injector,
+    });
+    await popover.present();
+  }
+}
+```
+
+## Angular Options Types
+
+Ionic Angular exports its own `ModalOptions` and `PopoverOptions` types that extend the core options with Angular-specific properties like `injector`:
+
+- `ModalOptions` - Extends core `ModalOptions` with the `injector` property
+- `PopoverOptions` - Extends core `PopoverOptions` with the `injector` property
+
+These types are exported from `@ionic/angular` and `@ionic/angular/standalone`:
+
+```typescript
+import type { ModalOptions, PopoverOptions } from '@ionic/angular/standalone';
+```
+
+## Docs for Overlays in Ionic
+
+For full docs and to see usage examples, visit the docs page for each of the overlays in Ionic:
+
+- [Action Sheet](https://ionicframework.com/docs/api/action-sheet)
+- [Alert](https://ionicframework.com/docs/api/alert)
+- [Loading](https://ionicframework.com/docs/api/loading)
+- [Modal](https://ionicframework.com/docs/api/modal)
+- [Picker](https://ionicframework.com/docs/api/picker)
+- [Popover](https://ionicframework.com/docs/api/popover)
+- [Toast](https://ionicframework.com/docs/api/toast)
@@ -172,7 +172,7 @@ And the template, in the `home.page.html` file, uses those components:
 </ion-content>
 ```
 
-This creates a page with a header and scrollable content area. The second header shows a [collapsible large title](/docs/api/title.md#collapsible-large-titles) that displays when at the top of the content, then condenses to show the smaller title in the first header when scrolling down.
+This creates a page with a header and scrollable content area. The second header shows a [collapsible large title](/docs/api/title.md#collapsible-large-titles) that displays on iOS devices when at the top of the content, then condenses to show the smaller title in the first header when scrolling down.
 
 :::tip Learn More
 For detailed information about Ionic layout components, see the [Header](/docs/api/header.md), [Toolbar](/docs/api/toolbar.md), [Title](/docs/api/title.md), and [Content](/docs/api/content.md) documentation.

@@ -23,7 +23,7 @@ Datetime Button links with a [Datetime](./datetime) component to display the for
 
 Datetime Button should be used when space is constrained. This component displays buttons which show the current date and time values. When the buttons are tapped, the date or time pickers open in the overlay.
 
-When using Datetime Button with a JavaScript framework such as Angular, React, or Vue be sure to use the [keepContentsMounted property on ion-modal](./modal#keepcontentsmounted) or the [keepContentsMounted property on ion-popover](./popover#keepcontentsmounted). This allows the linked datetime instance to be mounted even if the overlay has not been presented yet.
+When using Datetime Button with a JavaScript framework such as Angular, React, or Vue be sure to use the [keepContentsMounted property on ion-modal](./modal#prop-keep-contents-mounted) or the [keepContentsMounted property on ion-popover](./popover#prop-keep-contents-mounted). This allows the linked datetime instance to be mounted even if the overlay has not been presented yet.
 
 ## Basic Usage
 

@@ -41,7 +41,9 @@ import ShowAdjacentDays from '@site/static/usage/v9/datetime/show-adjacent-days/
 import MultipleDateSelection from '@site/static/usage/v9/datetime/multiple/index.md';
 
 import GlobalTheming from '@site/static/usage/v9/datetime/styling/global-theming/index.md';
+import CalendarHeaderStyling from '@site/static/usage/v9/datetime/styling/calendar-header/index.md';
 import CalendarDaysStyling from '@site/static/usage/v9/datetime/styling/calendar-days/index.md';
+import DatetimeHeaderStyling from '@site/static/usage/v9/datetime/styling/datetime-header/index.md';
 import WheelStyling from '@site/static/usage/v9/datetime/styling/wheel-styling/index.md';
 
 <head>
@@ -300,7 +302,7 @@ By default, `ionChange` is emitted with the new datetime value whenever a new da
 
 ### Showing Confirmation Buttons
 
-The default Done and Cancel buttons are already preconfigured to call the [`confirm`](#confirm) and [`cancel`](#cancel) methods, respectively.
+The default Done and Cancel buttons are already preconfigured to call the [`confirm`](#method-confirm) and [`cancel`](#method-cancel) methods, respectively.
 
 <ShowingConfirmationButtons />
 
@@ -352,6 +354,24 @@ The benefit of this approach is that every component, not just `ion-datetime`, c
 
 <GlobalTheming />
 
+### Datetime Header
+
+The datetime header manages the content for the `title` slot and the selected date.
+
+:::note
+The selected date will not render if `preferWheel` is set to `true`.
+:::
+
+<DatetimeHeaderStyling />
+
+### Calendar Header
+
+The calendar header manages the date navigation controls (month/year picker and prev/next buttons) and the days of the week when using a grid style layout.
+
+The header can be styled using CSS shadow parts.
+
+<CalendarHeaderStyling />
+
 ### Calendar Days
 
 The calendar days in a grid-style `ion-datetime` can be styled using CSS shadow parts.

@@ -42,7 +42,7 @@ import Controller from '@site/static/usage/v9/loading/controller/index.md';
 
 ### Spinners
 
-The spinner that is used can be customized using the `spinner` property. See the [spinner property documentation](#spinner) for a full list of options.
+The spinner that is used can be customized using the `spinner` property. See the [spinner property documentation](#prop-spinner) for a full list of options.
 
 import Spinners from '@site/static/usage/v9/loading/spinners/index.md';
Original file line number	Diff line number	Diff line change
Expand Up		@@ -22,3 +22,4 @@ yarn-debug.log*
		yarn-error.log*

		static/**/node_modules/
		.idea
-Original file line number
+Diff line change
@@ Expand Up / @@ -13,6 +13,7 @@ Udemy @@
     Vetur
     Wistia
     WCAG
+    CDK
     actionsheet
     fabs
@@ Expand Down @@