https://github.com/MurhafSousli/ngx-bar-rating
Angular Bar Rating
https://github.com/MurhafSousli/ngx-bar-rating
angular bar bar-rating rate rating stars
Last synced: 15 days ago
JSON representation
Angular Bar Rating
- Host: GitHub
- URL: https://github.com/MurhafSousli/ngx-bar-rating
- Owner: MurhafSousli
- License: mit
- Created: 2017-05-10T19:49:39.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2024-10-11T00:20:55.000Z (8 months ago)
- Last Synced: 2024-10-12T08:50:38.707Z (8 months ago)
- Topics: angular, bar, bar-rating, rate, rating, stars
- Language: TypeScript
- Homepage: https://ngx-bar-rating.netlify.app/
- Size: 2.33 MB
- Stars: 215
- Watchers: 4
- Forks: 56
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-angular - ngx-bar-rating - Angular Bar Rating. (Table of contents / Third Party Components)
- fucking-awesome-angular - ngx-bar-rating - Angular Bar Rating. (Table of contents / Third Party Components)
- fucking-awesome-angular - ngx-bar-rating - Angular Bar Rating. (Table of contents / Third Party Components)
README
Angular Bar Rating
Minimal, light-weight Angular ratings.
[](https://ngx-bar-rating.netlify.app/)
[](https://stackblitz.com/edit/ngx-bar-rating)
[](https://www.npmjs.com/package/ngx-bar-rating)
[](https://github.com/MurhafSousli/ngx-bar-rating/actions/workflows/integrate.yml)[](https://codecov.io/gh/MurhafSousli/ngx-bar-rating)
[](https://www.npmjs.com/package/ngx-bar-rating)
[](https://www.npmjs.com/package/ngx-bar-rating)
[](https://bundlephobia.com/result?p=ngx-bar-rating)
[](/LICENSE)
___
If you like this plugin, please give it a star ⭐.
## Table of Contents
- [Live Demo](https://ngx-bar-rating.netlify.app/)
- [Installation](#installation)
- [Usage](#usage)
- [Options](#options)
- [Click Effect](#click-effect)
- [CSS Variables](#css-variables)
- [Themes](#themes)
- [Issues](#issues)
- [Author](#author)
## Installation
Install it with npm
```bash
npm i ngx-bar-rating
```
## Basic usage:
Import `BarRating` or `BarRatingModule` in your component imports.
```ts
@Component({
standalone: true,
selector: 'bars',
template: `
`,
styleUrl: './example.component.scss',
imports: [BarRating]
})
export class BarsComponent {
rate: number = 4;
}
```
Import the theme in your global styles (unless you want to use custom template)
```scss
@import 'ngx-bar-rating/themes/br-default-theme';
```
## Rating inputs and outputs:
| Name | Description | Default |
|------------------|----------------------------------------------------------------------|---------|
| **[rate]** | Current rating. Can be a decimal value like 3.14 | null |
| **[max]** | Maximal rating that can be given using this widget | 5 |
| **[theme]** | Theme class, see available [themes](#themes) | default |
| **[readonly]** | A flag that indicates if rating can be changed | false |
| **[showText]** | Display rating title if available, otherwise display rating value | false |
| **[required]** | A flag that indicates if rating is disabled. works only with forms | false |
| **[disabled]** | A flag that indicates if rating is disabled. works only with forms | false |
| **[titles]** | Titles array. array should represent all possible values including 0 | [] |
| **(rateChange)** | A stream that emits when the rating value is changed | |
### Custom rating template
`BarRatingModule` provides a couple of directives to set custom rating template of your choice.
- `*ratingActive`: Set template, when a bar/star is active or hovered.
- `*ratingInactive`: Set template, when a bar/star is inactive.
- `*ratingFraction`: Set template, when a bar/star is a fraction.
Here are some example:
#### Bootstrap rating example
```html
```
#### FontAwesome rating example
```html
```
#### Movie rating example
```html
```
It can be used with Angular forms:
```html
form is valid: {{ form.valid ? 'true' : 'false' }}
{{ formRating }}
```
And reactive forms:
```html
form is valid: {{ form.valid ? 'true' : 'false' }}
{{ formRating }}
```
## Click effect
To apply a scale-fade effect when a bar is clicked, simply add the `effect` directive to the `` component:
```html
```
## CSS variables
* `--br-font-size`: Defines the font size for the step element. Affects the themes: [`default`, `square`, `stars`].
* `--br-width`: Specifies the width of the step element. Affects the themes: [`stars`, `square`, `movie`, `vertical`, `horizontal`].
* `--br-height`: Specifies the height of the step element. Affects the themes: [`stars`, `square`, `movie`, `vertical`, `horizontal`].
* `--br-gap`: Sets the gap between the individual steps.
* `--br-active-color`: Defines the color for active steps.
* `--br-inactive-color`: Defines the color for inactive steps.
* `--br-effect-scale`: Specifies the scale value for the scale-fade effect (e.g., `2`).
* `--br-effect-duration`: Sets the duration of the scale-fade animation (e.g., `0.4s`).
* `--br-effect-ease`: Defines the easing function for the scale-fade animation (e.g., `ease-out`).
## Predefined themes
> If you want to use a custom rating template, you don't need to import any CSS theme.
If you want to use one of the predefined themes, you will need to import it in the global style `style.scss`
- Pure CSS stars (default) `theme="default"`
```css
@import 'ngx-bar-rating/themes/br-default-theme';
```
- Horizontal bars `theme="horizontal"`
```css
@import 'ngx-bar-rating/themes/br-horizontal-theme';
```
- Vertical bars `theme="vertical"`
```css
@import 'ngx-bar-rating/themes/br-vertical-theme';
```
- Custom stars `theme="stars"`
```css
@import 'ngx-bar-rating/themes/br-stars-theme';
```
- Movie rating `theme="movie"`
```css
@import 'ngx-bar-rating/themes/br-movie-theme';
```
- Square rating `theme="square"`
```css
@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`
## Issues
If you identify any errors in this component, or have an idea for an improvement, please open
an [issue](https://github.com/MurhafSousli/ngx-bar-rating/issues). I am excited to see what the community thinks of this
project, and I would love your input!
## Author
**Murhaf Sousli**
- [github/murhafsousli](https://github.com/MurhafSousli)
- [twitter/murhafsousli](https://twitter.com/MurhafSousli)