Skip to content

Commit f8de8aa

Browse files
ShaneKbrandyscarney
ShaneK
authored and
brandyscarney
committed
docs(angular): add injection token docs (#4221)
1 parent 8112113 commit f8de8aa

File tree

2 files changed

+178
-0
lines changed

2 files changed

+178
-0
lines changed

‎docs/angular/injection-tokens.md

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

‎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)