ez-ag-rating
v1.0.1
Published
Customizable rating component for web application. This library uses font awesome 4.7.0 icons.
Downloads
2
Maintainers
Readme
ez-ag-rating
Custom component library to create a rating UI in angular
Installation
npm i ez-ag-rating --save
Importing ez-ag-rating
import { AgRatingModule } from 'ez-ag-rating';
Usage Guide
Selector: ag-rating
Available properties:
- maxRating - set total number of icon to use in rating (default is 5)
- currentRating - set current rating value (default is zero)
- icon - set the font awesome icon to be used in rating (default is 'fa fa-star')
Example
- Setting totoal number of icon to be used in rating :
<ag-rating [maxRating]="10"></ag-rating>
- Setting current rating value to 4 out of 5 (default maxRating is 5) :
<ag-rating [currentRating]="4"></ag-rating>
- Setting current rating value to 9 out of 10 :
<ag-rating [currentRating]="9" [maxRating]="10"></ag-rating>
- Use fontawesome smile icon with current rating value to 2 out of 3 :
<ag-rating [currentRating]="2" [maxRating]="3" icon="fa fa-smile-o"></ag-rating>
- Implement method to determine selected value where the executeRateMethod is a method in your component :
<ag-rating (agRatingChange)="executeRateMethod($event)"></ag-rating>
.
.
.
export class AppComponent {
...
executeRateMethod(value: any) {
console.log("AG Rate : ", value);
}
...
}