JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 196
  • Score
    100M100P100Q83314F
  • License MIT

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

Package Exports

  • ionic-rating

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ionic-rating) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

ionic-rating

Documentation Maintenance License: MIT

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

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

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