nxtlife-ionic2-rating

Build a simple directive to visualize a star rating bar using angular2 and ionic2.

Installation:

$ npm install --save nxtlife-ionic2-rating

Usage:

Import NxtLifeIonic2RatingModule 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 { IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
 
// Import ionic2-rating module
import { NxtLifeIonic2RatingModule } from 'nxtlife-ionic2-rating';
 
@NgModule({
  ......
  ......
  imports: [
    IonicModule.forRoot(MyApp),
    NxtLifeIonic2RatingModule // Put ionic2-rating module here
  ],
  ......
  ......
})
export class AppModule {}

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

<nxtlife-rating></nxtlife-rating>

DEFAULT VALUE

readOnly = false,
max = 5,
emptyStarIconName = "star-outline",
halfStarIconName = "star-half",
starIconName = "star",
nullable = false

When you need to do something when user clicks on a start then you have to use (click) or (ngModelChange) with [(ngModel)]:

<nxtlife-rating [(ngModel)]="rate" (ngModelChange)="onModelChange($event)">
</nxtlife-rating>

If you want to customize style:

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