I leave this issue as advice, I think it would be great if there was a chance to add margin between stars, not flex spacing.

It seems that although you can change the stars, there is no working two-way-binding functionality in this library.

The following code does not work as a two-way-binding:
<star-rating-comp class="own-rating" [starType]="'svg'" [(rating)]="profileData.userRating"></star-rating-comp>

I also tried
<star-rating-comp class="own-rating" [starType]="'svg'" [(ngModel)]="profileData.userRating"></star-rating-comp>

but there seems to be a bug in star-rating.ts: Angular passes null in the beginning and the following line tries to call "toString()" on null.
this.ratingAsInteger = parseInt(this._rating.toString());
There is no check, if the value is actually a number.

Am I doing something wrong or is this actually a bug?

I used:
<star-rating-comp [rating]=h.rate [showHalfStars]='true' [readOnly]='true' [size]="'medium'">

but my half-stars are still the full-ones... any suggestions?

Hi,

is it possible to change this hard coded path : .../assets/images/***.svg ?

In my project all files placed in .../images/** folder. :) and plugin can not find svg file

• remove inlined templates
• remove inlined styles
• update bundling

For bundling I use yeoman with this Generator.

It will also fix #25, #29 and bring some structure for #14.

I've included the library and my html is

<star-rating-comp [starType]="'icon'" [hoverEnabled]="true"></star-rating-comp>

when hovering I see the hover-{1,2,3...} class however I see only empty stars

Maybe the component isn't supposed to do that?

node_modules/angular-star-rating/index.js:1
(function (exports, require, module, __filename, __dirname) { import { Component, EventEmitter, NgModule, forwardRef } from '@angular/core';
^^^^^^
SyntaxError: Unexpected token import
at createScript (vm.js:56:10)
at Object.runInThisContext (vm.js:97:10)
at Module._compile (module.js:542:28)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object. (/Users///~/src/app/app.module.ts:28:1)

npm ERR! Darwin 16.6.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "start"
npm ERR! node v6.11.1
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE

Hi, great work! 😄

I looked for an angular2 star rating system exactly like this and I only found your 1.5 version. Any chance of adding this to npm or is it still not ready?

Implement following features:

• implement value accessor
• implement model updates

e.g. the following shows only 5 of 10 stars

<star-rating-comp starType="svg" [rating]="9" [numOfStars]="10"></star-rating-comp>

(any value greater than 5 leads to a view of 5 of 10 stars)

when I provide a fromControl with the the value set (in this case 9) the output is correct.

(Tried to create an example with https://stackblitz.com to show the error but was not able to get it running)

I'm submitting a...

[x] Feature request

Is it possible to add a html tags in labels?

I'm submitting a...

[x] Documentation issue

Expected behavior

I want to have a plunkr to play with.

Implement following interactions:

• implement focuse interaction
• increment rating on key up
• decrement rating on key down
• set rating to pressen number

I'm submitting a...

[ x] Bug report  
[ ] Feature request

Current behavior

Following error is thrown when running the web application on IE 11. Application is running fine on Chrome.

Error: Syntax error
Evaluating http://localhost:62362/node_modules/angular-star-rating/dist/index.js
Evaluating http://localhost:62362/app/feeds-app/feeds-app.module.js
Evaluating http://localhost:62362/app/app.module.js
Evaluating http://localhost:62362/app/main.js
Loading my-app/main

Expected behavior

Minimal reproduction of the problem with instructions

Use the component on a web page and run it on IE 11

Environment

Windows 8.1 64 Bit

Library version: 3.0.0
Angular version: 4.0.0


Browser:

- [ ] IE 11 Version: 11.0.9600.17031

when I run command npm run lint, it throws much issues. please see the screenshot following: https://monosnap.com/file/5C4CQ0DrmnVpCC0PIEe4hQ1QYdSyS6

I am trying to use angular-star-rating v2.0.1 for my app but can't pass tslint.

/node_modules/angular-star-rating/src/star-rating-struct.ts[1, 31]: " should be '
... ... ...
/node_modules/angular-star-rating/src/star-rating-config.ts[51, 7]: comment must start with a space
/node_modules/angular-star-rating/src/star-rating-config.ts[57, 9]: Identifier 'fractionSize' is never reassigned;
... ... ...

will this be fixed soon?

I think the reason is that the tsconfig has been configured to generate ES6 code.

I'd like to set color of my stars, but there are some troubles.

According to documentation:

color - A static color for the stars

Trying to set any color(default, negative, middle, positive) like this, but nothing changed:
<star-rating-comp [color]="'positive'"></star-rating-comp>

Expected result:
Color of stars will be set and current value doesn't affect the color.

Actual result:
For 0 value - grey
For 1 value - red
For 2-3 value - yellow
For 4-5 value - green

For now, it seems to me color will be set automatically regardless 'color' property

Hello

I started using the component and I can see the html is rendering. But the rating stars are not visible. Tried playing with different styles and with no luck. Can you please help? I am attaching html that is generated for below html segment.

<star-rating-comp [rating]="2" [labelText]="activity.reviewCount" [labelPosition]="'right'">

Srinivas
output.txt

like below

<star-rating-comp [labelPosition]="'left'" [labelText]="'Rating:'" [starType]="'svg'" [rating]="3">

I would like instead of center the content to override the default
justify-content: left

and also the above label is not showing did I not place the proper css files in angular cli project ?

the file star-rating.module.ts is absent at the pack

• create utils class out of static functions
• create controller
• separate controller and component logic
• move class name logic into ctrl function

ERROR in StarRatingModule is not an NgModule

When compiling with WebPack.
Using angular-cli.
used npm to install angular-star-rating

my app.module.ts looks like this:
import { StarRatingModule } from 'angular-star-rating/src/star-rating.module';

@NgModule({
declarations: [
AppComponent, ProductTileComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
MaterialModule.forRoot(),
StarRatingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

I'm submitting a...

[ ] Bug report  
[ ] Feature request

Current behavior

'star-rating-comp' is not a known element:

Expected behavior

I follow all instruction , but when i am trying to use it gives me an error ``

Minimal reproduction of the problem with instructions

Environment

@angular/cli: 1.2.7
node: 6.10.2
os: win32 x64
@angular/animations : 4.3.4
@angular/cdk : 2.0.0-beta.8
@angular/common : 4.3.4
@angular/compiler : 4.3.4
@angular/core : 4.3.4
@angular/forms: #4.3.4
@angular/http : 4.3.4
@angular/material : 2.0.0-beta.8
@angular/platform-browser: 4.3.4
@angular/platform-browser-dynamic: 4.3.4
@angular/router : 4.3.4
@angular/cli : 1.2.7
@angular/compiler-cli : 4.3.4

Library version: X.Y.Z
Angular version: X.Y.Z


Browser:

- [ ] Chrome (desktop) version XX

Running

npm install @types/d3 --save-dev

results in:

npm WARN [email protected] requires a peer of @angular/[email protected] but none was installed.
npm WARN [email protected] requires a peer of @angular/[email protected] but none was installed.
npm WARN [email protected] requires a peer of @angular/[email protected] but none was installed.
npm WARN [email protected] requires a peer of @angular/[email protected] but none was installed.
npm ERR! Darwin 16.4.0
npm ERR! argv "/.nvm/versions/node/v7.2.1/bin/node" "/.nvm/versions/node/v7.2.1/bin/npm" "i" "angular-star-rating" "--save"
npm ERR! node v7.2.1
npm ERR! npm  v3.10.10
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn

npm ERR! [email protected] postinstall: `typings install`
npm ERR! spawn ENOENT
npm ERR! 
npm ERR! Failed at the [email protected] postinstall script 'typings install'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the angular-star-rating package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     typings install
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs angular-star-rating
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls angular-star-rating
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:

I'm submitting a...

[x] Bug report  
[ ] Feature request

Current behavior

ng serve gives error, because it is not able to find star-rating.scss in the path

@import "~css-star-rating/dist/scss/star-rating.scss";

it depends on css-star-rating which is not mentioned anywhere in the documentation,
you should add css-star-rating to dependencies,

Expected behavior

ng serve runs successfully as it finds all the required files

Minimal reproduction of the problem with instructions

1 - install angular-star-rating 3.0.4(latest) according to the documentation
2- start ng serve

Environment

Library version: 3.0.4
Angular version: 4.3.1

When running a production build (Lazy Loading/UglifyJs) with ionic the build fails:

Error: ./~/angular-star-rating/index.ts
Module build failed: TypeError: Cannot read property 'content' of undefined
    at Object.optimizationLoader (/Users/xxx/xxx/node_modules/@ionic/app-scripts/dist/webpack/optimization-loader-impl.js:14:24)
...

Seems like ionic expects (according to https://github.com/ionic-team/ionic-app-scripts/blob/master/src/webpack/optimization-loader-impl.ts) the js files to be besides the ts files.
So I copied the index.js and index.js.map into node_modules/angular-star-rating/ and all *.js and *.js.map files from dist to the src folder.

After that, lazy loading seems to work, but uglifyjs (included in ionic-cli) fails because the js files seem to be ES6 according to the tsconfig.json and uglifyjs supports only ES5 as target.
Error: Unexpected token: punc ()) in /Users/xxx/xxx/www/build/0.main.js at line 19193, col 36, pos 749043

The only workaround at the moment is to include the src-files directly in the project and to build them with the project.

But i have svg files inside images folder. I have done as per instructions.. What would the bug? i see component is there in source file only it is not rendering

I just installed this module, and when trying to compile it with Webpack (using UglifyJsPlugin plugin with minimize option), I get the following error :
ERROR in app.bundle.js from UglifyJs Unexpected token: name (StarRatingConfig) [app.bundle.js:47135,4]

When removing UglifyJsPlugin from my Webpack plugins list, everything compiles just fine.

I am disabling UglifyJsPlugin for now but I'd need it to work !

Thanks 👍

I found that in the source of angular-star-rating not have the file with name star-rating.scss, So I could not load the example.

There are only *.ts files in npm storage which is not a good practice I think. It's better to put only compiled *.js files and ignore anything else with .npmignore file.

Also, there is node_modules folder which should be ignored too.

I'm submitting a...

[X ] Bug report  
[ ] Feature request

Current behavior

Half star is not shown

Expected behavior

Show half star

Minimal reproduction of the problem with instructions

class="rating-container"
[rating]="3.5"
[starType]="'icon'"
[size]="'large'"
[showHalfStars]="true"
[disabled]="true"
>

.rating-container {
float: left;
cursor: pointer;
}

Environment

Library version: 3.0.8
Angular version: 4.2.5


Browser:

- [ x] Chrome (desktop) version 60.0.3112.113

Hi

I'm using Angular Star rating version 3.0.3. Browser Chrome.

<star-rating-comp [starType]="'svg'" [rating]="test.rating" [numOfStars]="5" [showHalfStars]="true"
[direction]="'ltr'" [labelText]="'1'">
When a page is opened I see five stars and four stars are filled. But there is no text displayed(the one I specified in [labelText].

Please advice.

I'm submitting a...

[x ] Bug report  
[ ] Feature request

Before with boostrap 3.3.7, everything ok

After upgrade to angular-star-rating 3.0.8

I use system.config.js not Webpack

Environment

Library version: X.Y.Z
Angular version: 4.4.0-RC.0


Browser:

- [ ] Chrome (desktop) version XX

I Create Factory for StarRatingConfig class like config sample and config it in module
when inject StarRatingConfig this exceute
but when change asset path not work

i check the source

in constructor of star-rating.ts when want create instance of StarRatingConfig use
config=new StarRatingConfig()
but i think must be injected !!!
please guide me
thanks

This is news to me, but apparently NPM packages aren't supposed to contain .ts files. Having them included is causing my 'ng lint' to scrub those files and yell at me for all the whitespace and doublequote issues.

How to implement functionality of selecting half star on hover or click.

I'm submitting a...

[x] Bug report  
[ ] Feature request

Current behavior

1. Click the star with readOnly="true" or disabled="true"
2. Pressing arrow keys, and it changes the star ratings.

Expected behavior

1. Click the star with readOnly="true" or disabled="true"
2. Disable the changing of star ratings using the arrow keys.

Minimal reproduction of the problem with instructions

Environment

Ionic version: 3.6.0
Angular version: 4.1.3


Browser:

- [x] Chrome (desktop) version 61.0.3163.100

hi,

maybe a dump question... But how can I define my own color?
From the documentation I see only the "predefined" ones working...

I'm submitting a...

[ x ] Bug report  
[ ] Feature request

Current behavior

The stars look very bigger than expected and they are getting multiplied (15 stars: 5 stars default * 3 svg images, empty, half and full):

Code:
<star-rating-comp [starType]="'svg'" [size]="'small'" [readOnly]="true" [showHalfStars]="true" [rating]="4.23"></star-rating-comp>

Expected behavior

The stars should appear correctly and respect rating value.

Minimal reproduction of the problem with instructions

Environment

Library version: X.Y.Z
Angular version: X.Y.Z


Browser:

- [ ] Chrome (desktop) version XX

I added angular-star-rating (2.0.1) to my project last week and had no problems running JIT or AOT. Today, my build sever is failing and pointing to the following lines in angular-star-rating:

/node_modules/angular-star-rating/src/star-rating.component.ts.StarRatingComponent.html (9,17): Supplied parameters do not match any signature of call target.
/node_modules/angular-star-rating/src/star-rating.component.ts.StarRatingComponent.html (9,17): Supplied parameters do not match any signature of call target.`

I'm looking at the changes over the last few days and don't see anything related to any of the event methods that this error message type usually refers to. Anyone on the team have an idea what this could be about?

https://github.com/BioPhoton/angular-star-rating/blob/master/src/star-rating.component.ts#L316

Hi, I have used this plugin but does not show half rating. And the second issue is how to select half rating on click function.
<star-rating-comp [starType]="'icon'" [rating]=2.6 [readOnly]="true" [showHalfStars]='true'> </star-rating-comp>