Hello Murhaf!!!
Thank you for sharing of your mat-rating bar.
I just have one question - it is written that option [rate] can take decimal values like 3.14.. etc. I'm trying to use this option with stars theme but unfortunately only whole stars appear without any half parts. Could you please advise how it's possible to use [rate] option and get partly filled stars?
Thank you !!!

Hi, how to display fractional star ratings. it's not working by give it decimal value.
thanks

Hi just wondering whether the component able to allow caller to customize its size. thanks.

We are not able to customize for number rating and mat Icon

It'd be really nice feature if you could somewhat specify step you want user to input.
<bar-rating [(rate)]="rate" [max]="5" [step]="0.5"></bar-rating>
And user would be able to select halfstars.

Hi, Thanks for useful angular module,

1. [showText] option => when null, must not be show to user but now showed NaN text

2. Please assign a draggable pointer, and let user define hover mode or dragging mode is needed
   

3. Add class with max selected or hovered item like br-5unit-selected when we selected 5 items

4. [Rate] option decimal value shown on bar item

Nice control!
Took awhile for me to understand how to get font awesome 4.7.2 to work with it and wrote a new CSS file for it.

But my final issue is with form validation using reactive form and Angular 6.1.10. When I select the rating it triggers the form to be valid when it's not. I looked at the source last Friday to see if I could isolate it but wasn't able to. Triple checked my form validation code as well.

Maybe you can look into this. I would post code but I don't think that will help at the moment unless you ask.

Fraction works with values with fraction > 0.5 such as 3.65
Given a value of 3.2 will result into 4 stars instead of 3

 /** current code */
fraction= (index + 1 === Math.round(nextValue) && nextValue % 1) >= 0.5

Hello,

thanks for the great component, i am new to Angular so i am not sure if this is really an issue or a question how it can be done.

i have a page which has several items which need rating (list of items), what i do:

1. loop through the items with *ngfor
2. i link the inital rating coming from the model (DB) to the bar rating item:
   <bar-rating [(rate)]="item.rate" [max]="5" (rateChange)="changeRate($event, item.rate, item.id)">
3. in the function changeRate, i check if the client already voted (using a cookie).
4. if he already voted i will not count his vote, and the stars should show the intial rating
5. if it is a new vote, i calculate the new rate and apply it.

Point 4 is the tricky one, it seems that upon click, stars (and hence the model) is already updated.

is there away to catch the event before stars are updated and decide if the update shall proceed or not?
or get the previous rating value alongside the current value

or maybe it is simply i am ignorant and doing it wrongly.

Thanks again for the great component

Hi,
Ratings provided in decimals wont work. It gets only the integral part of a number e.g 3.5 will be shown as 3 stars not 3 and half star

Hi,

i'm trying to use this nice package, but coundn't get it working. Unforunately i don't get an error, the "stars" just don't show up. I followed your setup (installing with npm, adding to import modules, copy code to my component). What can i do to identify the error or get it working?

Kind regards,
Steffi

Hi,

I've bar rating in my component and I've have a list of bar-rating in my component. selecting one bar rating selects all other bar rating automatically. need solution for this. my code is
template: <div class="row m-1 p-2" *ngFor="let item of detailItems; let index">

    </div>
  </div>

