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.