Skip to content

docs(playgrounds): update angular to standalone #3981

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.

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

Merged
merged 70 commits into from
Dec 31, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
70 commits
Select commit Hold shift + click to select a range
275362a
docs(stackblitz): remove dependency as a file from angular
brandyscarney Dec 23, 2024
97da478
docs(alert): update angular to standalone (#3910)
brandyscarney Dec 30, 2024
223a1fc
docs(app): update angular to standalone (#3912)
brandyscarney Dec 30, 2024
c71c55c
docs(card): update angular to standalone (#3920)
brandyscarney Dec 30, 2024
917ee35
docs(checkbox): update angular to standalone (#3921)
brandyscarney Dec 30, 2024
0de1413
docs(grid): update angular to standalone (#3929)
brandyscarney Dec 30, 2024
5104de9
docs(item-sliding): update angular to standalone (#3939)
brandyscarney Dec 30, 2024
9decc6d
docs(note): update angular to standalone (#3949)
brandyscarney Dec 30, 2024
41ccb68
docs(popover): update angular to standalone (#3952)
brandyscarney Dec 30, 2024
6512fcc
docs(segment): update angular to standalone (#3961)
brandyscarney Dec 30, 2024
5c0f307
docs(select): update angular to standalone (#3963)
brandyscarney Dec 30, 2024
70ae31d
docs(animations): update angular to standalone (#3911)
brandyscarney Dec 30, 2024
e057a33
docs(skeleton-text): update angular to standalone (#3964)
brandyscarney Dec 30, 2024
b1ae506
docs(spinner): update angular to standalone (#3965)
brandyscarney Dec 30, 2024
16947cc
docs(split-pane): update angular to standalone (#3966)
brandyscarney Dec 30, 2024
90a3702
docs(tabs): update angular to standalone (#3967)
brandyscarney Dec 30, 2024
0486a2c
docs(text): update angular to standalone (#3968)
brandyscarney Dec 30, 2024
cb38571
docs(textarea): update angular to standalone (#3969)
brandyscarney Dec 30, 2024
310c259
docs(theming): update angular to standalone (#3970)
brandyscarney Dec 30, 2024
e014657
docs(thumbnail): update angular to standalone (#3971)
brandyscarney Dec 30, 2024
b4e241a
docs(title): update angular to standalone (#3972)
brandyscarney Dec 30, 2024
4b12d2d
docs(toast): update angular to standalone (#3973)
brandyscarney Dec 30, 2024
fad33e7
docs(toolbar): update angular to standalone (#3975)
brandyscarney Dec 30, 2024
05e6494
docs(segment-button): update angular to standalone (#3962)
brandyscarney Dec 30, 2024
24c2c85
docs(toggle): update angular to standalone (#3974)
brandyscarney Dec 30, 2024
20f519c
docs(searchbar): update angular to standalone (#3960)
brandyscarney Dec 30, 2024
fe9b29a
docs(accordion): update angular to standalone (#3908)
brandyscarney Dec 30, 2024
9b086e6
docs(avatar): update angular to standalone (#3913)
brandyscarney Dec 30, 2024
cc59279
docs(content): update angular to standalone (#3923)
brandyscarney Dec 30, 2024
1dcaa8a
docs(icon): update angular to standalone (#3931)
brandyscarney Dec 30, 2024
0f88e05
docs(label): update angular to standalone (#3941)
brandyscarney Dec 30, 2024
b0fe9d0
docs(progress-bar): update angular to standalone (#3953)
brandyscarney Dec 30, 2024
f8f0a70
docs(radio): update angular to standalone (#3954)
brandyscarney Dec 30, 2024
1d8bc70
docs(range): update angular to standalone (#3955)
brandyscarney Dec 30, 2024
54df85e
docs(refresher): update angular to standalone (#3956)
brandyscarney Dec 30, 2024
4ec3a29
docs(reorder): update angular to standalone (#3957)
brandyscarney Dec 30, 2024
54d8a22
docs(ripple-effect): update angular to standalone (#3958)
brandyscarney Dec 30, 2024
d1bbf70
docs(nav): update angular to standalone (#3948)
brandyscarney Dec 30, 2024
0cd7d57
docs(picker): update angular to standalone (#3950)
brandyscarney Dec 30, 2024
e43ece0
docs(item-divider): update angular to standalone (#3937)
brandyscarney Dec 30, 2024
cae80b5
docs(item-group): update angular to standalone (#3938)
brandyscarney Dec 30, 2024
11b41f5
docs(keyboard): update angular to standalone (#3940)
brandyscarney Dec 30, 2024
4fb2cd1
docs(item): update angular to standalone (#3936)
brandyscarney Dec 30, 2024
04c2c28
docs(picker-legacy): update angular to standalone (#3951)
brandyscarney Dec 30, 2024
86cdab5
docs(menu): update angular to standalone (#3946)
brandyscarney Dec 30, 2024
56088ad
docs(input-password-toggle): update angular to standalone (#3935)
brandyscarney Dec 30, 2024
98dc52b
docs(input): update angular to standalone (#3934)
brandyscarney Dec 30, 2024
a7531ca
docs(layout): update angular to standalone (#3942)
brandyscarney Dec 30, 2024
8dd90f3
docs(list): update angular to standalone (#3943)
brandyscarney Dec 30, 2024
861de0f
docs(list-header): update angular to standalone (#3944)
brandyscarney Dec 30, 2024
5bcfe20
docs(loading): update angular to standalone (#3945)
brandyscarney Dec 30, 2024
da04807
docs(modal): update angular to standalone (#3947)
brandyscarney Dec 30, 2024
b3bd5fa
docs(header): update angular to standalone (#3930)
brandyscarney Dec 30, 2024
fd7ae38
docs(img): update angular to standalone (#3932)
brandyscarney Dec 30, 2024
04539ce
docs(infinite-scroll): update angular to standalone (#3933)
brandyscarney Dec 30, 2024
05f0b2b
docs(gestures): update angular to standalone (#3928)
brandyscarney Dec 30, 2024
75b8db4
docs(footer): update angular to standalone (#3927)
brandyscarney Dec 30, 2024
6d9fd53
docs(fab): update angular to standalone (#3926)
brandyscarney Dec 30, 2024
de1c4a6
docs(datetime-button): update angular to standalone (#3925)
brandyscarney Dec 30, 2024
5be813f
docs(datetime): update angular to standalone (#3924)
brandyscarney Dec 30, 2024
2fcbca5
docs(chip): update angular to standalone (#3922)
brandyscarney Dec 30, 2024
9c1d77a
docs(buttons): update angular to standalone (#3919)
brandyscarney Dec 30, 2024
a69260b
docs(button): update angular to standalone (#3918)
brandyscarney Dec 30, 2024
4f8b624
docs(breadcrumbs): update angular to standalone (#3917)
brandyscarney Dec 30, 2024
423e1c2
docs(badge): update angular to standalone (#3916)
brandyscarney Dec 30, 2024
7e9860b
docs(back-button): update angular to standalone (#3914)
brandyscarney Dec 30, 2024
ef75594
docs(backdrop): update angular to standalone (#3915)
brandyscarney Dec 30, 2024
0cadfa7
docs(action-sheet): update angular to standalone (#3909)
brandyscarney Dec 30, 2024
ab13c3a
docs(angular): remove unused files
brandyscarney Dec 30, 2024
f0cc988
docs(angular): replace all 'any' types with specific typings
brandyscarney Dec 30, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
4 changes: 3 additions & 1 deletion docs/api/infinite-scroll.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,8 @@ The Infinite Scroll component calls an action to be performed when the user scro

The expression assigned to the `ionInfinite` event is called when the user reaches that defined distance. When this expression has finished any and all tasks, it should call the `complete()` method on the infinite scroll instance.

## Basic Usage

import Basic from '@site/static/usage/v8/infinite-scroll/basic/index.md';

<Basic />
Expand Down Expand Up @@ -118,4 +120,4 @@ interface InfiniteScrollCustomEvent extends CustomEvent {
<CustomProps />

## Slots
<Slots />
<Slots />
2 changes: 1 addition & 1 deletion docs/api/reorder.md
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ In order to sort the array upon completion of the reorder, the array should be p

In some cases, it may be necessary for an app to reorder both the array and the DOM nodes on its own. If this is required, `false` should be passed as a parameter to the `complete` method. This will prevent Ionic from reordering any DOM nodes inside of the reorder group.

Regardless of the approach taken, a stable identity should be provided to reorder items if provided in a loop. This means using `trackBy` for Angular, and `key` for React and Vue.
Regardless of the approach taken, a stable identity should be provided to reorder items if provided in a loop. This means using `track` for Angular, and `key` for React and Vue.

import UpdatingData from '@site/static/usage/v8/reorder/updating-data/index.md';

Expand Down
1 change: 0 additions & 1 deletion src/components/global/Playground/stackblitz.utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -153,7 +153,6 @@ const openAngularEditor = async (code: string, options?: EditorOptions) => {
'src/global.css': defaultFiles[12],
'src/theme/variables.css': defaultFiles[13],
...options?.files,
...options?.dependencies,
};

files[main] = files[main].replace('provideIonicAngular()', `provideIonicAngular({ mode: '${options?.mode}' })`);
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
```ts
import { Component } from '@angular/core';
import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/angular/standalone';

@Component({
selector: 'app-example',
templateUrl: 'example.component.html',
styleUrls: ['example.component.css'],
imports: [IonAccordion, IonAccordionGroup, IonItem, IonLabel],
})
export class ExampleComponent {}
```
11 changes: 9 additions & 2 deletions static/usage/v7/accordion/accessibility/animations/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,22 @@ import Playground from '@site/src/components/global/Playground';
import javascript from './javascript.md';
import react from './react.md';
import vue from './vue.md';
import angular from './angular.md';

import angular_example_component_html from './angular/example_component_html.md';
import angular_example_component_ts from './angular/example_component_ts.md';

<Playground
version="7"
code={{
javascript,
react,
vue,
angular,
angular: {
files: {
'src/app/example.component.html': angular_example_component_html,
'src/app/example.component.ts': angular_example_component_ts,
},
},
}}
src="usage/v7/accordion/accessibility/animations/demo.html"
/>
12 changes: 12 additions & 0 deletions static/usage/v7/accordion/basic/angular/example_component_ts.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
```ts
import { Component } from '@angular/core';
import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/angular/standalone';

@Component({
selector: 'app-example',
templateUrl: 'example.component.html',
styleUrls: ['example.component.css'],
imports: [IonAccordion, IonAccordionGroup, IonItem, IonLabel],
})
export class ExampleComponent {}
```
11 changes: 9 additions & 2 deletions static/usage/v7/accordion/basic/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,22 @@ import Playground from '@site/src/components/global/Playground';
import javascript from './javascript.md';
import react from './react.md';
import vue from './vue.md';
import angular from './angular.md';

import angular_example_component_html from './angular/example_component_html.md';
import angular_example_component_ts from './angular/example_component_ts.md';

<Playground
version="7"
code={{
javascript,
react,
vue,
angular,
angular: {
files: {
'src/app/example.component.html': angular_example_component_html,
'src/app/example.component.ts': angular_example_component_ts,
},
},
}}
src="usage/v7/accordion/basic/demo.html"
size="210px"
Expand Down
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
```ts
import { Component } from '@angular/core';
import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/angular/standalone';

@Component({
selector: 'app-example',
templateUrl: 'example.component.html',
styleUrls: ['example.component.css'],
imports: [IonAccordion, IonAccordionGroup, IonItem, IonLabel],
})
export class ExampleComponent {}
```
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
```ts
import { Component } from '@angular/core';
import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/angular/standalone';

@Component({
selector: 'app-example',
templateUrl: 'example.component.html',
styleUrls: ['example.component.css'],
imports: [IonAccordion, IonAccordionGroup, IonItem, IonLabel],
})
export class ExampleComponent {}
```
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,22 @@ import Playground from '@site/src/components/global/Playground';
import javascript from './javascript.md';
import react from './react.md';
import vue from './vue.md';
import angular from './angular.md';

import angular_example_component_html from './angular/example_component_html.md';
import angular_example_component_ts from './angular/example_component_ts.md';

<Playground
version="7"
code={{
javascript,
react,
vue,
angular,
angular: {
files: {
'src/app/example.component.html': angular_example_component_html,
'src/app/example.component.ts': angular_example_component_ts,
},
},
}}
size="250px"
src="usage/v7/accordion/customization/expansion-styles/demo.html"
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
```ts
import { Component } from '@angular/core';
import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/angular/standalone';
import { addIcons } from 'ionicons';
import { caretDownCircle } from 'ionicons/icons';

@Component({
selector: 'app-example',
templateUrl: 'example.component.html',
styleUrls: ['example.component.css'],
imports: [IonAccordion, IonAccordionGroup, IonItem, IonLabel],
})
export class ExampleComponent {
constructor() {
/**
* Any icons you want to use in your application
* can be registered in app.component.ts and then
* referenced by name anywhere in your application.
*/
addIcons({ caretDownCircle });
}
}
```
11 changes: 9 additions & 2 deletions static/usage/v7/accordion/customization/icons/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,22 @@ import Playground from '@site/src/components/global/Playground';
import javascript from './javascript.md';
import react from './react.md';
import vue from './vue.md';
import angular from './angular.md';

import angular_example_component_html from './angular/example_component_html.md';
import angular_example_component_ts from './angular/example_component_ts.md';

<Playground
version="7"
code={{
javascript,
react,
vue,
angular,
angular: {
files: {
'src/app/example.component.html': angular_example_component_html,
'src/app/example.component.ts': angular_example_component_ts,
},
},
}}
size="250px"
src="usage/v7/accordion/customization/icons/demo.html"
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
```ts
import { Component } from '@angular/core';
import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/angular/standalone';

@Component({
selector: 'app-example',
templateUrl: 'example.component.html',
styleUrls: ['example.component.css'],
imports: [IonAccordion, IonAccordionGroup, IonItem, IonLabel],
})
export class ExampleComponent {}
```
2 changes: 2 additions & 0 deletions static/usage/v7/accordion/customization/theming/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import react_main_css from './react/main_css.md';
import vue from './vue.md';

import angular_example_component_html from './angular/example_component_html.md';
import angular_example_component_ts from './angular/example_component_ts.md';
import angular_global_css from './angular/global_css.md';

<Playground
Expand All @@ -24,6 +25,7 @@ import angular_global_css from './angular/global_css.md';
angular: {
files: {
'src/app/example.component.html': angular_example_component_html,
'src/app/example.component.ts': angular_example_component_ts,
'src/global.css': angular_global_css,
},
},
Expand Down
41 changes: 0 additions & 41 deletions static/usage/v7/accordion/disable-group/demo.html

This file was deleted.

17 changes: 0 additions & 17 deletions static/usage/v7/accordion/disable-group/index.md

This file was deleted.

22 changes: 0 additions & 22 deletions static/usage/v7/accordion/disable-group/javascript.md

This file was deleted.

35 changes: 0 additions & 35 deletions static/usage/v7/accordion/disable-group/react.md

This file was deleted.

37 changes: 0 additions & 37 deletions static/usage/v7/accordion/disable-group/vue.md

This file was deleted.

Loading