Please wait...

Implementing the rating in ionic 2 using ionic2-rating NPM package

Implementing the rating in ionic 2 using  ionic2-rating NPM package

@ionic2  @ NPM  @ package  @ rating  @ module  @ typescript  @ angular4  

Implementing the rating in ionic 2 using  ionic2-rating NPM package.

Create a project run this command:

ionic start <project name> blank 

then move into the newly created directory:

cd <project name>

Install required js and CSS file

npm install --save ionic2-rating

Open app.js in src ->app-> app.module.ts and add the module of ts file

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { Ionic2RatingModule } from 'ionic2-rating';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

  declarations: [
  imports: [
  bootstrap: [IonicApp],
  entryComponents: [
  providers: [
    {provide: ErrorHandler, useClass: IonicErrorHandler}
export class AppModule {}


Open home.html in src ->pages-> home->home.html and add code

          Ionic Blank
    <ion-card padding>
        <rating [(ngModel)]="rate" max="5" emptyStarIconName="star-outline"  halfStarIconName="star-half"     starIconName="star"  nullable="false"  (ngModelChange)="onModelChange($event)">

Open home.html in src ->pages-> home->home.scss and add code

page-home {
ul {
  padding: 10px;
  &.rating li {
    padding: 5px 10px !important;
    background: none;
    color: #ffb400;
    ion-icon {
      font-size: 40px;

Open home.html in src ->pages-> home->home.ts and add code

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Ionic2RatingModule } from "ionic2-rating";
  selector: 'page-home',
  templateUrl: 'home.html'
export class HomePage {
  rate : any = 0;
  constructor(public navCtrl: NavController) {
  this.rate = event;

After add platform in your application code platform add command: 

ionic cordova platform add android/ios/windows

Build and Run command

ionic cordova build android/ios/windows
ionic cordova run android/ios/windows

Github link:

See demo:

thank you

Comments 1

  • Mohamed Ashraf
    Mohamed Ashraf

    there is an error in rating tag in HTML and the error is [Angular] '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.?