ionic-team · averyjohnston · Oct 4, 2023 · Sep 11, 2023 · Sep 19, 2023 · Sep 25, 2023
diff --git a/docs/angular/build-options.md b/docs/angular/build-options.md
diff --git a/docs/angular/overview.md b/docs/angular/overview.md
@@ -39,4 +39,8 @@ With Ionic 4+, the official Angular stack for building an app and routing are us
   <p>Learn about using Ionic lifecycle events in class components and with hooks</p>
 </DocsCard>
 
+<DocsCard header="Build Options" href="build-options" icon="/icons/logo-angular-icon.png">
+  <p>Learn about using Modules or Standalone Components in Ionic.</p>
+</DocsCard>
+
 </DocsCards>
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/api/toast.md b/docs/api/toast.md
@@ -64,6 +64,14 @@ import ButtonsPlayground from '@site/static/usage/v7/toast/buttons/index.md';
 
 Toasts can be positioned at the top, bottom or middle of the viewport. The position can be passed upon creation. The possible values are `top`, `bottom` and `middle`. If the position is not specified, the toast will be displayed at the bottom of the viewport.
 
+### Relative Positioning
+
+If a toast is presented alongside navigation elements such as a header, footer, or [FAB](./fab.md), the toast may overlap these elements by default. This can be fixed using the `positionAnchor` property, which takes either an element reference or an ID. The toast will be positioned relative to the chosen element, appearing below it when using `position="top"` or above it when using `position="bottom"`. When using `position="middle"`, the `positionAnchor` property is ignored.
+
+import PositionAnchor from '@site/static/usage/v7/toast/position-anchor/index.md';
+
+<PositionAnchor />
+
 ## Layout
 
 Button containers within the toast can be displayed either on the same line as the message or stacked on separate lines using the `layout` property. The stacked layout should be used with buttons that have long text values. Additionally, buttons in a stacked toast layout can use a `side` value of either `start` or `end`, but not both.

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">