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 {
  --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.

2.0.0 (2019-08-11)

Features

• Ionic 4 support.
• Added the ability to style the color of the stars using CSS Variables.
• Added the ability to control the size of the stars.
• Added the ability to style the layout of the stars easily.
• Added the ability to reset the rating by clicking on the same rate you selected again.

Bug Fixes

• Fixed an issue where the rating would flicker while hovering fast between stars.

Improvements

• Upgraded from Angular v5 to Angular v8.
• Better Reactive Forms support.
• Added a changelog to help keep track of changes.
• Improved the documentation in README.md.

Breaking Changes

• Ionic 3 support has been dropped in favor of Ionic 4.
• If you use Ionic 3, then you have to install the latest v1.x.x of the library.
• Component name renamed from rating to ion-rating.