diff --git a/static/usage/v7/radio/alignment/angular.md b/static/usage/v7/radio/alignment/angular/example_component_html.md similarity index 100% rename from static/usage/v7/radio/alignment/angular.md rename to static/usage/v7/radio/alignment/angular/example_component_html.md diff --git a/static/usage/v7/radio/alignment/angular/example_component_ts.md b/static/usage/v7/radio/alignment/angular/example_component_ts.md new file mode 100644 index 00000000000..151a9f44f80 --- /dev/null +++ b/static/usage/v7/radio/alignment/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonList, IonRadio, IonRadioGroup } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonRadio, IonRadioGroup], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/radio/alignment/index.md b/static/usage/v7/radio/alignment/index.md index eb491f6f693..81a6888f436 100644 --- a/static/usage/v7/radio/alignment/index.md +++ b/static/usage/v7/radio/alignment/index.md @@ -3,7 +3,9 @@ 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/radio/basic/angular.md b/static/usage/v7/radio/basic/angular/example_component_html.md similarity index 100% rename from static/usage/v7/radio/basic/angular.md rename to static/usage/v7/radio/basic/angular/example_component_html.md diff --git a/static/usage/v7/radio/basic/angular/example_component_ts.md b/static/usage/v7/radio/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..f5bf20e746c --- /dev/null +++ b/static/usage/v7/radio/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonRadio, IonRadioGroup } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonRadio, IonRadioGroup], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/radio/basic/index.md b/static/usage/v7/radio/basic/index.md index 25f829a31fe..b1b5522da81 100644 --- a/static/usage/v7/radio/basic/index.md +++ b/static/usage/v7/radio/basic/index.md @@ -3,6 +3,22 @@ import Playground from '@site/src/components/global/Playground'; import javascript from './javascript.md'; import react from './react.md'; import vue from './vue.md'; -import angular from './angular.md'; - +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v7/radio/empty-selection/angular.md b/static/usage/v7/radio/empty-selection/angular/example_component_html.md similarity index 100% rename from static/usage/v7/radio/empty-selection/angular.md rename to static/usage/v7/radio/empty-selection/angular/example_component_html.md diff --git a/static/usage/v7/radio/empty-selection/angular/example_component_ts.md b/static/usage/v7/radio/empty-selection/angular/example_component_ts.md new file mode 100644 index 00000000000..f5bf20e746c --- /dev/null +++ b/static/usage/v7/radio/empty-selection/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonRadio, IonRadioGroup } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonRadio, IonRadioGroup], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/radio/empty-selection/index.md b/static/usage/v7/radio/empty-selection/index.md index 2223f07657d..31b149c9f34 100644 --- a/static/usage/v7/radio/empty-selection/index.md +++ b/static/usage/v7/radio/empty-selection/index.md @@ -3,6 +3,22 @@ import Playground from '@site/src/components/global/Playground'; import javascript from './javascript.md'; import react from './react.md'; import vue from './vue.md'; -import angular from './angular.md'; - +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v7/radio/justify/angular.md b/static/usage/v7/radio/justify/angular/example_component_html.md similarity index 100% rename from static/usage/v7/radio/justify/angular.md rename to static/usage/v7/radio/justify/angular/example_component_html.md diff --git a/static/usage/v7/radio/justify/angular/example_component_ts.md b/static/usage/v7/radio/justify/angular/example_component_ts.md new file mode 100644 index 00000000000..151a9f44f80 --- /dev/null +++ b/static/usage/v7/radio/justify/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonList, IonRadio, IonRadioGroup } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonRadio, IonRadioGroup], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/radio/justify/index.md b/static/usage/v7/radio/justify/index.md index 3105943de6f..62930c29a8d 100644 --- a/static/usage/v7/radio/justify/index.md +++ b/static/usage/v7/radio/justify/index.md @@ -3,6 +3,22 @@ import Playground from '@site/src/components/global/Playground'; import javascript from './javascript.md'; import react from './react.md'; import vue from './vue.md'; -import angular from './angular.md'; - +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v7/radio/label-placement/angular.md b/static/usage/v7/radio/label-placement/angular/example_component_html.md similarity index 100% rename from static/usage/v7/radio/label-placement/angular.md rename to static/usage/v7/radio/label-placement/angular/example_component_html.md diff --git a/static/usage/v7/radio/label-placement/angular/example_component_ts.md b/static/usage/v7/radio/label-placement/angular/example_component_ts.md new file mode 100644 index 00000000000..f5bf20e746c --- /dev/null +++ b/static/usage/v7/radio/label-placement/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonRadio, IonRadioGroup } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonRadio, IonRadioGroup], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/radio/label-placement/index.md b/static/usage/v7/radio/label-placement/index.md index 24df0d8ca22..5098f50aa87 100644 --- a/static/usage/v7/radio/label-placement/index.md +++ b/static/usage/v7/radio/label-placement/index.md @@ -3,6 +3,22 @@ import Playground from '@site/src/components/global/Playground'; import javascript from './javascript.md'; import react from './react.md'; import vue from './vue.md'; -import angular from './angular.md'; - +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v7/radio/theming/colors/angular.md b/static/usage/v7/radio/theming/colors/angular/example_component_html.md similarity index 100% rename from static/usage/v7/radio/theming/colors/angular.md rename to static/usage/v7/radio/theming/colors/angular/example_component_html.md diff --git a/static/usage/v7/radio/theming/colors/angular/example_component_ts.md b/static/usage/v7/radio/theming/colors/angular/example_component_ts.md new file mode 100644 index 00000000000..f5bf20e746c --- /dev/null +++ b/static/usage/v7/radio/theming/colors/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonRadio, IonRadioGroup } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonRadio, IonRadioGroup], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/radio/theming/colors/index.md b/static/usage/v7/radio/theming/colors/index.md index 3cd9a87cdb8..b8dbd616314 100644 --- a/static/usage/v7/radio/theming/colors/index.md +++ b/static/usage/v7/radio/theming/colors/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/radio/theming/css-properties/angular/example_component_ts.md b/static/usage/v7/radio/theming/css-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..f5bf20e746c --- /dev/null +++ b/static/usage/v7/radio/theming/css-properties/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonRadio, IonRadioGroup } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonRadio, IonRadioGroup], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/radio/theming/css-properties/index.md b/static/usage/v7/radio/theming/css-properties/index.md index 032b2ee66c9..8669ba8cd0e 100644 --- a/static/usage/v7/radio/theming/css-properties/index.md +++ b/static/usage/v7/radio/theming/css-properties/index.md @@ -9,6 +9,7 @@ import vue from './vue.md'; import angular_example_component_html from './angular/example_component_html.md'; import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; - + @for (food of foods; track food.id) { + {{ food.name }} + } ``` diff --git a/static/usage/v7/radio/using-comparewith/angular/example_component_ts.md b/static/usage/v7/radio/using-comparewith/angular/example_component_ts.md index d7f803aea0b..1158167fc16 100644 --- a/static/usage/v7/radio/using-comparewith/angular/example_component_ts.md +++ b/static/usage/v7/radio/using-comparewith/angular/example_component_ts.md @@ -1,12 +1,21 @@ ```ts import { Component } from '@angular/core'; +import { IonItem, IonList, IonRadio, IonRadioGroup } 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, IonRadio, IonRadioGroup], }) export class ExampleComponent { - foods = [ + foods: Food[] = [ { id: 1, name: 'Apples', @@ -24,16 +33,13 @@ export class ExampleComponent { }, ]; - compareWith(o1, o2) { + compareWith(o1: Food, o2: Food): boolean { return o1.id === o2.id; } - handleChange(ev) { - console.log('Current value:', JSON.stringify(ev.target.value)); - } - - trackItems(index: number, item: any) { - return item.id; + handleChange(ev: Event): void { + const target = ev.target as HTMLInputElement; + console.log('Current value:', JSON.stringify(target.value)); } } ``` diff --git a/static/usage/v8/radio/alignment/angular.md b/static/usage/v8/radio/alignment/angular/example_component_html.md similarity index 100% rename from static/usage/v8/radio/alignment/angular.md rename to static/usage/v8/radio/alignment/angular/example_component_html.md diff --git a/static/usage/v8/radio/alignment/angular/example_component_ts.md b/static/usage/v8/radio/alignment/angular/example_component_ts.md new file mode 100644 index 00000000000..151a9f44f80 --- /dev/null +++ b/static/usage/v8/radio/alignment/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonList, IonRadio, IonRadioGroup } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonRadio, IonRadioGroup], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/radio/alignment/index.md b/static/usage/v8/radio/alignment/index.md index 3295ae6ad48..a044f43293b 100644 --- a/static/usage/v8/radio/alignment/index.md +++ b/static/usage/v8/radio/alignment/index.md @@ -3,7 +3,9 @@ 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/radio/basic/angular.md b/static/usage/v8/radio/basic/angular/example_component_html.md similarity index 100% rename from static/usage/v8/radio/basic/angular.md rename to static/usage/v8/radio/basic/angular/example_component_html.md diff --git a/static/usage/v8/radio/basic/angular/example_component_ts.md b/static/usage/v8/radio/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..f5bf20e746c --- /dev/null +++ b/static/usage/v8/radio/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonRadio, IonRadioGroup } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonRadio, IonRadioGroup], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/radio/basic/index.md b/static/usage/v8/radio/basic/index.md index 1a1d7367b63..b82637e4ce1 100644 --- a/static/usage/v8/radio/basic/index.md +++ b/static/usage/v8/radio/basic/index.md @@ -3,6 +3,22 @@ import Playground from '@site/src/components/global/Playground'; import javascript from './javascript.md'; import react from './react.md'; import vue from './vue.md'; -import angular from './angular.md'; - +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/radio/empty-selection/angular.md b/static/usage/v8/radio/empty-selection/angular/example_component_html.md similarity index 100% rename from static/usage/v8/radio/empty-selection/angular.md rename to static/usage/v8/radio/empty-selection/angular/example_component_html.md diff --git a/static/usage/v8/radio/empty-selection/angular/example_component_ts.md b/static/usage/v8/radio/empty-selection/angular/example_component_ts.md new file mode 100644 index 00000000000..f5bf20e746c --- /dev/null +++ b/static/usage/v8/radio/empty-selection/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonRadio, IonRadioGroup } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonRadio, IonRadioGroup], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/radio/empty-selection/index.md b/static/usage/v8/radio/empty-selection/index.md index a744c25de4f..3bf64f07cd3 100644 --- a/static/usage/v8/radio/empty-selection/index.md +++ b/static/usage/v8/radio/empty-selection/index.md @@ -3,6 +3,22 @@ import Playground from '@site/src/components/global/Playground'; import javascript from './javascript.md'; import react from './react.md'; import vue from './vue.md'; -import angular from './angular.md'; - +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/radio/justify/angular.md b/static/usage/v8/radio/justify/angular/example_component_html.md similarity index 100% rename from static/usage/v8/radio/justify/angular.md rename to static/usage/v8/radio/justify/angular/example_component_html.md diff --git a/static/usage/v8/radio/justify/angular/example_component_ts.md b/static/usage/v8/radio/justify/angular/example_component_ts.md new file mode 100644 index 00000000000..151a9f44f80 --- /dev/null +++ b/static/usage/v8/radio/justify/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonList, IonRadio, IonRadioGroup } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonRadio, IonRadioGroup], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/radio/justify/index.md b/static/usage/v8/radio/justify/index.md index 250bf8b59d8..127c1c10b98 100644 --- a/static/usage/v8/radio/justify/index.md +++ b/static/usage/v8/radio/justify/index.md @@ -3,6 +3,22 @@ import Playground from '@site/src/components/global/Playground'; import javascript from './javascript.md'; import react from './react.md'; import vue from './vue.md'; -import angular from './angular.md'; - +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/radio/label-placement/angular.md b/static/usage/v8/radio/label-placement/angular/example_component_html.md similarity index 100% rename from static/usage/v8/radio/label-placement/angular.md rename to static/usage/v8/radio/label-placement/angular/example_component_html.md diff --git a/static/usage/v8/radio/label-placement/angular/example_component_ts.md b/static/usage/v8/radio/label-placement/angular/example_component_ts.md new file mode 100644 index 00000000000..f5bf20e746c --- /dev/null +++ b/static/usage/v8/radio/label-placement/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonRadio, IonRadioGroup } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonRadio, IonRadioGroup], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/radio/label-placement/index.md b/static/usage/v8/radio/label-placement/index.md index 3e0c513c004..8d07ec15d5e 100644 --- a/static/usage/v8/radio/label-placement/index.md +++ b/static/usage/v8/radio/label-placement/index.md @@ -3,6 +3,22 @@ import Playground from '@site/src/components/global/Playground'; import javascript from './javascript.md'; import react from './react.md'; import vue from './vue.md'; -import angular from './angular.md'; - +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/radio/theming/colors/angular.md b/static/usage/v8/radio/theming/colors/angular/example_component_html.md similarity index 100% rename from static/usage/v8/radio/theming/colors/angular.md rename to static/usage/v8/radio/theming/colors/angular/example_component_html.md diff --git a/static/usage/v8/radio/theming/colors/angular/example_component_ts.md b/static/usage/v8/radio/theming/colors/angular/example_component_ts.md new file mode 100644 index 00000000000..f5bf20e746c --- /dev/null +++ b/static/usage/v8/radio/theming/colors/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonRadio, IonRadioGroup } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonRadio, IonRadioGroup], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/radio/theming/colors/index.md b/static/usage/v8/radio/theming/colors/index.md index df88b57f343..747f24c897c 100644 --- a/static/usage/v8/radio/theming/colors/index.md +++ b/static/usage/v8/radio/theming/colors/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/radio/theming/css-properties/angular/example_component_ts.md b/static/usage/v8/radio/theming/css-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..f5bf20e746c --- /dev/null +++ b/static/usage/v8/radio/theming/css-properties/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonRadio, IonRadioGroup } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonRadio, IonRadioGroup], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/radio/theming/css-properties/index.md b/static/usage/v8/radio/theming/css-properties/index.md index d648dca7b0a..c5593d5871f 100644 --- a/static/usage/v8/radio/theming/css-properties/index.md +++ b/static/usage/v8/radio/theming/css-properties/index.md @@ -9,6 +9,7 @@ import vue from './vue.md'; import angular_example_component_html from './angular/example_component_html.md'; import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; - + @for (food of foods; track food.id) { + {{ food.name }} + } ``` diff --git a/static/usage/v8/radio/using-comparewith/angular/example_component_ts.md b/static/usage/v8/radio/using-comparewith/angular/example_component_ts.md index d7f803aea0b..1158167fc16 100644 --- a/static/usage/v8/radio/using-comparewith/angular/example_component_ts.md +++ b/static/usage/v8/radio/using-comparewith/angular/example_component_ts.md @@ -1,12 +1,21 @@ ```ts import { Component } from '@angular/core'; +import { IonItem, IonList, IonRadio, IonRadioGroup } 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, IonRadio, IonRadioGroup], }) export class ExampleComponent { - foods = [ + foods: Food[] = [ { id: 1, name: 'Apples', @@ -24,16 +33,13 @@ export class ExampleComponent { }, ]; - compareWith(o1, o2) { + compareWith(o1: Food, o2: Food): boolean { return o1.id === o2.id; } - handleChange(ev) { - console.log('Current value:', JSON.stringify(ev.target.value)); - } - - trackItems(index: number, item: any) { - return item.id; + handleChange(ev: Event): void { + const target = ev.target as HTMLInputElement; + console.log('Current value:', JSON.stringify(target.value)); } } ``` diff --git a/versioned_docs/version-v7/api/radio.md b/versioned_docs/version-v7/api/radio.md index 25308e1fe29..c470a326ed6 100644 --- a/versioned_docs/version-v7/api/radio.md +++ b/versioned_docs/version-v7/api/radio.md @@ -39,6 +39,14 @@ import LabelPlacement from '@site/static/usage/v7/radio/label-placement/index.md +## Object Value References + +By default, the radio group uses strict equality (`===`) to determine if an option is selected. This can be overridden by providing a property name or a function to the `compareWith` property. + +import UsingComparewith from '@site/static/usage/v8/radio/using-comparewith/index.md'; + + + ## Alignment Developers can use the `alignment` property to control how the label and control are aligned on the cross axis. This property mirrors the flexbox `align-items` property.