Skip to content

docs(angular): document boolean input changes in the v10 migration guide #4744

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
thetaPC wants to merge 2 commits into
base: major-10.0
Choose a base branch
from
Open

docs(angular): document boolean input changes in the v10 migration guide #4744

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f31be09
docs(angular): document boolean input changes in the v10 migration guide
thetaPC Sep 18, 2026
91f31b4
docs(angular): document the number coercion change for boolean inputs
thetaPC Sep 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 34 additions & 0 deletions docs/updating/10-0.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,3 +13,37 @@ For a **complete list of breaking changes** from Ionic 9 to Ionic 10, please ref
:::

## Getting Started

### Angular

#### Boolean Inputs

Boolean inputs now declare an input transform, so attribute presence is an explicitly supported way to set them:

```html
<!-- Both set `button` to `true` -->
<ion-item button></ion-item>
<ion-item [button]="true"></ion-item>
```

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:

@ShaneK ShaneK Sep 22, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This holds under strictTemplates, though the caveat doesn't turn up until the coercion paragraph further down, where it's attached to a different point. Could it go here instead? Someone without strictTemplates reads this, expects a compile error, gets none, and never reaches the part that actually affects them.


```
error TS2322: Type 'number' is not assignable to type 'string | boolean | null | undefined'.
```

Coerce the expression to a boolean:

```diff
- <ion-item [button]="items.length"></ion-item>
+ <ion-item [button]="items.length > 0"></ion-item>
```

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.

@ShaneK ShaneK Sep 22, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
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.
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 renders the item as tappable rather than plain. Coercing the expression fixes both the type error and the runtime change.

This is the same correction as the one on the framework PR, since the paragraph came across with it. The example binds button rather than disabled.


`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.
Loading