diff --git a/static/usage/v7/select/basic/multiple-selection/angular.md b/static/usage/v7/select/basic/multiple-selection/angular/example_component_html.md similarity index 100% rename from static/usage/v7/select/basic/multiple-selection/angular.md rename to static/usage/v7/select/basic/multiple-selection/angular/example_component_html.md diff --git a/static/usage/v7/select/basic/multiple-selection/angular/example_component_ts.md b/static/usage/v7/select/basic/multiple-selection/angular/example_component_ts.md new file mode 100644 index 00000000000..efa11c163f9 --- /dev/null +++ b/static/usage/v7/select/basic/multiple-selection/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonSelect, IonSelectOption], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/select/basic/multiple-selection/index.md b/static/usage/v7/select/basic/multiple-selection/index.md index 2523a47bcc6..36f20a19ee2 100644 --- a/static/usage/v7/select/basic/multiple-selection/index.md +++ b/static/usage/v7/select/basic/multiple-selection/index.md @@ -3,11 +3,23 @@ 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'; diff --git a/static/usage/v7/select/basic/responding-to-interaction/angular/example_component_ts.md b/static/usage/v7/select/basic/responding-to-interaction/angular/example_component_ts.md index fb51c040a2f..fb988662d59 100644 --- a/static/usage/v7/select/basic/responding-to-interaction/angular/example_component_ts.md +++ b/static/usage/v7/select/basic/responding-to-interaction/angular/example_component_ts.md @@ -1,13 +1,16 @@ ```ts import { Component } from '@angular/core'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonSelect, IonSelectOption], }) export class ExampleComponent { - handleChange(e) { - console.log('ionChange fired with value: ' + e.detail.value); + handleChange(event: CustomEvent) { + console.log('ionChange fired with value: ' + event.detail.value); } handleCancel() { diff --git a/static/usage/v7/select/basic/single-selection/angular.md b/static/usage/v7/select/basic/single-selection/angular/example_component_html.md similarity index 100% rename from static/usage/v7/select/basic/single-selection/angular.md rename to static/usage/v7/select/basic/single-selection/angular/example_component_html.md diff --git a/static/usage/v7/select/basic/single-selection/angular/example_component_ts.md b/static/usage/v7/select/basic/single-selection/angular/example_component_ts.md new file mode 100644 index 00000000000..efa11c163f9 --- /dev/null +++ b/static/usage/v7/select/basic/single-selection/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonSelect, IonSelectOption], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/select/basic/single-selection/index.md b/static/usage/v7/select/basic/single-selection/index.md index 1fc60d79fe6..22f6b1f7708 100644 --- a/static/usage/v7/select/basic/single-selection/index.md +++ b/static/usage/v7/select/basic/single-selection/index.md @@ -3,11 +3,23 @@ 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'; diff --git a/static/usage/v7/select/customization/button-text/angular.md b/static/usage/v7/select/customization/button-text/angular/example_component_html.md similarity index 100% rename from static/usage/v7/select/customization/button-text/angular.md rename to static/usage/v7/select/customization/button-text/angular/example_component_html.md diff --git a/static/usage/v7/select/customization/button-text/angular/example_component_ts.md b/static/usage/v7/select/customization/button-text/angular/example_component_ts.md new file mode 100644 index 00000000000..efa11c163f9 --- /dev/null +++ b/static/usage/v7/select/customization/button-text/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonSelect, IonSelectOption], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/select/customization/button-text/index.md b/static/usage/v7/select/customization/button-text/index.md index 9e1a07063f8..c5a6fc0923c 100644 --- a/static/usage/v7/select/customization/button-text/index.md +++ b/static/usage/v7/select/customization/button-text/index.md @@ -3,11 +3,23 @@ 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'; diff --git a/static/usage/v7/select/customization/custom-toggle-icons/angular.md b/static/usage/v7/select/customization/custom-toggle-icons/angular/example_component_html.md similarity index 100% rename from static/usage/v7/select/customization/custom-toggle-icons/angular.md rename to static/usage/v7/select/customization/custom-toggle-icons/angular/example_component_html.md diff --git a/static/usage/v7/select/customization/custom-toggle-icons/angular/example_component_ts.md b/static/usage/v7/select/customization/custom-toggle-icons/angular/example_component_ts.md new file mode 100644 index 00000000000..61e221a24b6 --- /dev/null +++ b/static/usage/v7/select/customization/custom-toggle-icons/angular/example_component_ts.md @@ -0,0 +1,24 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone'; + +import { addIcons } from 'ionicons'; +import { add, remove } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonSelect, IonSelectOption], +}) +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({ add, remove }); + } +} +``` diff --git a/static/usage/v7/select/customization/custom-toggle-icons/index.md b/static/usage/v7/select/customization/custom-toggle-icons/index.md index 0617a54da77..86f22e705ff 100644 --- a/static/usage/v7/select/customization/custom-toggle-icons/index.md +++ b/static/usage/v7/select/customization/custom-toggle-icons/index.md @@ -3,11 +3,23 @@ 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'; diff --git a/static/usage/v7/select/customization/icon-flip-behavior/angular/example_component_ts.md b/static/usage/v7/select/customization/icon-flip-behavior/angular/example_component_ts.md index 4db53a836a9..d85d4166365 100644 --- a/static/usage/v7/select/customization/icon-flip-behavior/angular/example_component_ts.md +++ b/static/usage/v7/select/customization/icon-flip-behavior/angular/example_component_ts.md @@ -1,10 +1,24 @@ ```ts import { Component } from '@angular/core'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone'; + +import { addIcons } from 'ionicons'; +import { caretDownSharp } from 'ionicons/icons'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonSelect, IonSelectOption], }) -export class ExampleComponent {} +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({ caretDownSharp }); + } +} ``` diff --git a/static/usage/v7/select/customization/interface-options/angular/example_component_ts.md b/static/usage/v7/select/customization/interface-options/angular/example_component_ts.md index c3f34d0adaf..2ab0bd1d62a 100644 --- a/static/usage/v7/select/customization/interface-options/angular/example_component_ts.md +++ b/static/usage/v7/select/customization/interface-options/angular/example_component_ts.md @@ -1,9 +1,12 @@ ```ts import { Component } from '@angular/core'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonSelect, IonSelectOption], }) export class ExampleComponent { customAlertOptions = { diff --git a/static/usage/v7/select/customization/styling-select/angular/example_component_ts.md b/static/usage/v7/select/customization/styling-select/angular/example_component_ts.md index 4db53a836a9..1b377b77218 100644 --- a/static/usage/v7/select/customization/styling-select/angular/example_component_ts.md +++ b/static/usage/v7/select/customization/styling-select/angular/example_component_ts.md @@ -1,10 +1,12 @@ ```ts import { Component } from '@angular/core'; +import { IonSelect, IonSelectOption } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [IonSelect, IonSelectOption], }) export class ExampleComponent {} ``` diff --git a/static/usage/v7/select/fill/angular.md b/static/usage/v7/select/fill/angular/example_component_html.md similarity index 100% rename from static/usage/v7/select/fill/angular.md rename to static/usage/v7/select/fill/angular/example_component_html.md diff --git a/static/usage/v7/select/fill/angular/example_component_ts.md b/static/usage/v7/select/fill/angular/example_component_ts.md new file mode 100644 index 00000000000..1b377b77218 --- /dev/null +++ b/static/usage/v7/select/fill/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonSelect, IonSelectOption } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonSelect, IonSelectOption], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/select/fill/index.md b/static/usage/v7/select/fill/index.md index 393a8af448a..16a28199741 100644 --- a/static/usage/v7/select/fill/index.md +++ b/static/usage/v7/select/fill/index.md @@ -3,11 +3,23 @@ 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'; diff --git a/static/usage/v7/select/interfaces/popover/angular.md b/static/usage/v7/select/interfaces/popover/angular/example_component_html.md similarity index 100% rename from static/usage/v7/select/interfaces/popover/angular.md rename to static/usage/v7/select/interfaces/popover/angular/example_component_html.md diff --git a/static/usage/v7/select/interfaces/popover/angular/example_component_ts.md b/static/usage/v7/select/interfaces/popover/angular/example_component_ts.md new file mode 100644 index 00000000000..efa11c163f9 --- /dev/null +++ b/static/usage/v7/select/interfaces/popover/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonSelect, IonSelectOption], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/select/interfaces/popover/index.md b/static/usage/v7/select/interfaces/popover/index.md index ae4fa7b7521..4519e559ec0 100644 --- a/static/usage/v7/select/interfaces/popover/index.md +++ b/static/usage/v7/select/interfaces/popover/index.md @@ -3,11 +3,23 @@ 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'; diff --git a/static/usage/v7/select/justify/angular.md b/static/usage/v7/select/justify/angular/example_component_html.md similarity index 100% rename from static/usage/v7/select/justify/angular.md rename to static/usage/v7/select/justify/angular/example_component_html.md diff --git a/static/usage/v7/select/justify/angular/example_component_ts.md b/static/usage/v7/select/justify/angular/example_component_ts.md new file mode 100644 index 00000000000..edeb5fb2170 --- /dev/null +++ b/static/usage/v7/select/justify/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonSelect, IonSelectOption } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonSelect, IonSelectOption], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/select/justify/index.md b/static/usage/v7/select/justify/index.md index 17356a84665..1142c6f8dc0 100644 --- a/static/usage/v7/select/justify/index.md +++ b/static/usage/v7/select/justify/index.md @@ -3,11 +3,23 @@ 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'; diff --git a/static/usage/v7/select/label-placement/angular.md b/static/usage/v7/select/label-placement/angular/example_component_html.md similarity index 100% rename from static/usage/v7/select/label-placement/angular.md rename to static/usage/v7/select/label-placement/angular/example_component_html.md diff --git a/static/usage/v7/select/label-placement/angular/example_component_ts.md b/static/usage/v7/select/label-placement/angular/example_component_ts.md new file mode 100644 index 00000000000..efa11c163f9 --- /dev/null +++ b/static/usage/v7/select/label-placement/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonSelect, IonSelectOption], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/select/label-placement/index.md b/static/usage/v7/select/label-placement/index.md index b0464726fb4..ceeb3cf6653 100644 --- a/static/usage/v7/select/label-placement/index.md +++ b/static/usage/v7/select/label-placement/index.md @@ -3,11 +3,23 @@ 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'; diff --git a/static/usage/v7/select/label-slot/angular.md b/static/usage/v7/select/label-slot/angular/example_component_html.md similarity index 100% rename from static/usage/v7/select/label-slot/angular.md rename to static/usage/v7/select/label-slot/angular/example_component_html.md diff --git a/static/usage/v7/select/label-slot/angular/example_component_ts.md b/static/usage/v7/select/label-slot/angular/example_component_ts.md new file mode 100644 index 00000000000..a8cb5c497c5 --- /dev/null +++ b/static/usage/v7/select/label-slot/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonList, IonSelect, IonSelectOption, IonText } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonSelect, IonSelectOption, IonText], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/select/label-slot/index.md b/static/usage/v7/select/label-slot/index.md index 1b25e6b83f6..cefb2b96fdc 100644 --- a/static/usage/v7/select/label-slot/index.md +++ b/static/usage/v7/select/label-slot/index.md @@ -3,11 +3,23 @@ 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'; diff --git a/static/usage/v7/select/no-visible-label/angular.md b/static/usage/v7/select/no-visible-label/angular/example_component_html.md similarity index 100% rename from static/usage/v7/select/no-visible-label/angular.md rename to static/usage/v7/select/no-visible-label/angular/example_component_html.md diff --git a/static/usage/v7/select/no-visible-label/angular/example_component_ts.md b/static/usage/v7/select/no-visible-label/angular/example_component_ts.md new file mode 100644 index 00000000000..efa11c163f9 --- /dev/null +++ b/static/usage/v7/select/no-visible-label/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonSelect, IonSelectOption], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/select/no-visible-label/index.md b/static/usage/v7/select/no-visible-label/index.md index 214708de577..2fc29ce2679 100644 --- a/static/usage/v7/select/no-visible-label/index.md +++ b/static/usage/v7/select/no-visible-label/index.md @@ -3,11 +3,23 @@ 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'; diff --git a/static/usage/v7/select/objects-as-values/multiple-selection/angular/example_component_html.md b/static/usage/v7/select/objects-as-values/multiple-selection/angular/example_component_html.md index af00be1957e..361cfbad1b8 100644 --- a/static/usage/v7/select/objects-as-values/multiple-selection/angular/example_component_html.md +++ b/static/usage/v7/select/objects-as-values/multiple-selection/angular/example_component_html.md @@ -8,7 +8,9 @@ (ionChange)="handleChange($event)" [multiple]="true" > - {{ food.name }} + @for (food of foods; track food) { + {{ food.name }} + } diff --git a/static/usage/v7/select/objects-as-values/multiple-selection/angular/example_component_ts.md b/static/usage/v7/select/objects-as-values/multiple-selection/angular/example_component_ts.md index c33570deec9..976de91ea50 100644 --- a/static/usage/v7/select/objects-as-values/multiple-selection/angular/example_component_ts.md +++ b/static/usage/v7/select/objects-as-values/multiple-selection/angular/example_component_ts.md @@ -1,12 +1,21 @@ ```ts import { Component } from '@angular/core'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone'; + +interface Food { + id: number; + name: string; + type: string; +} @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonSelect, IonSelectOption], }) export class ExampleComponent { - foods = [ + foods: Food[] = [ { id: 1, name: 'Apples', @@ -24,7 +33,7 @@ export class ExampleComponent { }, ]; - compareWith(o1, o2) { + compareWith(o1: Food | null, o2: Food | Food[] | null): boolean { if (!o1 || !o2) { return o1 === o2; } @@ -36,8 +45,9 @@ export class ExampleComponent { return o1.id === o2.id; } - handleChange(ev) { - console.log('Current value:', JSON.stringify(ev.target.value)); + handleChange(ev: Event) { + const target = ev.target as HTMLIonSelectElement; + console.log('Current value:', JSON.stringify(target.value)); } } ``` diff --git a/static/usage/v7/select/objects-as-values/using-comparewith/angular/example_component_html.md b/static/usage/v7/select/objects-as-values/using-comparewith/angular/example_component_html.md index 7354647f224..808a9743cc2 100644 --- a/static/usage/v7/select/objects-as-values/using-comparewith/angular/example_component_html.md +++ b/static/usage/v7/select/objects-as-values/using-comparewith/angular/example_component_html.md @@ -7,7 +7,9 @@ placeholder="Select food" (ionChange)="handleChange($event)" > - {{ food.name }} + @for (food of foods; track food) { + {{ food.name }} + } diff --git a/static/usage/v7/select/objects-as-values/using-comparewith/angular/example_component_ts.md b/static/usage/v7/select/objects-as-values/using-comparewith/angular/example_component_ts.md index 20d05fa847f..e984a6f6544 100644 --- a/static/usage/v7/select/objects-as-values/using-comparewith/angular/example_component_ts.md +++ b/static/usage/v7/select/objects-as-values/using-comparewith/angular/example_component_ts.md @@ -1,12 +1,21 @@ ```ts import { Component } from '@angular/core'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone'; + +interface Food { + id: number; + name: string; + type: string; +} @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonSelect, IonSelectOption], }) export class ExampleComponent { - foods = [ + foods: Food[] = [ { id: 1, name: 'Apples', @@ -24,12 +33,13 @@ export class ExampleComponent { }, ]; - compareWith(o1, o2) { + compareWith(o1: Food | null, o2: Food | null): boolean { return o1 && o2 ? o1.id === o2.id : o1 === o2; } - handleChange(ev) { - console.log('Current value:', JSON.stringify(ev.target.value)); + handleChange(ev: Event) { + const target = ev.target as HTMLIonSelectElement; + console.log('Current value:', JSON.stringify(target.value)); } } ``` diff --git a/static/usage/v7/select/start-end-slots/angular/example_component_ts.md b/static/usage/v7/select/start-end-slots/angular/example_component_ts.md index f7717b55dc1..4cdf6bc2b32 100644 --- a/static/usage/v7/select/start-end-slots/angular/example_component_ts.md +++ b/static/usage/v7/select/start-end-slots/angular/example_component_ts.md @@ -1,5 +1,6 @@ ```ts import { Component } from '@angular/core'; +import { IonButton, IonIcon, IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone'; import { addIcons } from 'ionicons'; import { eye, leaf } from 'ionicons/icons'; @@ -8,6 +9,7 @@ import { eye, leaf } from 'ionicons/icons'; selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [IonButton, IonIcon, IonItem, IonList, IonSelect, IonSelectOption], }) export class ExampleComponent { constructor() { diff --git a/static/usage/v7/select/typeahead/angular/app_module_ts.md b/static/usage/v7/select/typeahead/angular/app_module_ts.md deleted file mode 100644 index 0fa58037717..00000000000 --- a/static/usage/v7/select/typeahead/angular/app_module_ts.md +++ /dev/null @@ -1,19 +0,0 @@ -```ts -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { FormsModule } from '@angular/forms'; - -import { IonicModule } from '@ionic/angular'; - -import { AppComponent } from './app.component'; -import { ExampleComponent } from './example.component'; - -import { TypeaheadComponent } from './typeahead.component'; - -@NgModule({ - imports: [BrowserModule, FormsModule, IonicModule.forRoot({})], - declarations: [AppComponent, ExampleComponent, TypeaheadComponent], - bootstrap: [AppComponent], -}) -export class AppModule {} -``` diff --git a/static/usage/v7/select/typeahead/angular/example_component_ts.md b/static/usage/v7/select/typeahead/angular/example_component_ts.md index ded6fa60b0f..9276b8b13e5 100644 --- a/static/usage/v7/select/typeahead/angular/example_component_ts.md +++ b/static/usage/v7/select/typeahead/angular/example_component_ts.md @@ -1,11 +1,15 @@ ```ts import { Component, ViewChild } from '@angular/core'; -import { IonModal } from '@ionic/angular'; +import { IonContent, IonItem, IonLabel, IonList, IonModal } from '@ionic/angular/standalone'; import { Item } from './types'; +import { TypeaheadComponent } from './typeahead.component'; + @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonContent, IonItem, IonLabel, IonList, IonModal, TypeaheadComponent], }) export class ExampleComponent { @ViewChild('modal', { static: true }) modal!: IonModal; @@ -41,15 +45,23 @@ export class ExampleComponent { { text: 'Strawberry', value: 'strawberry' }, ]; - private formatData(data: string[]) { + /** + * Formats the display text based on the selected fruits. + * @param data - Array of selected fruit values + * @returns A formatted string for display + */ + private formatData(data: string[]): string { if (data.length === 1) { const fruit = this.fruits.find((fruit) => fruit.value === data[0]); - return fruit.text; + return fruit ? fruit.text : ''; } - return `${data.length} items`; } + /** + * Handles fruit selection changes and updates the selected fruits and text. + * @param fruits - Array of selected fruit values + */ fruitSelectionChanged(fruits: string[]) { this.selectedFruits = fruits; this.selectedFruitsText = this.formatData(this.selectedFruits); diff --git a/static/usage/v7/select/typeahead/angular/modal-example_component_html.md b/static/usage/v7/select/typeahead/angular/typeahead_component_html.md similarity index 90% rename from static/usage/v7/select/typeahead/angular/modal-example_component_html.md rename to static/usage/v7/select/typeahead/angular/typeahead_component_html.md index 64da05a7a9d..ed147c64254 100644 --- a/static/usage/v7/select/typeahead/angular/modal-example_component_html.md +++ b/static/usage/v7/select/typeahead/angular/typeahead_component_html.md @@ -16,11 +16,13 @@ - + @for (item of filteredItems; track item.value) { + {{ item.text }} + } ``` diff --git a/static/usage/v8/select/typeahead/angular/modal-example_component_ts.md b/static/usage/v7/select/typeahead/angular/typeahead_component_ts.md similarity index 67% rename from static/usage/v8/select/typeahead/angular/modal-example_component_ts.md rename to static/usage/v7/select/typeahead/angular/typeahead_component_ts.md index 9bd21f1b404..f9de32444d0 100644 --- a/static/usage/v8/select/typeahead/angular/modal-example_component_ts.md +++ b/static/usage/v7/select/typeahead/angular/typeahead_component_ts.md @@ -1,11 +1,37 @@ ```ts import { Component, Input, Output, EventEmitter } from '@angular/core'; import type { OnInit } from '@angular/core'; + +import { + IonButton, + IonButtons, + IonCheckbox, + IonContent, + IonHeader, + IonItem, + IonList, + IonSearchbar, + IonTitle, + IonToolbar, +} from '@ionic/angular/standalone'; + import { Item } from './types'; @Component({ selector: 'app-typeahead', templateUrl: 'typeahead.component.html', + imports: [ + IonButton, + IonButtons, + IonCheckbox, + IonContent, + IonHeader, + IonItem, + IonList, + IonSearchbar, + IonTitle, + IonToolbar, + ], }) export class TypeaheadComponent implements OnInit { @Input() items: Item[] = []; @@ -23,10 +49,6 @@ export class TypeaheadComponent implements OnInit { this.workingSelectedValues = [...this.selectedItems]; } - trackItems(index: number, item: Item) { - return item.value; - } - cancelChanges() { this.selectionCancel.emit(); } @@ -35,8 +57,9 @@ export class TypeaheadComponent implements OnInit { this.selectionChange.emit(this.workingSelectedValues); } - searchbarInput(ev) { - this.filterList(ev.target.value); + searchbarInput(ev: Event) { + const inputElement = ev.target as HTMLInputElement; + this.filterList(inputElement.value); } /** @@ -50,7 +73,7 @@ export class TypeaheadComponent implements OnInit { * If no search query is defined, * return all options. */ - if (searchQuery === undefined) { + if (searchQuery === undefined || searchQuery.trim() === '') { this.filteredItems = [...this.items]; } else { /** @@ -59,17 +82,15 @@ export class TypeaheadComponent implements OnInit { * contain the search query as a substring. */ const normalizedQuery = searchQuery.toLowerCase(); - this.filteredItems = this.items.filter((item) => { - return item.text.toLowerCase().includes(normalizedQuery); - }); + this.filteredItems = this.items.filter((item) => item.text.toLowerCase().includes(normalizedQuery)); } } - isChecked(value: string) { - return this.workingSelectedValues.find((item) => item === value); + isChecked(value: string): boolean { + return this.workingSelectedValues.includes(value); } - checkboxChange(ev) { + checkboxChange(ev: CustomEvent<{ checked: boolean; value: string }>) { const { checked, value } = ev.detail; if (checked) { diff --git a/static/usage/v7/select/typeahead/index.md b/static/usage/v7/select/typeahead/index.md index e81d8b0aa56..86565f33705 100644 --- a/static/usage/v7/select/typeahead/index.md +++ b/static/usage/v7/select/typeahead/index.md @@ -10,11 +10,10 @@ import vue_example from './vue/example_vue.md'; import vue_types_ts from './vue/vue_types_ts.md'; import vue_typeahead_component from './vue/typeahead_component_vue.md'; -import angular_app_module_ts from './angular/app_module_ts.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_modal_example_component_ts from './angular/modal-example_component_ts.md'; -import angular_modal_example_component_html from './angular/modal-example_component_html.md'; +import angular_typeahead_component_ts from './angular/typeahead_component_ts.md'; +import angular_typeahead_component_html from './angular/typeahead_component_html.md'; import angular_types_ts from './angular/angular_types_ts.md'; diff --git a/static/usage/v8/select/basic/responding-to-interaction/angular/example_component_ts.md b/static/usage/v8/select/basic/responding-to-interaction/angular/example_component_ts.md index fb51c040a2f..fb988662d59 100644 --- a/static/usage/v8/select/basic/responding-to-interaction/angular/example_component_ts.md +++ b/static/usage/v8/select/basic/responding-to-interaction/angular/example_component_ts.md @@ -1,13 +1,16 @@ ```ts import { Component } from '@angular/core'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonSelect, IonSelectOption], }) export class ExampleComponent { - handleChange(e) { - console.log('ionChange fired with value: ' + e.detail.value); + handleChange(event: CustomEvent) { + console.log('ionChange fired with value: ' + event.detail.value); } handleCancel() { diff --git a/static/usage/v8/select/basic/single-selection/angular.md b/static/usage/v8/select/basic/single-selection/angular/example_component_html.md similarity index 100% rename from static/usage/v8/select/basic/single-selection/angular.md rename to static/usage/v8/select/basic/single-selection/angular/example_component_html.md diff --git a/static/usage/v8/select/basic/single-selection/angular/example_component_ts.md b/static/usage/v8/select/basic/single-selection/angular/example_component_ts.md new file mode 100644 index 00000000000..efa11c163f9 --- /dev/null +++ b/static/usage/v8/select/basic/single-selection/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonSelect, IonSelectOption], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/select/basic/single-selection/index.md b/static/usage/v8/select/basic/single-selection/index.md index 820ab1cccf2..14036fc96ab 100644 --- a/static/usage/v8/select/basic/single-selection/index.md +++ b/static/usage/v8/select/basic/single-selection/index.md @@ -3,11 +3,23 @@ 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'; diff --git a/static/usage/v8/select/customization/button-text/angular.md b/static/usage/v8/select/customization/button-text/angular/example_component_html.md similarity index 100% rename from static/usage/v8/select/customization/button-text/angular.md rename to static/usage/v8/select/customization/button-text/angular/example_component_html.md diff --git a/static/usage/v8/select/customization/button-text/angular/example_component_ts.md b/static/usage/v8/select/customization/button-text/angular/example_component_ts.md new file mode 100644 index 00000000000..efa11c163f9 --- /dev/null +++ b/static/usage/v8/select/customization/button-text/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonSelect, IonSelectOption], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/select/customization/button-text/index.md b/static/usage/v8/select/customization/button-text/index.md index cc9d2417caf..be21f778b8a 100644 --- a/static/usage/v8/select/customization/button-text/index.md +++ b/static/usage/v8/select/customization/button-text/index.md @@ -3,11 +3,23 @@ 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'; diff --git a/static/usage/v8/select/customization/custom-toggle-icons/angular.md b/static/usage/v8/select/customization/custom-toggle-icons/angular/example_component_html.md similarity index 100% rename from static/usage/v8/select/customization/custom-toggle-icons/angular.md rename to static/usage/v8/select/customization/custom-toggle-icons/angular/example_component_html.md diff --git a/static/usage/v8/select/customization/custom-toggle-icons/angular/example_component_ts.md b/static/usage/v8/select/customization/custom-toggle-icons/angular/example_component_ts.md new file mode 100644 index 00000000000..61e221a24b6 --- /dev/null +++ b/static/usage/v8/select/customization/custom-toggle-icons/angular/example_component_ts.md @@ -0,0 +1,24 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone'; + +import { addIcons } from 'ionicons'; +import { add, remove } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonSelect, IonSelectOption], +}) +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({ add, remove }); + } +} +``` diff --git a/static/usage/v8/select/customization/custom-toggle-icons/index.md b/static/usage/v8/select/customization/custom-toggle-icons/index.md index 228945fc15c..90b1f857c2e 100644 --- a/static/usage/v8/select/customization/custom-toggle-icons/index.md +++ b/static/usage/v8/select/customization/custom-toggle-icons/index.md @@ -3,11 +3,23 @@ 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'; diff --git a/static/usage/v8/select/customization/icon-flip-behavior/angular/example_component_ts.md b/static/usage/v8/select/customization/icon-flip-behavior/angular/example_component_ts.md index 4db53a836a9..d85d4166365 100644 --- a/static/usage/v8/select/customization/icon-flip-behavior/angular/example_component_ts.md +++ b/static/usage/v8/select/customization/icon-flip-behavior/angular/example_component_ts.md @@ -1,10 +1,24 @@ ```ts import { Component } from '@angular/core'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone'; + +import { addIcons } from 'ionicons'; +import { caretDownSharp } from 'ionicons/icons'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonSelect, IonSelectOption], }) -export class ExampleComponent {} +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({ caretDownSharp }); + } +} ``` diff --git a/static/usage/v8/select/customization/interface-options/angular/example_component_ts.md b/static/usage/v8/select/customization/interface-options/angular/example_component_ts.md index 5f8bc6929ca..ad2e2a9b6bb 100644 --- a/static/usage/v8/select/customization/interface-options/angular/example_component_ts.md +++ b/static/usage/v8/select/customization/interface-options/angular/example_component_ts.md @@ -1,9 +1,12 @@ ```ts import { Component } from '@angular/core'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonSelect, IonSelectOption], }) export class ExampleComponent { customAlertOptions = { diff --git a/static/usage/v8/select/customization/styling-select/angular/example_component_ts.md b/static/usage/v8/select/customization/styling-select/angular/example_component_ts.md index 4db53a836a9..1b377b77218 100644 --- a/static/usage/v8/select/customization/styling-select/angular/example_component_ts.md +++ b/static/usage/v8/select/customization/styling-select/angular/example_component_ts.md @@ -1,10 +1,12 @@ ```ts import { Component } from '@angular/core'; +import { IonSelect, IonSelectOption } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [IonSelect, IonSelectOption], }) export class ExampleComponent {} ``` diff --git a/static/usage/v8/select/fill/angular.md b/static/usage/v8/select/fill/angular/example_component_html.md similarity index 100% rename from static/usage/v8/select/fill/angular.md rename to static/usage/v8/select/fill/angular/example_component_html.md diff --git a/static/usage/v8/select/fill/angular/example_component_ts.md b/static/usage/v8/select/fill/angular/example_component_ts.md new file mode 100644 index 00000000000..1b377b77218 --- /dev/null +++ b/static/usage/v8/select/fill/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonSelect, IonSelectOption } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonSelect, IonSelectOption], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/select/fill/index.md b/static/usage/v8/select/fill/index.md index 9666f49d0d8..edf11822c4f 100644 --- a/static/usage/v8/select/fill/index.md +++ b/static/usage/v8/select/fill/index.md @@ -3,11 +3,23 @@ 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'; diff --git a/static/usage/v8/select/interfaces/modal/angular.md b/static/usage/v8/select/interfaces/modal/angular/example_component_html.md similarity index 100% rename from static/usage/v8/select/interfaces/modal/angular.md rename to static/usage/v8/select/interfaces/modal/angular/example_component_html.md diff --git a/static/usage/v8/select/interfaces/modal/angular/example_component_ts.md b/static/usage/v8/select/interfaces/modal/angular/example_component_ts.md new file mode 100644 index 00000000000..efa11c163f9 --- /dev/null +++ b/static/usage/v8/select/interfaces/modal/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonSelect, IonSelectOption], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/select/interfaces/modal/index.md b/static/usage/v8/select/interfaces/modal/index.md index 9f79261c280..4920aab389a 100644 --- a/static/usage/v8/select/interfaces/modal/index.md +++ b/static/usage/v8/select/interfaces/modal/index.md @@ -3,11 +3,23 @@ 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'; diff --git a/static/usage/v8/select/interfaces/popover/angular.md b/static/usage/v8/select/interfaces/popover/angular/example_component_html.md similarity index 100% rename from static/usage/v8/select/interfaces/popover/angular.md rename to static/usage/v8/select/interfaces/popover/angular/example_component_html.md diff --git a/static/usage/v8/select/interfaces/popover/angular/example_component_ts.md b/static/usage/v8/select/interfaces/popover/angular/example_component_ts.md new file mode 100644 index 00000000000..efa11c163f9 --- /dev/null +++ b/static/usage/v8/select/interfaces/popover/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonSelect, IonSelectOption], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/select/interfaces/popover/index.md b/static/usage/v8/select/interfaces/popover/index.md index b33bd96e53b..167e36dee4b 100644 --- a/static/usage/v8/select/interfaces/popover/index.md +++ b/static/usage/v8/select/interfaces/popover/index.md @@ -3,11 +3,23 @@ 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'; diff --git a/static/usage/v8/select/justify/angular.md b/static/usage/v8/select/justify/angular/example_component_html.md similarity index 100% rename from static/usage/v8/select/justify/angular.md rename to static/usage/v8/select/justify/angular/example_component_html.md diff --git a/static/usage/v8/select/justify/angular/example_component_ts.md b/static/usage/v8/select/justify/angular/example_component_ts.md new file mode 100644 index 00000000000..edeb5fb2170 --- /dev/null +++ b/static/usage/v8/select/justify/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonSelect, IonSelectOption } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonSelect, IonSelectOption], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/select/justify/index.md b/static/usage/v8/select/justify/index.md index 751948aa47c..b1be55c0ba0 100644 --- a/static/usage/v8/select/justify/index.md +++ b/static/usage/v8/select/justify/index.md @@ -3,11 +3,23 @@ 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'; diff --git a/static/usage/v8/select/label-placement/angular.md b/static/usage/v8/select/label-placement/angular/example_component_html.md similarity index 100% rename from static/usage/v8/select/label-placement/angular.md rename to static/usage/v8/select/label-placement/angular/example_component_html.md diff --git a/static/usage/v8/select/label-placement/angular/example_component_ts.md b/static/usage/v8/select/label-placement/angular/example_component_ts.md new file mode 100644 index 00000000000..efa11c163f9 --- /dev/null +++ b/static/usage/v8/select/label-placement/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonSelect, IonSelectOption], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/select/label-placement/index.md b/static/usage/v8/select/label-placement/index.md index 694b6b3f4ea..49800fb0536 100644 --- a/static/usage/v8/select/label-placement/index.md +++ b/static/usage/v8/select/label-placement/index.md @@ -3,11 +3,23 @@ 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'; diff --git a/static/usage/v8/select/label-slot/angular.md b/static/usage/v8/select/label-slot/angular/example_component_html.md similarity index 100% rename from static/usage/v8/select/label-slot/angular.md rename to static/usage/v8/select/label-slot/angular/example_component_html.md diff --git a/static/usage/v8/select/label-slot/angular/example_component_ts.md b/static/usage/v8/select/label-slot/angular/example_component_ts.md new file mode 100644 index 00000000000..a8cb5c497c5 --- /dev/null +++ b/static/usage/v8/select/label-slot/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonList, IonSelect, IonSelectOption, IonText } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonSelect, IonSelectOption, IonText], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/select/label-slot/index.md b/static/usage/v8/select/label-slot/index.md index c7d0382d140..a9269a7e266 100644 --- a/static/usage/v8/select/label-slot/index.md +++ b/static/usage/v8/select/label-slot/index.md @@ -3,11 +3,23 @@ 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'; diff --git a/static/usage/v8/select/no-visible-label/angular.md b/static/usage/v8/select/no-visible-label/angular/example_component_html.md similarity index 100% rename from static/usage/v8/select/no-visible-label/angular.md rename to static/usage/v8/select/no-visible-label/angular/example_component_html.md diff --git a/static/usage/v8/select/no-visible-label/angular/example_component_ts.md b/static/usage/v8/select/no-visible-label/angular/example_component_ts.md new file mode 100644 index 00000000000..efa11c163f9 --- /dev/null +++ b/static/usage/v8/select/no-visible-label/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonSelect, IonSelectOption], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/select/no-visible-label/index.md b/static/usage/v8/select/no-visible-label/index.md index f09ead1ad1a..09dea4d4c00 100644 --- a/static/usage/v8/select/no-visible-label/index.md +++ b/static/usage/v8/select/no-visible-label/index.md @@ -3,11 +3,23 @@ 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'; diff --git a/static/usage/v8/select/objects-as-values/multiple-selection/angular/example_component_html.md b/static/usage/v8/select/objects-as-values/multiple-selection/angular/example_component_html.md index af00be1957e..361cfbad1b8 100644 --- a/static/usage/v8/select/objects-as-values/multiple-selection/angular/example_component_html.md +++ b/static/usage/v8/select/objects-as-values/multiple-selection/angular/example_component_html.md @@ -8,7 +8,9 @@ (ionChange)="handleChange($event)" [multiple]="true" > - {{ food.name }} + @for (food of foods; track food) { + {{ food.name }} + } diff --git a/static/usage/v8/select/objects-as-values/multiple-selection/angular/example_component_ts.md b/static/usage/v8/select/objects-as-values/multiple-selection/angular/example_component_ts.md index c33570deec9..976de91ea50 100644 --- a/static/usage/v8/select/objects-as-values/multiple-selection/angular/example_component_ts.md +++ b/static/usage/v8/select/objects-as-values/multiple-selection/angular/example_component_ts.md @@ -1,12 +1,21 @@ ```ts import { Component } from '@angular/core'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone'; + +interface Food { + id: number; + name: string; + type: string; +} @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonSelect, IonSelectOption], }) export class ExampleComponent { - foods = [ + foods: Food[] = [ { id: 1, name: 'Apples', @@ -24,7 +33,7 @@ export class ExampleComponent { }, ]; - compareWith(o1, o2) { + compareWith(o1: Food | null, o2: Food | Food[] | null): boolean { if (!o1 || !o2) { return o1 === o2; } @@ -36,8 +45,9 @@ export class ExampleComponent { return o1.id === o2.id; } - handleChange(ev) { - console.log('Current value:', JSON.stringify(ev.target.value)); + handleChange(ev: Event) { + const target = ev.target as HTMLIonSelectElement; + console.log('Current value:', JSON.stringify(target.value)); } } ``` diff --git a/static/usage/v8/select/objects-as-values/using-comparewith/angular/example_component_html.md b/static/usage/v8/select/objects-as-values/using-comparewith/angular/example_component_html.md index 7354647f224..808a9743cc2 100644 --- a/static/usage/v8/select/objects-as-values/using-comparewith/angular/example_component_html.md +++ b/static/usage/v8/select/objects-as-values/using-comparewith/angular/example_component_html.md @@ -7,7 +7,9 @@ placeholder="Select food" (ionChange)="handleChange($event)" > - {{ food.name }} + @for (food of foods; track food) { + {{ food.name }} + } diff --git a/static/usage/v8/select/objects-as-values/using-comparewith/angular/example_component_ts.md b/static/usage/v8/select/objects-as-values/using-comparewith/angular/example_component_ts.md index 20d05fa847f..e984a6f6544 100644 --- a/static/usage/v8/select/objects-as-values/using-comparewith/angular/example_component_ts.md +++ b/static/usage/v8/select/objects-as-values/using-comparewith/angular/example_component_ts.md @@ -1,12 +1,21 @@ ```ts import { Component } from '@angular/core'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone'; + +interface Food { + id: number; + name: string; + type: string; +} @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonSelect, IonSelectOption], }) export class ExampleComponent { - foods = [ + foods: Food[] = [ { id: 1, name: 'Apples', @@ -24,12 +33,13 @@ export class ExampleComponent { }, ]; - compareWith(o1, o2) { + compareWith(o1: Food | null, o2: Food | null): boolean { return o1 && o2 ? o1.id === o2.id : o1 === o2; } - handleChange(ev) { - console.log('Current value:', JSON.stringify(ev.target.value)); + handleChange(ev: Event) { + const target = ev.target as HTMLIonSelectElement; + console.log('Current value:', JSON.stringify(target.value)); } } ``` diff --git a/static/usage/v8/select/start-end-slots/angular/example_component_ts.md b/static/usage/v8/select/start-end-slots/angular/example_component_ts.md index f7717b55dc1..4cdf6bc2b32 100644 --- a/static/usage/v8/select/start-end-slots/angular/example_component_ts.md +++ b/static/usage/v8/select/start-end-slots/angular/example_component_ts.md @@ -1,5 +1,6 @@ ```ts import { Component } from '@angular/core'; +import { IonButton, IonIcon, IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone'; import { addIcons } from 'ionicons'; import { eye, leaf } from 'ionicons/icons'; @@ -8,6 +9,7 @@ import { eye, leaf } from 'ionicons/icons'; selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [IonButton, IonIcon, IonItem, IonList, IonSelect, IonSelectOption], }) export class ExampleComponent { constructor() { diff --git a/static/usage/v8/select/typeahead/angular/app_module_ts.md b/static/usage/v8/select/typeahead/angular/app_module_ts.md deleted file mode 100644 index 0fa58037717..00000000000 --- a/static/usage/v8/select/typeahead/angular/app_module_ts.md +++ /dev/null @@ -1,19 +0,0 @@ -```ts -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { FormsModule } from '@angular/forms'; - -import { IonicModule } from '@ionic/angular'; - -import { AppComponent } from './app.component'; -import { ExampleComponent } from './example.component'; - -import { TypeaheadComponent } from './typeahead.component'; - -@NgModule({ - imports: [BrowserModule, FormsModule, IonicModule.forRoot({})], - declarations: [AppComponent, ExampleComponent, TypeaheadComponent], - bootstrap: [AppComponent], -}) -export class AppModule {} -``` diff --git a/static/usage/v8/select/typeahead/angular/example_component_ts.md b/static/usage/v8/select/typeahead/angular/example_component_ts.md index ded6fa60b0f..9276b8b13e5 100644 --- a/static/usage/v8/select/typeahead/angular/example_component_ts.md +++ b/static/usage/v8/select/typeahead/angular/example_component_ts.md @@ -1,11 +1,15 @@ ```ts import { Component, ViewChild } from '@angular/core'; -import { IonModal } from '@ionic/angular'; +import { IonContent, IonItem, IonLabel, IonList, IonModal } from '@ionic/angular/standalone'; import { Item } from './types'; +import { TypeaheadComponent } from './typeahead.component'; + @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonContent, IonItem, IonLabel, IonList, IonModal, TypeaheadComponent], }) export class ExampleComponent { @ViewChild('modal', { static: true }) modal!: IonModal; @@ -41,15 +45,23 @@ export class ExampleComponent { { text: 'Strawberry', value: 'strawberry' }, ]; - private formatData(data: string[]) { + /** + * Formats the display text based on the selected fruits. + * @param data - Array of selected fruit values + * @returns A formatted string for display + */ + private formatData(data: string[]): string { if (data.length === 1) { const fruit = this.fruits.find((fruit) => fruit.value === data[0]); - return fruit.text; + return fruit ? fruit.text : ''; } - return `${data.length} items`; } + /** + * Handles fruit selection changes and updates the selected fruits and text. + * @param fruits - Array of selected fruit values + */ fruitSelectionChanged(fruits: string[]) { this.selectedFruits = fruits; this.selectedFruitsText = this.formatData(this.selectedFruits); diff --git a/static/usage/v8/select/typeahead/angular/modal-example_component_html.md b/static/usage/v8/select/typeahead/angular/typeahead_component_html.md similarity index 90% rename from static/usage/v8/select/typeahead/angular/modal-example_component_html.md rename to static/usage/v8/select/typeahead/angular/typeahead_component_html.md index 64da05a7a9d..ed147c64254 100644 --- a/static/usage/v8/select/typeahead/angular/modal-example_component_html.md +++ b/static/usage/v8/select/typeahead/angular/typeahead_component_html.md @@ -16,11 +16,13 @@ - + @for (item of filteredItems; track item.value) { + {{ item.text }} + } ``` diff --git a/static/usage/v7/select/typeahead/angular/modal-example_component_ts.md b/static/usage/v8/select/typeahead/angular/typeahead_component_ts.md similarity index 67% rename from static/usage/v7/select/typeahead/angular/modal-example_component_ts.md rename to static/usage/v8/select/typeahead/angular/typeahead_component_ts.md index 9bd21f1b404..f9de32444d0 100644 --- a/static/usage/v7/select/typeahead/angular/modal-example_component_ts.md +++ b/static/usage/v8/select/typeahead/angular/typeahead_component_ts.md @@ -1,11 +1,37 @@ ```ts import { Component, Input, Output, EventEmitter } from '@angular/core'; import type { OnInit } from '@angular/core'; + +import { + IonButton, + IonButtons, + IonCheckbox, + IonContent, + IonHeader, + IonItem, + IonList, + IonSearchbar, + IonTitle, + IonToolbar, +} from '@ionic/angular/standalone'; + import { Item } from './types'; @Component({ selector: 'app-typeahead', templateUrl: 'typeahead.component.html', + imports: [ + IonButton, + IonButtons, + IonCheckbox, + IonContent, + IonHeader, + IonItem, + IonList, + IonSearchbar, + IonTitle, + IonToolbar, + ], }) export class TypeaheadComponent implements OnInit { @Input() items: Item[] = []; @@ -23,10 +49,6 @@ export class TypeaheadComponent implements OnInit { this.workingSelectedValues = [...this.selectedItems]; } - trackItems(index: number, item: Item) { - return item.value; - } - cancelChanges() { this.selectionCancel.emit(); } @@ -35,8 +57,9 @@ export class TypeaheadComponent implements OnInit { this.selectionChange.emit(this.workingSelectedValues); } - searchbarInput(ev) { - this.filterList(ev.target.value); + searchbarInput(ev: Event) { + const inputElement = ev.target as HTMLInputElement; + this.filterList(inputElement.value); } /** @@ -50,7 +73,7 @@ export class TypeaheadComponent implements OnInit { * If no search query is defined, * return all options. */ - if (searchQuery === undefined) { + if (searchQuery === undefined || searchQuery.trim() === '') { this.filteredItems = [...this.items]; } else { /** @@ -59,17 +82,15 @@ export class TypeaheadComponent implements OnInit { * contain the search query as a substring. */ const normalizedQuery = searchQuery.toLowerCase(); - this.filteredItems = this.items.filter((item) => { - return item.text.toLowerCase().includes(normalizedQuery); - }); + this.filteredItems = this.items.filter((item) => item.text.toLowerCase().includes(normalizedQuery)); } } - isChecked(value: string) { - return this.workingSelectedValues.find((item) => item === value); + isChecked(value: string): boolean { + return this.workingSelectedValues.includes(value); } - checkboxChange(ev) { + checkboxChange(ev: CustomEvent<{ checked: boolean; value: string }>) { const { checked, value } = ev.detail; if (checked) { diff --git a/static/usage/v8/select/typeahead/index.md b/static/usage/v8/select/typeahead/index.md index c7978e18190..7ce89c665a0 100644 --- a/static/usage/v8/select/typeahead/index.md +++ b/static/usage/v8/select/typeahead/index.md @@ -10,11 +10,10 @@ import vue_example from './vue/example_vue.md'; import vue_types_ts from './vue/vue_types_ts.md'; import vue_typeahead_component from './vue/typeahead_component_vue.md'; -import angular_app_module_ts from './angular/app_module_ts.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_modal_example_component_ts from './angular/modal-example_component_ts.md'; -import angular_modal_example_component_html from './angular/modal-example_component_html.md'; +import angular_typeahead_component_ts from './angular/typeahead_component_ts.md'; +import angular_typeahead_component_html from './angular/typeahead_component_html.md'; import angular_types_ts from './angular/angular_types_ts.md';