ang-rating
    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

    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)

    Install

    npm i ang-rating

    DownloadsWeekly Downloads

    34

    Version

    0.0.7

    License

    none

    Unpacked Size

    121 kB

    Total Files

    23

    Last publish

    Collaborators

    • avatar