Not filling up more than 5 stars

[Parez]

I'm submitting a...

[x] Bug report  
[ ] Feature request

Current behavior

When I make an input [rating]="some value greater than 5" [numOfStars]="10" only 5 stars are getting filled.

Expected behavior

All stars up to the value should be filled, obviously.

Minimal reproduction of the problem with instructions

Environment

Library version: 3.0.8
Angular version: 5.0.0


    
Browser:

- [x] Chrome (desktop) version XX

[BioPhoton]

Hi @Parez !
Thx for the issue! I forgot to mentions that there is a setting in the scss file...
maxNumOfStars
You can easily override this number over the scss vars and done.

I have to update the docs with this information.

I hope it helps.

best,
Michael

[visibleajay]

HI @BioPhoton,

Thanks for providing us a beautiful star rating application.

I am using star rating in my application but maximum no of stars getting selected is only 5. I have checked it by overriding the var in css-star-rating.css variable file and also by creating the same var in styles.scss file. Though I am just updating a single variable maxNumOfStars.

Any Help is Appreciated.

Regards
Ajay

[ghost]

Same problem here. Hope this can be resolved.

[BioPhoton]

Did you try to do it like this?

https://github.com/BioPhoton/angular-star-rating/wiki/Customizing-Styles

[ghost]

Did you try to do it like this?
https://github.com/BioPhoton/angular-star-rating/wiki/Customizing-Styles

Thanks for your answer @BioPhoton this is how my code looks like. I'm using Angular 5 btw

$maxNumOfStars: 10;
@import "~angular-star-rating/assets/scss/star-rating";

<star-rating-comp
    [id]="'album-rating'"
    [starType]="'svg'"
    [rating]="2.63"
    [staticColor]="'ok'"
    [hoverEnabled]="true"
    [size]="'large'"
    [step]="0.5"
    [showHalfStars]="true"
    [numOfStars]="10"
    [readOnly]="false"
    [rating]="3">
</star-rating-comp>

[BioPhoton]

Hmm, try to import from css-star-rating

[ghost]

I don't know what import you mean exactly. The scss should be loaded correctly since the stars are all displayed, only the behaviour is odd at times.

EDIT: I guess you meant your other repo BioPhoton/css-star-rating and link to the star-rating.scss there?

EDIT2: I copied the scss files to a local folder and imported them like this:

$maxNumOfStars: 10;
// @import "~angular-star-rating/assets/scss/star-rating";
@import "./star-rating/scss/star-rating";

Still the same behaviour.

[BioPhoton]

Did it work with the other import path?

[ghost]

Sadly it didn't. I edited my previous comment before with more info.

[BioPhoton]

Strange... The color override works. Will check it...
Thx for your time!

[ghost]

Thanks mate!

[gulamabbas]

Having the same issue, any updates about it?

[samuelna]

Tried the css override. Having same trouble as others. Any rating value over 5 are not fully filled to that value.

Did bit of experimenting. Went into node_modules/angular-star-rating/index.js and modified the this.numOfStars to the desired number and it worked. But don't know how to change that config in app component so the change always get overwritten when doing npm install

[todorivanov]

I'm having the same issue. It seems to be happening when using an NgFor or some iterations. If you use the component outside any iterations it works okay.

EDIT: Well, apparently sometimes the change detection doesn't go as planned and the numOfStars property is not changed properly.

[todorivanov]

@BioPhoton I've placed a Pull Request with a fix for this bug, you can check it out here
HERE

[BioPhoton]

THX @todorivanov for investing time and energy into this bug!! <3
I will give it a try on the weekend!

[todorivanov]

@BioPhoton Any news on it?

[BioPhoton]

Should be fixed in the latest version. I set the default number if start to 13.
I also created a demo, you can test it here.

More stars can be accomplished by editing the css-star-rating lib

[allout58]

Issue is still not resolved for hovering stars. css-star-rating does not mark maxNumOfStars as default, so setting the variable before importing the library does not work as expected. I have submitted a PR to css-star-rating to remedy this.