TypeScript icon, indicating that this package has built-in type declarations

    0.0.7 • Public • Published

    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

    Table of Contents

    Installation Usage Options Themes Issues Author


    Install it with npm

    npm install ang-rating

    Basic usage:

    Import AngRatingModule in the root module

    import { AngRatingModule } from "ang-rating"

      imports: [
        // ...

    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'] };


    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.


    Anil Bhandare (anil369)


    npm i ang-rating

    DownloadsWeekly Downloads






    Unpacked Size

    121 kB

    Total Files


    Last publish


    • avatar