How to Implement Star Rating in Ionic 4

A native Ionic 4 rating stars component forked from ionic-rating to support new Ionic 4 components. You can use this plugin you can develop a rating bar in your app. All the processes are discussed step by step in the below section.

Install this command in your project location comandprompt.

npm i ionic 4-rating

How to use?

Import IonicRatingModule on module definition that declares the page where you want to add the rating component. In some cases, all pages are declared on a specific page module class where you can use rating.

home.module.ts file

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
//Important Section
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
//Important Section
import { RouterModule } from '@angular/router';
import { HomePage } from './home.page';
//Important Section
import { IonicRatingModule } from 'ionic4-rating';//this is import package.

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    IonicRatingModule ,     //add in import section.
    RouterModule.forChild([
      {
        path: '',
        component: HomePage
      }
    ])
  ],
  declarations: [HomePage]
})
export class HomePageModule {}

Add in your html page below rating template.

<rating [(ngModel)]="rate"
              readonly="false"
      size="default"
      (ngModelChange)="onRateChange($event)">
      </rating>

In your ts file add below code to print the active star value:

onRateChange(event) {
    console.log('Your rate:', event);
  }

If you change the scss file. Note: please add CSS file in your global.scss file, neither it does not change anything.

global.scss file add below code...
rating {
    ion-icon {
      color: gray;
  
      &.filled {
        //color: #26ff00;
        fill: #26ff00;
      }
    }
  }

Conclusion:

If you follow step by step then it works fine. If you want to check then create a blank project and implement all these steps. You can apply in the Ionic mobile app development. Please share your reviews in the comment section.