docs(angular): add angular standalone syntax to non-playground exampl…

…es (#3116)
ionic-team · Sep 26, 2023 · 2b07ee4 · 2b07ee4
1 parent 3944f9c
commit 2b07ee4
Show file tree

Hide file tree

Showing 13 changed files with 401 additions and 1 deletion.
diff --git a/docs/angular/platform.md b/docs/angular/platform.md
@@ -2,6 +2,9 @@
 title: Platform
 ---
 
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
 <head>
   <title>Platform | Ionic Platform to Customize Apps to Fit Any Device</title>
   <meta
@@ -14,6 +17,16 @@ The Platform service can be used to get information about your current device. Y
 
 ## Usage
 
+<Tabs
+  groupId="framework"
+  defaultValue="angular"
+  values={[
+    { value: 'angular', label: 'Angular' },
+    { value: 'angular-standalone', label: 'Angular (Standalone)' },
+  ]}
+>
+<TabItem value="angular">
+
 ```tsx
 import { Platform } from '@ionic/angular';
 
@@ -25,6 +38,23 @@ export class MyPage {
 }
 ```
 
+</TabItem>
+<TabItem value="angular-standalone">
+
+```tsx
+import { Platform } from '@ionic/angular/standalone';
+
+@Component({...})
+export class MyPage {
+  constructor(public platform: Platform) {
+
+  }
+}
+```
+
+</TabItem>
+</Tabs>
+
 ## Methods
 
 ### `is`

diff --git a/docs/angular/slides.md b/docs/angular/slides.md
@@ -2,6 +2,9 @@
 title: Migrating from ion-slides to Swiper.js
 ---
 
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
 <head>
   <title>Set Up Swiper.js for Angular Slides [Example] | Ionic</title>
   <meta
@@ -137,7 +140,17 @@ With `ion-slides`, Ionic automatically customized dozens of Swiper properties. T
 
 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.
 
-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:
+We can install the `IonicSlides` module by importing and passing it to the `modules` property of `swiper-container` as an array:
+
+<Tabs
+  groupId="framework"
+  defaultValue="angular"
+  values={[
+    { value: 'angular', label: 'Angular' },
+    { value: 'angular-standalone', label: 'Angular (Standalone)' },
+  ]}
+>
+<TabItem value="angular">
 
 ```typescript
 // home.page.ts
@@ -152,6 +165,25 @@ export class HomePage {
 }
 ```
 
+</TabItem>
+<TabItem value="angular-standalone">
+
+```typescript
+// home.page.ts
+
+import { IonicSlides } from '@ionic/angular/standalone';
+
+@Component({
+  ...
+})
+export class HomePage {
+  swiperModules = [IonicSlides];
+}
+```
+
+</TabItem>
+</Tabs>
+
 ```html
 <!-- home.page.html -->
 

diff --git a/docs/developing/config.md b/docs/developing/config.md
@@ -2,6 +2,9 @@
 title: Config
 ---
 
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
 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.
 
 ## Global Config
@@ -61,6 +64,16 @@ Ionic Angular provides a `Config` provider for accessing the Ionic Config.
 
 #### Examples
 
+<Tabs
+  groupId="framework"
+  defaultValue="angular"
+  values={[
+    { value: 'angular', label: 'Angular' },
+    { value: 'angular-standalone', label: 'Angular (Standalone)' },
+  ]}
+>
+<TabItem value="angular">
+
 ```ts
 import { Config } from '@ionic/angular';
 
@@ -72,6 +85,23 @@ class AppComponent {
 }
 ```
 
+</TabItem>
+<TabItem value="angular-standalone">
+
+```ts
+import { Config } from '@ionic/angular/standalone';
+
+@Component(...)
+class AppComponent {
+  constructor(config: Config) {
+    const mode = config.get('mode');
+  }
+}
+```
+
+</TabItem>
+</Tabs>
+
 ### getBoolean
 
 |                 |                                                                                      |
@@ -81,6 +111,16 @@ class AppComponent {
 
 #### Examples
 
+<Tabs
+  groupId="framework"
+  defaultValue="angular"
+  values={[
+    { value: 'angular', label: 'Angular' },
+    { value: 'angular-standalone', label: 'Angular (Standalone)' },
+  ]}
+>
+<TabItem value="angular">
+
 ```ts
 import { Config } from '@ionic/angular';
 
@@ -92,6 +132,23 @@ class AppComponent {
 }
 ```
 
+</TabItem>
+<TabItem value="angular-standalone">
+
+```ts
+import { Config } from '@ionic/angular/standalone';
+
+@Component(...)
+class AppComponent {
+  constructor(config: Config) {
+    const swipeBackEnabled = config.getBoolean('swipeBackEnabled');
+  }
+}
+```
+
+</TabItem>
+</Tabs>
+
 ### getNumber
 
 |                 |                                                                                 |

diff --git a/docs/developing/config/global/index.md b/docs/developing/config/global/index.md
@@ -7,6 +7,7 @@ import TabItem from '@theme/TabItem';
   values={[
     { value: 'javascript', label: 'JavaScript' },
     { value: 'angular', label: 'Angular' },
+    { value: 'angular-standalone', label: 'Angular (Standalone)' },
     { value: 'react', label: 'React' },
     { value: 'vue', label: 'Vue' },
   ]}
@@ -40,6 +41,23 @@ import { IonicModule } from '@ionic/angular';
 })
 ```
 
+</TabItem>
+<TabItem value="angular-standalone">
+
+```ts title="main.ts"
+import { provideIonicAngular } from '@ionic/angular/standalone';
+
+bootstrapApplication(AppComponent, {
+  providers: [
+    ...,
+    provideIonicAngular({
+      rippleEffect: false,
+      mode: 'md'
+    })
+  ]
+})
+```
+
 </TabItem>
 <TabItem value="react">
 

diff --git a/docs/developing/config/per-component/index.md b/docs/developing/config/per-component/index.md
@@ -7,6 +7,7 @@ import TabItem from '@theme/TabItem';
   values={[
     { value: 'javascript', label: 'JavaScript' },
     { value: 'angular', label: 'Angular' },
+    { value: 'angular-standalone', label: 'Angular (Standalone)' },
     { value: 'react', label: 'React' },
     { value: 'vue', label: 'Vue' },
   ]}
@@ -77,6 +78,42 @@ class MyComponent {
 }
 ```
 
+</TabItem>
+<TabItem value="angular-standalone">
+
+**Not recommended**
+
+```ts
+import { provideIonicAngular } from '@ionic/angular/standalone';
+
+bootstrapApplication(AppComponent, {
+  providers: [
+    ...,
+    provideIonicAngular({
+      // Not recommended when your app requires reactive values
+      backButtonText: 'Go Back'
+    })
+  ]
+})
+```
+
+**Recommended**
+
+```html
+<ion-back-button [text]="backButtonText"></ion-back-button>
+```
+
+```ts
+@Component(...)
+class MyComponent {
+  /**
+   * The back button text can be updated
+   * anytime the locale changes.
+   */
+  backButtonText = 'Go Back';
+}
+```
+
 </TabItem>
 <TabItem value="react">
 

diff --git a/docs/developing/config/per-platform-fallback/index.md b/docs/developing/config/per-platform-fallback/index.md
@@ -6,6 +6,7 @@ import TabItem from '@theme/TabItem';
   defaultValue="angular"
   values={[
     { value: 'angular', label: 'Angular' },
+    { value: 'angular-standalone', label: 'Angular (Standalone)' },
     { value: 'react', label: 'React' },
     { value: 'vue', label: 'Vue' },
   ]}
@@ -35,6 +36,32 @@ const getConfig = () => {
 });
 ```
 
+</TabItem>
+<TabItem value="angular-standalone">
+
+```ts title="main.ts"
+import { isPlatform, provideIonicAngular } from '@ionic/angular/standalone';
+
+const getConfig = () => {
+  if (isPlatform('hybrid')) {
+    return {
+      tabButtonLayout: 'label-hide'
+    }
+  }
+
+  return {
+    tabButtonLayout: 'icon-top'
+  };
+}
+
+bootstrapApplication(AppComponent, {
+  providers: [
+    ...,
+    provideIonicAngular(getConfig())
+  ]
+})
+```
+
 </TabItem>
 <TabItem value="react">
 

diff --git a/docs/developing/config/per-platform-overrides/index.md b/docs/developing/config/per-platform-overrides/index.md
@@ -6,6 +6,7 @@ import TabItem from '@theme/TabItem';
   defaultValue="angular"
   values={[
     { value: 'angular', label: 'Angular' },
+    { value: 'angular-standalone', label: 'Angular (Standalone)' },
     { value: 'react', label: 'React' },
     { value: 'vue', label: 'Vue' },
   ]}
@@ -38,6 +39,35 @@ const getConfig = () => {
 });
 ```
 
+</TabItem>
+<TabItem value="angular-standalone">
+
+```ts title="main.ts"
+import { isPlatform, provideIonicAngular } from '@ionic/angular/standalone';
+
+const getConfig = () => {
+  let config = {
+    animated: false
+  };
+
+  if (isPlatform('iphone')) {
+    config = {
+      ...config,
+      backButtonText: 'Previous'
+    }
+  }
+
+  return config;
+}
+
+bootstrapApplication(AppComponent, {
+  providers: [
+    ...,
+    provideIonicAngular(getConfig())
+  ]
+})
+```
+
 </TabItem>
 <TabItem value="react">