# ng-star-rate
For now, one component is added in this library
```html
```
# How to use?
* Include our ```StarRateModule``` module in ```app.module.ts```
```javascript
import { StarRateModule } from 'ng-star-rate';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
StarRateModule //<-- add the module in imports
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
```
* Add the component `````` where rating part is expected in your application
---
## To briefly explain what is role of input and output in the components as below
1. ```[star]``` - pass the rating number to the app i.e. - If rating has to be pre-selected. **star** - hold the default value of rating. | __type: *number*__
2. ```[maxRating]``` - pass the maximum rating stars needs to be rendered by that component. | __type: *number*__
3. ```[showRatingCounter]``` - this boolean value is to decide whether to show the rating value on the screen like 2 out of 5 | __type: *boolean*__
4. ```(ratingSelection)``` - This callback will be triggered when user selects the rating in the component.
# Sample implementation
**```app.module.ts```**
```javascript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { StarRateModule } from 'ng-star-rate';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
StarRateModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
```
**```app.component.html```**
```html
Let's rate it!
Rated to {{myRating}}
```
**```app.component.ts```**
```javascript
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
selectColor = 'green';
item = 0;
maxRating = 5;
showRatingCounter = true;
myRating: number;
selectedRating(rate: number) {
console.log('your rating is--', rate);
this.myRating = rate;
}
}
```
> Thank you.