Home

Awesome

<p align="center"> <img height="150px" width="150px" style="text-align: center;" src="https://cdn.rawgit.com/MurhafSousli/ngx-bar-rating/af32c04d/assets/logo.svg"> <h1 align="center">Angular Bar Rating</h1> <p align="center">Minimal, light-weight Angular ratings.</p> </p>

npm npm npm npm


If you like this plugin, please give it a star ⭐.

Table of Contents

<a name="installation"/>

Installation

Install it with npm

npm i ngx-bar-rating
<a name="usage"/>

Basic usage:

Import BarRating or BarRatingModule in your component imports.

@Component({
  standalone: true,
  selector: 'bars',
  template: `
    <bar-rating [(rate)]="rate"/>
  `,
  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)

@import 'ngx-bar-rating/themes/br-default-theme';
<a name="options"/>

Rating inputs and outputs:

NameDescriptionDefault
[rate]Current rating. Can be a decimal value like 3.14null
[max]Maximal rating that can be given using this widget5
[theme]Theme class, see available themesdefault
[readonly]A flag that indicates if rating can be changedfalse
[showText]Display rating title if available, otherwise display rating valuefalse
[required]A flag that indicates if rating is disabled. works only with formsfalse
[disabled]A flag that indicates if rating is disabled. works only with formsfalse
[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.

Here are some example:

Bootstrap rating example

<bar-rating [(rate)]="rate" max="5">
  <i *ratingActive class="bi bi-star-fill" style="margin: 2px; color: #edb867"></i>
  <i *ratingInactive class="bi bi-star-fill" style="margin: 2px; color: #d2d2d2"></i>
</bar-rating>

FontAwesome rating example

<bar-rating [(rate)]="rate" max="10">
  <fa-icon *ratingInactive [icon]="['far', 'star']" [fixedWidth]="true" size="lg" style="color: #d2d2d2"/>
  <fa-icon *ratingActive [icon]="['fas', 'star']" [fixedWidth]="true" size="lg" style="color: #50e3c2"/>
  <fa-icon *ratingFraction [icon]="['fas', 'star-half-alt']" [fixedWidth]="true" size="lg" style="color: #50e3c2"/>
</bar-rating>

Movie rating example

<bar-rating [(rate)]="rate" max="4" theme="movie" showText
            [titles]="['Bad', 'Mediocre' , 'Good', 'Awesome']"/>

It can be used with Angular forms:

<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>

And reactive forms:

<form [formGroup]="ratingForm">
  <bar-rating formControlName="rate" [max]="4" required disabled></bar-rating>
</form>
<p>form is valid: {{ form.valid ? 'true' : 'false' }}</p>
<pre>{{ formRating }}</pre>

CSS variables

<a name="themes"/>

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

@import 'ngx-bar-rating/themes/br-default-theme';
@import 'ngx-bar-rating/themes/br-horizontal-theme';
@import 'ngx-bar-rating/themes/br-vertical-theme';
@import 'ngx-bar-rating/themes/br-stars-theme';
@import 'ngx-bar-rating/themes/br-movie-theme';
@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

<a name="issues"/>

Issues

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!

<a name="author"/>

Author

Murhaf Sousli