Skip to content

feat: Angular - make certain inputs booleanAttributes #30822

@ntorrey

Description

@ntorrey

Prerequisites

Describe the Feature Request

This issue was brought up as a bug 5 years ago in #21638, but I'm making it a feature request.
My editor complains when I don't specify the value of certain valid ionic attributes:

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

The error is: TS2322: Type string is not assignable to type boolean
It compiles fine and works in my app, but in order to get rid of the complaints of my IDE, I have to specify the values of these attributes as true:

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

Describe the Use Case

Make these errors go away, and make this approach work! It looks much cleaner.

<ion-item button detail/>

Describe Preferred Solution

Coerce the value of these attributes to booleans:

  // Using `coerceBooleanProperty` allows for the disabled value of a button to be set as
  // `<my-button disabled></my-button>` instead of `<my-button [disabled]="true"></my-button>`.
  // It also allows for a string to be passed like `<my-button disabled="true"></my-button>`.
  @Input()
  get button() { return this._button; }
  set button(value: BooleanInput) {
    this._button = coerceBooleanProperty(value);
  }
  private _button = false;

Describe Alternatives

Give the attributes explicit values:

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

Related Code

No response

Additional Information

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions