Skip to content

Commit fad33e7

Browse files
brandyscarneybrandyscarney
authored
docs(toolbar): update angular to standalone (#3975)
1 parent 4b12d2d commit fad33e7

36 files changed

+308
-20
lines changed

‎static/usage/v7/toolbar/basic/angular.md renamed to ‎static/usage/v7/toolbar/basic/angular/example_component_html.md

File renamed without changes.

‎static/usage/v7/toolbar/basic/angular/example_component_ts.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
```ts
2+
import { Component } from '@angular/core';
3+
import { IonFooter, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
4+
5+
@Component({
6+
selector: 'app-example',
7+
templateUrl: 'example.component.html',
8+
styleUrls: ['example.component.css'],
9+
imports: [IonFooter, IonHeader, IonTitle, IonToolbar],
10+
})
11+
export class ExampleComponent {}
12+
```

‎static/usage/v7/toolbar/basic/index.md

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
33
import javascript from './javascript.md';
44
import react from './react.md';
55
import vue from './vue.md';
6-
import angular from './angular.md';
6+
7+
import angular_example_component_html from './angular/example_component_html.md';
8+
import angular_example_component_ts from './angular/example_component_ts.md';
79

810
<Playground
911
version="7"
10-
code={{ javascript, react, vue, angular }}
12+
code={{
13+
javascript,
14+
react,
15+
vue,
16+
angular: {
17+
files: {
18+
'src/app/example.component.html': angular_example_component_html,
19+
'src/app/example.component.ts': angular_example_component_ts,
20+
},
21+
},
22+
}}
1123
src="usage/v7/toolbar/basic/demo.html"
1224
devicePreview
1325
includeIonContent={false}

‎static/usage/v7/toolbar/buttons/angular/example_component_ts.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,14 @@
11
```ts
22
import { Component } from '@angular/core';
3+
import {
4+
IonBackButton,
5+
IonButton,
6+
IonButtons,
7+
IonIcon,
8+
IonMenuButton,
9+
IonTitle,
10+
IonToolbar,
11+
} from '@ionic/angular/standalone';
312

413
import { addIcons } from 'ionicons';
514
import { create, ellipsisHorizontal, ellipsisVertical, helpCircle, personCircle, search, star } from 'ionicons/icons';
@@ -8,6 +17,7 @@ import { create, ellipsisHorizontal, ellipsisVertical, helpCircle, personCircle,
817
selector: 'app-example',
918
templateUrl: 'example.component.html',
1019
styleUrls: ['example.component.css'],
20+
imports: [IonBackButton, IonButton, IonButtons, IonIcon, IonMenuButton, IonTitle, IonToolbar],
1121
})
1222
export class ExampleComponent {
1323
constructor() {

‎static/usage/v7/toolbar/progress-bars/angular.md renamed to ‎static/usage/v7/toolbar/progress-bars/angular/example_component_html.md

File renamed without changes.

‎static/usage/v7/toolbar/progress-bars/angular/example_component_ts.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
```ts
2+
import { Component } from '@angular/core';
3+
import { IonHeader, IonProgressBar, IonTitle, IonToolbar } from '@ionic/angular/standalone';
4+
5+
@Component({
6+
selector: 'app-example',
7+
templateUrl: 'example.component.html',
8+
styleUrls: ['example.component.css'],
9+
imports: [IonHeader, IonProgressBar, IonTitle, IonToolbar],
10+
})
11+
export class ExampleComponent {}
12+
```

‎static/usage/v7/toolbar/progress-bars/index.md

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
33
import javascript from './javascript.md';
44
import react from './react.md';
55
import vue from './vue.md';
6-
import angular from './angular.md';
6+
7+
import angular_example_component_html from './angular/example_component_html.md';
8+
import angular_example_component_ts from './angular/example_component_ts.md';
79

810
<Playground
911
version="7"
10-
code={{ javascript, react, vue, angular }}
12+
code={{
13+
javascript,
14+
react,
15+
vue,
16+
angular: {
17+
files: {
18+
'src/app/example.component.html': angular_example_component_html,
19+
'src/app/example.component.ts': angular_example_component_ts,
20+
},
21+
},
22+
}}
1123
src="usage/v7/toolbar/progress-bars/demo.html"
1224
devicePreview
1325
includeIonContent={false}

‎static/usage/v7/toolbar/searchbars/angular.md renamed to ‎static/usage/v7/toolbar/searchbars/angular/example_component_html.md

File renamed without changes.

‎static/usage/v7/toolbar/searchbars/angular/example_component_ts.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
```ts
2+
import { Component } from '@angular/core';
3+
import { IonHeader, IonSearchbar, IonTitle, IonToolbar } from '@ionic/angular/standalone';
4+
5+
@Component({
6+
selector: 'app-example',
7+
templateUrl: 'example.component.html',
8+
styleUrls: ['example.component.css'],
9+
imports: [IonHeader, IonSearchbar, IonTitle, IonToolbar],
10+
})
11+
export class ExampleComponent {}
12+
```

‎static/usage/v7/toolbar/searchbars/index.md

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
33
import javascript from './javascript.md';
44
import react from './react.md';
55
import vue from './vue.md';
6-
import angular from './angular.md';
6+
7+
import angular_example_component_html from './angular/example_component_html.md';
8+
import angular_example_component_ts from './angular/example_component_ts.md';
79

810
<Playground
911
version="7"
10-
code={{ javascript, react, vue, angular }}
12+
code={{
13+
javascript,
14+
react,
15+
vue,
16+
angular: {
17+
files: {
18+
'src/app/example.component.html': angular_example_component_html,
19+
'src/app/example.component.ts': angular_example_component_ts,
20+
},
21+
},
22+
}}
1123
src="usage/v7/toolbar/searchbars/demo.html"
1224
devicePreview
1325
includeIonContent={false}

‎static/usage/v7/toolbar/segments/angular.md renamed to ‎static/usage/v7/toolbar/segments/angular/example_component_html.md

File renamed without changes.

‎static/usage/v7/toolbar/segments/angular/example_component_ts.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
```ts
2+
import { Component } from '@angular/core';
3+
import { IonHeader, IonLabel, IonSegment, IonSegmentButton, IonToolbar } from '@ionic/angular/standalone';
4+
5+
@Component({
6+
selector: 'app-example',
7+
templateUrl: 'example.component.html',
8+
styleUrls: ['example.component.css'],
9+
imports: [IonHeader, IonLabel, IonSegment, IonSegmentButton, IonToolbar],
10+
})
11+
export class ExampleComponent {}
12+
```

‎static/usage/v7/toolbar/segments/index.md

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
33
import javascript from './javascript.md';
44
import react from './react.md';
55
import vue from './vue.md';
6-
import angular from './angular.md';
6+
7+
import angular_example_component_html from './angular/example_component_html.md';
8+
import angular_example_component_ts from './angular/example_component_ts.md';
79

810
<Playground
911
version="7"
10-
code={{ javascript, react, vue, angular }}
12+
code={{
13+
javascript,
14+
react,
15+
vue,
16+
angular: {
17+
files: {
18+
'src/app/example.component.html': angular_example_component_html,
19+
'src/app/example.component.ts': angular_example_component_ts,
20+
},
21+
},
22+
}}
1123
src="usage/v7/toolbar/segments/demo.html"
1224
devicePreview
1325
includeIonContent={false}

‎static/usage/v7/toolbar/theming/colors/angular.md renamed to ‎static/usage/v7/toolbar/theming/colors/angular/example_component_html.md

File renamed without changes.

‎static/usage/v7/toolbar/theming/colors/angular/example_component_ts.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
```ts
2+
import { Component } from '@angular/core';
3+
import { IonTitle, IonToolbar } from '@ionic/angular/standalone';
4+
5+
@Component({
6+
selector: 'app-example',
7+
templateUrl: 'example.component.html',
8+
styleUrls: ['example.component.css'],
9+
imports: [IonTitle, IonToolbar],
10+
})
11+
export class ExampleComponent {}
12+
```

‎static/usage/v7/toolbar/theming/colors/index.md

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
33
import javascript from './javascript.md';
44
import react from './react.md';
55
import vue from './vue.md';
6-
import angular from './angular.md';
6+
7+
import angular_example_component_html from './angular/example_component_html.md';
8+
import angular_example_component_ts from './angular/example_component_ts.md';
79

810
<Playground
911
version="7"
10-
code={{ javascript, react, vue, angular }}
12+
code={{
13+
javascript,
14+
react,
15+
vue,
16+
angular: {
17+
files: {
18+
'src/app/example.component.html': angular_example_component_html,
19+
'src/app/example.component.ts': angular_example_component_ts,
20+
},
21+
},
22+
}}
1123
src="usage/v7/toolbar/theming/colors/demo.html"
1224
size="large"
1325
/>

‎static/usage/v7/toolbar/theming/css-properties/angular/example_component_ts.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
```ts
2+
import { Component } from '@angular/core';
3+
import { IonTitle, IonToolbar } from '@ionic/angular/standalone';
4+
5+
@Component({
6+
selector: 'app-example',
7+
templateUrl: 'example.component.html',
8+
styleUrls: ['example.component.css'],
9+
imports: [IonTitle, IonToolbar],
10+
})
11+
export class ExampleComponent {}
12+
```

‎static/usage/v7/toolbar/theming/css-properties/index.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import vue from './vue.md';
99

1010
import angular_example_component_html from './angular/example_component_html.md';
1111
import angular_example_component_css from './angular/example_component_css.md';
12+
import angular_example_component_ts from './angular/example_component_ts.md';
1213

1314
<Playground
1415
version="7"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
2526
files: {
2627
'src/app/example.component.html': angular_example_component_html,
2728
'src/app/example.component.css': angular_example_component_css,
29+
'src/app/example.component.ts': angular_example_component_ts,
2830
},
2931
},
3032
}}

‎static/usage/v8/toolbar/basic/angular.md renamed to ‎static/usage/v8/toolbar/basic/angular/example_component_html.md

File renamed without changes.

‎static/usage/v8/toolbar/basic/angular/example_component_ts.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
```ts
2+
import { Component } from '@angular/core';
3+
import { IonFooter, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
4+
5+
@Component({
6+
selector: 'app-example',
7+
templateUrl: 'example.component.html',
8+
styleUrls: ['example.component.css'],
9+
imports: [IonFooter, IonHeader, IonTitle, IonToolbar],
10+
})
11+
export class ExampleComponent {}
12+
```

‎static/usage/v8/toolbar/basic/index.md

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
33
import javascript from './javascript.md';
44
import react from './react.md';
55
import vue from './vue.md';
6-
import angular from './angular.md';
6+
7+
import angular_example_component_html from './angular/example_component_html.md';
8+
import angular_example_component_ts from './angular/example_component_ts.md';
79

810
<Playground
911
version="8"
10-
code={{ javascript, react, vue, angular }}
12+
code={{
13+
javascript,
14+
react,
15+
vue,
16+
angular: {
17+
files: {
18+
'src/app/example.component.html': angular_example_component_html,
19+
'src/app/example.component.ts': angular_example_component_ts,
20+
},
21+
},
22+
}}
1123
src="usage/v8/toolbar/basic/demo.html"
1224
devicePreview
1325
includeIonContent={false}

‎static/usage/v8/toolbar/buttons/angular/example_component_ts.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,14 @@
11
```ts
22
import { Component } from '@angular/core';
3+
import {
4+
IonBackButton,
5+
IonButton,
6+
IonButtons,
7+
IonIcon,
8+
IonMenuButton,
9+
IonTitle,
10+
IonToolbar,
11+
} from '@ionic/angular/standalone';
312

413
import { addIcons } from 'ionicons';
514
import { create, ellipsisHorizontal, ellipsisVertical, helpCircle, personCircle, search, star } from 'ionicons/icons';
@@ -8,6 +17,7 @@ import { create, ellipsisHorizontal, ellipsisVertical, helpCircle, personCircle,
817
selector: 'app-example',
918
templateUrl: 'example.component.html',
1019
styleUrls: ['example.component.css'],
20+
imports: [IonBackButton, IonButton, IonButtons, IonIcon, IonMenuButton, IonTitle, IonToolbar],
1121
})
1222
export class ExampleComponent {
1323
constructor() {

‎static/usage/v8/toolbar/progress-bars/angular.md renamed to ‎static/usage/v8/toolbar/progress-bars/angular/example_component_html.md

File renamed without changes.

‎static/usage/v8/toolbar/progress-bars/angular/example_component_ts.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
```ts
2+
import { Component } from '@angular/core';
3+
import { IonHeader, IonProgressBar, IonTitle, IonToolbar } from '@ionic/angular/standalone';
4+
5+
@Component({
6+
selector: 'app-example',
7+
templateUrl: 'example.component.html',
8+
styleUrls: ['example.component.css'],
9+
imports: [IonHeader, IonProgressBar, IonTitle, IonToolbar],
10+
})
11+
export class ExampleComponent {}
12+
```

‎static/usage/v8/toolbar/progress-bars/index.md

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
33
import javascript from './javascript.md';
44
import react from './react.md';
55
import vue from './vue.md';
6-
import angular from './angular.md';
6+
7+
import angular_example_component_html from './angular/example_component_html.md';
8+
import angular_example_component_ts from './angular/example_component_ts.md';
79

810
<Playground
911
version="8"
10-
code={{ javascript, react, vue, angular }}
12+
code={{
13+
javascript,
14+
react,
15+
vue,
16+
angular: {
17+
files: {
18+
'src/app/example.component.html': angular_example_component_html,
19+
'src/app/example.component.ts': angular_example_component_ts,
20+
},
21+
},
22+
}}
1123
src="usage/v8/toolbar/progress-bars/demo.html"
1224
devicePreview
1325
includeIonContent={false}

‎static/usage/v8/toolbar/searchbars/angular.md renamed to ‎static/usage/v8/toolbar/searchbars/angular/example_component_html.md

File renamed without changes.

‎static/usage/v8/toolbar/searchbars/angular/example_component_ts.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
```ts
2+
import { Component } from '@angular/core';
3+
import { IonHeader, IonSearchbar, IonTitle, IonToolbar } from '@ionic/angular/standalone';
4+
5+
@Component({
6+
selector: 'app-example',
7+
templateUrl: 'example.component.html',
8+
styleUrls: ['example.component.css'],
9+
imports: [IonHeader, IonSearchbar, IonTitle, IonToolbar],
10+
})
11+
export class ExampleComponent {}
12+
```

‎static/usage/v8/toolbar/searchbars/index.md

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
33
import javascript from './javascript.md';
44
import react from './react.md';
55
import vue from './vue.md';
6-
import angular from './angular.md';
6+
7+
import angular_example_component_html from './angular/example_component_html.md';
8+
import angular_example_component_ts from './angular/example_component_ts.md';
79

810
<Playground
911
version="8"
10-
code={{ javascript, react, vue, angular }}
12+
code={{
13+
javascript,
14+
react,
15+
vue,
16+
angular: {
17+
files: {
18+
'src/app/example.component.html': angular_example_component_html,
19+
'src/app/example.component.ts': angular_example_component_ts,
20+
},
21+
},
22+
}}
1123
src="usage/v8/toolbar/searchbars/demo.html"
1224
devicePreview
1325
includeIonContent={false}

‎static/usage/v8/toolbar/segments/angular.md renamed to ‎static/usage/v8/toolbar/segments/angular/example_component_html.md

File renamed without changes.

‎static/usage/v8/toolbar/segments/angular/example_component_ts.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
```ts
2+
import { Component } from '@angular/core';
3+
import { IonHeader, IonLabel, IonSegment, IonSegmentButton, IonToolbar } from '@ionic/angular/standalone';
4+
5+
@Component({
6+
selector: 'app-example',
7+
templateUrl: 'example.component.html',
8+
styleUrls: ['example.component.css'],
9+
imports: [IonHeader, IonLabel, IonSegment, IonSegmentButton, IonToolbar],
10+
})
11+
export class ExampleComponent {}
12+
```

0 commit comments

Comments
 (0)