CodeSolution

Please wait...

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';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    Ionic2RatingModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

 

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

<ion-header>
   <ion-navbar>
      <ion-title>
          Ionic Blank
      </ion-title>
   </ion-navbar>
</ion-header>
<ion-content>
    <ion-card padding>
        <rating [(ngModel)]="rate" max="5" emptyStarIconName="star-outline"  halfStarIconName="star-half"     starIconName="star"  nullable="false"  (ngModelChange)="onModelChange($event)">
        </rating>
        <h2>{{rate}}</h2>
    </ion-card>
</ion-content>

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";
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  rate : any = 0;
  constructor(public navCtrl: NavController) {
  }
  onModelChange(event){
  this.rate = event;
  console.log(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: https://github.com/Sudarshan101/ionic2rating

See demo: https://www.youtube.com/watch?v=QlH_nIH8XQ0

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.?

Reply