From f31be09b1b00373f406b14023a0cffe8a0205d5e Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Fri, 18 Sep 2026 16:37:37 -0700 Subject: [PATCH 1/2] docs(angular): document boolean input changes in the v10 migration guide --- docs/updating/10-0.mdx | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) diff --git a/docs/updating/10-0.mdx b/docs/updating/10-0.mdx index 649b1edaf7..8a5b4a30b6 100644 --- a/docs/updating/10-0.mdx +++ b/docs/updating/10-0.mdx @@ -13,3 +13,35 @@ For a **complete list of breaking changes** from Ionic 9 to Ionic 10, please ref ::: ## Getting Started + +### Angular + +#### Boolean Inputs + +Boolean inputs can now be set by attribute presence, so the shorthand Angular developers expect from native HTML works on Ionic components: + +```html + + + +``` + +Allowing this turns on type checking for these inputs, which Angular did not do before. A binding that passes something outside `boolean | string | null | undefined` now fails to compile. The common case is a truthiness binding on a number: + +``` +error TS2322: Type 'number' is not assignable to type 'string | boolean | null | undefined'. +``` + +Coerce the expression to a boolean: + +```diff +- ++ +``` + +`null` and `undefined` are passed through rather than coerced to `false`. This is deliberate, and it differs from Angular's own `booleanAttribute`, which turns both into `false`. Ionic components frequently treat "not set" as a third state distinct from `false`: + +- `ion-item` falls back to the theme default for the detail arrow when `detail` is `undefined`, and hides the arrow when `detail` is `false`. +- A sheet `ion-modal` shows the drag handle unless `handle` is exactly `false`. + +Both values reach inputs routinely, from the `async` pipe before its first emission and from form control values, so coercing them would silently change which of those branches runs. From 91f31b433424de1d6d1c002b15db9b5349a0f142 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Mon, 21 Sep 2026 14:52:41 -0700 Subject: [PATCH 2/2] docs(angular): document the number coercion change for boolean inputs --- docs/updating/10-0.mdx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/docs/updating/10-0.mdx b/docs/updating/10-0.mdx index 8a5b4a30b6..b6025868a8 100644 --- a/docs/updating/10-0.mdx +++ b/docs/updating/10-0.mdx @@ -18,7 +18,7 @@ For a **complete list of breaking changes** from Ionic 9 to Ionic 10, please ref #### Boolean Inputs -Boolean inputs can now be set by attribute presence, so the shorthand Angular developers expect from native HTML works on Ionic components: +Boolean inputs now declare an input transform, so attribute presence is an explicitly supported way to set them: ```html @@ -26,7 +26,7 @@ Boolean inputs can now be set by attribute presence, so the shorthand Angular de ``` -Allowing this turns on type checking for these inputs, which Angular did not do before. A binding that passes something outside `boolean | string | null | undefined` now fails to compile. The common case is a truthiness binding on a number: +Declaring the transform also turns on type checking for these inputs, which Angular did not do before. The generated component wrappers declare no class fields, so Angular had nothing to check a binding against and accepted any value. A binding that passes something outside `boolean | string | null | undefined` now fails to compile. The common case is a truthiness binding on a number: ``` error TS2322: Type 'number' is not assignable to type 'string | boolean | null | undefined'. @@ -39,6 +39,8 @@ Coerce the expression to a boolean: + ``` +Coercion also moves from Stencil to Angular, which changes the result for numbers. `0` and `NaN` previously became `false` and now become `true`, matching Angular's own `booleanAttribute`. Without `strictTemplates` there is no compile error to catch the binding above, so an empty list now disables the item rather than enabling it. Coercing the expression fixes both the type error and the runtime change. + `null` and `undefined` are passed through rather than coerced to `false`. This is deliberate, and it differs from Angular's own `booleanAttribute`, which turns both into `false`. Ionic components frequently treat "not set" as a third state distinct from `false`: - `ion-item` falls back to the theme default for the detail arrow when `detail` is `undefined`, and hides the arrow when `detail` is `false`.