ionic2-rating

An Angular 4 (formerly Angular 2) component to visualize a star rating bar, built for Ionic 2+.

How to install:

$ npm install --save ionic2-rating

How to use:

Import Ionic2RatingModule on module definition that declares the page where you want to add the rating component. In some cases, all pages are declared on src/app/app.module.ts.

import{NgModule}from'@angular/core';import{IonicApp,IonicModule}from'ionic-angular';import{MyApp}from'./app.component';import{HomePage}from'../pages/home/home';// Import ionic2-rating moduleimport{Ionic2RatingModule}from'ionic2-rating';
@NgModule({declarations: [MyApp,HomePage],imports: [IonicModule.forRoot(MyApp),Ionic2RatingModule// Put ionic2-rating module here],bootstrap: [IonicApp],entryComponents: [MyApp,HomePage],providers: []})exportclassAppModule{}

Include the component on page template, like the example below:

<rating[(ngModel)]="rate" readOnly="false" <!--default value-->max="5" <!--default value-->emptyStarIconName="star-outline" <!--default value-->halfStarIconName="star-half" <!--default value-->starIconName="star" <!--default value-->nullable="false" <!--default value-->(ngModelChange)="onModelChange($event)"><!--use it when you need to do something when user clicks on a star. in case you only need to change ngModel property, this property can be ommited.--></rating>

You may also need to customize component styles:

ul {
padding:0px;
&.ratingli {
padding:5px10px!important;
background: none;
color:#ffb400;
ion-icon {
font-size:30px;
}
}
}

Based on ionic-rating for Ionic 1: https://github.com/fraserxu/ionic-rating