diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx
index a7a3c2d1d2c..a81e84ec8b9 100644
--- a/core/src/components/datetime/datetime.tsx
+++ b/core/src/components/datetime/datetime.tsx
@@ -1033,6 +1033,11 @@ export class Datetime implements ComponentInterface {
if (this.resolveForceDateScrolling) {
this.resolveForceDateScrolling();
}
+
+ const activeEl = this.el.shadowRoot!.activeElement as HTMLElement | null;
+ if (activeEl && activeEl.classList.contains('calendar-day')) {
+ (activeEl.closest('.calendar-body') as HTMLElement | null)?.focus();
+ }
});
};
diff --git a/core/src/components/spinner/test/transform/spinner.e2e.ts b/core/src/components/spinner/test/transform/spinner.e2e.ts
new file mode 100644
index 00000000000..ccc84bfb80a
--- /dev/null
+++ b/core/src/components/spinner/test/transform/spinner.e2e.ts
@@ -0,0 +1,47 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+/**
+ * This behavior does not vary across directions/modes.
+ */
+configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, config }) => {
+ test.describe(title('spinner: transform'), () => {
+ test('should not overwrite circular animation when transform style is applied', async ({ page }, testInfo) => {
+ testInfo.annotations.push({
+ type: 'issue',
+ description: 'https://github.com/ionic-team/ionic-framework/issues/19247',
+ });
+
+ await page.setContent(
+ `
+
+
+
+ `,
+ config
+ );
+
+ const spinner = page.locator('ion-spinner');
+
+ // Get initial position
+ const initialBox = await spinner.boundingBox();
+
+ // Wait for a few animation cycles
+ await page.waitForTimeout(500);
+
+ // Get position after the cycles
+ const finalBox = await spinner.boundingBox();
+
+ // The x and y coordinates should remain identical
+ expect(initialBox!.x).toBe(finalBox!.x);
+ expect(initialBox!.y).toBe(finalBox!.y);
+ });
+ });
+});
diff --git a/lerna.json b/lerna.json
index d0b7ae7dfaa..6083b8d84a2 100644
--- a/lerna.json
+++ b/lerna.json
@@ -3,5 +3,5 @@
"core",
"packages/*"
],
- "version": "8.8.1"
+ "version": "8.8.2"
}
\ No newline at end of file
diff --git a/packages/angular-server/CHANGELOG.md b/packages/angular-server/CHANGELOG.md
index 0319949bee2..dddc027b285 100644
--- a/packages/angular-server/CHANGELOG.md
+++ b/packages/angular-server/CHANGELOG.md
@@ -3,6 +3,14 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+## [8.8.2](https://github.com/ionic-team/ionic-framework/compare/v8.8.1...v8.8.2) (2026-03-25)
+
+**Note:** Version bump only for package @ionic/angular-server
+
+
+
+
+
## [8.8.1](https://github.com/ionic-team/ionic-framework/compare/v8.8.0...v8.8.1) (2026-03-06)
**Note:** Version bump only for package @ionic/angular-server
diff --git a/packages/angular-server/package-lock.json b/packages/angular-server/package-lock.json
index a0d98c213e8..62fcb71de2b 100644
--- a/packages/angular-server/package-lock.json
+++ b/packages/angular-server/package-lock.json
@@ -1,15 +1,15 @@
{
"name": "@ionic/angular-server",
- "version": "8.8.1",
+ "version": "8.8.2",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "@ionic/angular-server",
- "version": "8.8.1",
+ "version": "8.8.2",
"license": "MIT",
"dependencies": {
- "@ionic/core": "^8.8.1"
+ "@ionic/core": "^8.8.2"
},
"devDependencies": {
"@angular-eslint/eslint-plugin": "^16.0.0",
@@ -1031,9 +1031,9 @@
"dev": true
},
"node_modules/@ionic/core": {
- "version": "8.8.1",
- "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.1.tgz",
- "integrity": "sha512-ksOUHyOEqoyUIVWcwCNSFZVGwNfP1DKrUVeN/Cdk/Xl9Rdd/5MLHGsrOQpWQfoCf3Csdnw+KHHPrXz/2fzMkMA==",
+ "version": "8.8.2",
+ "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.2.tgz",
+ "integrity": "sha512-br0XaVX/mct0d+ArQk7Gg6R8iLsfcgGdSVs+554iv5U4TjmqVIbmkF+o4IZSe2WkulUHnLVF20/EJ1ZH00aTnw==",
"license": "MIT",
"dependencies": {
"@stencil/core": "4.43.0",
@@ -7309,9 +7309,9 @@
"dev": true
},
"@ionic/core": {
- "version": "8.8.1",
- "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.1.tgz",
- "integrity": "sha512-ksOUHyOEqoyUIVWcwCNSFZVGwNfP1DKrUVeN/Cdk/Xl9Rdd/5MLHGsrOQpWQfoCf3Csdnw+KHHPrXz/2fzMkMA==",
+ "version": "8.8.2",
+ "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.2.tgz",
+ "integrity": "sha512-br0XaVX/mct0d+ArQk7Gg6R8iLsfcgGdSVs+554iv5U4TjmqVIbmkF+o4IZSe2WkulUHnLVF20/EJ1ZH00aTnw==",
"requires": {
"@stencil/core": "4.43.0",
"ionicons": "^8.0.13",
diff --git a/packages/angular-server/package.json b/packages/angular-server/package.json
index 60dbfed3c0e..b5e8617418a 100644
--- a/packages/angular-server/package.json
+++ b/packages/angular-server/package.json
@@ -1,6 +1,6 @@
{
"name": "@ionic/angular-server",
- "version": "8.8.1",
+ "version": "8.8.2",
"description": "Angular SSR Module for Ionic",
"keywords": [
"ionic",
@@ -62,6 +62,6 @@
},
"prettier": "@ionic/prettier-config",
"dependencies": {
- "@ionic/core": "^8.8.1"
+ "@ionic/core": "^8.8.2"
}
}
diff --git a/packages/angular/CHANGELOG.md b/packages/angular/CHANGELOG.md
index 02753155a4c..bc2ff4925ce 100644
--- a/packages/angular/CHANGELOG.md
+++ b/packages/angular/CHANGELOG.md
@@ -3,6 +3,18 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+## [8.8.2](https://github.com/ionic-team/ionic-framework/compare/v8.8.1...v8.8.2) (2026-03-25)
+
+
+### Bug Fixes
+
+* **angular:** forward generic type parameter on ModalOptions and PopoverOptions ([#31022](https://github.com/ionic-team/ionic-framework/issues/31022)) ([cbfe7cc](https://github.com/ionic-team/ionic-framework/commit/cbfe7cce3be345eacbf9fe29e74438a927c16679)), closes [#31012](https://github.com/ionic-team/ionic-framework/issues/31012)
+* **checkbox:** re-evaluate label visibility when label is updated ([#30980](https://github.com/ionic-team/ionic-framework/issues/30980)) ([ce83407](https://github.com/ionic-team/ionic-framework/commit/ce83407e1debbe74f20d2d6dc2535a0ef3f974a0))
+
+
+
+
+
## [8.8.1](https://github.com/ionic-team/ionic-framework/compare/v8.8.0...v8.8.1) (2026-03-06)
diff --git a/packages/angular/common/src/types/overlay-options.ts b/packages/angular/common/src/types/overlay-options.ts
index 93ec10cb5f1..786db567d16 100644
--- a/packages/angular/common/src/types/overlay-options.ts
+++ b/packages/angular/common/src/types/overlay-options.ts
@@ -1,11 +1,15 @@
import type { Injector } from '@angular/core';
-import type { ModalOptions as CoreModalOptions, PopoverOptions as CorePopoverOptions } from '@ionic/core/components';
+import type {
+ ComponentRef,
+ ModalOptions as CoreModalOptions,
+ PopoverOptions as CorePopoverOptions,
+} from '@ionic/core/components';
/**
* Modal options with Angular-specific injector support.
* Extends @ionic/core ModalOptions with an optional injector property.
*/
-export type ModalOptions = CoreModalOptions & {
+export type ModalOptions
= CoreModalOptions & {
injector?: Injector;
};
@@ -13,6 +17,6 @@ export type ModalOptions = CoreModalOptions & {
* Popover options with Angular-specific injector support.
* Extends @ionic/core PopoverOptions with an optional injector property.
*/
-export type PopoverOptions = CorePopoverOptions & {
+export type PopoverOptions = CorePopoverOptions & {
injector?: Injector;
};
diff --git a/packages/angular/package-lock.json b/packages/angular/package-lock.json
index a1410e67e30..bb125a358b8 100644
--- a/packages/angular/package-lock.json
+++ b/packages/angular/package-lock.json
@@ -1,15 +1,15 @@
{
"name": "@ionic/angular",
- "version": "8.8.1",
+ "version": "8.8.2",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "@ionic/angular",
- "version": "8.8.1",
+ "version": "8.8.2",
"license": "MIT",
"dependencies": {
- "@ionic/core": "^8.8.1",
+ "@ionic/core": "^8.8.2",
"ionicons": "^8.0.13",
"jsonc-parser": "^3.0.0",
"tslib": "^2.3.0"
@@ -1398,9 +1398,9 @@
"dev": true
},
"node_modules/@ionic/core": {
- "version": "8.8.1",
- "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.1.tgz",
- "integrity": "sha512-ksOUHyOEqoyUIVWcwCNSFZVGwNfP1DKrUVeN/Cdk/Xl9Rdd/5MLHGsrOQpWQfoCf3Csdnw+KHHPrXz/2fzMkMA==",
+ "version": "8.8.2",
+ "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.2.tgz",
+ "integrity": "sha512-br0XaVX/mct0d+ArQk7Gg6R8iLsfcgGdSVs+554iv5U4TjmqVIbmkF+o4IZSe2WkulUHnLVF20/EJ1ZH00aTnw==",
"license": "MIT",
"dependencies": {
"@stencil/core": "4.43.0",
diff --git a/packages/angular/package.json b/packages/angular/package.json
index 2d4fe941d77..961439c7311 100644
--- a/packages/angular/package.json
+++ b/packages/angular/package.json
@@ -1,6 +1,6 @@
{
"name": "@ionic/angular",
- "version": "8.8.1",
+ "version": "8.8.2",
"description": "Angular specific wrappers for @ionic/core",
"keywords": [
"ionic",
@@ -48,7 +48,7 @@
}
},
"dependencies": {
- "@ionic/core": "^8.8.1",
+ "@ionic/core": "^8.8.2",
"ionicons": "^8.0.13",
"jsonc-parser": "^3.0.0",
"tslib": "^2.3.0"
diff --git a/packages/angular/test/base/e2e/src/standalone/modal-options-generic.spec.ts b/packages/angular/test/base/e2e/src/standalone/modal-options-generic.spec.ts
new file mode 100644
index 00000000000..dfe5d84713f
--- /dev/null
+++ b/packages/angular/test/base/e2e/src/standalone/modal-options-generic.spec.ts
@@ -0,0 +1,24 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Modal Options: Generic Type Parameter', () => {
+ test.beforeEach(async ({ page }) => {
+ await page.goto('/standalone/modal-options-generic');
+ });
+
+ test('should open modal created with ModalOptions', async ({ page }, testInfo) => {
+ testInfo.annotations.push({
+ type: 'issue',
+ description: 'https://github.com/ionic-team/ionic-framework/issues/31012',
+ });
+
+ await page.locator('ion-button#open-modal').click();
+
+ await expect(page.locator('ion-modal')).toBeVisible();
+
+ const greeting = page.locator('#greeting');
+ await expect(greeting).toHaveText('hello world');
+
+ await page.locator('#close-modal').click();
+ await expect(page.locator('ion-modal')).not.toBeVisible();
+ });
+});
diff --git a/packages/angular/test/base/e2e/src/standalone/value-accessors.spec.ts b/packages/angular/test/base/e2e/src/standalone/value-accessors.spec.ts
index 44a85cadf14..dc4c7b92d4d 100644
--- a/packages/angular/test/base/e2e/src/standalone/value-accessors.spec.ts
+++ b/packages/angular/test/base/e2e/src/standalone/value-accessors.spec.ts
@@ -8,13 +8,19 @@ test.describe('Value Accessors', () => {
test('should update the form value', async ({ page }) => {
await expect(page.locator('#formValue')).toHaveText(JSON.stringify({ checkbox: false }, null, 2));
- await expect(page.locator('ion-checkbox')).toHaveClass(/ion-pristine/);
+ await expect(page.getByRole('checkbox', { name: 'Static Checkbox Label' })).toHaveClass(/ion-pristine/);
- await page.locator('ion-checkbox').click();
+ await page.getByRole('checkbox', { name: 'Static Checkbox Label' }).click();
await expect(page.locator('#formValue')).toHaveText(JSON.stringify({ checkbox: true }, null, 2));
- await expect(page.locator('ion-checkbox')).toHaveClass(/ion-dirty/);
- await expect(page.locator('ion-checkbox')).toHaveClass(/ion-valid/);
+ await expect(page.getByRole('checkbox', { name: 'Static Checkbox Label' })).toHaveClass(/ion-dirty/);
+ await expect(page.getByRole('checkbox', { name: 'Static Checkbox Label' })).toHaveClass(/ion-valid/);
+
+ await expect(page.getByRole('checkbox', { name: 'Static Checkbox Label' })).toBeVisible();
+ });
+
+ test('should display dynamically set label', async ({ page }) => {
+ await expect(page.getByRole('checkbox', { name: 'Dynamic Checkbox Label' })).toBeVisible();
});
});
diff --git a/packages/angular/test/base/src/app/lazy/app-lazy/app.module.ts b/packages/angular/test/base/src/app/lazy/app-lazy/app.module.ts
index ac0ebd501fb..caf27670d2d 100644
--- a/packages/angular/test/base/src/app/lazy/app-lazy/app.module.ts
+++ b/packages/angular/test/base/src/app/lazy/app-lazy/app.module.ts
@@ -28,7 +28,6 @@ import { AlertComponent } from '../alert/alert.component';
import { AccordionComponent } from '../accordion/accordion.component';
import { AccordionModalComponent } from '../accordion/accordion-modal/accordion-modal.component';
import { TabsBasicComponent } from '../tabs-basic/tabs-basic.component';
-import { TemplateFormComponent } from '../template-form/template-form.component';
@NgModule({
declarations: [
@@ -54,8 +53,7 @@ import { TemplateFormComponent } from '../template-form/template-form.component'
AlertComponent,
AccordionComponent,
AccordionModalComponent,
- TabsBasicComponent,
- TemplateFormComponent
+ TabsBasicComponent
],
imports: [
CommonModule,
diff --git a/packages/angular/test/base/src/app/lazy/app-lazy/app.routes.ts b/packages/angular/test/base/src/app/lazy/app-lazy/app.routes.ts
index 35a77b19cf1..84e06cef8b1 100644
--- a/packages/angular/test/base/src/app/lazy/app-lazy/app.routes.ts
+++ b/packages/angular/test/base/src/app/lazy/app-lazy/app.routes.ts
@@ -19,7 +19,6 @@ import { NavigationPage3Component } from '../navigation-page3/navigation-page3.c
import { AlertComponent } from '../alert/alert.component';
import { AccordionComponent } from '../accordion/accordion.component';
import { TabsBasicComponent } from '../tabs-basic/tabs-basic.component';
-import { TemplateFormComponent } from '../template-form/template-form.component';
export const routes: Routes = [
{
@@ -34,7 +33,7 @@ export const routes: Routes = [
{ path: 'textarea', loadChildren: () => import('../textarea/textarea.module').then(m => m.TextareaModule) },
{ path: 'searchbar', loadChildren: () => import('../searchbar/searchbar.module').then(m => m.SearchbarModule) },
{ path: 'form', component: FormComponent },
- { path: 'template-form', component: TemplateFormComponent },
+ { path: 'template-form', loadChildren: () => import('../template-form/template-form.module').then(m => m.TemplateFormModule) },
{ path: 'modals', component: ModalComponent },
{ path: 'modal-inline', loadChildren: () => import('../modal-inline').then(m => m.ModalInlineModule) },
{ path: 'modal-sheet-inline', loadChildren: () => import('../modal-sheet-inline').then(m => m.ModalSheetInlineModule) },
diff --git a/packages/angular/test/base/src/app/lazy/template-form/template-form-routing.module.ts b/packages/angular/test/base/src/app/lazy/template-form/template-form-routing.module.ts
new file mode 100644
index 00000000000..c9d57690c6d
--- /dev/null
+++ b/packages/angular/test/base/src/app/lazy/template-form/template-form-routing.module.ts
@@ -0,0 +1,16 @@
+import { NgModule } from "@angular/core";
+import { RouterModule } from "@angular/router";
+import { TemplateFormComponent } from "./template-form.component";
+
+@NgModule({
+ imports: [
+ RouterModule.forChild([
+ {
+ path: '',
+ component: TemplateFormComponent
+ }
+ ])
+ ],
+ exports: [RouterModule]
+})
+export class TemplateFormRoutingModule { }
diff --git a/packages/angular/test/base/src/app/lazy/template-form/template-form.component.html b/packages/angular/test/base/src/app/lazy/template-form/template-form.component.html
index 870f53872f2..e6203e183a0 100644
--- a/packages/angular/test/base/src/app/lazy/template-form/template-form.component.html
+++ b/packages/angular/test/base/src/app/lazy/template-form/template-form.component.html
@@ -109,6 +109,7 @@
[(ngModel)]="checkboxValue"
name="checkboxField"
required
+ requireTrue
#checkboxField="ngModel"
id="template-checkbox-test"
helper-text="You must agree to continue"
@@ -133,6 +134,7 @@
[(ngModel)]="toggleValue"
name="toggleField"
required
+ requireTrue
#toggleField="ngModel"
id="template-toggle-test"
helper-text="You must turn on to continue"
diff --git a/packages/angular/test/base/src/app/lazy/template-form/template-form.module.ts b/packages/angular/test/base/src/app/lazy/template-form/template-form.module.ts
new file mode 100644
index 00000000000..d25e9d41a17
--- /dev/null
+++ b/packages/angular/test/base/src/app/lazy/template-form/template-form.module.ts
@@ -0,0 +1,23 @@
+import { CommonModule } from "@angular/common";
+import { NgModule } from "@angular/core";
+import { FormsModule, ReactiveFormsModule } from "@angular/forms";
+import { IonicModule } from "@ionic/angular";
+
+import { TemplateFormRoutingModule } from "./template-form-routing.module";
+import { TemplateFormComponent } from "./template-form.component";
+import { ValidatorsModule } from "../validators/validators.module";
+
+@NgModule({
+ imports: [
+ CommonModule,
+ FormsModule,
+ ReactiveFormsModule,
+ IonicModule,
+ TemplateFormRoutingModule,
+ ValidatorsModule
+ ],
+ declarations: [
+ TemplateFormComponent
+ ]
+})
+export class TemplateFormModule { }
diff --git a/packages/angular/test/base/src/app/lazy/validators/require-true.directive.ts b/packages/angular/test/base/src/app/lazy/validators/require-true.directive.ts
new file mode 100644
index 00000000000..73baf28ff6c
--- /dev/null
+++ b/packages/angular/test/base/src/app/lazy/validators/require-true.directive.ts
@@ -0,0 +1,19 @@
+import { Directive, forwardRef } from '@angular/core';
+import { NG_VALIDATORS, Validator, AbstractControl, ValidationErrors, Validators } from '@angular/forms';
+
+@Directive({
+ selector: '[requireTrue]',
+ providers: [
+ {
+ provide: NG_VALIDATORS,
+ useExisting: forwardRef(() => RequireTrueValidatorDirective),
+ multi: true,
+ },
+ ],
+ standalone: false,
+})
+export class RequireTrueValidatorDirective implements Validator {
+ validate(control: AbstractControl): ValidationErrors | null {
+ return Validators.requiredTrue(control);
+ }
+}
diff --git a/packages/angular/test/base/src/app/lazy/validators/validators.module.ts b/packages/angular/test/base/src/app/lazy/validators/validators.module.ts
new file mode 100644
index 00000000000..c135d3164b9
--- /dev/null
+++ b/packages/angular/test/base/src/app/lazy/validators/validators.module.ts
@@ -0,0 +1,20 @@
+import { CommonModule } from "@angular/common";
+import { NgModule } from "@angular/core";
+import { FormsModule, ReactiveFormsModule } from "@angular/forms";
+
+import { RequireTrueValidatorDirective } from "./require-true.directive";
+
+@NgModule({
+ imports: [
+ CommonModule,
+ FormsModule,
+ ReactiveFormsModule
+ ],
+ declarations: [
+ RequireTrueValidatorDirective
+ ],
+ exports: [
+ RequireTrueValidatorDirective
+ ]
+})
+export class ValidatorsModule { }
diff --git a/packages/angular/test/base/src/app/standalone/app-standalone/app.routes.ts b/packages/angular/test/base/src/app/standalone/app-standalone/app.routes.ts
index 3f9f82933f6..dd0ccbb4ac5 100644
--- a/packages/angular/test/base/src/app/standalone/app-standalone/app.routes.ts
+++ b/packages/angular/test/base/src/app/standalone/app-standalone/app.routes.ts
@@ -24,6 +24,7 @@ export const routes: Routes = [
},
{ path: 'programmatic-modal', loadComponent: () => import('../programmatic-modal/programmatic-modal.component').then(c => c.ProgrammaticModalComponent) },
{ path: 'modal-custom-injector', loadComponent: () => import('../modal-custom-injector/modal-custom-injector.component').then(c => c.ModalCustomInjectorComponent) },
+ { path: 'modal-options-generic', loadComponent: () => import('../modal-options-generic/modal-options-generic.component').then(c => c.ModalOptionsGenericComponent) },
{ path: 'popover-custom-injector', loadComponent: () => import('../popover-custom-injector/popover-custom-injector.component').then(c => c.PopoverCustomInjectorComponent) },
{ path: 'router-outlet', loadComponent: () => import('../router-outlet/router-outlet.component').then(c => c.RouterOutletComponent) },
{ path: 'back-button', loadComponent: () => import('../back-button/back-button.component').then(c => c.BackButtonComponent) },
diff --git a/packages/angular/test/base/src/app/standalone/home-page/home-page.component.html b/packages/angular/test/base/src/app/standalone/home-page/home-page.component.html
index 641018e757c..00c3bf97452 100644
--- a/packages/angular/test/base/src/app/standalone/home-page/home-page.component.html
+++ b/packages/angular/test/base/src/app/standalone/home-page/home-page.component.html
@@ -125,6 +125,11 @@
Modal Custom Injector Test
+
+
+ Modal Options Generic Test
+
+
Overlay Controllers Test
diff --git a/packages/angular/test/base/src/app/standalone/modal-options-generic/modal-options-generic.component.ts b/packages/angular/test/base/src/app/standalone/modal-options-generic/modal-options-generic.component.ts
new file mode 100644
index 00000000000..04d630bf992
--- /dev/null
+++ b/packages/angular/test/base/src/app/standalone/modal-options-generic/modal-options-generic.component.ts
@@ -0,0 +1,38 @@
+import { Component, inject } from '@angular/core';
+import { IonContent, IonHeader, IonTitle, IonToolbar, IonButton, ModalController } from '@ionic/angular/standalone';
+import type { ModalOptions } from '@ionic/angular/standalone';
+import { GenericModalComponent } from './modal/modal.component';
+
+@Component({
+ selector: 'app-modal-options-generic',
+ template: `
+
+
+ Modal Options Generic Test
+
+
+
+
+ Open Modal
+
+
+ `,
+ standalone: true,
+ imports: [IonContent, IonHeader, IonTitle, IonToolbar, IonButton],
+})
+export class ModalOptionsGenericComponent {
+ private modalController = inject(ModalController);
+
+ async openModal() {
+ // Regression: ModalOptions must accept a generic type parameter (#31012)
+ const opts: ModalOptions = {
+ component: GenericModalComponent,
+ componentProps: {
+ greeting: 'hello world',
+ },
+ };
+
+ const modal = await this.modalController.create(opts);
+ await modal.present();
+ }
+}
diff --git a/packages/angular/test/base/src/app/standalone/modal-options-generic/modal/modal.component.ts b/packages/angular/test/base/src/app/standalone/modal-options-generic/modal/modal.component.ts
new file mode 100644
index 00000000000..619adc64331
--- /dev/null
+++ b/packages/angular/test/base/src/app/standalone/modal-options-generic/modal/modal.component.ts
@@ -0,0 +1,29 @@
+import { Component, Input } from '@angular/core';
+import { IonContent, IonHeader, IonTitle, IonToolbar, IonButton, IonButtons } from '@ionic/angular/standalone';
+
+@Component({
+ selector: 'app-generic-modal',
+ template: `
+
+
+ Generic Modal
+
+ Close
+
+
+
+
+ {{ greeting }}
+
+ `,
+ standalone: true,
+ imports: [IonContent, IonHeader, IonTitle, IonToolbar, IonButton, IonButtons],
+})
+export class GenericModalComponent {
+ @Input() greeting = '';
+ modal: HTMLIonModalElement | undefined;
+
+ dismiss() {
+ this.modal?.dismiss();
+ }
+}
diff --git a/packages/angular/test/base/src/app/standalone/value-accessors/checkbox/checkbox.component.html b/packages/angular/test/base/src/app/standalone/value-accessors/checkbox/checkbox.component.html
index c121dab37a7..0f264add5b8 100644
--- a/packages/angular/test/base/src/app/standalone/value-accessors/checkbox/checkbox.component.html
+++ b/packages/angular/test/base/src/app/standalone/value-accessors/checkbox/checkbox.component.html
@@ -6,6 +6,7 @@ IonCheckbox Value Accessors
- Checkbox
+ Static Checkbox Label
+ {{dynamicLabel}}