Updating from Ionic 9 to 10

note

This guide assumes that you have already updated your app to the latest version of Ionic 9. Make sure you have followed the Upgrading to Ionic 9 Guide before starting this guide.

Breaking Changes

For a complete list of breaking changes from Ionic 9 to Ionic 10, please refer to the breaking changes document in the Ionic Framework repository.

Getting Started

Angular

Boolean Inputs

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

<!-- 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:

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

Coerce the expression to a boolean:

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

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.