Package Exports

ang-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 (ang-rating) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Angular Rating

This project was generated with Angular CLI version 8.3.18.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Why it's better

Simple and customizable
use star rating, number rating, dropdown rating or any mat-icon we can use for rating
Responsive

Installation Usage Options Themes Issues Author

Installation

Install it with npm

npm install ang-rating

Basic usage:

Import AngRatingModule in the root module

import { AngRatingModule } from "ang-rating"

@NgModule({
  imports: [
    // ...
    AngRatingModule
  ]
})

In your template

<ang-rating [(ngModel)]="ratingThumsUp.value" [title]="ratingThumsUp.title"
[color]="ratingThumsUp.color" [type]="ratingThumsUp.type" [max]="ratingThumsUp.max" (rateChange)="onThumsUp($event)"
[min]="ratingThumsUp.min" [step]="ratingThumsUp.step" [input]="ratingThumsUp.input"></ang-rating>

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.

Number rating example

<ang-rating [(ngModel)]="ratingThumsUp.value" [title]="ratingThumsUp.title"
[color]="ratingThumsUp.color" [type]="ratingThumsUp.type" [max]="ratingThumsUp.max" (rateChange)="onThumsUp($event)"
[min]="ratingThumsUp.min" [step]="ratingThumsUp.step" [input]="ratingThumsUp.input"></ang-rating>

It can be used with typescript file pass the value to rating direcive, for example:

this.ratingThumsUp = { type: 'star', value: 30, min: 10, max: 100, step: 10, input: true, color: ['#ff0000', '#ffa500', '#ffd280', '#008000'] };

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

Author

Anil Bhandare (anil369)

ang-rating