Package Exports

ionic4-rating

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ionic4-rating) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

ionic4-rating

A native Ionic 4 rating stars component forked from ionic-rating to support new Ionic 4 components.

How to install?

npm i ionic4-rating

How to use:

Import IonicRatingModule 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 ionic-rating module
import { IonicRatingModule } from 'ionic-rating';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    IonicRatingModule // Put ionic-rating module here
    IonicModule.forRoot(MyApp),
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: []
})
export class AppModule {}

If you are using Lazy Loading in your application, add the IonicRatingModule to the page module instead of the app module.

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { ProfilePage } from './profile';
import { IonicRatingModule } from "ionic-rating";

@NgModule({
  declarations: [
    ProfilePage,
  ],
  imports: [
    IonicRatingModule // Put ionic-rating module here
    IonicPageModule.forChild(ProfilePage),
  ],
  exports: [
    ProfilePage
  ]
})

export class ProfilePageModule { }

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

<rating [rate]="rate"
        readonly="false" <!--default value-->
        size="default" <!--default value-->
        (rateChange)="onRateChange($event)">
</rating>

[(ngModel)]:

<rating [(ngModel)]="rate"
        readonly="false" <!--default value-->
        size="default" <!--default value-->
        (ngModelChange)="onModelChange($event)">
</rating>

Reactive Forms:

<rating formControlName="rate"
        readonly="false" <!--default value-->
        size="default" <!--default value-->
</rating>

You may also need to customize component styles:

rating {
  ion-icon {
    color: gray;

    &.filled {
      color: #ffb400;
    }
  }
}