ng-rating-bar/README.md

Star rating component for angular

# Rating

[Stackblitz Demo](https://stackblitz.com/edit/ng-rating-bar?file=src%2Fapp%2Fapp.component.html "Demo") 

## Install
```
npm i ng-rating-bar
```

## Import

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

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

## Simple usage
```
<ng-rating-bar 
  [(value)]="value" 
  [ratingCount]="10" 
></ng-rating-bar>
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
```
<ng-rating-bar
  [value]="value"
  (valueChange)="onValueChange($event)"
  [ratingCount]="10"
></ng-rating-bar>
```

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

## Disabled rating
```
  <ng-rating-bar
    [value]="5"
    [ratingCount]="7"
    [disabled]="true"
  ></ng-rating-bar>

```

## Using in reactive form
In html view
```
<form [formGroup]="myForm">
      <ng-rating-bar
        [control]="myForm.get('rating')"
        [ratingCount]="ratingCount"
      ></ng-rating-bar>
      
      <p *ngIf="myForm.get('rating').touched && myForm.get('rating').hasError('required')">
        Field is required
      </p>

  <p>
    <button (click)="submitForm()">Submit</button>
  </p>
  </form>
```
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
```
<form [formGroup]="myForm">
  <ng-rating-bar
    [control]="control"
    [ratingCount]="ratingCount"
  ></ng-rating-bar>

  <p *ngIf="myForm.get('rating').touched && myForm.get('rating').hasError('required')">
    Field is required
  </p>

  <p>
  <button (click)="submitForm()">Submit</button>
  </p>
</form>
```

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

## Hover output
```
  Value is:
  <b
    [class.excellent]="hoverValue === 7"
    [class.good]="hoverValue > 4 && hoverValue < 7"
    [class.notBad]="hoverValue > 2 && hoverValue <= 4 "
    [class.bad]="hoverValue <= 2"
  >
    {{ hoverValue }}
  </b>
  <p>

    <ng-rating-bar
      [(value)]="value2"
      (hoverChange)="hoverValue = $event"
      [ratingCount]="7"
    ></ng-rating-bar>
  </p>
```

## Set custom color
```
<ng-rating-bar
  [(value)]="value" 
  [ratingCount]="ratingCount" 
  colorActive="red" 
  colorDefault="gray"
></ng-rating-bar>
```

## Custom styles
```
<ng-rating-bar
  value="5"
  [ratingCount]="10"
  [styles]="{backgroundColor: '#0965ee', margin: '10px', fontSize: '32px', padding: '2px'}"
></ng-rating-bar>
```
### New from version ^1.2.0
### Using html symbols
Example of html symbols [https://www.w3schools.com/charsets/ref_utf_symbols.asp](https://www.w3schools.com/charsets/ref_utf_symbols.asp)
```
<ng-rating-bar
  value="5"
  [ratingCount]="10"
  [symbol]="'&#9728;'"
  [resetAble]="true"
></ng-rating-bar>
```

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

  faIcon = '<i class="fa fa-car"></i>';
  constructor() {}
  ....
}
```
In html
```
<ng-rating-bar
  value="5"
  [ratingCount]="10"
  [symbol]="faIcon"
></ng-rating-bar>
```