Skip to content

feat(angular): add booleanAttribute transform to IonItem inputs - #30825

Closed
Advikkhandelwal wants to merge 1 commit into
ionic-team:mainfrom
Advikkhandelwal:feat/angular-boolean-attributes
Closed

feat(angular): add booleanAttribute transform to IonItem inputs#30825
Advikkhandelwal wants to merge 1 commit into
ionic-team:mainfrom
Advikkhandelwal:feat/angular-boolean-attributes

Conversation

@Advikkhandelwal

Copy link
Copy Markdown

Description

This PR implements booleanAttribute transforms for IonItem's boolean inputs, allowing cleaner syntax as requested in #30822.

Problem

Currently, Angular developers have to use explicit bindings for boolean attributes:

<ion-item [button]="true" [detail]="true" [disabled]="false"></ion-item>

This generates IDE warnings and is more verbose than the desired syntax.

Solution

Applied Angular's booleanAttribute transform to IonItem's button, detail, and disabled inputs. This allows:

<!-- Static boolean attributes -->
<ion-item button detail></ion-item>

<!-- Dynamic bindings still work -->
<ion-item [button]="someCondition" detail></ion-item>

Changes

  • Updated @stencil/angular-output-target from ^0.10.0 to ^1.1.1
  • Modified IonItem component in both regular and standalone Angular proxies
  • Removed button, detail, and disabled from @ProxyCmp and @Component inputs arrays
  • Added explicit @Input({ transform: booleanAttribute }) decorators with getters/setters
  • Added utility script for future automated application

Testing

✅ Core package builds successfully
✅ Angular package builds successfully
✅ Standalone package builds successfully
✅ All linting checks pass
✅ TypeScript compilation without errors
✅ No breaking changes to existing API

Type of Change

  • New feature (non-breaking change which adds functionality)
  • Enhancement (non-breaking change which improves existing functionality)

Closes #30822

This change allows using boolean attributes like <ion-item button detail>
instead of requiring explicit bindings like <ion-item [button]="true" [detail]="true">.

Applied to IonItem's button, detail, and disabled inputs using Angular's
booleanAttribute transform function.

Closes ionic-team#30822
@Advikkhandelwal
Advikkhandelwal requested a review from a team as a code owner December 1, 2025 18:19
@vercel

vercel Bot commented Dec 1, 2025

Copy link
Copy Markdown

Someone is attempting to deploy a commit to the Ionic Team on Vercel.

A member of the Team first needs to authorize it.

@github-actions github-actions Bot added package: core @ionic/core package package: angular @ionic/angular package labels Dec 1, 2025
@thetaPC

thetaPC commented Sep 4, 2026

Copy link
Copy Markdown
Contributor

Thanks for putting this together, and apologies for the long silence on it.

We ended up taking a different route to the same goal. packages/angular/src/directives/proxies.ts is generated by @stencil/angular-output-target, so changes made there are overwritten the next time core builds. Doing it in the output target instead covers every boolean prop on every component rather than IonItem's three, and it keeps working without a patch step afterwards.

That landed upstream in stenciljs/output-targets#842 and will ship in the next @stencil/angular-output-target release.

So I'm going to close this one in favor of that. The new behavior is opt-in, so turning it on for Ionic is a separate change on our side. I'm leaving #30822 open to track that part.

Thanks again for digging into this, it moved the problem along!

@thetaPC thetaPC closed this Sep 4, 2026
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

2 participants