diff --git a/BREAKING.md b/BREAKING.md
index c94a4c10393..7f6fb4c0b47 100644
--- a/BREAKING.md
+++ b/BREAKING.md
@@ -25,6 +25,8 @@ This is a comprehensive list of the breaking changes introduced in the major ver
- [Input Otp](#version-10x-input-otp)
- [Radio Group](#version-10x-radio-group)
- [Textarea](#version-10x-textarea)
+- [Framework Specific](#version-10x-framework-specific)
+ - [Angular](#version-10x-angular)
Components
@@ -245,3 +247,32 @@ The internal wrappers that Ionic 9 introduced are no longer reachable as descend
```
To style the wrappers themselves rather than the slotted content, use `part="start"` and `part="end"`.
+
+Framework Specific
+
+Angular
+
+**Boolean Inputs Are Type Checked**
+
+Boolean inputs now declare an input transform, so attribute presence is an explicitly supported way to set them:
+
+```html
+
+` instead of ``.
+ *
+ * Strings are coerced the same way Angular's `booleanAttribute` coerces them, so `''` (a bare
+ * attribute) becomes `true` and `'false'` becomes `false`.
+ *
+ * Angular's own `booleanAttribute` is not used because it coerces `null` and `undefined` to
+ * `false`. Components frequently treat those as a state distinct from `false`, such as
+ * `ion-item`'s `detail` resolving `undefined` to a computed default, and both reach inputs
+ * routinely from the `async` pipe before its first emission and from form control values.
+ *
+ * The parameter type is what Angular derives `ngAcceptInputType_*` from, so it decides which
+ * template bindings compile. Widening it to `unknown` would let any expression through.
+ *
+ * Declared as a function rather than an arrow constant because Angular has to resolve input
+ * transforms statically when compiling a library in partial compilation mode.
+ */
+export function nullableBooleanAttribute(value: boolean | string | null | undefined): boolean | null | undefined {
+ if (value === null || value === undefined) {
+ return value;
+ }
+ return typeof value === 'boolean' ? value : value !== 'false';
+}
diff --git a/packages/angular/src/common/utils/proxy.ts b/packages/angular/src/common/utils/proxy.ts
index b9070978db1..421c60f38af 100644
--- a/packages/angular/src/common/utils/proxy.ts
+++ b/packages/angular/src/common/utils/proxy.ts
@@ -28,6 +28,13 @@ export const proxyMethods = (Cmp: any, methods: string[]) => {
});
};
+/**
+ * Extracts the plain names from an inputs array that may contain transform entries.
+ * `ProxyCmp` only needs the names, and runs at runtime rather than through the Angular compiler.
+ */
+export const inputNames = (inputs: (string | { name: string })[]): string[] =>
+ inputs.map((input) => (typeof input === 'string' ? input : input.name));
+
export const proxyOutputs = (instance: any, el: any, events: string[]) => {
events.forEach((eventName) => (instance[eventName] = fromEvent(el, eventName)));
};
diff --git a/packages/angular/src/lazy/directives/angular-component-lib/boolean-attribute.ts b/packages/angular/src/lazy/directives/angular-component-lib/boolean-attribute.ts
new file mode 100644
index 00000000000..c116dd5bc7f
--- /dev/null
+++ b/packages/angular/src/lazy/directives/angular-component-lib/boolean-attribute.ts
@@ -0,0 +1,43 @@
+/* eslint-disable */
+/* tslint:disable */
+
+/**
+ * Transforms a value to a boolean so that boolean properties can be set by attribute presence,
+ * e.g. `` instead of ``.
+ *
+ * Strings are coerced the same way Angular's `booleanAttribute` coerces them, so `''` (a bare
+ * attribute) becomes `true` and `'false'` becomes `false`.
+ *
+ * Unlike Angular's `booleanAttribute`, `null` and `undefined` are passed through rather than
+ * coerced to `false`. Components frequently treat them as a state distinct from `false`:
+ *
+ * ```tsx
+ * // `undefined` means "decide based on the mode", which is not the same as `false`
+ * const showDetail = detail !== undefined ? detail : mode === 'ios';
+ *
+ * // a strict comparison also behaves differently for `null` than it does for `false`
+ * const showHandle = handle !== false;
+ * ```
+ *
+ * Both values reach inputs routinely in Angular templates, from the `async` pipe before its
+ * first emission and from form control values, so coercing them would change the behavior of
+ * bindings that work today.
+ *
+ * This is implemented here rather than imported from `@angular/core` so that consumers on
+ * Angular versions without `booleanAttribute` are unaffected by this file being generated.
+ *
+ * The parameter type is what Angular derives `ngAcceptInputType_*` from, so it decides which
+ * template bindings compile. Widening it to `unknown` would let any expression through.
+ *
+ * Declared as a function rather than an arrow constant because Angular has to resolve input
+ * transforms statically when compiling a library in partial compilation mode.
+ *
+ * This lives in its own file, separate from `utils.ts`, so that it carries no runtime imports.
+ * That keeps it independently type-checkable without pulling `rxjs` in for `proxyOutputs`.
+ */
+export function nullableBooleanAttribute(value: boolean | string | null | undefined): boolean | null | undefined {
+ if (value === null || value === undefined) {
+ return value;
+ }
+ return typeof value === 'boolean' ? value : value !== 'false';
+}
diff --git a/packages/angular/src/lazy/directives/proxies.ts b/packages/angular/src/lazy/directives/proxies.ts
index 67e09a3e135..885b667cfef 100644
--- a/packages/angular/src/lazy/directives/proxies.ts
+++ b/packages/angular/src/lazy/directives/proxies.ts
@@ -3,6 +3,7 @@
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Output, NgZone } from '@angular/core';
import { ProxyCmp } from './angular-component-lib/utils';
+import { nullableBooleanAttribute } from './angular-component-lib/boolean-attribute';
import { Components } from '@ionic/core';
@@ -15,7 +16,7 @@ import { Components } from '@ionic/core';
changeDetection: ChangeDetectionStrategy.OnPush,
template: '` instead of ``.
+ *
+ * Strings are coerced the same way Angular's `booleanAttribute` coerces them, so `''` (a bare
+ * attribute) becomes `true` and `'false'` becomes `false`.
+ *
+ * Unlike Angular's `booleanAttribute`, `null` and `undefined` are passed through rather than
+ * coerced to `false`. Components frequently treat them as a state distinct from `false`:
+ *
+ * ```tsx
+ * // `undefined` means "decide based on the mode", which is not the same as `false`
+ * const showDetail = detail !== undefined ? detail : mode === 'ios';
+ *
+ * // a strict comparison also behaves differently for `null` than it does for `false`
+ * const showHandle = handle !== false;
+ * ```
+ *
+ * Both values reach inputs routinely in Angular templates, from the `async` pipe before its
+ * first emission and from form control values, so coercing them would change the behavior of
+ * bindings that work today.
+ *
+ * This is implemented here rather than imported from `@angular/core` so that consumers on
+ * Angular versions without `booleanAttribute` are unaffected by this file being generated.
+ *
+ * The parameter type is what Angular derives `ngAcceptInputType_*` from, so it decides which
+ * template bindings compile. Widening it to `unknown` would let any expression through.
+ *
+ * Declared as a function rather than an arrow constant because Angular has to resolve input
+ * transforms statically when compiling a library in partial compilation mode.
+ *
+ * This lives in its own file, separate from `utils.ts`, so that it carries no runtime imports.
+ * That keeps it independently type-checkable without pulling `rxjs` in for `proxyOutputs`.
+ */
+export function nullableBooleanAttribute(value: boolean | string | null | undefined): boolean | null | undefined {
+ if (value === null || value === undefined) {
+ return value;
+ }
+ return typeof value === 'boolean' ? value : value !== 'false';
+}
diff --git a/packages/angular/src/standalone/directives/checkbox.ts b/packages/angular/src/standalone/directives/checkbox.ts
index a905e050d5c..4d534e3f1aa 100644
--- a/packages/angular/src/standalone/directives/checkbox.ts
+++ b/packages/angular/src/standalone/directives/checkbox.ts
@@ -10,29 +10,33 @@ import {
forwardRef,
} from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { ValueAccessor, setIonicClasses } from '@ionic/angular/common';
+import { inputNames, setIonicClasses, ValueAccessor } from '@ionic/angular/common';
import type { CheckboxChangeEventDetail, Components } from '@ionic/core/components';
import { defineCustomElement } from '@ionic/core/components/ion-checkbox.js';
+import { nullableBooleanAttribute } from './angular-component-lib/boolean-attribute';
import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils';
const CHECKBOX_INPUTS = [
- 'checked',
+ { name: 'checked', transform: nullableBooleanAttribute },
'color',
- 'disabled',
+ { name: 'disabled', transform: nullableBooleanAttribute },
'errorText',
'helperText',
- 'indeterminate',
+ { name: 'indeterminate', transform: nullableBooleanAttribute },
'justify',
'labelPlacement',
'mode',
'name',
+ { name: 'required', transform: nullableBooleanAttribute },
'value',
];
+const CHECKBOX_PROXY_INPUTS = inputNames(CHECKBOX_INPUTS);
+
@ProxyCmp({
defineCustomElementFn: defineCustomElement,
- inputs: CHECKBOX_INPUTS,
+ inputs: CHECKBOX_PROXY_INPUTS,
})
@Component({
selector: 'ion-checkbox',
diff --git a/packages/angular/src/standalone/directives/datetime.ts b/packages/angular/src/standalone/directives/datetime.ts
index e808011dfd1..f8ccd7ec918 100644
--- a/packages/angular/src/standalone/directives/datetime.ts
+++ b/packages/angular/src/standalone/directives/datetime.ts
@@ -10,10 +10,11 @@ import {
forwardRef,
} from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { ValueAccessor } from '@ionic/angular/common';
+import { inputNames, ValueAccessor } from '@ionic/angular/common';
import type { DatetimeChangeEventDetail, Components } from '@ionic/core/components';
import { defineCustomElement } from '@ionic/core/components/ion-datetime.js';
+import { nullableBooleanAttribute } from './angular-component-lib/boolean-attribute';
import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils';
const DATETIME_INPUTS = [
@@ -21,7 +22,7 @@ const DATETIME_INPUTS = [
'clearText',
'color',
'dayValues',
- 'disabled',
+ { name: 'disabled', transform: nullableBooleanAttribute },
'doneText',
'firstDayOfWeek',
'formatOptions',
@@ -35,25 +36,27 @@ const DATETIME_INPUTS = [
'minuteValues',
'mode',
'monthValues',
- 'multiple',
+ { name: 'multiple', transform: nullableBooleanAttribute },
'name',
- 'preferWheel',
+ { name: 'preferWheel', transform: nullableBooleanAttribute },
'presentation',
- 'readonly',
- 'showAdjacentDays',
- 'showClearButton',
- 'showDefaultButtons',
- 'showDefaultTimeLabel',
- 'showDefaultTitle',
+ { name: 'readonly', transform: nullableBooleanAttribute },
+ { name: 'showAdjacentDays', transform: nullableBooleanAttribute },
+ { name: 'showClearButton', transform: nullableBooleanAttribute },
+ { name: 'showDefaultButtons', transform: nullableBooleanAttribute },
+ { name: 'showDefaultTimeLabel', transform: nullableBooleanAttribute },
+ { name: 'showDefaultTitle', transform: nullableBooleanAttribute },
'size',
'titleSelectedDatesFormatter',
'value',
'yearValues',
];
+const DATETIME_PROXY_INPUTS = inputNames(DATETIME_INPUTS);
+
@ProxyCmp({
defineCustomElementFn: defineCustomElement,
- inputs: DATETIME_INPUTS,
+ inputs: DATETIME_PROXY_INPUTS,
methods: ['confirm', 'reset', 'cancel'],
})
@Component({
diff --git a/packages/angular/src/standalone/directives/icon.ts b/packages/angular/src/standalone/directives/icon.ts
index 132a3a30b29..3fc63bde395 100644
--- a/packages/angular/src/standalone/directives/icon.ts
+++ b/packages/angular/src/standalone/directives/icon.ts
@@ -1,18 +1,36 @@
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, NgZone } from '@angular/core';
import { defineCustomElement as defineIonIcon } from 'ionicons/components/ion-icon.js';
+import { nullableBooleanAttribute } from './angular-component-lib/boolean-attribute';
import { ProxyCmp } from './angular-component-lib/utils';
+const ICON_INPUTS = [
+ 'color',
+ { name: 'flipRtl', transform: nullableBooleanAttribute },
+ 'icon',
+ 'ios',
+ { name: 'lazy', transform: nullableBooleanAttribute },
+ 'md',
+ 'mode',
+ 'name',
+ { name: 'sanitize', transform: nullableBooleanAttribute },
+ 'size',
+ 'src',
+];
+
+/* ProxyCmp only needs the names, and runs at runtime rather than through the Angular compiler. */
+const ICON_PROXY_INPUTS = ICON_INPUTS.map((input) => (typeof input === 'string' ? input : input.name));
+
@ProxyCmp({
defineCustomElementFn: defineIonIcon,
- inputs: ['color', 'flipRtl', 'icon', 'ios', 'lazy', 'md', 'mode', 'name', 'sanitize', 'size', 'src'],
+ inputs: ICON_PROXY_INPUTS,
})
@Component({
selector: 'ion-icon',
changeDetection: ChangeDetectionStrategy.OnPush,
template: 'Open Modal
-
+
+
This is my modal content
diff --git a/packages/angular/test/base/src/app/standalone/modal/modal.component.ts b/packages/angular/test/base/src/app/standalone/modal/modal.component.ts
index 9868c0b7140..396126a2594 100644
--- a/packages/angular/test/base/src/app/standalone/modal/modal.component.ts
+++ b/packages/angular/test/base/src/app/standalone/modal/modal.component.ts
@@ -8,4 +8,6 @@ import { IonModal } from '@ionic/angular';
imports: [IonModal]
})
export class ModalComponent {
+ /* Reaches the input as `undefined`, the way an unresolved `async` pipe would. */
+ unsetFocusTrap: boolean | undefined = undefined;
}