Simple stars rating component for Angular >= 2
npm install ngx-starsSimple stars rating component for Angular >= 2
- Installation
- Usage
+ Inputs
+ Changing star rating at runtime
+ How to use custom icons
+ Outputs
- Examples
+ readonly, 5 stars, none filled
+ readonly, 10 stars, none filled
+ readonly, 10 stars, 7.5 filled
+ readonly, custom size, custom color, custom padding
+ readonly, custom icons
+ editable, 5 stars, none filled
+ editable, output function
+ editable, animation, 100 animation speed
+ editable, animation, custom animation speed
+ editable, whole stars only
- Using ngx-stars from source
+ Installing and running from source
+ Editing from source
Table of contents generated with markdown-toc
* npm install --save ngx-stars
* Edit your app.module file:
`` typescript
...
import { NgxStarsModule } from 'ngx-stars';
@NgModule({
...
imports: [
...
NgxStarsModule
],
...
})
`
##### Inputs
* 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 runtime_readonly
* [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)
##### Changing star rating at runtime
The component has a setRating(rating: number) method you can use to update the stars rating at runtime.@ViewChild
Simply get the component in your component using , then you can set and reset rating whenever you like:
`typescript
export class MyComponent {
@ViewChild(NgxStarsComponent)
starsComponent: NgxStarsComponent;
...
// when you want to update the stars in code
this.starsComponent.setRating(0);
}
`
##### How to use custom icons
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:
* Find 3 SVG files that you want to use, one for 'empty', one for 'half' and one for 'full'
* Include the files in a part of your application that will be accessible when running, e.g. the src/assets folder{ empty: string, half: string, full: string }
* Alternatively the images can be hosted elsewhere on the internet
* For each file you will need its CSS url()
* Create an object that contains all 3 urls and adheres to the formatngx-stars
* Pass the object into the 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
`
##### Outputs
* ratingOutput - provides the current rating as a float every time user changes it
`html`
Rating is {{ ratingDisplay }} out of 5
`typescript
export class MyComponent {
ratingDisplay: number;
onRatingSet(rating: number): void {
this.ratingDisplay = rating;
}
}
`
##### readonly, 5 stars, none filled
`html`
##### readonly, 10 stars, none filled
`html`
##### readonly, 10 stars, 7.5 filled
`html`
##### readonly, custom size, custom color, custom padding
`html`
##### readonly, custom icons
`typescript`
export class MyComponent {
...
heartUrls = {
empty: '../assets/heart-empty.svg',
half: '../assets/heart-half.svg',
full: '../assets/heart-full.svg',
};
...
}`html`
##### editable, 5 stars, none filled
`html`
##### editable, output function
`typescriptUser set rating to ${rating}
export class MyComponent {
...
onRatingSet(rating: number): void {
console.warn();`
}
...
}`html`
##### editable, animation, 100 animation speed
`html`
##### editable, animation, custom animation speed
`html`
##### editable, whole stars only
`html`
If you wish to develop locally and make changes to ngx-stars, you will need to use it from sourcenpm install
rather than via . Because the project is an Angular library it cannot run on its own andngx-stars-testbed
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 .
##### Installing and running from source
* Make a directory /projects at the top level of your project (same level as src)projects/
* Change to that directory and add ngx-stars as a (git submodule)[https://git-scm.com/book/en/v2/Git-Tools-Submodules]ngx-stars-testbed
* Initialize and update the submodule
* (optional) Commit the changes to `shell`
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
* Add (not NgxStarsModule) to your app module`typescript
...
import { NgxStarsComponent } from '../../projects/ngx-stars/src/lib/ngx-stars.component';
@NgModule({
declarations: [
AppComponent,
NgxStarsComponent,
],
...
export class AppModule { }
`
##### Editing from source
Now that you have added ngx-stars as a submodule and imported it in your app module,npm install
you should be able to use it in your wrapper project as if you had installed it via .
The difference now is that you will be able to edit the source code files under
there instead of the wrapper project.