![require(esm) Backported to Node.js 20, Paving the Way for ESM-Only Packages](https://cdn.sanity.io/images/cgdhsj6q/production/be8ab80c8efa5907bc341c6fefe9aa20d239d890-1600x1097.png?w=400&fit=max&auto=format)
Security News
require(esm) Backported to Node.js 20, Paving the Way for ESM-Only Packages
require(esm) backported to Node.js 20, easing the transition to ESM-only packages and reducing complexity for developers as Node 18 nears end-of-life.
ng2-bar-rating
Advanced tools
Minimal, light-weight Angular ratings.
THIS IS NOT THE MODULE YOU ARE LOOKING FOR! Please use https://github.com/MurhafSousli/ngx-bar-rating! This repository exists only for security awareness and training purposes to demonstrate the issue of typosquatting within the OWASP Juice Shop! Please check out https://github.com/bkimminich/juice-shop/issues/368 and https://iamakulov.com/notes/npm-malicious-packages/ for more information!
Install it with npm
npm install --save ng2-bar-rating
If you are using SystemJS, you should also adjust your configuration to point to the UMD bundle.
In your systemjs config file, map needs to tell the System loader where to look for ng2-bar-rating:
map: {
'ng2-bar-rating': 'node_modules/ng2-bar-rating/bundles/ngx-bar-rating.umd.js',
}
Here is a working plunkr | stackblitz
Import BarRatingModule
in the root module
import { BarRatingModule } from "ng2-bar-rating";
@NgModule({
imports: [
// ...
BarRatingModule
]
})
In your template
<bar-rating [(rate)]="rate" [max]="5"></bar-rating>
[rate]: Current rating. Can be a decimal value like 3.14, default undefined
.
[max]: Maximal rating that can be given using this widget, default 5
[readOnly]: A flag indicating if rating can be updated, default false
[theme]: Theme class. default default
, see available themes.
[showText]: Display rating title if set, otherwise display rating value, default false
.
[titles]: Titles array. array length should be equal to the max
value, each index represents the rating title, default []
.
[required]: A flag indicating if rating is required for form validation. default false
.
[disabled]: A flag indicating if rating is disabled. works only with forms, default false
.
(rateChange): An event fired when a user selects a new rating.
Event's payload equals to the newly selected rating.
(hover): An event fired when a user is hovering over a given rating.
Event's payload equals to the rating being hovered over.
(leave): 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.
<bar-rating [(rate)]="rate" [max]="4" [theme]="'movie'" [showText]="true"
[titles]="['Bad', 'Mediocre' , 'Good', 'Awesome']"></bar-rating>
It can be used with angular forms and reactive forms, for example:
<form #form="ngForm">
<bar-rating name="rating" [(ngModel)]="formRating" [max]="4" required disabled></bar-rating>
</form>
<p>form is valid: {{ form.valid ? 'true' : 'false' }}</p>
<pre>{{ formRating }}</pre>
Add the rating theme either in index.html
<link rel="stylesheet" href="../node_modules/ng2-bar-rating/themes/br-default-theme.css"/>
Or in the global style style.scss
(recommended)
[theme]="'default'"
@import '~ngx-bar-rating/themes/br-default-theme'
[theme]="'bootstrap'"
@import '~ngx-bar-rating/themes/br-bootstrap-theme';
[theme]="'fontawesome'"
@import '~ngx-bar-rating/themes/br-fontawesome-theme';
[theme]="'fontawesome-o'"
@import '~ngx-bar-rating/themes/br-fontawesome-o-theme';
[theme]="'horizontal'"
@import '~ngx-bar-rating/themes/br-horizontal-theme';
[theme]="'vertical'"
@import '~ngx-bar-rating/themes/br-vertical-theme';
[theme]="'stars'"
@import '~ngx-bar-rating/themes/br-stars-theme';
[theme]="'movie'"
@import '~ngx-bar-rating/themes/br-movie-theme';
[theme]="'square'"
@import '~ngx-bar-rating/themes/br-square-theme';
Rating style can be easily customized, check the classes used in any theme and add your own css.
You can also do the same for forms classes such as untouched, touched, dirty, invalid, valid ...etc
If you have a nice rating style you would like to share, prupose your theme and I will include it in the package.
If you identify any errors in this component, or have an idea for an improvement, please open an issue. I am excited to see what the community thinks of this project, and I would love your input!
Murhaf Sousli
FAQs
Angular2+ Bar Rating
The npm package ng2-bar-rating receives a total of 0 weekly downloads. As such, ng2-bar-rating popularity was classified as not popular.
We found that ng2-bar-rating demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
require(esm) backported to Node.js 20, easing the transition to ESM-only packages and reducing complexity for developers as Node 18 nears end-of-life.
Security News
PyPI now supports iOS and Android wheels, making it easier for Python developers to distribute mobile packages.
Security News
Create React App is officially deprecated due to React 19 issues and lack of maintenance—developers should switch to Vite or other modern alternatives.