ionic-team · brandyscarney · Aug 5, 2025 · Dec 2, 2024 · Dec 2, 2024 · Dec 2, 2024
@@ -2,21 +2,24 @@
 
 Thanks for your interest in contributing to Ionic's documentation! :tada: Check the guidelines below for suggestions and requirements before submitting your contribution.
 
-- [Contributing Guide](#contributing-guide)
-  - [Development Workflow](#development-workflow)
-    - [Previewing Changes](#previewing-changes)
-    - [Linting Documentation](#linting-documentation)
-    - [Spell Check](#spell-check)
-  - [Using VS Code on Windows](#using-vs-code-on-windows)
-  - [Project Structure](#project-structure)
-    - [Directories](#directories)
-  - [Authoring Content](#authoring-content)
-    - [Authoring Locally](#authoring-locally)
-  - [Translation](#translation)
-  - [Reporting Issues](#reporting-issues)
-  - [Pull Request Guidelines](#pull-request-guidelines)
-  - [Deploying](#deploying)
-  - [License](#license)
+<sub>
+  <b>TABLE OF CONTENTS</b>
+</sub>
+
+- [Development Workflow](#development-workflow)
+  - [Previewing Changes](#previewing-changes)
+  - [Linting Documentation](#linting-documentation)
+  - [Spell Check](#spell-check)
+- [Using VS Code on Windows](#using-vs-code-on-windows)
+- [Project Structure](#project-structure)
+  - [Directories](#directories)
+- [Authoring Content](#authoring-content)
+  - [Reference Content](#reference-content)
+- [Translation](#translation)
+- [Reporting Issues](#reporting-issues)
+- [Pull Request Guidelines](#pull-request-guidelines)
+- [Deploying](#deploying)
+- [License](#license)
 
 ---
 

@@ -80,6 +80,7 @@ mozallowfullscreen
 msallowfullscreen
 oallowfullscreen
 webkitallowfullscreen
+webnative
 
-ionicframework
 browserslistrc
+ionicframework
@@ -0,0 +1,177 @@
+---
+title: Angular Injection Tokens
+sidebar_label: Injection Tokens
+---
+
+<head>
+  <title>Angular Injection Tokens | Access Ionic Elements via Dependency Injection</title>
+  <meta
+    name="description"
+    content="Learn how to use Ionic's Angular injection tokens to access Ionic elements through Angular's dependency injection system for more streamlined component interactions."
+  />
+</head>
+
+Ionic provides Angular injection tokens that allow you to access Ionic elements through Angular's dependency injection system. This provides a more Angular-idiomatic way to interact with Ionic components programmatically.
+
+## Benefits
+
+Using injection tokens provides several advantages:
+
+- **Type Safety**: Full TypeScript support with proper typing for the modal element
+- **Angular Integration**: Works seamlessly with Angular's dependency injection system
+- **Simplified Code**: Eliminates the need for `ViewChild` queries or manual element references
+- **Better Testing**: Easier to mock and test components that use injection tokens
+
+## IonModalToken
+
+The `IonModalToken` injection token allows you to inject a reference to the current modal element directly into your Angular components. This is particularly useful when you need to programmatically control modal behavior, listen to modal events, or access modal properties.
+
+Starting in `@ionic/angular` v8.7.0, you can use this injection token to streamline modal interactions in your Angular applications.
+
+### Basic Usage
+
+To use the `IonModalToken`, inject it into your component's constructor:
+
+```tsx
+import { Component, inject } from '@angular/core';
+import { IonButton, IonContent, IonHeader, IonModalToken, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-modal',
+  template: `
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Modal Content</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content>
+      <p>This is modal content</p>
+      <ion-button (click)="closeModal()">Close Modal</ion-button>
+    </ion-content>
+  `,
+  imports: [IonHeader, IonToolbar, IonTitle, IonContent, IonButton],
+})
+export class ModalComponent {
+  private modalToken = inject(IonModalToken);
+
+  closeModal() {
+    this.modalToken.dismiss();
+  }
+}
+```
+
+### Listening to Modal Events
+
+You can use the injected modal reference to listen to modal lifecycle events:
+
+```tsx
+import { Component, inject, OnInit } from '@angular/core';
+import { IonButton, IonContent, IonHeader, IonModalToken, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-modal',
+  template: `
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Modal with Events</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content>
+      <p>Check the console for modal events</p>
+      <ion-button (click)="closeModal()">Close</ion-button>
+    </ion-content>
+  `,
+  imports: [IonHeader, IonToolbar, IonTitle, IonContent, IonButton],
+})
+export class ModalComponent implements OnInit {
+  private modalToken = inject(IonModalToken);
+
+  ngOnInit() {
+    this.modalToken.addEventListener('ionModalWillDismiss', (event) => {
+      console.log('Modal will dismiss:', event.detail);
+    });
+
+    this.modalToken.addEventListener('ionModalDidDismiss', (event) => {
+      console.log('Modal did dismiss:', event.detail);
+    });
+  }
+
+  closeModal() {
+    this.modalToken.dismiss({ result: 'closed by button' });
+  }
+}
+```
+
+### Accessing Modal Properties
+
+The injected modal reference provides access to all modal properties and methods:
+
+```tsx
+import { Component, inject, OnInit } from '@angular/core';
+import { IonButton, IonContent, IonHeader, IonModalToken, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-modal',
+  template: `
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Modal Properties</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content>
+      <p>Modal ID: {{ modalId }}</p>
+      <ion-button (click)="toggleBackdropDismiss()"> Toggle Backdrop Dismiss: {{ backdropDismiss }} </ion-button>
+    </ion-content>
+  `,
+  imports: [IonHeader, IonToolbar, IonTitle, IonContent, IonButton],
+})
+export class ModalComponent implements OnInit {
+  private modalToken = inject(IonModalToken);
+
+  modalId = '';
+  backdropDismiss = true;
+
+  ngOnInit() {
+    this.modalId = this.modalToken.id || 'No ID';
+    this.backdropDismiss = this.modalToken.backdropDismiss;
+  }
+
+  toggleBackdropDismiss() {
+    this.backdropDismiss = !this.backdropDismiss;
+    this.modalToken.backdropDismiss = this.backdropDismiss;
+  }
+}
+```
+
+### Opening a Modal with Injection Token Content
+
+When opening a modal that uses the injection token, you can pass the component directly to the modal controller:
+
+```tsx
+import { Component, inject } from '@angular/core';
+import { IonContent, IonButton, ModalController } from '@ionic/angular/standalone';
+import { ModalComponent } from './modal.component';
+
+@Component({
+  selector: 'app-home',
+  template: `
+    <ion-content>
+      <ion-button (click)="openModal()">Open Modal</ion-button>
+    </ion-content>
+  `,
+})
+export class HomePage {
+  private modalController = inject(ModalController);
+
+  async openModal() {
+    const myModal = await this.modalController.create({
+      component: ModalComponent,
+      componentProps: {
+        // Any props you want to pass to the modal content
+      },
+    });
+
+    await myModal.present();
+  }
+}
+```
@@ -65,7 +65,7 @@ import Justify from '@site/static/usage/v8/checkbox/justify/index.md';
 import Indeterminate from '@site/static/usage/v8/checkbox/indeterminate/index.md';
 
 <Indeterminate />
-  
+
 ## Links inside of Labels
 
 Checkbox labels can sometimes be accompanied with links. These links can provide more information related to the checkbox. However, clicking the link should not check the checkbox. To achieve this, we can use [stopPropagation](https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation) to prevent the click event from bubbling. When using this approach, the rest of the label still remains clickable.
@@ -114,31 +114,7 @@ interface CheckboxCustomEvent<T = any> extends CustomEvent {
 }
 ```
 
-## レガシーなチェックボックス構文からのマイグレーション
-
-Ionic 7.0では、よりシンプルなチェックボックス構文が導入されました。この新しい構文は、チェックボックスの設定に必要な定型文を減らし、アクセシビリティの問題を解決し、開発者のエクスペリエンスを向上させます。
-
-開発者は、この移行を一度に1つのチェックボックスずつ実行することができます。開発者はレガシー構文を使い続けることができますが、できるだけ早く移行することをお勧めします。
-
-### 最新の構文の使い方
-
-最新の構文を使用するには、`ion-label` を削除して、 `ion-checkbox` の中に直接ラベルを渡す必要があります。ラベルの配置は `ion-checkbox` の `labelPlacement` プロパティを使用して設定することができる。ラベルとコントロールの行の詰め方は、`ion-checkbox` の `justify` プロパティを使用して制御することができます。
-
-import Migration from '@site/static/usage/v8/checkbox/migration/index.md';
-
-<Migration />
-
-
-:::note
-Ionic の過去のバージョンでは、`ion-checkbox` が正しく機能するために `ion-item` が必要でした。Ionic 7.0 からは、`ion-checkbox` は `ion-item` の中で、そのアイテムが `ion-list` に配置される場合にのみ使用されます。また、`ion-checkbox`が正しく機能するためには、`ion-item`はもはや必須ではありません。
-:::
-
-### レガシーな構文の使い方
-
-Ionicは、アプリが最新のチェックボックス構文を使用しているかどうかをヒューリスティックに検出します。場合によっては、レガシーな構文を使い続けることが望ましい場合もあります。開発者は `ion-checkbox` の `legacy` プロパティを `true` に設定することで、そのチェックボックスのインスタンスがレガシー構文を使用するように強制できます。
-
-
-## プロパティ
+## Properties
 <Props />
 
 ## イベント

@@ -188,28 +188,6 @@ import CSSProps from '@site/static/usage/v8/input/theming/css-properties/index.m
 
 <CSSProps />
 
-## レガシーな Input 構文からの移行
-
-Ionic 7.0では、よりシンプルなInput構文が導入されました。この新しい構文は、Inputのセットアップに必要な定型文を減らし、アクセシビリティの問題を解決し、開発者のエクスペリエンスを向上させます。
-
-開発者は、この移行を一度に1つのInputで実行できます。開発者はレガシー構文を使い続けることができますが、できるだけ早く移行することをお勧めします。
-
-### 最新の構文の使い方
-
-最新の構文を使うには、3つのステップがあります。
-
-1. `ion-label` を削除して、代わりに `ion-input` の `label` プロパティを使用します。ラベルの配置は `ion-input` の `labelPlacement` プロパティで設定することができる。
-2. Input固有のプロパティを `ion-item` から `ion-input` に移動します。これには、`counter`、`counterFormatter`、`fill`、`shape`プロパティが含まれる。
-3. `ion-item` の `helper` と `error` スロットの使用を削除し、代わりに `ion-input` の `helperText` と `errorText` プロパティを使用します。
-
-import Migration from '@site/static/usage/v8/input/migration/index.md';
-
-<Migration />
-
-### レガシー構文の使用
-
-Ionicは、アプリが最新のInput構文を使用しているかどうかをヒューリスティックに検出します。場合によっては、レガシーな構文を使い続けることが望ましいこともあります。開発者は、`ion-input`の`legacy`プロパティを`true`に設定することで、そのInputのインスタンスにレガシー構文を使用するように強制できます。
-
 ## Interfaces
 
 ### InputChangeEventDetail

@@ -173,6 +173,37 @@ Each [Picker Column](./picker-column) can be navigated using the keyboard when f
 | <kbd>Home</kbd>      | Scroll to the first option.          |
 | <kbd>End</kbd>       | Scroll to the last option.           |
 
+## Accessibility
+
+### Screen Readers
+
+Picker supports navigation using a screen reader by implementing the [`slider` role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role) on each [Picker Column](./picker-column). The following gestures can be used to navigate the Picker.
+
+| Gesture | Function |
+| - | - |
+| Swipe Left | Move focus to the previous Picker Column. |
+| Swipe Right | Move focus to the next Picker Column. |
+| Swipe Up | Select the next option in the Picker Column. |
+| Swipe Down | Select the previous option in the Picker Column. |
+| Double Tap and Slide Up/Down | Adjust the selected option in the Picker Column. Can be used as an alternative to swiping up and down. |
+
+:::caution
+The Swipe Up and Swipe Down gestures rely on the correct key events being synthesized as noted on the [`slider` documentation](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role). [Chromium-based browsers do not synthesize keyboard events correctly](https://issues.chromium.org/issues/40816094), but the "Double Tap and Slide Up/Down" gesture can be used as an alternative until this has been implemented in Chromium-based browsers.
+:::
+
+### Keyboard Interactions
+
+Each [Picker Column](./picker-column) can be navigated using the keyboard when focused.
+
+| Key                  | Description                          |
+| -------------------- | ------------------------------------ |
+| <kbd>ArrowUp</kbd>   | Scroll to the previous option.       |
+| <kbd>ArrowDown</kbd> | Scroll to the next option.           |
+| <kbd>PageUp</kbd>    | Scroll up by more than one option.   |
+| <kbd>PageDown</kbd>  | Scroll down by more than one option. |
+| <kbd>Home</kbd>      | Scroll to the first option.          |
+| <kbd>End</kbd>       | Scroll to the last option.           |
+
 ## プロパティ
 <Props />
 

@@ -107,32 +107,7 @@ import CSSParts from '@site/static/usage/v8/radio/theming/css-shadow-parts/index
 
 <CSSParts />
 
-## Legacy Radio Syntaxからの移行
-
-Ionic 7.0では、よりシンプルなラジオ構文が導入されました。この新しい構文は、ラジオを設定するために必要な定型文を減らし、アクセシビリティの問題を解決し、開発者のエクスペリエンスを向上させます。
-
-開発者は、この移行を一度に1つのラジオで実行できます。開発者はレガシー構文を使い続けることができますが、できるだけ早く移行することをお勧めします。
-
-### 最新の構文の使い方
-
-最新の構文を使用するには、`ion-label`を削除して、`ion-radio`の内部にラベルを直接渡します。ラベルの配置は `ion-radio` の `labelPlacement` プロパティを使用して設定することができます。ラベルとコントロールの行の詰め方は、`ion-radio` の `justify` プロパティを使用して制御することができます。
-
-import Migration from '@site/static/usage/v8/radio/migration/index.md';
-
-<Migration />
-
-
-:::note
-Ionic の過去のバージョンでは、`ion-radio` が正しく機能するためには `ion-item` が必要でした。Ionic 7.0 からは、`ion-radio` は `ion-item` の中で、そのアイテムが `ion-list` に配置される場合にのみ使用されます。また、`ion-radio`が正しく機能するためには、`ion-item`はもはや必須ではありません。
-:::
-
-### レガシー構文の使用
-
-Ionicは、アプリが最新の無線構文を使用しているかどうかをヒューリスティックで検出します。場合によっては、レガシー構文を使い続けることが望ましい場合もあります。開発者は `ion-radio` の `legacy` プロパティを `true` に設定することで、その無線機のインスタンスがレガシー構文を使用するように強制できます。
-
-
-
-## プロパティ
+## Properties
 <Props />
 
 ## イベント