ionic-framework icon indicating copy to clipboard operation
ionic-framework copied to clipboard

feat(angular): add booleanAttribute transform to IonItem inputs

Open Advikkhandelwal opened this issue 1 week ago • 1 comments

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

Advikkhandelwal avatar Dec 01 '25 18:12 Advikkhandelwal