NgStar

This Angular library generates stars for rating provided with properties to control every aspect of generated star.

Supported Feature / Updates:

1. Star ratings with decimal support (upto one precision).
2. Selected star color and unselected star color can be controlled as per your need.
3. Star size can be controlled as per your need.
4. Total stars can be controlled as per your need.

To use this library:

1. Npm install ng-star
2. In angular component wherever you want to use it, import this component and then <lib-ng-star [rating]="7.5" [selectedColor]="'blue'" [unselectedColor]="'black'" [starSize]="30" [totalStars]="10"></lib-ng-star> 7.5 stars with blue color and remaining 2.5 stars with black color will be generated where each star will have size of 30 px.

Published On NPM 'https://www.npmjs.com/package/ng-star'

This Angular library generates stars for rating provided with properties to control every aspect of generated star.

Ng Star

This Angular library generates stars for rating provided with properties to control every aspect of generated star.
Explore the docs »

Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Usage
4. Contributing
5. License
6. Contact

About The Project

ng-star

This Angular library generates stars for rating provided with properties to control every aspect of generated star.

Built With

• Angular 9
• Css
• Bootstrap 4

Getting Started

To get a local copy up and running follow these simple steps.

Prerequisites

1. I have used boostrap 4 and font awesome cdn , so make sure you are connected to internet or boostrap and fontawesome are exported for use.

Installation

1. install package from npmjs

   npm install ng-star

Usage

example = <lib-ng-star [rating]="7.5" [selectedColor]="'blue'" [unselectedColor]="'black'" [starSize]="30" [totalStars]="10"></lib-ng-star>

For the stars to generate correctly, import font awesome and boostrap in your project or connect to internet: You can use these properties to control how your stars will appear.

1. [rating] = "number" This is used to provide rating to the component. Precision of upto 1 point after decimal is supported.(default 0)
2. [selectedColor]="'blue'" This is used to provide color to selected stars(in this ex blue).(default yellow)
3. [unselectedColor]="'black'" This is used to provide color to unselected stars(in this ex black).(default white)
4. [starSize]="number" This is used to provide size of each star in px(default 30px).
5. [totalStars]="number" This is used to provide total number of stars(default 5).

Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Abhishek Kumar - Email

Project Link: https://github.com/sami-colon/ng-star

sample images