Using browser-only version of superagent in non-browser environment
/ngx-bar-rating/component/bar-rating.component.js:1
(function (exports, require, module, __filename, __dirname) { import { Component, Input, Output, ChangeDetectionStrategy, EventEmitter, forwardRef, ChangeDetectorRef } from '@angular/core';
^^^^^^

SyntaxError: Unexpected token import
at createScript (vm.js:80:10)
at Object.runInThisContext (vm.js:139:10)
at Module._compile (module.js:607:28)
at Object.Module._extensions..js (module.js:654:10)
at Module.load (module.js:556:32)
at tryModuleLoad (module.js:499:12)
at Function.Module._load (module.js:491:3)
at Module.require (module.js:587:17)
at require (internal/module.js:11:18)
at Object.ngx-bar-rating/component/bar-rating.component (/dist/server/main.js:11199:18)

Hello,
I want to use your ngx-bar-rating with font awesome. So I tried to add this as you wrote in readme, but this doesn't working correctly. Bar Rating component appears, and works I mean I can click on this and get value, but there is no icons on bar.

I added in styles.scss this:
@import '~ngx-bar-rating/themes/br-fontawesome-theme';

Next in my component I have this:
<bar-rating name="rating" [theme]="'fontawesome'" [formControl]="form.controls['rate']" [max]="3" required></bar-rating>

When I run this I receive something like this:
screen

In dev console all styles looks ok for me:
screens from console

Do you have any idea what's happening?

This is a feature request.

I would like to see a Material Icons theme in this lovely package. :)

It would be nice to use with Angular Material.

I am facing this issue "Property 'rate' does not exist" Angular 9

It works with force option:

npm i ngx-bar-rating --force

But need update for proper way. I guess it's not hard work due to error:

npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@"^10.1.3" from [email protected]

It doesn't work in Angular 10

Hi !

I come across an issue.
I have integrated your bar-rating component in the header of an angular tab-group.

But you have this code:

private handleClick(e, value) {
/** (NOT TESTED) Remove 300ms click delay on touch devices */
e.preventDefault();
e.stopPropagation();
this.update(value + 1);
}

The e.stopPropagation seems to prevent me of switching tab by clicking on the header, where your component catches the click.

What do you think ?

Thanks in advance.

How could i do that oly stars that user will click should be choosen.
thank you

• Feature Request

Description

What is the use-case or motivation for the new feature?

Which versions are you using for the following packages?

ngx-bar-rating:

Is there anything else we should know?

I've been trying to make this plugin work with NativeScript+Angular, since it's Angular compatible and only adds UI features, but had no success. Has anyone had success integrating ngx-bar-rating and NativeScript? Any help would be apreciated.

Can we define a custom template for ratings for example, can I define my own stars for rating?

Can you add half star or fraction of rating as some parameter like [half]="true".

I need to show the rating as read only so the user can't change the value. I set [readOnly]="true" but the component just showed gray stars. I guess when the component initializes on readOnly, it won't update to show the initial value and then lock. I changed the source and got lucky I guess, and disabled the click event if readOnly and removed another readOnly condition somewhere else. So now it's working the way I would like it.

I still haven't figured out that form validation problem yet.

<bar-rating name="rating" id="rating" [(rate)]="faRate" [theme]="'fontawesome'" [(ngModel)]="model.Rating" [max]="5" [readOnly]="true" >

bar-rating.component.js

import { Component, Input, Output, ChangeDetectionStrategy, EventEmitter, forwardRef, ChangeDetectorRef } from '@angular/core';
import { NG_VALIDATORS, NG_VALUE_ACCESSOR } from '@angular/forms';
/** This allows support [(ngModel)] and ngControl. */
var RATING_VALUE_ACCESSOR = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(function () { return BarRatingComponent; }),
    multi: true
};
/** This allows control required validation. */
var RATING_VALUE_VALIDATOR = {
    provide: NG_VALIDATORS,
    useExisting: forwardRef(function () { return BarRatingComponent; }),
    multi: true,
};
var BarRatingComponent = (function () {
    function BarRatingComponent(changeDetectorRef) {
        this.changeDetectorRef = changeDetectorRef;
        this.contexts = [];
        /** Maximal rating that can be given using this widget. */
        this.max = 5;
        /** A flag indicating if rating can be updated. */
        this.readOnly = false;
        /** Set the theme */
        this.theme = 'default';
        /** Show rating title */
        this.showText = false;
        /** Replace rate value with a title */
        this.titles = [];
        /** A flag indicating if rating is required for form validation. */
        this.required = false;
        /** An event fired when a user is hovering over a given rating.
         * Event's payload equals to the rating being hovered over. */
        this.hover = new EventEmitter();
        /** An event fired when a user stops hovering over a given rating.
         * Event's payload equals to the rating of the last item being hovered over. */
        this.leave = new EventEmitter();
        /** An event fired when a user selects a new rating.
         * Event's payload equals to the newly selected rating. */
        this.rateChange = new EventEmitter(true);
        this.onChange = function (_) { };
        this.onTouched = function () { };
    }
    BarRatingComponent.prototype.ngOnChanges = function (changes) {
        if (changes['rate']) {
            this.update(this.rate);
        }
    };
    BarRatingComponent.prototype.ngOnInit = function () {
        var _this = this;
        this.contexts = Array.from({ length: this.max }, function (context, i) {
            return ({
                selected: false,
                fraction: false,
                click: function (e) { return _this.handleClick(e, i + 1); },
                enter: function () { return _this.handleEnter(i + 1); }
            });
        });
        this.updateState(this.rate);
    };
    BarRatingComponent.prototype.update = function (newRate, internalChange) {
        if (internalChange === void 0) { internalChange = true; }
        if (!this.disabled && this.rate !== newRate) {
            this.rate = newRate;
            this.rateChange.emit(this.rate);
        }
        if (internalChange) {
            this.onChange(this.rate);
            this.onTouched();
        }
        this.updateState(this.rate);
    };
    /** Reset rate value */
    BarRatingComponent.prototype.reset = function () {
        this.leave.emit(this.nextRate);
        this.updateState(this.rate);
    };
    BarRatingComponent.prototype.updateState = function (nextValue) {
        var _this = this;
        /** Set rate value as text */
        this.nextRate = nextValue - 1;
        /** Set the rating */
        this.contexts = Array.from({ length: this.max }, function (context, index) {           
            return ({
                selected: index + 1 <= nextValue,
                fraction: (index + 1 === Math.round(nextValue) && nextValue % 1) >= 0.5,
                click: function (e) { return _this.handleClick(e, index); },
                enter: function () { return _this.handleEnter(index); }
            });                        
        });
    };
    BarRatingComponent.prototype.handleClick = function (e, value) {
        /** (NOT TESTED) Remove 300ms click delay on touch devices */
        if (!this.readOnly) {
            e.preventDefault();
            e.stopPropagation();
            this.update(value + 1);  
        }              
    };
    BarRatingComponent.prototype.handleEnter = function (index) {
        if (!this.disabled && !this.readOnly) {
            /** Add selected class for rating hover */
            this.contexts.map(function (context, i) {
                context.active = i <= index;
                context.fraction = false;
                context.selected = false;
            });
            this.nextRate = index;
            this.hover.emit(index);
        }
    };
    /** This is the initial value set to the component */
    BarRatingComponent.prototype.writeValue = function (value) {
        this.update(value, false);
        this.changeDetectorRef.markForCheck();
    };
    BarRatingComponent.prototype.validate = function (c) {
        return (this.required && !c.value) ? { required: true } : null;
    };
    BarRatingComponent.prototype.registerOnChange = function (fn) {
        this.onChange = fn;
    };
    BarRatingComponent.prototype.registerOnTouched = function (fn) {
        this.onTouched = fn;
    };
    BarRatingComponent.prototype.setDisabledState = function (isDisabled) {
        this.disabled = isDisabled;
    };
    return BarRatingComponent;
}());
export { BarRatingComponent };
BarRatingComponent.decorators = [
    {
        type: Component, args: [{
            selector: 'bar-rating',
            template: "\n    
\n\n      
\n\n        
\n\n      
\n\n      
{{ nextRate | rateTitle: titles}}
\n    
\n  ",
            styles: ["\n    *{box-sizing:border-box}.br{position:relative;margin:15px 0}.br-units{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.br-unit{cursor:pointer;-webkit-font-smoothing:antialiased;text-rendering:auto}.br-disabled .br-unit,.br-readonly .br-unit{cursor:default}\n  "],
            providers: [RATING_VALUE_ACCESSOR, RATING_VALUE_VALIDATOR],
            changeDetection: ChangeDetectionStrategy.OnPush
        },]
    },
];
/** @nocollapse */
BarRatingComponent.ctorParameters = function () {
    return [
        { type: ChangeDetectorRef, },
    ];
};
BarRatingComponent.propDecorators = {
    'rate': [{ type: Input },],
    'max': [{ type: Input },],
    'readOnly': [{ type: Input },],
    'theme': [{ type: Input },],
    'showText': [{ type: Input },],
    'titles': [{ type: Input },],
    'required': [{ type: Input },],
    'hover': [{ type: Output },],
    'leave': [{ type: Output },],
    'rateChange': [{ type: Output },],
};
//# sourceMappingURL=bar-rating.component.js.map

