How to use rating star in ionic 4?

After npm i ionic4-rating
import { IonicRatingModule } from ‘ionic4-rating’;

Not { IonicRatingModule } from ‘ionic-rating’;

i am using this but getting this error
Uncaught Error: Template parse errors:
‘rating’ is not a known element:

  1. If ‘rating’ is an Angular component, then verify that it is part of this module.
  2. To allow any element add ‘NO_ERRORS_SCHEMA’ to the ‘@NgModule.schemas’ of this component. ("
<ion-content padding>
    [ERROR ->]<rating [(ngModel)]="rate"
    readonly="false"
size="default"
"): ng:///RatingModalPageModule/RatingModalPage.html@7:4
    at syntaxError (compiler.js:2430)

my html is

<ion-content padding>
    <rating [(ngModel)]="rate"
    readonly="false"
size="default"
(ngModelChange)="onRateChange($event)">
</rating>
 
  <ion-grid>
    <ion-row>
      <ion-col text-center>
        ID : {{productId}}
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col text-center>
        <ion-button (click)="closeModal()">Close Modal</ion-button>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

Have you added IonicRatingModule, inside imports in app.module.ts file? If not please do this in app.module.ts file

import { IonicRatingModule } from 'ionic4-rating';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    IonicRatingModule, <=======Add here
  ],

yes i have added this but still not working same error

Open your page.module.ts then add this

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

Then adjust this too below

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    IonicRatingModule,
    IonicModule,
    RouterModule.forChild(routes)
  ],
  declarations: [CreateReviewPage],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
4 Likes

thanks , now working perfectly @dotman

@aayush2589 You’re welcome if you have issues with styling the stars by reducing the size etc you can ask as well

How To Set Border colour & inner Colour And Increase The Size Of Star.

To reduce the size check

<div class="rate_div">
     <rating [rate]="review.rating" readonly="true">
                      </rating>
</div>

Then in global.scss

.rate_div {

    rating {

        [ion-button][disabled] {
            opacity: 1;
        }
        ion-buttons {
            display: flex;
            justify-content: left !important;
            font-size: 20px !important;
        }
        
        ion-icon {  
            color: gray;
            font-size: 20px !important;
  
          &.filled {
              color: #ffb400;
              font-size: 20px !important;   
            }
        }
    }

}

For your ionic-4 applications use this package
Everything you have to do is well documented

It is very easy to integrate to your application

thanks but
ion-icon {
color: white;
font-size: 20px !important;
I am Using This but Star Innercolour not changed.

The innercolour when it is not selected right???

Hello, I’m getting this error. Can you help me to resolve this?
TypeError: this._onChange is not a function

You didnt create the fucntion in your ts file

What that function will do? I created onRateChange function. Why i need to create onChange function

Show your code and let’s see what you’re doing

And how can we send the rating value to the play store? Because that component only shows a pop up with the stars.

i am only store the value. i am not send to play store

if i use rating for eg: 2.6 out of 5.Instead of showing 2 .6 portion of a star its showing 3 star (its rounding up the value after 2.5 is there is any way to change it? but its working fine on 2.4 its showing similar to 2.5

Cannot read property ‘rating’ of undefined showing in console log