Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
ShaneK
left a comment
There was a problem hiding this comment.
Looks good to me! I checked the behavior claims against the v10 source and both the ion-item and ion-modal examples hold up. One correction inline on the coercion paragraph, which came across from the framework PR.
| + <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. |
There was a problem hiding this comment.
| 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.
| <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: |
There was a problem hiding this comment.
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.
Issue URL: ionic-team/ionic-framework#31442
What is the current behavior?
The v10 migration guide has no Angular section. Boolean inputs on Ionic components are getting an input transform in v10, and nothing documents it.
What is the new behavior?
Adds Getting Started > Angular > Boolean Inputs to the v10 migration guide, covering:
<ion-item button>, which previously failed to compile[button]="items.length"now fails withTS2322and needs coercingnullandundefinedpass through instead of coercing tofalse, the opposite of Angular's ownbooleanAttribute, because components likeion-itemand sheetion-modaltreat "not set" as a third stateDoes this introduce a breaking change?
Other information
N/A