murhafsousli / ngx-bar-rating Goto Github PK
View Code? Open in Web Editor NEWAngular Bar Rating
Home Page: https://ngx-bar-rating.netlify.app/
License: MIT License
Angular Bar Rating
Home Page: https://ngx-bar-rating.netlify.app/
License: MIT License
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?
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
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.
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:
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 !
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.
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>
and in .ts file I've used
public rate: number = 0;
Thanks
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
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?
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
Support for Angular 11 projects.
ngx-bar-rating: 2.0.0
Very useful project, thank you!
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 {
~~~~~~~~~~~
Hi just wondering whether the component able to allow caller to customize its size. thanks.
I have implemented everything as mentioned in the readme but nothing is visible. It leaves empty space instead of stars.
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.
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]
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 !!!
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.
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?
How could i do that oly stars that user will click should be choosen.
thank you
ngx-bar-rating:
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.
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.
Can you add half star or fraction of rating as some parameter like [half]="true".
Should at least display something
No output to browser
Add this to the view
<bar-rating [rate]=5 [max]="5">
@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",
No errors in browser console
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:
I have added it in app.module.ts and imports section, any small help?
Sorry for my english.
<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 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
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.
It is not nice to have to import themes in the global scope (styles.scss or index.html).
Hi, how to display fractional star ratings. it's not working by give it decimal value.
thanks
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 }
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:
ngx-bar-rating/src/component/bar-rating.component.scss
Lines 5 to 8 in 53af77e
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>
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.
Hi, Thanks for useful angular module,
[showText] option => when null, must not be show to user but now showed NaN text
Please assign a draggable pointer, and let user define hover mode or dragging mode is needed
Add class with max selected or hovered item like br-5unit-selected when we selected 5 items
[Rate] option decimal value shown on bar item
I am facing this issue "Property 'rate' does not exist" Angular 9
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)
anyone was able to use it with angular 8 ? i need help thank you
We are not able to customize for number rating and mat Icon
Can we define a custom template for ratings for example, can I define my own stars for rating?
If we pass value 0 to the input, print value 1
When I change max
variable dynamically, star on UI is not updating,
but hovering over the star, it updates.
plnkr
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 ", 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\n\n \n\n\n\n{{ nextRate | rateTitle: titles}}\n
It doesn't work in Angular 10
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.