Skip to content

Commit 2016421

Browse files
ShaneKShaneK
committed
feat(angular): add injection token docs
1 parent 2f858c8 commit 2016421

File tree

2 files changed

+181
-0
lines changed

2 files changed

+181
-0
lines changed

‎docs/angular/injection-tokens.md

Lines changed: 180 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,180 @@
1+
---
2+
title: Angular Injection Tokens
3+
sidebar_label: Injection Tokens
4+
---
5+
6+
<head>
7+
<title>Angular Injection Tokens | Access Ionic Elements via Dependency Injection</title>
8+
<meta
9+
name="description"
10+
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."
11+
/>
12+
</head>
13+
14+
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.
15+
16+
## IonModalToken
17+
18+
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.
19+
20+
Starting in `@ionic/angular` v8.7.0, you can use this injection token to streamline modal interactions in your Angular applications.
21+
22+
### Basic Usage
23+
24+
To use the `IonModalToken`, inject it into your component's constructor:
25+
26+
```tsx
27+
import { Component, inject } from '@angular/core';
28+
import { IonButton, IonContent, IonHeader, IonModalToken, IonTitle, IonToolbar } from '@ionic/angular/standalone';
29+
30+
@Component({
31+
selector: 'app-modal',
32+
template: `
33+
<ion-header>
34+
<ion-toolbar>
35+
<ion-title>Modal Content</ion-title>
36+
</ion-toolbar>
37+
</ion-header>
38+
<ion-content>
39+
<p>This is modal content</p>
40+
<ion-button (click)="closeModal()">Close Modal</ion-button>
41+
</ion-content>
42+
`,
43+
imports: [IonHeader, IonToolbar, IonTitle, IonContent, IonButton]
44+
})
45+
export class ModalComponent {
46+
private modalToken = inject(IonModalToken);
47+
48+
closeModal() {
49+
this.modalToken.dismiss();
50+
}
51+
}
52+
```
53+
54+
### Listening to Modal Events
55+
56+
You can use the injected modal reference to listen to modal lifecycle events:
57+
58+
```tsx
59+
import { Component, inject, OnInit } from '@angular/core';
60+
import { IonButton, IonContent, IonHeader, IonModalToken, IonTitle, IonToolbar, } from '@ionic/angular/standalone';
61+
62+
@Component({
63+
selector: 'app-modal',
64+
template: `
65+
<ion-header>
66+
<ion-toolbar>
67+
<ion-title>Modal with Events</ion-title>
68+
</ion-toolbar>
69+
</ion-header>
70+
<ion-content>
71+
<p>Check the console for modal events</p>
72+
<ion-button (click)="closeModal()">Close</ion-button>
73+
</ion-content>
74+
`,
75+
imports: [IonHeader, IonToolbar, IonTitle, IonContent, IonButton],
76+
})
77+
export class ModalComponent implements OnInit {
78+
private modalToken = inject(IonModalToken);
79+
80+
ngOnInit() {
81+
this.modalToken.addEventListener('ionModalWillDismiss', (event) => {
82+
console.log('Modal will dismiss:', event.detail);
83+
});
84+
85+
this.modalToken.addEventListener('ionModalDidDismiss', (event) => {
86+
console.log('Modal did dismiss:', event.detail);
87+
});
88+
}
89+
90+
closeModal() {
91+
this.modalToken.dismiss({ result: 'closed by button' });
92+
}
93+
}
94+
```
95+
96+
### Accessing Modal Properties
97+
98+
The injected modal reference provides access to all modal properties and methods:
99+
100+
```tsx
101+
import { Component, inject, OnInit } from '@angular/core';
102+
import { IonButton, IonContent, IonHeader, IonModalToken, IonTitle, IonToolbar, } from '@ionic/angular/standalone';
103+
104+
@Component({
105+
selector: 'app-modal',
106+
template: `
107+
<ion-header>
108+
<ion-toolbar>
109+
<ion-title>Modal Properties</ion-title>
110+
</ion-toolbar>
111+
</ion-header>
112+
<ion-content>
113+
<p>Modal ID: {{ modalId }}</p>
114+
<ion-button (click)="toggleBackdropDismiss()">
115+
Toggle Backdrop Dismiss: {{ backdropDismiss }}
116+
</ion-button>
117+
</ion-content>
118+
`,
119+
imports: [IonHeader, IonToolbar, IonTitle, IonContent, IonButton],
120+
})
121+
export class ModalComponent implements OnInit {
122+
private modalToken = inject(IonModalToken);
123+
124+
modalId = '';
125+
backdropDismiss = true;
126+
127+
ngOnInit() {
128+
this.modalId = this.modalToken.id || 'No ID';
129+
this.backdropDismiss = this.modalToken.backdropDismiss;
130+
}
131+
132+
toggleBackdropDismiss() {
133+
this.backdropDismiss = !this.backdropDismiss;
134+
this.modalToken.backdropDismiss = this.backdropDismiss;
135+
}
136+
}
137+
```
138+
139+
### Opening a Modal with Injection Token Content
140+
141+
When opening a modal that uses the injection token, you can pass the component directly to the modal controller:
142+
143+
```tsx
144+
import { Component, inject } from '@angular/core';
145+
import { IonContent, IonButton, ModalController } from "@ionic/angular/standalone";
146+
import { ModalContentComponent } from './modal-content.component';
147+
148+
@Component({
149+
selector: 'app-home',
150+
template: `
151+
<ion-content>
152+
<ion-button (click)="openModal()">Open Modal</ion-button>
153+
</ion-content>
154+
`
155+
})
156+
export class HomePage {
157+
private modalController = inject(ModalController);
158+
159+
async openModal() {
160+
const modal = await this.modalController.create({
161+
component: ModalContentComponent,
162+
componentProps: {
163+
// Any props you want to pass to the modal content
164+
}
165+
});
166+
167+
await modal.present();
168+
}
169+
}
170+
```
171+
172+
## Benefits
173+
174+
Using injection tokens provides several advantages:
175+
176+
- **Type Safety**: Full TypeScript support with proper typing for the modal element
177+
- **Angular Integration**: Works seamlessly with Angular's dependency injection system
178+
- **Simplified Code**: Eliminates the need for `ViewChild` queries or manual element references
179+
- **Better Testing**: Easier to mock and test components that use injection tokens
180+
- **Standalone Components**: Full compatibility with Angular's standalone component architecture

‎sidebars.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,7 @@ module.exports = {
8585
},
8686
'angular/lifecycle',
8787
'angular/navigation',
88+
'angular/injection-tokens',
8889
'angular/virtual-scroll',
8990
'angular/slides',
9091
'angular/platform',

0 commit comments

Comments
 (0)