cannot use rating attribute `Type 'string' is not assignable to type 'number'` when strict templates is enabled

[renomi]

Hey there, thanks for the great component!

If tsconfig.app.json has

"angularCompilerOptions": {
    "strictTemplates": true
  }

And inside any page add the following:

 <ionic-rating-component #rating activeColor="#FFC200" halfStar="true" rating="0"
          (ratingChanged)="onRatingChange($event)">
  </ionic-rating-component>

Running ionic serve will fail with Type 'string' is not assignable to type 'number'.

ionic info:

Ionic:

   Ionic CLI                     : 6.16.3 (/home/dhanarenomi/.nvm/versions/node/v14.16.1/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.6.5
   @angular-devkit/build-angular : 12.0.2
   @angular-devkit/schematics    : 11.2.10
   @angular/cli                  : 11.2.10
   @ionic/angular-toolkit        : 3.1.1

Capacitor:

   Capacitor CLI      : 2.4.7
   @capacitor/android : 2.4.7
   @capacitor/core    : 2.4.7
   @capacitor/ios     : not installed

Utility:

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

System:

   NodeJS : v14.16.1 (/home/dhanarenomi/.nvm/versions/node/v14.16.1/bin/node)
   npm    : 6.14.12
   OS     : Linux 5.11

[jcancig]

Hello @renomi , try with this

<ionic-rating-component #rating activeColor="#FFC200" halfStar="true" _[rating]="0"_
          (ratingChanged)="onRatingChange($event)">
</ionic-rating-component>

Another option is to declare a type number variable in the controller:

rate-page.ts

…..
rate : number = 0;
…..
export class RatePage {

    constructor() {
        
    }
}

rate-page.html

<ionic-rating-component #rating activeColor="#FFC200" halfStar="true" rating="{{number}}"
          (ratingChanged)="onRatingChange($event)">
</ionic-rating-component>

[1nstinct]

Having the same issue. For me as a tmp workaround - remove default value. Disabling strictTemplate for entire project is not a solution for me.