ionic2-rating
TypeScript icon, indicating that this package has built-in type declarations

1.2.2 • Public • Published

ionic2-rating

An Angular2 component to visualize a star rating bar, built for Ionic 2.

Preview

NPM version Downloads

NPM

How to install:

$ npm install --save ionic2-rating

How to use:

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 module
import { Ionic2RatingModule } from 'ionic2-rating';
 
@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    IonicModule.forRoot(MyApp),
    Ionic2RatingModule // Put ionic2-rating module here
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: []
})
export class AppModule {}
<rating [(ngModel)]="rate" 
        readOnly="false" // default value, so it can be ommited
        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)"></rating>

You may also need to customize component styles:

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

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

Readme

Keywords

Package Sidebar

Install

npm i ionic2-rating

Weekly Downloads

84

Version

1.2.2

License

MIT

Last publish

Collaborators

  • andrucz