Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
ng2-bar-rating
Advanced tools
Readme
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 6 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
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.