bug: IonItem button causes error TS2322 with Angular's strict template type checking

[athisun]

Bug Report

Ionic version:

[x] 5.x

Current behavior:

Creating an IonItem and defining it as a button while using Angular's strict template type checking causes error TS2322 when running a dev server with ng serve or compiling with ng build [--prod].

<ion-item button>Test</ion-item>

error TS2322: Type 'string' is not assignable to type 'boolean'.

Expected behavior:

No type error on compilation, even with strict template type checking.

Steps to reproduce:

Related code:

This type definition is the root of the issue:
https://github.com/ionic-team/ionic/blob/fbcd3f8c087420bc035f7b2f560659bc53a70a17/core/src/components.d.ts#L4276

Changing the type to a string fixes the issue, though I'm not sure how this would affect other use-cases:

 "button"?: "" | "true" | "false"; 

Alternatively:

 "button"?: "" | boolean; 

Here is a sample repo: https://github.com/athisun/angular-ivy-pybfcx. Note that the issue isn't reproducible in StackBlitz.

Other information:

Strict template type checking was introduced in and thus affects Angular 9+: https://angular.io/guide/template-typecheck#strict-mode. With Angular 10's new ng new --strict flag, many new projects will likely experience this issue.

I suspect this issue affects other Ionic components which allow attributes with no assigned value but also expect a non-string type.

Binding a boolean value to the attribute is a temporary alternative fix.

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

Ionic info:

Ionic:

   Ionic CLI : 6.10.1

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v14.4.0
   npm    : 6.14.5
   OS     : macOS Catalina

[DwieDima]

I'm not sure if this is a bug, because the button input attribute expects a boolean and not string.
In my opinion using

<ion-item [button]="true"></ion-item> is actually correct and
<ion-item button="true"></ion-item> wrong.

Maybe this should be updated in the component docs.

[athisun]

In my opinion using [...] <ion-item button="true"></ion-item> [is] wrong.

I have updated my original comment with perhaps a more suitable type definition.

[liamdebeasi]

Thanks for the issue. You need to do [button]="true" due to how Angular handles binding values to properties.

[athisun]

The Angular documentation discusses this issue in https://angular.io/guide/template-typecheck#input-setter-coercion, where they recommend the component to implement "[...] checking a wider, more permissive type for @ Input() than is declared for the input field itself. Enable this by adding a static property with the ngAcceptInputType_ prefix to the component class:"

class SubmitButton {
  private _disabled: boolean;

  get disabled(): boolean {
    return this._disabled;
  }

  set disabled(value: boolean) {
    this._disabled = (value === '') || value;
  }

  static ngAcceptInputType_disabled: boolean|'';
}

To follow the Angular team's recommendation, could we add this static property to the type definition files?

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.