I am working on a rating section where I want ratings out of five. I want float values to be select from stars and show half star for 0.5.
Is it possible with this plug in, If it is possible then tell me the solution.

it's only show half and full star rating. it's not able to show 3.7 or 4.2 something rating in star.

I have used 'fontawesome-o' also.

@import '~ngx-bar-rating/themes/br-fontawesome-o-theme';

[theme]="'fontawesome-o'"

is there any way to show that value?

run on Angular 10

I am submitting a

• Feature Request

Description

Getting this error because the ngx-bar-rating uses angular 10.
Using npm install --legacy-peer-deps works fine. But of course would be nice to just have this up to date :)

npm ERR! Found: @angular/[email protected]
npm ERR! node_modules/@angular/common
npm ERR!   @angular/common@"^11.0.4" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@"^10.1.3" from [email protected]
npm ERR! node_modules/ngx-bar-rating
npm ERR!   ngx-bar-rating@"^2.0.0" from the root project

What is the use-case or motivation for the new feature?

Support for Angular 11 projects.

Which versions are you using for the following packages?

ngx-bar-rating: 2.0.0

Is there anything else we should know?

Very useful project, thank you!

I have implemented everything as mentioned in the readme but nothing is visible. It leaves empty space instead of stars.

I am using your rating bar on my website
is there any way I could change the min from 1 to 0.
I feel that it is an important feature not only for me.
it does not work for me that the user will leave the bar empty- because my bar is in a form & the form will only be valid when all the fields are valid- touched.
thank you

