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

[thetaPC]

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. That declares an input transform on 144 boolean props across 57 components in the lazy output, and 45 components in the standalone output.
• Applies the same transform by hand to the 17 wrappers that are excluded from generation, covering a further 78 boolean inputs. ion-modal and ion-popover alone account for 19. Without this, <ion-checkbox checked> and <ion-modal handle> would still be rejected.
• 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.
• 21 of the 69 changed files are hand-edited. The rest are regenerated or copied in by core's build.

Does this introduce a breaking change?

• Yes
• No

Other information

Dev build: 9.0.4-dev.11789496656.1690cf55

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.

The hand-written wrappers use one mixed input array, with the plain names derived for ProxyCmp:

const CHECKBOX_INPUTS = [{ name: 'checked', transform: nullableBooleanAttribute }, 'color', ...];
const CHECKBOX_PROXY_INPUTS = CHECKBOX_INPUTS.map((input) => (typeof input === 'string' ? input : input.name));

A helper that built the list instead fails with NG1010: Failed to resolve @Directive.inputs to an array, since Angular has to resolve the metadata statically. common/utils/boolean-attribute.ts duplicates the copied helper for the same reason proxy.ts duplicates ProxyCmp; refer to the TODO at the top of proxy.ts.

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

• <ion-item button detail> compiles (generated wrapper).
• <ion-checkbox checked indeterminate disabled>, <ion-toggle checked enableOnOffLabels>, <ion-input clearInput counter required readonly> and <ion-modal isOpen handle keepContentsMounted showBackdrop> compile (hand-written wrappers).
• <ion-modal [handle]="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]

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

Project	Deployment	Actions	Updated
ionic-framework	Ready	Preview	Sep 15, 2026 6:06pm UTC

[OS-jacobbell]

Everything looks good for the auto-generated component wrappers!

Some components are excluded from auto generation, e.g. standalone ion-checkbox. See core/stencil.config.ts for the full list of excluded components wrappers, and packages/angular/src for their manual implementations. The nullableBooleanAttribute will need to be applied to their inputs directly.