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.
ngx-stars
Advanced tools
Changelog
1.6.5 (15/06/2023)
Readme
Simple stars rating component for Angular >= 2
Table of contents generated with markdown-toc
npm install --save ngx-stars
...
import { NgxStarsModule } from 'ngx-stars';
@NgModule({
...
imports: [
...
NgxStarsModule
],
...
})
maxStars
[integer] - number of stars (defaults to 5)initialStars
[float] - number of prefilled stars (defaults to 0) see next section for how to change rating at runtimereadonly
[boolean] - whether to allow editing the number of filled stars (defaults to false)size
[integer 1-5] - relative size of stars (defaults to 1)customSize
[string] - custom size for stars, e.g. '4rem' or '48px' (overrides size
if set)color
[string] - hexcode or colorname for star color (defaults to 'crimson')animation
[boolean] - whether to animate the stars until first user interaction (defaults to false)animationSpeed
[integer] - speed of animation in ms (defaults to 100)customPadding
[string] - custom padding-right
between stars, e.g. '10px'. if not set, padding defaults to a tenth of the star widthwholeStars
[boolean] - if this is true only whole star numbers are able to be selected (defaults to false)customStarIcons
[object of form { empty: string, half: string, full: string }
] - CSS URLs to alternative image files to use instead of the default stars. the half-star image must be LTR even if the rtl
option is being used - this is because the RTL logic flips the image horizontally so if an RTL image were provided it would get flipped back to LTRrtl
[boolean] - renders stars LTR if false and RTL if true (defaults to false)The component has a setRating(rating: number)
method you can use to update the stars rating at runtime.
Simply get the component in your component using @ViewChild
, then you can set and reset rating whenever you like:
export class MyComponent {
@ViewChild(NgxStarsComponent)
starsComponent: NgxStarsComponent;
...
// when you want to update the stars in code
this.starsComponent.setRating(0);
}
If you want to use the default (Font Awesome 5) star icons, there's no need to use this param, but if you want to use other icons do the following:
src/assets
folder{ empty: string, half: string, full: string }
formatngx-stars
instance. The example below assumes src/assets
contains heart-empty.svg
, heart-half.svg
and heart-full.svg
// src/app/app.component.ts
heartIcons = {
empty: '../assets/heart-empty.svg',
half: '../assets/heart-half.svg',
full: '../assets/heart-full.svg',
}
// src/app/app.component.html
<ngx-stars [readonly]="false" [size]="4" [initialStars]="2.5" [customStarIcons]="heartIcons"></ngx-stars>
ratingOutput
- provides the current rating as a float every time user changes it<div style="display: flex; align-items: center;">
<ngx-stars [readonly]="false" [size]="4" [maxStars]="5" (ratingOutput)="onRatingSet($event)"></ngx-stars>
<span style="font-weight: bold; font-size: 20px">Rating is {{ ratingDisplay }} out of 5</span>
</div>
export class MyComponent {
ratingDisplay: number;
onRatingSet(rating: number): void {
this.ratingDisplay = rating;
}
}
<ngx-stars [readonly]="true"></ngx-stars>
<ngx-stars [readonly]="true" [maxStars]="10"></ngx-stars>
<ngx-stars [readonly]="true" [maxStars]="10" [initialStars]="7.5"></ngx-stars>
<ngx-stars [readonly]="true" [color]="'dodgerblue'" [size]="2"></ngx-stars>
<ngx-stars [readonly]="true" [color]="'#FF0000'" [size]="5"></ngx-stars>
<ngx-stars [readonly]="true" [customPadding]="'1rem'" [size]="2"></ngx-stars>
export class MyComponent {
...
heartUrls = {
empty: '../assets/heart-empty.svg',
half: '../assets/heart-half.svg',
full: '../assets/heart-full.svg',
};
...
}
<ngx-stars [readonly]="true" [customStarIcons]="heartUrls"></ngx-stars>
<ngx-stars></ngx-stars>
export class MyComponent {
...
onRatingSet(rating: number): void {
console.warn(`User set rating to ${rating}`);
}
...
}
<ngx-stars (ratingOutput)="onRatingSet($event)"></ngx-stars>
<ngx-stars [animation]="true"></ngx-stars>
<ngx-stars [animation]="true" [animationSpeed]="200"></ngx-stars>
<ngx-stars [wholeStars]="true"></ngx-stars>
If you wish to develop locally and make changes to ngx-stars
, you will need to use it from source
rather than via npm install
. Because the project is an Angular library it cannot run on its own and
it will need to be wrapped within a normal Angular project. You could create a new one
or use an existing one you have locally. Let us assume this 'wrapper' project is called ngx-stars-testbed
.
/projects
at the top level of your project (same level as src
)projects/
directory and add ngx-stars
as a (git submodule)[https://git-scm.com/book/en/v2/Git-Tools-Submodules]ngx-stars-testbed
mdkir -p /path/to/ngx-stars-testbed/projects
cd /path/to/ngx-stars-testbed/projects
git submodule add https://github.com/hughjdavey/ngx-stars.git ./ngx-stars
git submodule init
git submodule update
git add .
git commit -m 'Add ngx-stars as a submodule'
NgxStarsComponent
(not NgxStarsModule
) to your app module...
import { NgxStarsComponent } from '../../projects/ngx-stars/src/lib/ngx-stars.component';
@NgModule({
declarations: [
AppComponent,
NgxStarsComponent,
],
...
export class AppModule { }
Now that you have added ngx-stars
as a submodule and imported it in your app module,
you should be able to use it in your wrapper project as if you had installed it via npm install
.
The difference now is that you will be able to edit the source code files under
<YOUR-APP>/projects/ngx-stars
. You can treat that path as a separate git repository, making changes and committing
there instead of the wrapper project.
FAQs
Simple stars rating component for Angular >= 2
The npm package ngx-stars receives a total of 1,415 weekly downloads. As such, ngx-stars popularity was classified as popular.
We found that ngx-stars demonstrated a healthy version release cadence and project activity because the last version was released less than 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.