Skip to content

Commit 91c0b93

Browse files
liamdebeasisean-perkins
liamdebeasi
authored and
sean-perkins
committed
docs(angular): add angular standalone syntax to non-playground examples (#3116)
1 parent 38486e5 commit 91c0b93

File tree

13 files changed

+401
-1
lines changed

13 files changed

+401
-1
lines changed

‎docs/angular/platform.md

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@
22
title: Platform
33
---
44

5+
import Tabs from '@theme/Tabs';
6+
import TabItem from '@theme/TabItem';
7+
58
<head>
69
<title>Platform | Ionic Platform to Customize Apps to Fit Any Device</title>
710
<meta
@@ -14,6 +17,16 @@ The Platform service can be used to get information about your current device. Y
1417

1518
## Usage
1619

20+
<Tabs
21+
groupId="framework"
22+
defaultValue="angular"
23+
values={[
24+
{ value: 'angular', label: 'Angular' },
25+
{ value: 'angular-standalone', label: 'Angular (Standalone)' },
26+
]}
27+
>
28+
<TabItem value="angular">
29+
1730
```tsx
1831
import { Platform } from '@ionic/angular';
1932

@@ -25,6 +38,23 @@ export class MyPage {
2538
}
2639
```
2740

41+
</TabItem>
42+
<TabItem value="angular-standalone">
43+
44+
```tsx
45+
import { Platform } from '@ionic/angular/standalone';
46+
47+
@Component({...})
48+
export class MyPage {
49+
constructor(public platform: Platform) {
50+
51+
}
52+
}
53+
```
54+
55+
</TabItem>
56+
</Tabs>
57+
2858
## Methods
2959

3060
### `is`

‎docs/angular/slides.md

Lines changed: 33 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@
22
title: Migrating from ion-slides to Swiper.js
33
---
44

5+
import Tabs from '@theme/Tabs';
6+
import TabItem from '@theme/TabItem';
7+
58
<head>
69
<title>Set Up Swiper.js for Angular Slides [Example] | Ionic</title>
710
<meta
@@ -137,7 +140,17 @@ With `ion-slides`, Ionic automatically customized dozens of Swiper properties. T
137140

138141
It is recommended to review the [properties](https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/slides/IonicSlides.ts) set by `IonicSlides` and determine which ones you would like to customize.
139142

140-
We can install the `IonicSlides` module by importing it from `@ionic/angular` and passing it to the `modules` property of `swiper-container` as an array:
143+
We can install the `IonicSlides` module by importing and passing it to the `modules` property of `swiper-container` as an array:
144+
145+
<Tabs
146+
groupId="framework"
147+
defaultValue="angular"
148+
values={[
149+
{ value: 'angular', label: 'Angular' },
150+
{ value: 'angular-standalone', label: 'Angular (Standalone)' },
151+
]}
152+
>
153+
<TabItem value="angular">
141154
142155
```typescript
143156
// home.page.ts
@@ -152,6 +165,25 @@ export class HomePage {
152165
}
153166
```
154167

168+
</TabItem>
169+
<TabItem value="angular-standalone">
170+
171+
```typescript
172+
// home.page.ts
173+
174+
import { IonicSlides } from '@ionic/angular/standalone';
175+
176+
@Component({
177+
...
178+
})
179+
export class HomePage {
180+
swiperModules = [IonicSlides];
181+
}
182+
```
183+
184+
</TabItem>
185+
</Tabs>
186+
155187
```html
156188
<!-- home.page.html -->
157189

‎docs/developing/config.md

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@
22
title: Config
33
---
44

5+
import Tabs from '@theme/Tabs';
6+
import TabItem from '@theme/TabItem';
7+
58
Ionic Config provides a way to change the properties of components globally across an app. It can set the app mode, tab button layout, animations, and more.
69

710
## Global Config
@@ -61,6 +64,16 @@ Ionic Angular provides a `Config` provider for accessing the Ionic Config.
6164

6265
#### Examples
6366

67+
<Tabs
68+
groupId="framework"
69+
defaultValue="angular"
70+
values={[
71+
{ value: 'angular', label: 'Angular' },
72+
{ value: 'angular-standalone', label: 'Angular (Standalone)' },
73+
]}
74+
>
75+
<TabItem value="angular">
76+
6477
```ts
6578
import { Config } from '@ionic/angular';
6679

@@ -72,6 +85,23 @@ class AppComponent {
7285
}
7386
```
7487

88+
</TabItem>
89+
<TabItem value="angular-standalone">
90+
91+
```ts
92+
import { Config } from '@ionic/angular/standalone';
93+
94+
@Component(...)
95+
class AppComponent {
96+
constructor(config: Config) {
97+
const mode = config.get('mode');
98+
}
99+
}
100+
```
101+
102+
</TabItem>
103+
</Tabs>
104+
75105
### getBoolean
76106

77107
| | |
@@ -81,6 +111,16 @@ class AppComponent {
81111

82112
#### Examples
83113

114+
<Tabs
115+
groupId="framework"
116+
defaultValue="angular"
117+
values={[
118+
{ value: 'angular', label: 'Angular' },
119+
{ value: 'angular-standalone', label: 'Angular (Standalone)' },
120+
]}
121+
>
122+
<TabItem value="angular">
123+
84124
```ts
85125
import { Config } from '@ionic/angular';
86126

@@ -92,6 +132,23 @@ class AppComponent {
92132
}
93133
```
94134

135+
</TabItem>
136+
<TabItem value="angular-standalone">
137+
138+
```ts
139+
import { Config } from '@ionic/angular/standalone';
140+
141+
@Component(...)
142+
class AppComponent {
143+
constructor(config: Config) {
144+
const swipeBackEnabled = config.getBoolean('swipeBackEnabled');
145+
}
146+
}
147+
```
148+
149+
</TabItem>
150+
</Tabs>
151+
95152
### getNumber
96153

97154
| | |

‎docs/developing/config/global/index.md

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import TabItem from '@theme/TabItem';
77
values={[
88
{ value: 'javascript', label: 'JavaScript' },
99
{ value: 'angular', label: 'Angular' },
10+
{ value: 'angular-standalone', label: 'Angular (Standalone)' },
1011
{ value: 'react', label: 'React' },
1112
{ value: 'vue', label: 'Vue' },
1213
]}
@@ -40,6 +41,23 @@ import { IonicModule } from '@ionic/angular';
4041
})
4142
```
4243

44+
</TabItem>
45+
<TabItem value="angular-standalone">
46+
47+
```ts title="main.ts"
48+
import { provideIonicAngular } from '@ionic/angular/standalone';
49+
50+
bootstrapApplication(AppComponent, {
51+
providers: [
52+
...,
53+
provideIonicAngular({
54+
rippleEffect: false,
55+
mode: 'md'
56+
})
57+
]
58+
})
59+
```
60+
4361
</TabItem>
4462
<TabItem value="react">
4563

‎docs/developing/config/per-component/index.md

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import TabItem from '@theme/TabItem';
77
values={[
88
{ value: 'javascript', label: 'JavaScript' },
99
{ value: 'angular', label: 'Angular' },
10+
{ value: 'angular-standalone', label: 'Angular (Standalone)' },
1011
{ value: 'react', label: 'React' },
1112
{ value: 'vue', label: 'Vue' },
1213
]}
@@ -77,6 +78,42 @@ class MyComponent {
7778
}
7879
```
7980

81+
</TabItem>
82+
<TabItem value="angular-standalone">
83+
84+
**Not recommended**
85+
86+
```ts
87+
import { provideIonicAngular } from '@ionic/angular/standalone';
88+
89+
bootstrapApplication(AppComponent, {
90+
providers: [
91+
...,
92+
provideIonicAngular({
93+
// Not recommended when your app requires reactive values
94+
backButtonText: 'Go Back'
95+
})
96+
]
97+
})
98+
```
99+
100+
**Recommended**
101+
102+
```html
103+
<ion-back-button [text]="backButtonText"></ion-back-button>
104+
```
105+
106+
```ts
107+
@Component(...)
108+
class MyComponent {
109+
/**
110+
* The back button text can be updated
111+
* anytime the locale changes.
112+
*/
113+
backButtonText = 'Go Back';
114+
}
115+
```
116+
80117
</TabItem>
81118
<TabItem value="react">
82119

‎docs/developing/config/per-platform-fallback/index.md

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import TabItem from '@theme/TabItem';
66
defaultValue="angular"
77
values={[
88
{ value: 'angular', label: 'Angular' },
9+
{ value: 'angular-standalone', label: 'Angular (Standalone)' },
910
{ value: 'react', label: 'React' },
1011
{ value: 'vue', label: 'Vue' },
1112
]}
@@ -35,6 +36,32 @@ const getConfig = () => {
3536
});
3637
```
3738

39+
</TabItem>
40+
<TabItem value="angular-standalone">
41+
42+
```ts title="main.ts"
43+
import { isPlatform, provideIonicAngular } from '@ionic/angular/standalone';
44+
45+
const getConfig = () => {
46+
if (isPlatform('hybrid')) {
47+
return {
48+
tabButtonLayout: 'label-hide'
49+
}
50+
}
51+
52+
return {
53+
tabButtonLayout: 'icon-top'
54+
};
55+
}
56+
57+
bootstrapApplication(AppComponent, {
58+
providers: [
59+
...,
60+
provideIonicAngular(getConfig())
61+
]
62+
})
63+
```
64+
3865
</TabItem>
3966
<TabItem value="react">
4067

‎docs/developing/config/per-platform-overrides/index.md

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import TabItem from '@theme/TabItem';
66
defaultValue="angular"
77
values={[
88
{ value: 'angular', label: 'Angular' },
9+
{ value: 'angular-standalone', label: 'Angular (Standalone)' },
910
{ value: 'react', label: 'React' },
1011
{ value: 'vue', label: 'Vue' },
1112
]}
@@ -38,6 +39,35 @@ const getConfig = () => {
3839
});
3940
```
4041

42+
</TabItem>
43+
<TabItem value="angular-standalone">
44+
45+
```ts title="main.ts"
46+
import { isPlatform, provideIonicAngular } from '@ionic/angular/standalone';
47+
48+
const getConfig = () => {
49+
let config = {
50+
animated: false
51+
};
52+
53+
if (isPlatform('iphone')) {
54+
config = {
55+
...config,
56+
backButtonText: 'Previous'
57+
}
58+
}
59+
60+
return config;
61+
}
62+
63+
bootstrapApplication(AppComponent, {
64+
providers: [
65+
...,
66+
provideIonicAngular(getConfig())
67+
]
68+
})
69+
```
70+
4171
</TabItem>
4272
<TabItem value="react">
4373

0 commit comments

Comments
 (0)