Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs(angular): add angular standalone syntax to non-playground examples #3116

Merged
merged 2 commits into from
Sep 26, 2023
Merged

docs(angular): add angular standalone syntax to non-playground examples #3116

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
572e748
docs(angular): add angular standalone syntax to non-playground examples
liamdebeasi Sep 12, 2023
2be6386
lint
liamdebeasi Sep 12, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 30 additions & 0 deletions docs/angular/platform.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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';

Expand All @@ -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`
Expand Down
34 changes: 33 additions & 1 deletion docs/angular/slides.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand All @@ -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 -->

Expand Down
57 changes: 57 additions & 0 deletions docs/developing/config.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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';

Expand All @@ -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

| | |
Expand All @@ -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';

Expand All @@ -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

| | |
Expand Down
18 changes: 18 additions & 0 deletions docs/developing/config/global/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' },
]}
Expand Down Expand Up @@ -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">

Expand Down
37 changes: 37 additions & 0 deletions docs/developing/config/per-component/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' },
]}
Expand Down Expand Up @@ -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">

Expand Down
27 changes: 27 additions & 0 deletions docs/developing/config/per-platform-fallback/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' },
]}
Expand Down Expand Up @@ -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">

Expand Down
30 changes: 30 additions & 0 deletions docs/developing/config/per-platform-overrides/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' },
]}
Expand Down Expand Up @@ -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">

Expand Down
Loading