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).
The current version of the library is compatible with Ionic 4. To use it with Ionic 3, please install v1.x.x.
Using npm
npm install --save ionic-ratingUsing yarn
yarn add ionic-ratingOnce 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 {
}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>
- rate:
number[0-5] - readonly:
booleanthat controls wether editing the rating is allowed or not - resettable:
booleanthat controls wether the rating should reset if the same rate is selected again - size:
'small' | 'default' | 'large'
- 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
ion-rating {
--star-color: gray;
--star-color-filled: green;
}
👤 Rodaina Mohamed
- Github: @RodainaMohamed
Contributions, issues and feature requests are welcome!
Feel free to check issues page.
Give a ⭐️ if this project helped you!
Copyright © 2019 Rodaina Mohamed.
This project is MIT licensed.