RatingComponent

Angular 5 component for all rating type(star, number, thumbs)

Install

npm install rating-component

Props

<app-rating [(ngModel)]="rating.value" [theme]="rating.theme" [title]="rating.title" [color]="rating.color" [type]="rating.type" [max]="rating.max" (rateChange)="onFaoRate($event)" [min]="rating.min" [step]="rating.step" [input]="rating.input">

Rating options (inputs):

[ngModel]: Current rating. It is required.

[type]: Type of rating that can be dropdown,number and any Mat Icon name ex. thumb_up or thumb_down, default star

[max]: Maximal rating that can be given using this widget, default 5.

[min]: Minimum rating that can be given using this widget, default 1.

[input]: Allow user to give rating(editable) otherwise it will be read only. default false.

[theme]: Theme class.theme number-block for number rating and icon-block for icon.theme is not require for dropdown rating.

[step]: step class.step that can be range of min and max.

[title]: Titles array. array length should be equal to the max value, each index represents the rating title, default [].

[format]: A format indicating if format is 'percentage' then rating value is in percentage, default is value.

(rateChange): An event fired when a user selects a new rating.

Confuguration object

rating = { type: 'star', value: 20, min: 10, max: 50, step: 10, title: 'Start Rating', input: true, color: ['#ff0000', '#ffa500', '#008000'], theme: 'icon-block' };

ISC Licensed

Author

Nikhil Hokam, Anil Bhandare