diff --git a/docs/angular/platform.md b/docs/angular/platform.md index 9668f3632a1..3cd0d7833f3 100644 --- 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'; + Platform | Ionic Platform to Customize Apps to Fit Any Device + + ```tsx import { Platform } from '@ionic/angular'; @@ -25,6 +38,23 @@ export class MyPage { } ``` + + + +```tsx +import { Platform } from '@ionic/angular/standalone'; + +@Component({...}) +export class MyPage { + constructor(public platform: Platform) { + + } +} +``` + + + + ## Methods ### `is` diff --git a/docs/angular/slides.md b/docs/angular/slides.md index c5eefbec3be..22a98b68cb2 100644 --- 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'; + Set Up Swiper.js for Angular Slides [Example] | Ionic + ```typescript // home.page.ts @@ -152,6 +165,25 @@ export class HomePage { } ``` + + + +```typescript +// home.page.ts + +import { IonicSlides } from '@ionic/angular/standalone'; + +@Component({ + ... +}) +export class HomePage { + swiperModules = [IonicSlides]; +} +``` + + + + ```html diff --git a/docs/developing/config.md b/docs/developing/config.md index 1bb117883fa..b5cb57a36c6 100644 --- 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 + + + ```ts import { Config } from '@ionic/angular'; @@ -72,6 +85,23 @@ class AppComponent { } ``` + + + +```ts +import { Config } from '@ionic/angular/standalone'; + +@Component(...) +class AppComponent { + constructor(config: Config) { + const mode = config.get('mode'); + } +} +``` + + + + ### getBoolean | | | @@ -81,6 +111,16 @@ class AppComponent { #### Examples + + + ```ts import { Config } from '@ionic/angular'; @@ -92,6 +132,23 @@ class AppComponent { } ``` + + + +```ts +import { Config } from '@ionic/angular/standalone'; + +@Component(...) +class AppComponent { + constructor(config: Config) { + const swipeBackEnabled = config.getBoolean('swipeBackEnabled'); + } +} +``` + + + + ### getNumber | | | diff --git a/docs/developing/config/global/index.md b/docs/developing/config/global/index.md index b58bc0610a4..19d3494dd66 100644 --- 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'; }) ``` + + + +```ts title="main.ts" +import { provideIonicAngular } from '@ionic/angular/standalone'; + +bootstrapApplication(AppComponent, { + providers: [ + ..., + provideIonicAngular({ + rippleEffect: false, + mode: 'md' + }) + ] +}) +``` + diff --git a/docs/developing/config/per-component/index.md b/docs/developing/config/per-component/index.md index 4b6a5427bc3..83546ca0cd7 100644 --- 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 { } ``` + + + +**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 + +``` + +```ts +@Component(...) +class MyComponent { + /** + * The back button text can be updated + * anytime the locale changes. + */ + backButtonText = 'Go Back'; +} +``` + diff --git a/docs/developing/config/per-platform-fallback/index.md b/docs/developing/config/per-platform-fallback/index.md index c7d12df30ba..a3bbd7fa45a 100644 --- 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 = () => { }); ``` + + + +```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()) + ] +}) +``` + diff --git a/docs/developing/config/per-platform-overrides/index.md b/docs/developing/config/per-platform-overrides/index.md index e8f723408b2..6ee558f9e41 100644 --- 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 = () => { }); ``` + + + +```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()) + ] +}) +``` + diff --git a/docs/developing/config/per-platform/index.md b/docs/developing/config/per-platform/index.md index 3deba7540b0..b088a7e6bf6 100644 --- a/docs/developing/config/per-platform/index.md +++ b/docs/developing/config/per-platform/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' }, ]} @@ -32,6 +33,28 @@ import { isPlatform, IonicModule } from '@ionic/angular'; }) ``` + + + +:::note +Since the config is set at runtime, you will not have access to the Platform Dependency Injection. Instead, you can use the underlying functions that the provider uses directly. + +See the [Angular Platform Documentation](../angular/platform) for the types of platforms you can detect. +::: + +```ts title="main.ts" +import { isPlatform, provideIonicAngular } from '@ionic/angular/standalone'; + +bootstrapApplication(AppComponent, { + providers: [ + ..., + provideIonicAngular({ + animated: !isPlatform('mobileweb') + }) + ] +}) +``` + diff --git a/docs/developing/hardware-back-button.md b/docs/developing/hardware-back-button.md index 6813f9b4ceb..d41db0d4e91 100644 --- a/docs/developing/hardware-back-button.md +++ b/docs/developing/hardware-back-button.md @@ -50,6 +50,7 @@ The `ionBackButton` event will not be emitted when running an app in a browser o values={[ { value: 'javascript', label: 'JavaScript' }, { value: 'angular', label: 'Angular' }, + { value: 'angular-standalone', label: 'Angular (Standalone)' }, { value: 'react', label: 'React' }, { value: 'vue', label: 'Vue' }, ] @@ -78,6 +79,21 @@ constructor(private platform: Platform) { }); } +``` + + + +```tsx +import { Platform } from '@ionic/angular/standalone'; + +... + +constructor(private platform: Platform) { + this.platform.backButton.subscribeWithPriority(10, () => { + console.log('Handler was called!'); + }); +} + ``` @@ -124,6 +140,7 @@ Each hardware back button callback has a `processNextHandler` parameter. Calling values={[ { value: 'javascript', label: 'JavaScript' }, { value: 'angular', label: 'Angular' }, + { value: 'angular-standalone', label: 'Angular (Standalone)' }, { value: 'react', label: 'React' }, { value: 'vue', label: 'Vue' }, ] @@ -164,6 +181,27 @@ constructor(private platform: Platform) { }); } +``` + + + +```tsx +import { Platform } from '@ionic/angular/standalone'; + +... + +constructor(private platform: Platform) { + this.platform.backButton.subscribeWithPriority(5, () => { + console.log('Another handler was called!'); + }); + + this.platform.backButton.subscribeWithPriority(10, (processNextHandler) => { + console.log('Handler was called!'); + + processNextHandler(); + }); +} + ``` @@ -244,6 +282,7 @@ In some scenarios, it may be desirable to quit the app when pressing the hardwar values={[ { value: 'javascript', label: 'JavaScript' }, { value: 'angular', label: 'Angular' }, + { value: 'angular-standalone', label: 'Angular (Standalone)' }, { value: 'react', label: 'React' }, { value: 'vue', label: 'Vue' }, ] @@ -287,6 +326,28 @@ constructor( }); } +``` + + + +```tsx +import { Optional } from '@angular/core'; +import { IonRouterOutlet, Platform } from '@ionic/angular/standalone'; +import { App } from '@capacitor/app'; + +... + +constructor( + private platform: Platform, + @Optional() private routerOutlet?: IonRouterOutlet +) { + this.platform.backButton.subscribeWithPriority(-1, () => { + if (!this.routerOutlet.canGoBack()) { + App.exitApp(); + } + }); +} + ``` diff --git a/docs/developing/keyboard.md b/docs/developing/keyboard.md index 6c166c9b11a..ad0fb4c0eb0 100644 --- a/docs/developing/keyboard.md +++ b/docs/developing/keyboard.md @@ -199,6 +199,7 @@ Detecting the presence of an on-screen keyboard is useful for adjusting the posi values={[ { value: 'javascript', label: 'JavaScript' }, { value: 'angular', label: 'Angular' }, + { value: 'angular-standalone', label: 'Angular (Standalone)' }, { value: 'react', label: 'React' }, { value: 'vue', label: 'Vue' }, ] @@ -223,6 +224,25 @@ import { Platform } from '@ionic/angular'; ... +constructor(private platform: Platform) { + this.platform.keyboardDidShow.subscribe(ev => { + const { keyboardHeight } = ev; + // Do something with the keyboard height such as translating an input above the keyboard. + }); + + this.platform.keyboardDidHide.subscribe(() => { + // Move input back to original location + }); +} +``` + + + +```tsx +import { Platform } from '@ionic/angular/standalone'; + +... + constructor(private platform: Platform) { this.platform.keyboardDidShow.subscribe(ev => { const { keyboardHeight } = ev; diff --git a/docs/techniques/security.md b/docs/techniques/security.md index 2bc7a648ac9..9545d43c1b7 100644 --- a/docs/techniques/security.md +++ b/docs/techniques/security.md @@ -94,6 +94,7 @@ In order to bypass the sanitizer and use unsanitized custom HTML in the relevant defaultValue="angular" values={[ { value: 'angular', label: 'Angular' }, + { value: 'angular-standalone', label: 'Angular (Standalone)' }, { value: 'javascript', label: 'JavaScript' }, { value: 'react', label: 'React' }, ] @@ -115,6 +116,25 @@ async presentToast() { toast.present(); } +``` + + + +```tsx +import { IonicSafeString, ToastController } from '@ionic/angular/standalone'; + +... + +constructor(private toastController: ToastController) {} + +async presentToast() { + const toast = await this.toastController.create({ + message: new IonicSafeString('Hello!'), + duration: 2000 + }); + toast.present(); +} + ``` diff --git a/docs/utilities/animations.md b/docs/utilities/animations.md index 1c7a43769c1..27558786ff7 100644 --- a/docs/utilities/animations.md +++ b/docs/utilities/animations.md @@ -32,6 +32,7 @@ Ionic Animations, on the other hand, uses the [Web Animations API](https://devel { value: 'javascript', label: 'JavaScript' }, { value: 'typescript', label: 'TypeScript' }, { value: 'angular', label: 'Angular' }, + { value: 'angular-standalone', label: 'Angular (Standalone)' }, { value: 'react', label: 'React' }, { value: 'vue', label: 'Vue' }, ] @@ -86,6 +87,25 @@ constructor(private animationCtrl: AnimationController) { .fromTo('opacity', '1', '0.5'); } +``` + + + +Developers using Angular should install the latest version of `@ionic/angular`. Animations can be created via the `AnimationController` dependency injection. + +```tsx + +import { Animation, AnimationController } from '@ionic/angular/standalone'; + +... + +constructor(private animationCtrl: AnimationController) { + const animation: Animation = this.animationCtrl.create() + .addElement(myElementRef) + .duration(1000) + .fromTo('opacity', '1', '0.5'); +} + ``` diff --git a/docs/utilities/gestures.md b/docs/utilities/gestures.md index a4c44d3b833..875876b3b56 100644 --- a/docs/utilities/gestures.md +++ b/docs/utilities/gestures.md @@ -29,6 +29,7 @@ Building complex gestures can be time consuming. Other libraries that provide cu values={[ { value: 'javascript', label: 'JavaScript' }, { value: 'angular', label: 'Angular' }, + { value: 'angular-standalone', label: 'Angular (Standalone)' }, { value: 'react', label: 'React' }, { value: 'vue', label: 'Vue' }, ] @@ -90,6 +91,30 @@ constructor(private gestureCtrl: GestureController) { // The `true` above ensures that callbacks run inside NgZone. } +``` + + + +Developers using Angular should install the latest version of `@ionic/angular`. Animations can be created via the `AnimationController` dependency injection. + +By default, gesture callbacks do not run inside of NgZone. Developers can either set the `runInsideAngularZone` parameter to `true` when creating a gesture, +or they can wrap their callbacks in an `NgZone.run()` call. + +```tsx +import { Gesture, GestureController } from '@ionic/angular/standalone'; + +... + +constructor(private gestureCtrl: GestureController) { + const gesture: Gesture = this.gestureCtrl.create({ + el: this.element.nativeElement, + threshold: 15, + gestureName: 'my-gesture', + onMove: ev => this.onMoveHandler(ev) + }, true); + // The `true` above ensures that callbacks run inside NgZone. +} + ```