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

Create a project run this command:

ionic start  blank 

then move into the newly created directory:

cd 

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

   
      
          Ionic Blank
      
   


    
        
        

{{rate}}

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

thank you

About the author
Code solution

info@codesolution.co.in

Discussion
  • 0 comments

Add comment To Login
Add comment