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 {
  --color: gray;
  --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!

📝 License

Copyright © 2019 Rodaina Mohamed. This project is MIT licensed.