Rating

Stackblitz Demo

Install

``
npm i ng-rating-bar
`

Import

`
import { NgRatingBarModule } from 'ng-rating-bar';

@NgModule({
declarations: [...],
imports: [
BrowserModule,
NgRatingBarModule
]
})
`

Simple usage


`
[(value)]="value"
[ratingCount]="10"
>
Value is {{ value }}
`

Properties

| Name | Type | Required | Default |
| ------------- | ------------- | ------------- | ------------- |
| value | number | Required | 0 |
| ratingCount | number | Required | 5 |
| disabled | boolean | Optional | false |
| resetAble | boolean | Optional | false |
| colorActive | string | Optional | #edb867 |
| colorDefault | string | Optional | #d2d2d2 |
| styles | Object | Optional | { fontSize: '28px', backgroundColor: '', margin: '5px', padding: '0px' } |

Events

| Event | Parameter | Description |
| ------ | --------- | ----------- |
| valueChange | (value: number) | Callback to invoke when value was changed |
| hoverChange | (value: number) | Triggered when on hover change |

Note For angular version below 14 use version 1.0.2
`
npm i ng-rating-bar@1.0.2
`

Usage with output event


`
[value]="value"
(valueChange)="onValueChange($event)"
[ratingCount]="10"
>
`

In component
`
onValueChange($event: number) {
this.value = $event
}
`

Disabled rating


`
[value]="5"
[ratingCount]="7"
[disabled]="true"
>

`

Using in reactive form


In html view
`

[control]="myForm.get('rating')"
[ratingCount]="ratingCount"
>

Field is required

Submit

`
In Component

`
ngOnInit() {
this.myForm = this.fb.group({
rating: [null, Validators.required]
});
}

submitForm() {
this.myForm.get('rating').markAllAsTouched();
console.log(this.myForm.value);
}
`

Same example for angular ^14
`


[control]="control"
[ratingCount]="ratingCount"
>

Field is required

Submit

`

In component define getter for current formControl
`
get control() {
return this.myForm.get('rating') as FormControl;
}
`

Hover output


`
Value is:
[class.excellent]="hoverValue === 7"
[class.good]="hoverValue > 4 && hoverValue < 7"
[class.notBad]="hoverValue > 2 && hoverValue <= 4 "
[class.bad]="hoverValue <= 2"
>
{{ hoverValue }}

[(value)]="value2"
(hoverChange)="hoverValue = $event"
[ratingCount]="7"
>

`

Set custom color

`
[(value)]="value"
[ratingCount]="ratingCount"
colorActive="red"
colorDefault="gray"
>
`

Custom styles

`
value="5"
[ratingCount]="10"
[styles]="{backgroundColor: '#0965ee', margin: '10px', fontSize: '32px', padding: '2px'}"
>
`

$3

$3

Example of html symbols https://www.w3schools.com/charsets/ref_utf_symbols.asp
`
value="5"
[ratingCount]="10"
[symbol]="'☀'"
[resetAble]="true"
>
`

$3

If you have installed font awesome into your project you can pass icon as @Input()
In component
`
export class AppComponent implements OnInit {

faIcon = '';
constructor() {}
....
}
`
In html
`
value="5"
[ratingCount]="10"
[symbol]="faIcon"
>
``