Skip to content

Commit 278bf92

Browse files
committed
refactor(angular): improving code example
1 parent fb6d127 commit 278bf92

File tree

1 file changed

+10
-10
lines changed

1 file changed

+10
-10
lines changed

docs/angular/injection-tokens.md

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,6 @@ sidebar_label: Injection Tokens
1313

1414
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.
1515

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-
2216
## Benefits
2317

2418
Using injection tokens provides several advantages:
@@ -28,6 +22,12 @@ Using injection tokens provides several advantages:
2822
- **Simplified Code**: Eliminates the need for `ViewChild` queries or manual element references
2923
- **Better Testing**: Easier to mock and test components that use injection tokens
3024

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+
3131
### Basic Usage
3232

3333
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
150150
```tsx
151151
import { Component, inject } from '@angular/core';
152152
import { IonContent, IonButton, ModalController } from '@ionic/angular/standalone';
153-
import { ModalContentComponent } from './modal-content.component';
153+
import { ModalComponent } from './modal.component';
154154

155155
@Component({
156156
selector: 'app-home',
@@ -164,14 +164,14 @@ export class HomePage {
164164
private modalController = inject(ModalController);
165165

166166
async openModal() {
167-
const modal = await this.modalController.create({
168-
component: ModalContentComponent,
167+
const myModal = await this.modalController.create({
168+
component: ModalComponent,
169169
componentProps: {
170170
// Any props you want to pass to the modal content
171171
},
172172
});
173173

174-
await modal.present();
174+
await myModal.present();
175175
}
176176
}
177177
```

0 commit comments

Comments
 (0)