Showing posts with label ngx-bar-rating. Show all posts
Showing posts with label ngx-bar-rating. Show all posts
<img src="" height="250" width="250"></img> <br> ngx-bar-rating


October 23, 2017
Minimal, light-weight Angular ratings.



Install it with npm
 npm install --save ngx-bar-rating  


If you are using SystemJS, you should also adjust your configuration to point to the UMD bundle.
In your systemjs config file, map needs to tell the System loader where to look for ngx-bar-rating:
 map: {  
  'ngx-bar-rating': 'node_modules/ngx-bar-rating/bundles/ngx-bar-rating.umd.js',  
Here is a working plunkr

Basic usage:

Import BarRatingModule in the root module
 import { BarRatingModule } from "ngx-bar-rating";  
  imports: [  
   // ...  
In your template
 <bar-rating [(rate)]="rate" [max]="5"></bar-rating>  

Rating options (inputs):

Movie rating example

 <bar-rating [(rate)]="rate" [max]="4" [theme]="'movie'" [showText]="true"  
  [titles]="['Bad', 'Mediocre' , 'Good', 'Awesome']"></bar-rating>  
It can be used with angular forms and reactive forms, for example:
 <form #form="ngForm">  
  <bar-rating name="rating" [(ngModel)]="formRating" [max]="4" required disabled></bar-rating>  
 <p>form is valid: {{ form.valid ? 'true' : 'false' }}</p>  
 <pre>{{ formRating }}</pre>  

Predefined themes

Add the rating theme either in index.html
 <link rel="stylesheet" href="../node_modules/ngx-bar-rating/themes/br-default-theme.css"/> 
Or in the global style style.scss (recommended)
  • Pure css stars (default) [theme]="'default'"
 @import '~ngx-bar-rating/themes/br-default-theme' 
  • Bootstrap stars [theme]="'bootstrap'"
 @import '~ngx-bar-rating/themes/br-bootstrap-theme';  
  • Fontawesome stars [theme]="'fontawesome'"
 @import '~ngx-bar-rating/themes/br-fontawesome-theme';  
  • Fontawesome-o stars [theme]="'fontawesome-o'"
 @import '~ngx-bar-rating/themes/br-fontawesome-o-theme';  
  • Horizontal bars [theme]="'horizontal'"
 @import '~ngx-bar-rating/themes/br-horizontal-theme';  
  • Vertical bars [theme]="'vertical'"
 @import '~ngx-bar-rating/themes/br-vertical-theme';  
  • Custom stars [theme]="'stars'"
 @import '~ngx-bar-rating/themes/br-stars-theme';  
  • Movie rating [theme]="'movie'"
 @import '~ngx-bar-rating/themes/br-movie-theme';  
  • Square rating [theme]="'square'"
 @import '~ngx-bar-rating/themes/br-square-theme';  
Rating style can be easily customized, check the classes used in any theme and add your own css.
You can also do the same for forms classes such as untouched, touched, dirty, invalid, valid ...etc
If you have a nice rating style you would like to share, prupose your theme and I will include it in the package.
Note: Special thanks to Murhaf Sousli
Disclaimer: The blog is created to share angular directives information to geek, curious Angular Developers.