ionic-rating

A simple Ionic 4 stars rating component using Angular, with an easy API and support for all methods of binding (Property and Event Binding, Template Forms and Reactive Forms).

📝 Table of Contents

Prerequisites
Install
Setup
Usage
Author
Contributing
Show your support
License

✅ Prerequisites

The current version of the library is compatible with Ionic 4. To use it with Ionic 3, please install v1.x.x.

⬇️ Install

Using npm

npm install --save ionic-rating

Using yarn

yarn add ionic-rating

🛠 Setup

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

import { IonicRatingModule } from 'ionic-rating';

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

Usage

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

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

Template Forms:

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

Reactive Forms:

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

API

Properties

rate: number [0-5]
readonly: boolean that controls wether editing the rating is allowed or not
resettable: boolean that controls wether the rating should reset if the same rate is selected again
size: 'small' | 'default' | 'large'

Events

hover: EventEmitter<number>, called whenever you hover on a rating value
leave: EventEmitter<number>, called whenever you stop hovering on the rating, it passes the last value you hovered on before leaving
rateChange: EventEmitter<number>, called whenever you select a rating value

Styling

ion-rating {
  --star-color: gray;
  --star-color-filled: green;
}

Author

👤 Rodaina Mohamed

Github: @RodainaMohamed

🤝 Contributing

Contributions, issues and feature requests are welcome!
Feel free to check issues page.

Show your support

Give a ⭐️ if this project helped you!

rodainahassan / ionic-rating

readme