Skip to content

Commit 310c259

Browse files
brandyscarneybrandyscarney
authored
docs(theming): update angular to standalone (#3970)
1 parent cb38571 commit 310c259

File tree

8 files changed

+298
-16
lines changed

8 files changed

+298
-16
lines changed

‎static/usage/v7/theming/automatic-dark-mode/angular/example_component_ts.md‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,47 @@
11
```ts
22
import { Component, OnInit } from '@angular/core';
3+
import {
4+
IonBackButton,
5+
IonButton,
6+
IonButtons,
7+
IonContent,
8+
IonHeader,
9+
IonIcon,
10+
IonItem,
11+
IonLabel,
12+
IonList,
13+
IonListHeader,
14+
IonRange,
15+
IonText,
16+
IonTitle,
17+
IonToggle,
18+
IonToolbar,
19+
} from '@ionic/angular/standalone';
320

421
import { addIcons } from 'ionicons';
522
import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons';
623

724
@Component({
825
selector: 'app-example',
926
templateUrl: 'example.component.html',
27+
styleUrls: ['example.component.css'],
28+
imports: [
29+
IonBackButton,
30+
IonButton,
31+
IonButtons,
32+
IonContent,
33+
IonHeader,
34+
IonIcon,
35+
IonItem,
36+
IonLabel,
37+
IonList,
38+
IonListHeader,
39+
IonRange,
40+
IonText,
41+
IonTitle,
42+
IonToggle,
43+
IonToolbar,
44+
],
1045
})
1146
export class ExampleComponent implements OnInit {
1247
constructor() {

‎static/usage/v7/theming/manual-dark-mode/angular/example_component_ts.md‎

Lines changed: 41 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,49 @@
11
```ts
22
import { Component, OnInit } from '@angular/core';
3+
import { FormsModule } from '@angular/forms';
4+
import {
5+
IonBackButton,
6+
IonButton,
7+
IonButtons,
8+
IonContent,
9+
IonHeader,
10+
IonIcon,
11+
IonItem,
12+
IonLabel,
13+
IonList,
14+
IonListHeader,
15+
IonRange,
16+
IonText,
17+
IonTitle,
18+
IonToggle,
19+
IonToolbar,
20+
} from '@ionic/angular/standalone';
321

422
import { addIcons } from 'ionicons';
523
import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons';
624

725
@Component({
826
selector: 'app-example',
927
templateUrl: 'example.component.html',
28+
styleUrls: ['example.component.css'],
29+
imports: [
30+
FormsModule,
31+
IonBackButton,
32+
IonButton,
33+
IonButtons,
34+
IonContent,
35+
IonHeader,
36+
IonIcon,
37+
IonItem,
38+
IonLabel,
39+
IonList,
40+
IonListHeader,
41+
IonRange,
42+
IonText,
43+
IonTitle,
44+
IonToggle,
45+
IonToolbar,
46+
],
1047
})
1148
export class ExampleComponent implements OnInit {
1249
themeToggle = false;
@@ -33,18 +70,18 @@ export class ExampleComponent implements OnInit {
3370
}
3471

3572
// Check/uncheck the toggle and update the theme based on isDark
36-
initializeDarkTheme(isDark) {
73+
initializeDarkTheme(isDark: boolean) {
3774
this.themeToggle = isDark;
3875
this.toggleDarkTheme(isDark);
3976
}
4077

4178
// Listen for the toggle check/uncheck to toggle the dark theme
42-
toggleChange(ev) {
43-
this.toggleDarkTheme(ev.detail.checked);
79+
toggleChange(event: CustomEvent) {
80+
this.toggleDarkTheme(event.detail.checked);
4481
}
4582

4683
// Add or remove the "dark" class on the document body
47-
toggleDarkTheme(shouldAdd) {
84+
toggleDarkTheme(shouldAdd: boolean) {
4885
document.body.classList.toggle('dark', shouldAdd);
4986
}
5087
}

‎static/usage/v8/theming/always-dark-mode/angular/example_component_ts.md‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,22 @@
11
```ts
22
import { Component } from '@angular/core';
3+
import {
4+
IonBackButton,
5+
IonButton,
6+
IonButtons,
7+
IonContent,
8+
IonHeader,
9+
IonIcon,
10+
IonItem,
11+
IonLabel,
12+
IonList,
13+
IonListHeader,
14+
IonRange,
15+
IonText,
16+
IonTitle,
17+
IonToggle,
18+
IonToolbar,
19+
} from '@ionic/angular/standalone';
320

421
import { addIcons } from 'ionicons';
522
import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons';
@@ -8,6 +25,23 @@ import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons
825
selector: 'app-example',
926
templateUrl: 'example.component.html',
1027
styleUrls: ['example.component.css'],
28+
imports: [
29+
IonBackButton,
30+
IonButton,
31+
IonButtons,
32+
IonContent,
33+
IonHeader,
34+
IonIcon,
35+
IonItem,
36+
IonLabel,
37+
IonList,
38+
IonListHeader,
39+
IonRange,
40+
IonText,
41+
IonTitle,
42+
IonToggle,
43+
IonToolbar,
44+
],
1145
})
1246
export class ExampleComponent {
1347
constructor() {

‎static/usage/v8/theming/always-high-contrast-mode/angular/example_component_ts.md‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,22 @@
11
```ts
22
import { Component } from '@angular/core';
3+
import {
4+
IonBackButton,
5+
IonButton,
6+
IonButtons,
7+
IonContent,
8+
IonHeader,
9+
IonIcon,
10+
IonItem,
11+
IonLabel,
12+
IonList,
13+
IonListHeader,
14+
IonRange,
15+
IonText,
16+
IonTitle,
17+
IonToggle,
18+
IonToolbar,
19+
} from '@ionic/angular/standalone';
320

421
import { addIcons } from 'ionicons';
522
import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons';
@@ -8,6 +25,23 @@ import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons
825
selector: 'app-example',
926
templateUrl: 'example.component.html',
1027
styleUrls: ['example.component.css'],
28+
imports: [
29+
IonBackButton,
30+
IonButton,
31+
IonButtons,
32+
IonContent,
33+
IonHeader,
34+
IonIcon,
35+
IonItem,
36+
IonLabel,
37+
IonList,
38+
IonListHeader,
39+
IonRange,
40+
IonText,
41+
IonTitle,
42+
IonToggle,
43+
IonToolbar,
44+
],
1145
})
1246
export class ExampleComponent {
1347
constructor() {

‎static/usage/v8/theming/class-dark-mode/angular/example_component_ts.md‎

Lines changed: 41 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,49 @@
11
```ts
22
import { Component, OnInit } from '@angular/core';
3+
import { FormsModule } from '@angular/forms';
4+
import {
5+
IonBackButton,
6+
IonButton,
7+
IonButtons,
8+
IonContent,
9+
IonHeader,
10+
IonIcon,
11+
IonItem,
12+
IonLabel,
13+
IonList,
14+
IonListHeader,
15+
IonRange,
16+
IonText,
17+
IonTitle,
18+
IonToggle,
19+
IonToolbar,
20+
} from '@ionic/angular/standalone';
321

422
import { addIcons } from 'ionicons';
523
import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons';
624

725
@Component({
826
selector: 'app-example',
927
templateUrl: 'example.component.html',
28+
styleUrls: ['example.component.css'],
29+
imports: [
30+
FormsModule,
31+
IonBackButton,
32+
IonButton,
33+
IonButtons,
34+
IonContent,
35+
IonHeader,
36+
IonIcon,
37+
IonItem,
38+
IonLabel,
39+
IonList,
40+
IonListHeader,
41+
IonRange,
42+
IonText,
43+
IonTitle,
44+
IonToggle,
45+
IonToolbar,
46+
],
1047
})
1148
export class ExampleComponent implements OnInit {
1249
paletteToggle = false;
@@ -33,18 +70,18 @@ export class ExampleComponent implements OnInit {
3370
}
3471

3572
// Check/uncheck the toggle and update the palette based on isDark
36-
initializeDarkPalette(isDark) {
73+
initializeDarkPalette(isDark: boolean) {
3774
this.paletteToggle = isDark;
3875
this.toggleDarkPalette(isDark);
3976
}
4077

4178
// Listen for the toggle check/uncheck to toggle the dark palette
42-
toggleChange(ev) {
43-
this.toggleDarkPalette(ev.detail.checked);
79+
toggleChange(event: CustomEvent) {
80+
this.toggleDarkPalette(event.detail.checked);
4481
}
4582

4683
// Add or remove the "ion-palette-dark" class on the html element
47-
toggleDarkPalette(shouldAdd) {
84+
toggleDarkPalette(shouldAdd: boolean) {
4885
document.documentElement.classList.toggle('ion-palette-dark', shouldAdd);
4986
}
5087
}

‎static/usage/v8/theming/class-high-contrast-mode/angular/example_component_ts.md‎

Lines changed: 45 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,49 @@
11
```ts
22
import { Component, OnInit } from '@angular/core';
3+
import { FormsModule } from '@angular/forms';
4+
import {
5+
IonBackButton,
6+
IonButton,
7+
IonButtons,
8+
IonContent,
9+
IonHeader,
10+
IonIcon,
11+
IonItem,
12+
IonLabel,
13+
IonList,
14+
IonListHeader,
15+
IonRange,
16+
IonText,
17+
IonTitle,
18+
IonToggle,
19+
IonToolbar,
20+
} from '@ionic/angular/standalone';
321

422
import { addIcons } from 'ionicons';
523
import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons';
624

725
@Component({
826
selector: 'app-example',
927
templateUrl: 'example.component.html',
28+
styleUrls: ['example.component.css'],
29+
imports: [
30+
FormsModule,
31+
IonBackButton,
32+
IonButton,
33+
IonButtons,
34+
IonContent,
35+
IonHeader,
36+
IonIcon,
37+
IonItem,
38+
IonLabel,
39+
IonList,
40+
IonListHeader,
41+
IonRange,
42+
IonText,
43+
IonTitle,
44+
IonToggle,
45+
IonToolbar,
46+
],
1047
})
1148
export class ExampleComponent implements OnInit {
1249
darkPaletteToggle = false;
@@ -39,34 +76,34 @@ export class ExampleComponent implements OnInit {
3976
}
4077

4178
// Check/uncheck the toggle and update the palette based on isDark
42-
initializeDarkPalette(isDark) {
79+
initializeDarkPalette(isDark: boolean) {
4380
this.darkPaletteToggle = isDark;
4481
this.toggleDarkPalette(isDark);
4582
}
4683

4784
// Check/uncheck the toggle and update the palette based on isHighContrast
48-
initializeHighContrastPalette(isHighContrast) {
85+
initializeHighContrastPalette(isHighContrast: boolean) {
4986
this.highContrastPaletteToggle = isHighContrast;
5087
this.toggleHighContrastPalette(isHighContrast);
5188
}
5289

5390
// Listen for the toggle check/uncheck to toggle the dark palette
54-
darkPaletteToggleChange(ev) {
55-
this.toggleDarkPalette(ev.detail.checked);
91+
darkPaletteToggleChange(event: CustomEvent) {
92+
this.toggleDarkPalette(event.detail.checked);
5693
}
5794

5895
// Listen for the toggle check/uncheck to toggle the high contrast palette
59-
highContrastPaletteToggleChange(ev) {
60-
this.toggleHighContrastPalette(ev.detail.checked);
96+
highContrastPaletteToggleChange(event: CustomEvent) {
97+
this.toggleHighContrastPalette(event.detail.checked);
6198
}
6299

63100
// Add or remove the "ion-palette-dark" class on the html element
64-
toggleDarkPalette(shouldAdd) {
101+
toggleDarkPalette(shouldAdd: boolean) {
65102
document.documentElement.classList.toggle('ion-palette-dark', shouldAdd);
66103
}
67104

68105
// Add or remove the "ion-palette-high-contrast" class on the html element
69-
toggleHighContrastPalette(shouldAdd) {
106+
toggleHighContrastPalette(shouldAdd: boolean) {
70107
document.documentElement.classList.toggle('ion-palette-high-contrast', shouldAdd);
71108
}
72109
}

0 commit comments

Comments
 (0)