Ion-rating-stars NPM

📝 Table of Contents

✅ Prerequisites

The current version of the library is compatible with Ionic 6+.

⬇️ Install

Using npm

npm install ion-rating-stars --save

Using yarn

yarn add ion-rating-stars

🛠 Setup

Once installed you need to import our module in the parent module for the component you will be using it in:

import { IonRatingStarsModule } from 'ion-rating-stars';

@NgModule({
  ...
  imports: [IonRatingStarsModule, ...],
  ...
})
export class YourModule {
}

Usage

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

  <ion-rating-stars
  [rating]="3"
  [color]="'darkgrey'"
  [filledColor]="'orange'"
  [margin]="2"
  [size]="20"
  [disabled]="false"
  [opacity]="0.5"
  [isHalfStar]="true"
  (ratingChange)="ratingChanged($event)"></ion-rating-stars>

API

Properties

rating: number 0-5.
color: string color of stars. applies as color default darkgrey.
filledColor: string filledColor of stars. applies as color default orange.
margin: number space between stars in pixels. applies as margin-right. default 20.
size: number size of stars. applies as font-size. default 20.
disabled: boolean disables the events and anything on ratings. applies as pointer-events. default false.
opacity: number change stars opacity when disabled is true. applies as number default 0.5
isHalfStar: boolean to Enable/Disable half stars. applies as boolean default false