From 5d6abd18223d891e4dff2948a8e216fdc3dc1779 Mon Sep 17 00:00:00 2001 From: ShaneK Date: Wed, 30 Jul 2025 09:11:39 -0700 Subject: [PATCH 1/3] feat(angular): add injection token docs --- docs/angular/injection-tokens.md | 178 +++++++++++++++++++++++++++++++ sidebars.js | 1 + 2 files changed, 179 insertions(+) create mode 100644 docs/angular/injection-tokens.md diff --git a/docs/angular/injection-tokens.md b/docs/angular/injection-tokens.md new file mode 100644 index 00000000000..a02069d5424 --- /dev/null +++ b/docs/angular/injection-tokens.md @@ -0,0 +1,178 @@ +--- +title: Angular Injection Tokens +sidebar_label: Injection Tokens +--- + + + Angular Injection Tokens | Access Ionic Elements via Dependency Injection + + + +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. + +## 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: ` + + + Modal Content + + + +

This is modal content

+ Close Modal + + `, + 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: ` + + + Modal with Events + + + +

Check the console for modal events

+ Close + + `, + 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: ` + + + Modal Properties + + + +

Modal ID: {{ modalId }}

+ Toggle Backdrop Dismiss: {{ backdropDismiss }} + + `, + 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 { ModalContentComponent } from './modal-content.component'; + +@Component({ + selector: 'app-home', + template: ` + + Open Modal + + `, +}) +export class HomePage { + private modalController = inject(ModalController); + + async openModal() { + const modal = await this.modalController.create({ + component: ModalContentComponent, + componentProps: { + // Any props you want to pass to the modal content + }, + }); + + await modal.present(); + } +} +``` + +## 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 +- **Standalone Components**: Full compatibility with Angular's standalone component architecture diff --git a/sidebars.js b/sidebars.js index 115eca21382..b3c15b05f58 100644 --- a/sidebars.js +++ b/sidebars.js @@ -85,6 +85,7 @@ module.exports = { }, 'angular/lifecycle', 'angular/navigation', + 'angular/injection-tokens', 'angular/virtual-scroll', 'angular/slides', 'angular/platform', From fb6d127ce9df848787aa7178c0e9996a37f1eebc Mon Sep 17 00:00:00 2001 From: ShaneK Date: Wed, 30 Jul 2025 11:03:11 -0700 Subject: [PATCH 2/3] refactor(angular): moving benefits section for injection tokens --- docs/angular/injection-tokens.md | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/docs/angular/injection-tokens.md b/docs/angular/injection-tokens.md index a02069d5424..5fb1ab2de00 100644 --- a/docs/angular/injection-tokens.md +++ b/docs/angular/injection-tokens.md @@ -19,6 +19,15 @@ The `IonModalToken` injection token allows you to inject a reference to the curr Starting in `@ionic/angular` v8.7.0, you can use this injection token to streamline modal interactions in your Angular applications. +## 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 + ### Basic Usage To use the `IonModalToken`, inject it into your component's constructor: @@ -166,13 +175,3 @@ export class HomePage { } } ``` - -## 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 -- **Standalone Components**: Full compatibility with Angular's standalone component architecture From 278bf92a223ad1594cf2782447fc29dcc5aeda1a Mon Sep 17 00:00:00 2001 From: ShaneK Date: Wed, 30 Jul 2025 11:08:29 -0700 Subject: [PATCH 3/3] refactor(angular): improving code example --- docs/angular/injection-tokens.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/docs/angular/injection-tokens.md b/docs/angular/injection-tokens.md index 5fb1ab2de00..c7c775fd69c 100644 --- a/docs/angular/injection-tokens.md +++ b/docs/angular/injection-tokens.md @@ -13,12 +13,6 @@ sidebar_label: Injection Tokens 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. -## 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. - ## Benefits Using injection tokens provides several advantages: @@ -28,6 +22,12 @@ Using injection tokens provides several advantages: - **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: @@ -150,7 +150,7 @@ When opening a modal that uses the injection token, you can pass the component d ```tsx import { Component, inject } from '@angular/core'; import { IonContent, IonButton, ModalController } from '@ionic/angular/standalone'; -import { ModalContentComponent } from './modal-content.component'; +import { ModalComponent } from './modal.component'; @Component({ selector: 'app-home', @@ -164,14 +164,14 @@ export class HomePage { private modalController = inject(ModalController); async openModal() { - const modal = await this.modalController.create({ - component: ModalContentComponent, + const myModal = await this.modalController.create({ + component: ModalComponent, componentProps: { // Any props you want to pass to the modal content }, }); - await modal.present(); + await myModal.present(); } } ```