From 6960bb1b1e86321a10994615756097027ba01612 Mon Sep 17 00:00:00 2001 From: Brandy Carney <6577830+brandyscarney@users.noreply.github.com> Date: Wed, 18 Dec 2024 19:06:59 -0500 Subject: [PATCH 1/3] docs(radio): update angular to standalone --- .../angular/example_component_html.md | 15 ++++++++++ .../alignment/angular/example_component_ts.md | 11 +++++++ static/usage/v7/radio/alignment/index.md | 11 +++++-- .../basic/angular/example_component_html.md | 8 +++++ .../basic/angular/example_component_ts.md | 11 +++++++ static/usage/v7/radio/basic/index.md | 20 +++++++++++-- .../angular/example_component_html.md | 8 +++++ .../angular/example_component_ts.md | 11 +++++++ .../usage/v7/radio/empty-selection/index.md | 20 +++++++++++-- .../justify/angular/example_component_html.md | 21 ++++++++++++++ .../justify/angular/example_component_ts.md | 11 +++++++ static/usage/v7/radio/justify/index.md | 20 +++++++++++-- .../angular/example_component_html.md | 23 +++++++++++++++ .../angular/example_component_ts.md | 11 +++++++ .../usage/v7/radio/label-placement/index.md | 20 +++++++++++-- .../colors/angular/example_component_html.md | 29 +++++++++++++++++++ .../colors/angular/example_component_ts.md | 11 +++++++ static/usage/v7/radio/theming/colors/index.md | 16 ++++++++-- .../angular/example_component_ts.md | 2 ++ .../angular/example_component_html.md | 15 ++++++++++ .../alignment/angular/example_component_ts.md | 11 +++++++ static/usage/v8/radio/alignment/index.md | 11 +++++-- .../basic/angular/example_component_html.md | 8 +++++ .../basic/angular/example_component_ts.md | 11 +++++++ static/usage/v8/radio/basic/index.md | 20 +++++++++++-- .../angular/example_component_html.md | 8 +++++ .../angular/example_component_ts.md | 11 +++++++ .../usage/v8/radio/empty-selection/index.md | 20 +++++++++++-- .../justify/angular/example_component_html.md | 21 ++++++++++++++ .../justify/angular/example_component_ts.md | 11 +++++++ static/usage/v8/radio/justify/index.md | 20 +++++++++++-- .../angular/example_component_html.md | 23 +++++++++++++++ .../angular/example_component_ts.md | 11 +++++++ .../usage/v8/radio/label-placement/index.md | 20 +++++++++++-- .../colors/angular/example_component_html.md | 29 +++++++++++++++++++ .../colors/angular/example_component_ts.md | 11 +++++++ static/usage/v8/radio/theming/colors/index.md | 16 ++++++++-- .../angular/example_component_ts.md | 2 ++ 38 files changed, 534 insertions(+), 24 deletions(-) create mode 100644 static/usage/v7/radio/alignment/angular/example_component_html.md create mode 100644 static/usage/v7/radio/alignment/angular/example_component_ts.md create mode 100644 static/usage/v7/radio/basic/angular/example_component_html.md create mode 100644 static/usage/v7/radio/basic/angular/example_component_ts.md create mode 100644 static/usage/v7/radio/empty-selection/angular/example_component_html.md create mode 100644 static/usage/v7/radio/empty-selection/angular/example_component_ts.md create mode 100644 static/usage/v7/radio/justify/angular/example_component_html.md create mode 100644 static/usage/v7/radio/justify/angular/example_component_ts.md create mode 100644 static/usage/v7/radio/label-placement/angular/example_component_html.md create mode 100644 static/usage/v7/radio/label-placement/angular/example_component_ts.md create mode 100644 static/usage/v7/radio/theming/colors/angular/example_component_html.md create mode 100644 static/usage/v7/radio/theming/colors/angular/example_component_ts.md create mode 100644 static/usage/v8/radio/alignment/angular/example_component_html.md create mode 100644 static/usage/v8/radio/alignment/angular/example_component_ts.md create mode 100644 static/usage/v8/radio/basic/angular/example_component_html.md create mode 100644 static/usage/v8/radio/basic/angular/example_component_ts.md create mode 100644 static/usage/v8/radio/empty-selection/angular/example_component_html.md create mode 100644 static/usage/v8/radio/empty-selection/angular/example_component_ts.md create mode 100644 static/usage/v8/radio/justify/angular/example_component_html.md create mode 100644 static/usage/v8/radio/justify/angular/example_component_ts.md create mode 100644 static/usage/v8/radio/label-placement/angular/example_component_html.md create mode 100644 static/usage/v8/radio/label-placement/angular/example_component_ts.md create mode 100644 static/usage/v8/radio/theming/colors/angular/example_component_html.md create mode 100644 static/usage/v8/radio/theming/colors/angular/example_component_ts.md diff --git a/static/usage/v7/radio/alignment/angular/example_component_html.md b/static/usage/v7/radio/alignment/angular/example_component_html.md new file mode 100644 index 00000000000..51ebedc3c4c --- /dev/null +++ b/static/usage/v7/radio/alignment/angular/example_component_html.md @@ -0,0 +1,15 @@ +```html + + + + Aligned to the Start + + + + + + Aligned to the Center + + + +``` 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..679445110ca --- /dev/null +++ b/static/usage/v7/radio/alignment/angular/example_component_ts.md @@ -0,0 +1,11 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonList, IonRadio, IonRadioGroup } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + 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/example_component_html.md b/static/usage/v7/radio/basic/angular/example_component_html.md new file mode 100644 index 00000000000..a8caa3c1973 --- /dev/null +++ b/static/usage/v7/radio/basic/angular/example_component_html.md @@ -0,0 +1,8 @@ +```html + + Grapes
+ Strawberries
+ Pineapple
+ Cherries +
+``` 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..b85b1c22857 --- /dev/null +++ b/static/usage/v7/radio/basic/angular/example_component_ts.md @@ -0,0 +1,11 @@ +```ts +import { Component } from '@angular/core'; +import { IonRadio, IonRadioGroup } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + 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/example_component_html.md b/static/usage/v7/radio/empty-selection/angular/example_component_html.md new file mode 100644 index 00000000000..61e5c0d4e4b --- /dev/null +++ b/static/usage/v7/radio/empty-selection/angular/example_component_html.md @@ -0,0 +1,8 @@ +```html + + Dogs
+ Cats
+ Turtles
+ Fish
+
+``` 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..b85b1c22857 --- /dev/null +++ b/static/usage/v7/radio/empty-selection/angular/example_component_ts.md @@ -0,0 +1,11 @@ +```ts +import { Component } from '@angular/core'; +import { IonRadio, IonRadioGroup } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + 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/example_component_html.md b/static/usage/v7/radio/justify/angular/example_component_html.md new file mode 100644 index 00000000000..8ca8e3c568b --- /dev/null +++ b/static/usage/v7/radio/justify/angular/example_component_html.md @@ -0,0 +1,21 @@ +```html + + + + Packed at the Start of Line + + + + + + Packed at the End of Line + + + + + + Space Between Label and Control + + + +``` 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..679445110ca --- /dev/null +++ b/static/usage/v7/radio/justify/angular/example_component_ts.md @@ -0,0 +1,11 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonList, IonRadio, IonRadioGroup } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + 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/example_component_html.md b/static/usage/v7/radio/label-placement/angular/example_component_html.md new file mode 100644 index 00000000000..c62acb2938a --- /dev/null +++ b/static/usage/v7/radio/label-placement/angular/example_component_html.md @@ -0,0 +1,23 @@ +```html + + Label at the Start + + +
+ + + Label at the End + + +
+ + + Fixed Width Label + + +
+ + + Stacked Label + +``` 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..b85b1c22857 --- /dev/null +++ b/static/usage/v7/radio/label-placement/angular/example_component_ts.md @@ -0,0 +1,11 @@ +```ts +import { Component } from '@angular/core'; +import { IonRadio, IonRadioGroup } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + 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/example_component_html.md b/static/usage/v7/radio/theming/colors/angular/example_component_html.md new file mode 100644 index 00000000000..d3389196bfa --- /dev/null +++ b/static/usage/v7/radio/theming/colors/angular/example_component_html.md @@ -0,0 +1,29 @@ +```html + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` 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..b85b1c22857 --- /dev/null +++ b/static/usage/v7/radio/theming/colors/angular/example_component_ts.md @@ -0,0 +1,11 @@ +```ts +import { Component } from '@angular/core'; +import { IonRadio, IonRadioGroup } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + 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/using-comparewith/angular/example_component_ts.md b/static/usage/v7/radio/using-comparewith/angular/example_component_ts.md index d7f803aea0b..101b56412b7 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,9 +1,11 @@ ```ts import { Component } from '@angular/core'; +import { IonItem, IonList, IonRadio, IonRadioGroup } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + imports: [IonItem, IonList, IonRadio, IonRadioGroup], }) export class ExampleComponent { foods = [ diff --git a/static/usage/v8/radio/alignment/angular/example_component_html.md b/static/usage/v8/radio/alignment/angular/example_component_html.md new file mode 100644 index 00000000000..51ebedc3c4c --- /dev/null +++ b/static/usage/v8/radio/alignment/angular/example_component_html.md @@ -0,0 +1,15 @@ +```html + + + + Aligned to the Start + + + + + + Aligned to the Center + + + +``` 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..679445110ca --- /dev/null +++ b/static/usage/v8/radio/alignment/angular/example_component_ts.md @@ -0,0 +1,11 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonList, IonRadio, IonRadioGroup } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + 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/example_component_html.md b/static/usage/v8/radio/basic/angular/example_component_html.md new file mode 100644 index 00000000000..a8caa3c1973 --- /dev/null +++ b/static/usage/v8/radio/basic/angular/example_component_html.md @@ -0,0 +1,8 @@ +```html + + Grapes
+ Strawberries
+ Pineapple
+ Cherries +
+``` 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..b85b1c22857 --- /dev/null +++ b/static/usage/v8/radio/basic/angular/example_component_ts.md @@ -0,0 +1,11 @@ +```ts +import { Component } from '@angular/core'; +import { IonRadio, IonRadioGroup } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + 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/example_component_html.md b/static/usage/v8/radio/empty-selection/angular/example_component_html.md new file mode 100644 index 00000000000..61e5c0d4e4b --- /dev/null +++ b/static/usage/v8/radio/empty-selection/angular/example_component_html.md @@ -0,0 +1,8 @@ +```html + + Dogs
+ Cats
+ Turtles
+ Fish
+
+``` 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..b85b1c22857 --- /dev/null +++ b/static/usage/v8/radio/empty-selection/angular/example_component_ts.md @@ -0,0 +1,11 @@ +```ts +import { Component } from '@angular/core'; +import { IonRadio, IonRadioGroup } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + 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/example_component_html.md b/static/usage/v8/radio/justify/angular/example_component_html.md new file mode 100644 index 00000000000..8ca8e3c568b --- /dev/null +++ b/static/usage/v8/radio/justify/angular/example_component_html.md @@ -0,0 +1,21 @@ +```html + + + + Packed at the Start of Line + + + + + + Packed at the End of Line + + + + + + Space Between Label and Control + + + +``` 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..679445110ca --- /dev/null +++ b/static/usage/v8/radio/justify/angular/example_component_ts.md @@ -0,0 +1,11 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonList, IonRadio, IonRadioGroup } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + 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/example_component_html.md b/static/usage/v8/radio/label-placement/angular/example_component_html.md new file mode 100644 index 00000000000..c62acb2938a --- /dev/null +++ b/static/usage/v8/radio/label-placement/angular/example_component_html.md @@ -0,0 +1,23 @@ +```html + + Label at the Start + + +
+ + + Label at the End + + +
+ + + Fixed Width Label + + +
+ + + Stacked Label + +``` 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..b85b1c22857 --- /dev/null +++ b/static/usage/v8/radio/label-placement/angular/example_component_ts.md @@ -0,0 +1,11 @@ +```ts +import { Component } from '@angular/core'; +import { IonRadio, IonRadioGroup } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + 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/example_component_html.md b/static/usage/v8/radio/theming/colors/angular/example_component_html.md new file mode 100644 index 00000000000..d3389196bfa --- /dev/null +++ b/static/usage/v8/radio/theming/colors/angular/example_component_html.md @@ -0,0 +1,29 @@ +```html + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` 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..b85b1c22857 --- /dev/null +++ b/static/usage/v8/radio/theming/colors/angular/example_component_ts.md @@ -0,0 +1,11 @@ +```ts +import { Component } from '@angular/core'; +import { IonRadio, IonRadioGroup } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + 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/using-comparewith/angular/example_component_ts.md b/static/usage/v8/radio/using-comparewith/angular/example_component_ts.md index d7f803aea0b..101b56412b7 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,9 +1,11 @@ ```ts import { Component } from '@angular/core'; +import { IonItem, IonList, IonRadio, IonRadioGroup } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + imports: [IonItem, IonList, IonRadio, IonRadioGroup], }) export class ExampleComponent { foods = [ From 06b24a7540955615775bf72972d15362513e1fd9 Mon Sep 17 00:00:00 2001 From: Brandy Carney <6577830+brandyscarney@users.noreply.github.com> Date: Fri, 20 Dec 2024 15:13:43 -0500 Subject: [PATCH 2/3] docs(radio): update angular to standalone --- static/usage/v7/radio/alignment/angular/example_component_ts.md | 1 + static/usage/v7/radio/basic/angular/example_component_ts.md | 1 + .../v7/radio/empty-selection/angular/example_component_ts.md | 1 + static/usage/v7/radio/justify/angular/example_component_ts.md | 1 + .../v7/radio/label-placement/angular/example_component_ts.md | 1 + .../v7/radio/theming/colors/angular/example_component_ts.md | 1 + .../v7/radio/using-comparewith/angular/example_component_ts.md | 1 + static/usage/v8/radio/alignment/angular/example_component_ts.md | 1 + static/usage/v8/radio/basic/angular/example_component_ts.md | 1 + .../v8/radio/empty-selection/angular/example_component_ts.md | 1 + static/usage/v8/radio/justify/angular/example_component_ts.md | 1 + .../v8/radio/label-placement/angular/example_component_ts.md | 1 + .../v8/radio/theming/colors/angular/example_component_ts.md | 1 + .../v8/radio/using-comparewith/angular/example_component_ts.md | 1 + 14 files changed, 14 insertions(+) diff --git a/static/usage/v7/radio/alignment/angular/example_component_ts.md b/static/usage/v7/radio/alignment/angular/example_component_ts.md index 679445110ca..151a9f44f80 100644 --- a/static/usage/v7/radio/alignment/angular/example_component_ts.md +++ b/static/usage/v7/radio/alignment/angular/example_component_ts.md @@ -5,6 +5,7 @@ import { IonItem, IonList, IonRadio, IonRadioGroup } from '@ionic/angular/standa @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/basic/angular/example_component_ts.md b/static/usage/v7/radio/basic/angular/example_component_ts.md index b85b1c22857..f5bf20e746c 100644 --- a/static/usage/v7/radio/basic/angular/example_component_ts.md +++ b/static/usage/v7/radio/basic/angular/example_component_ts.md @@ -5,6 +5,7 @@ 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/angular/example_component_ts.md b/static/usage/v7/radio/empty-selection/angular/example_component_ts.md index b85b1c22857..f5bf20e746c 100644 --- a/static/usage/v7/radio/empty-selection/angular/example_component_ts.md +++ b/static/usage/v7/radio/empty-selection/angular/example_component_ts.md @@ -5,6 +5,7 @@ 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/justify/angular/example_component_ts.md b/static/usage/v7/radio/justify/angular/example_component_ts.md index 679445110ca..151a9f44f80 100644 --- a/static/usage/v7/radio/justify/angular/example_component_ts.md +++ b/static/usage/v7/radio/justify/angular/example_component_ts.md @@ -5,6 +5,7 @@ import { IonItem, IonList, IonRadio, IonRadioGroup } from '@ionic/angular/standa @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/label-placement/angular/example_component_ts.md b/static/usage/v7/radio/label-placement/angular/example_component_ts.md index b85b1c22857..f5bf20e746c 100644 --- a/static/usage/v7/radio/label-placement/angular/example_component_ts.md +++ b/static/usage/v7/radio/label-placement/angular/example_component_ts.md @@ -5,6 +5,7 @@ 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/angular/example_component_ts.md b/static/usage/v7/radio/theming/colors/angular/example_component_ts.md index b85b1c22857..f5bf20e746c 100644 --- a/static/usage/v7/radio/theming/colors/angular/example_component_ts.md +++ b/static/usage/v7/radio/theming/colors/angular/example_component_ts.md @@ -5,6 +5,7 @@ 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/using-comparewith/angular/example_component_ts.md b/static/usage/v7/radio/using-comparewith/angular/example_component_ts.md index 101b56412b7..fa0bac807d1 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 @@ -5,6 +5,7 @@ import { IonItem, IonList, IonRadio, IonRadioGroup } from '@ionic/angular/standa @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/angular/example_component_ts.md b/static/usage/v8/radio/alignment/angular/example_component_ts.md index 679445110ca..151a9f44f80 100644 --- a/static/usage/v8/radio/alignment/angular/example_component_ts.md +++ b/static/usage/v8/radio/alignment/angular/example_component_ts.md @@ -5,6 +5,7 @@ import { IonItem, IonList, IonRadio, IonRadioGroup } from '@ionic/angular/standa @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/basic/angular/example_component_ts.md b/static/usage/v8/radio/basic/angular/example_component_ts.md index b85b1c22857..f5bf20e746c 100644 --- a/static/usage/v8/radio/basic/angular/example_component_ts.md +++ b/static/usage/v8/radio/basic/angular/example_component_ts.md @@ -5,6 +5,7 @@ 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/angular/example_component_ts.md b/static/usage/v8/radio/empty-selection/angular/example_component_ts.md index b85b1c22857..f5bf20e746c 100644 --- a/static/usage/v8/radio/empty-selection/angular/example_component_ts.md +++ b/static/usage/v8/radio/empty-selection/angular/example_component_ts.md @@ -5,6 +5,7 @@ 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/justify/angular/example_component_ts.md b/static/usage/v8/radio/justify/angular/example_component_ts.md index 679445110ca..151a9f44f80 100644 --- a/static/usage/v8/radio/justify/angular/example_component_ts.md +++ b/static/usage/v8/radio/justify/angular/example_component_ts.md @@ -5,6 +5,7 @@ import { IonItem, IonList, IonRadio, IonRadioGroup } from '@ionic/angular/standa @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/label-placement/angular/example_component_ts.md b/static/usage/v8/radio/label-placement/angular/example_component_ts.md index b85b1c22857..f5bf20e746c 100644 --- a/static/usage/v8/radio/label-placement/angular/example_component_ts.md +++ b/static/usage/v8/radio/label-placement/angular/example_component_ts.md @@ -5,6 +5,7 @@ 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/angular/example_component_ts.md b/static/usage/v8/radio/theming/colors/angular/example_component_ts.md index b85b1c22857..f5bf20e746c 100644 --- a/static/usage/v8/radio/theming/colors/angular/example_component_ts.md +++ b/static/usage/v8/radio/theming/colors/angular/example_component_ts.md @@ -5,6 +5,7 @@ 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/using-comparewith/angular/example_component_ts.md b/static/usage/v8/radio/using-comparewith/angular/example_component_ts.md index 101b56412b7..fa0bac807d1 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 @@ -5,6 +5,7 @@ import { IonItem, IonList, IonRadio, IonRadioGroup } from '@ionic/angular/standa @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], imports: [IonItem, IonList, IonRadio, IonRadioGroup], }) export class ExampleComponent { From d0d48c95dbed83703db21a757fd231cade6e61b9 Mon Sep 17 00:00:00 2001 From: Brandy Carney <6577830+brandyscarney@users.noreply.github.com> Date: Thu, 26 Dec 2024 17:38:14 -0500 Subject: [PATCH 3/3] docs(radio): update angular to standalone --- static/usage/v7/radio/alignment/angular.md | 15 ---------- static/usage/v7/radio/basic/angular.md | 8 ----- .../usage/v7/radio/empty-selection/angular.md | 8 ----- static/usage/v7/radio/justify/angular.md | 21 -------------- .../usage/v7/radio/label-placement/angular.md | 23 --------------- .../usage/v7/radio/theming/colors/angular.md | 29 ------------------- .../angular/example_component_ts.md | 12 ++++++++ .../v7/radio/theming/css-properties/index.md | 2 ++ .../angular/example_component_ts.md | 12 ++++++++ .../radio/theming/css-shadow-parts/index.md | 2 ++ .../angular/example_component_html.md | 4 ++- .../angular/example_component_ts.md | 19 +++++++----- static/usage/v8/radio/alignment/angular.md | 15 ---------- static/usage/v8/radio/basic/angular.md | 8 ----- .../usage/v8/radio/empty-selection/angular.md | 8 ----- static/usage/v8/radio/justify/angular.md | 21 -------------- .../usage/v8/radio/label-placement/angular.md | 23 --------------- .../usage/v8/radio/theming/colors/angular.md | 29 ------------------- .../angular/example_component_ts.md | 12 ++++++++ .../v8/radio/theming/css-properties/index.md | 2 ++ .../angular/example_component_ts.md | 12 ++++++++ .../radio/theming/css-shadow-parts/index.md | 2 ++ .../angular/example_component_html.md | 4 ++- .../angular/example_component_ts.md | 19 +++++++----- versioned_docs/version-v7/api/radio.md | 8 +++++ 25 files changed, 92 insertions(+), 226 deletions(-) delete mode 100644 static/usage/v7/radio/alignment/angular.md delete mode 100644 static/usage/v7/radio/basic/angular.md delete mode 100644 static/usage/v7/radio/empty-selection/angular.md delete mode 100644 static/usage/v7/radio/justify/angular.md delete mode 100644 static/usage/v7/radio/label-placement/angular.md delete mode 100644 static/usage/v7/radio/theming/colors/angular.md create mode 100644 static/usage/v7/radio/theming/css-properties/angular/example_component_ts.md create mode 100644 static/usage/v7/radio/theming/css-shadow-parts/angular/example_component_ts.md delete mode 100644 static/usage/v8/radio/alignment/angular.md delete mode 100644 static/usage/v8/radio/basic/angular.md delete mode 100644 static/usage/v8/radio/empty-selection/angular.md delete mode 100644 static/usage/v8/radio/justify/angular.md delete mode 100644 static/usage/v8/radio/label-placement/angular.md delete mode 100644 static/usage/v8/radio/theming/colors/angular.md create mode 100644 static/usage/v8/radio/theming/css-properties/angular/example_component_ts.md create mode 100644 static/usage/v8/radio/theming/css-shadow-parts/angular/example_component_ts.md diff --git a/static/usage/v7/radio/alignment/angular.md b/static/usage/v7/radio/alignment/angular.md deleted file mode 100644 index 51ebedc3c4c..00000000000 --- a/static/usage/v7/radio/alignment/angular.md +++ /dev/null @@ -1,15 +0,0 @@ -```html - - - - Aligned to the Start - - - - - - Aligned to the Center - - - -``` diff --git a/static/usage/v7/radio/basic/angular.md b/static/usage/v7/radio/basic/angular.md deleted file mode 100644 index a8caa3c1973..00000000000 --- a/static/usage/v7/radio/basic/angular.md +++ /dev/null @@ -1,8 +0,0 @@ -```html - - Grapes
- Strawberries
- Pineapple
- Cherries -
-``` diff --git a/static/usage/v7/radio/empty-selection/angular.md b/static/usage/v7/radio/empty-selection/angular.md deleted file mode 100644 index 61e5c0d4e4b..00000000000 --- a/static/usage/v7/radio/empty-selection/angular.md +++ /dev/null @@ -1,8 +0,0 @@ -```html - - Dogs
- Cats
- Turtles
- Fish
-
-``` diff --git a/static/usage/v7/radio/justify/angular.md b/static/usage/v7/radio/justify/angular.md deleted file mode 100644 index 8ca8e3c568b..00000000000 --- a/static/usage/v7/radio/justify/angular.md +++ /dev/null @@ -1,21 +0,0 @@ -```html - - - - Packed at the Start of Line - - - - - - Packed at the End of Line - - - - - - Space Between Label and Control - - - -``` diff --git a/static/usage/v7/radio/label-placement/angular.md b/static/usage/v7/radio/label-placement/angular.md deleted file mode 100644 index c62acb2938a..00000000000 --- a/static/usage/v7/radio/label-placement/angular.md +++ /dev/null @@ -1,23 +0,0 @@ -```html - - Label at the Start - - -
- - - Label at the End - - -
- - - Fixed Width Label - - -
- - - Stacked Label - -``` diff --git a/static/usage/v7/radio/theming/colors/angular.md b/static/usage/v7/radio/theming/colors/angular.md deleted file mode 100644 index d3389196bfa..00000000000 --- a/static/usage/v7/radio/theming/colors/angular.md +++ /dev/null @@ -1,29 +0,0 @@ -```html - - - - - - - - - - - - - - - - - - - - - - - - - - - -``` 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 fa0bac807d1..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 @@ -2,6 +2,12 @@ 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', @@ -9,7 +15,7 @@ import { IonItem, IonList, IonRadio, IonRadioGroup } from '@ionic/angular/standa imports: [IonItem, IonList, IonRadio, IonRadioGroup], }) export class ExampleComponent { - foods = [ + foods: Food[] = [ { id: 1, name: 'Apples', @@ -27,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.md deleted file mode 100644 index 51ebedc3c4c..00000000000 --- a/static/usage/v8/radio/alignment/angular.md +++ /dev/null @@ -1,15 +0,0 @@ -```html - - - - Aligned to the Start - - - - - - Aligned to the Center - - - -``` diff --git a/static/usage/v8/radio/basic/angular.md b/static/usage/v8/radio/basic/angular.md deleted file mode 100644 index a8caa3c1973..00000000000 --- a/static/usage/v8/radio/basic/angular.md +++ /dev/null @@ -1,8 +0,0 @@ -```html - - Grapes
- Strawberries
- Pineapple
- Cherries -
-``` diff --git a/static/usage/v8/radio/empty-selection/angular.md b/static/usage/v8/radio/empty-selection/angular.md deleted file mode 100644 index 61e5c0d4e4b..00000000000 --- a/static/usage/v8/radio/empty-selection/angular.md +++ /dev/null @@ -1,8 +0,0 @@ -```html - - Dogs
- Cats
- Turtles
- Fish
-
-``` diff --git a/static/usage/v8/radio/justify/angular.md b/static/usage/v8/radio/justify/angular.md deleted file mode 100644 index 8ca8e3c568b..00000000000 --- a/static/usage/v8/radio/justify/angular.md +++ /dev/null @@ -1,21 +0,0 @@ -```html - - - - Packed at the Start of Line - - - - - - Packed at the End of Line - - - - - - Space Between Label and Control - - - -``` diff --git a/static/usage/v8/radio/label-placement/angular.md b/static/usage/v8/radio/label-placement/angular.md deleted file mode 100644 index c62acb2938a..00000000000 --- a/static/usage/v8/radio/label-placement/angular.md +++ /dev/null @@ -1,23 +0,0 @@ -```html - - Label at the Start - - -
- - - Label at the End - - -
- - - Fixed Width Label - - -
- - - Stacked Label - -``` diff --git a/static/usage/v8/radio/theming/colors/angular.md b/static/usage/v8/radio/theming/colors/angular.md deleted file mode 100644 index d3389196bfa..00000000000 --- a/static/usage/v8/radio/theming/colors/angular.md +++ /dev/null @@ -1,29 +0,0 @@ -```html - - - - - - - - - - - - - - - - - - - - - - - - - - - -``` 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 fa0bac807d1..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 @@ -2,6 +2,12 @@ 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', @@ -9,7 +15,7 @@ import { IonItem, IonList, IonRadio, IonRadioGroup } from '@ionic/angular/standa imports: [IonItem, IonList, IonRadio, IonRadioGroup], }) export class ExampleComponent { - foods = [ + foods: Food[] = [ { id: 1, name: 'Apples', @@ -27,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.