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