Skip to content

feat(angular): support setting boolean props by attribute presence - #31442

Draft
thetaPC wants to merge 1 commit into
mainfrom
FW-7637
Draft

feat(angular): support setting boolean props by attribute presence#31442
thetaPC wants to merge 1 commit into
mainfrom
FW-7637

Conversation

@thetaPC

@thetaPC thetaPC commented Sep 11, 2026

Copy link
Copy Markdown
Contributor

Issue number: resolves #30822


What is the current behavior?

Boolean props have to be bound explicitly. A bare attribute resolves to the empty string, so an editor reports TS2322: Type 'string' is not assignable to type 'boolean' on markup like this:

<ion-item button detail></ion-item>

It compiles and works at runtime, because Stencil coerces boolean attributes on the element. The problem is what the Angular compiler accepts.

What is the new behavior?

Boolean props can now be set by attribute presence:

<ion-item button detail></ion-item>

<!-- rather than -->
<ion-item [button]="true" [detail]="true"></ion-item>
  • Upgrades @stencil/angular-output-target to 1.5.0 and enables its new booleanAttributes option on both Angular output targets.
  • Declares an input transform on 144 boolean props across 57 components in the lazy output, and 45 components in the standalone output.
  • Property bindings are unchanged, and so is runtime behavior.
  • null and undefined are passed through rather than coerced to false, so props that treat them as a third state keep working. ion-item detail, ion-modal handle and ion-content forceOverscroll all resolve undefined to a mode-specific default.
  • 48 of the 51 changed files are regenerated by core's build. Only core/package.json, core/package-lock.json and core/stencil.config.ts are hand-edited.

Does this introduce a breaking change?

  • Yes
  • No

Other information

The dependency bump is the fix rather than an unrelated update. The generated proxies are overwritten on every core build, so this could not be solved in this repo. The change was made upstream in stenciljs/output-targets#842 and released in 1.5.0.

There is no new test here, which is deliberate. Neither of the two testing idioms available can cover this:

  • An e2e spec passes with the feature disabled, because Stencil already coerces boolean attributes at runtime. I confirmed this by removing the option, regenerating with zero transforms, and watching the ng18 app build and run clean.
  • A test app template also passes either way, because Angular only type-checks these inputs once a transform gives it a type to check against.

What the option changes is the emitted declaration, and that behavior is covered upstream by unit tests and a type-level test pinning the transform's accepted type.

Verified against packages/angular/test/apps/ng18 with strictTemplates enabled, consuming the built package:

  • <ion-item button detail> compiles.
  • <ion-item [button]="42"> fails with Type '42' is not assignable to type 'string | boolean | null | undefined', which shows type checking genuinely engages rather than silently passing.

@vercel

vercel Bot commented Sep 11, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated
ionic-framework Ready Ready Preview Sep 11, 2026 10:32pm UTC

Request Review

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

package: angular @ionic/angular package package: core @ionic/core package

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat: Angular - make certain inputs booleanAttributes

1 participant