Implementing the rating in ionic 2 using ionic2-rating NPM package
rating
ionic 2
NPM
- By Code solution
- Jan 20th, 2021
- 0 comments
- 0
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