Hi,
I am using ngx-bar-rating square theme.But somehow Default class is getting created because of which square with star is showing up .

     <ng-template ngbPanelContent>
                            <div class=".col-xs">
                                <nb-card class=".col-xs" class=".space">
                                    <nb-card-body>
                                        <table style="width: 80%;">
                                            <tbody>
                                                <tr *ngFor="let f of feedback" class="question">
                                                    <td>{{f.questions}}</td>
                                                    <td><bar-rating [rate]="f.rating" [max]="5" class="br br-square" [readOnly]="true" style="float: right;"></bar-rating></td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </nb-card-body>
                                </nb-card>
                            </div>
                        </ng-template>

Hi, I have followed the README file to install it, but when show it
through the HTML file it give me an error:
`'bar-rating' is not a known element:

1. If 'bar-rating' is an Angular component, then verify that it is part of this module.
2. If 'bar-rating' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.ng`

I have added it in app.module.ts and imports section, any small help?
Sorry for my english.

Hey, I've created by own theme, but there is a margin of 15px above and below the rating element. I saw that it's defined here:

It is not nice to have to import themes in the global scope (styles.scss or index.html).

If we pass value 0 to the input, print value 1

This took me hours to figure out, because Font-Awesome changed the way they use CSS. But on version 4.7.2, the last free version using solid, brand and regular, the provided examples didn't work. I created 4 of these to represent different sizes just like fa-2x, fa-4x, in which below is the large size. I renamed it scss so I can use it in my Angular 6.1.10 project but I haven't any variables yet. Still being tested but works fine.
The problem was with the font family name and :after not rendering anything. I changed it to :before

Just wanted to contribute in case someone else has the problem. So It's not an issue.

br-fontawesome-4X.scss

.br-fontawesome .br-units {
    align-items: center
}

.br-fontawesome .br-unit {
    font: normal normal normal 60px/1 FontAwesome;
    font-family: 'Font Awesome 5 Free';    
    font-size: 4rem;
    font-weight: 900;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    text-decoration: none;
    margin-right: 2px
}

.br-fontawesome .br-unit:before {
    content: '\f005';
    color: #d2d2d2
}

.br-fontawesome .br-selected:before {
    font-family: 'Font Awesome 5 Free';
    color: #ffdf00
}

.br-fontawesome .br-active:before {
    color: #ffdf00
}

<bar-rating [(rate)]="cssRate" [rate]="4.5" [wholeStars]="true" [readOnly]="true" [max]="5">

this works corrently, but not paint half star. can you check please

I wonder can i have on same page two different instances and with different CSS , i would use one just to read only and other in modal windows to rate. Thank you.

anyone was able to use it with angular 8 ? i need help thank you

Currently CSS stars do not support half-star hating, it can be easly done with a overflow: hidden wrapper and some absolute positioning to "crop" the yellow star in the half.

Is there a way to display the star ratings on multiple lines?

For example, if I have a rating system out of 10, is there a way to display the bar as 2 rows of 5?

It's good to be a difference between filling stars by 5.1 and 5.8.
I mean the 5.8 should fill the last star by 80% and 5.1 should fill the last star by 10%

run on Angular 9.1.0

Error: Failed to compile entry-point ngx-bar-rating (module as esm5) due to compilation errors:
node_modules/@angular/common/common.d.ts:115:22 - error NG6002: Appears in the NgModule.imports of BarRatingModule, but could not be resolved to an NgModule class.

This likely means that the library (@angular/common) which declares CommonModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

115 export declare class CommonModule {
                         ~~~~~~~~~~~~
node_modules/@angular/forms/forms.d.ts:2699:22 - error NG6002: Appears in the NgModule.imports of BarRatingModule, but could not be resolved to an NgModule class.

This likely means that the library (@angular/forms) which declares FormsModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

2699 export declare class FormsModule {
                          ~~~~~~~~~~~

When I change max variable dynamically, star on UI is not updating,

but hovering over the star, it updates.
plnkr

I am submitting a

• Bug Report

What is the expected behavior?

Should at least display something

What is the current behavior?

No output to browser

What are the steps to reproduce?

• npm i ngx-bar-rating
  Add 'BarRatingModule' to root module imports

Add this to the view
<bar-rating [rate]=5 [max]="5">

What is the use-case or motivation for changing an existing behavior?

Which versions are you using for the following packages?

@angular-devkit/architect 0.900.7
@angular-devkit/build-angular 0.1001.7
@angular-devkit/core 9.0.7
@angular-devkit/schematics 10.2.3
@angular/cdk 10.2.7
@angular/cli 10.2.3
@angular/fire 5.4.2
@angular/material 10.2.7
@schematics/angular 10.2.3
@schematics/update 0.1002.3
rxjs 6.6.6
typescript 4.0.7
"ngx-bar-rating": "^2.0.0",

Is there anything else we should know?

No errors in browser console