biophoton / angular-star-rating Goto Github PK
View Code? Open in Web Editor NEWStar Rating Angular Component written in typescript, based on css only techniques.
License: MIT License
Star Rating Angular Component written in typescript, based on css only techniques.
License: MIT License
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 ?
[x] Bug report
[ ] Feature request
Ionic version: 3.6.0
Angular version: 4.1.3
Browser:
- [x] Chrome (desktop) version 61.0.3163.100
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 ๐
Implement following features:
hi,
maybe a dump question... But how can I define my own color?
From the documentation I see only the "predefined" ones working...
[x] Bug report
[ ] Feature request
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,
ng serve runs successfully as it finds all the required files
1 - install angular-star-rating 3.0.4(latest) according to the documentation
2- start ng serve
Library version: 3.0.4
Angular version: 4.3.1
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.
[X ] Bug report
[ ] Feature request
Half star is not shown
Show half star
class="rating-container"
[rating]="3.5"
[starType]="'icon'"
[size]="'large'"
[showHalfStars]="true"
[disabled]="true"
>
.rating-container {
float: left;
cursor: pointer;
}
Library version: 3.0.8
Angular version: 4.2.5
Browser:
- [ x] Chrome (desktop) version 60.0.3112.113
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
I think the reason is that the tsconfig has been configured to generate ES6 code.
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.
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:
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)
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.
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?
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
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 { }
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.
[ x] Bug report
[ ] Feature request
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
Use the component on a web page and run it on IE 11
Windows 8.1 64 Bit
Library version: 3.0.0
Angular version: 4.0.0
Browser:
- [ ] IE 11 Version: 11.0.9600.17031
[ ] Bug report
[ ] Feature request
'star-rating-comp' is not a known element:
I follow all instruction , but when i am trying to use it gives me an error ``
@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
the file star-rating.module.ts is absent at the pack
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.
when I run command npm run lint
, it throws much issues. please see the screenshot following: https://monosnap.com/file/5C4CQ0DrmnVpCC0PIEe4hQ1QYdSyS6
How to implement functionality of selecting half star on hover or click.
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.
[ x ] Bug report
[ ] Feature request
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>
The stars should appear correctly and respect rating value.
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?
[x] Documentation issue
I want to have a plunkr to play with.
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?
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
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
Implement following interactions:
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?
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
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?
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
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>
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.