# Ngx Stars Rating Module

## Overview
Ngx Stars Rating is a straightforward Angular module designed for Angular 14 and above. It offers customizable star icons using Material Icons, Antd Icons, and other options.

![Ngx Stars Rating](https://i.postimg.cc/020kY8XY/ngx-stars-rating.png)

## Demo
Explore the live demo [here](https://stackblitz.com/edit/angular-ivy-erhbdj).

## Installation
Ensure you have Angular 13 or a later version installed.

To install the `ngx-stars-rating` module via npm, navigate to your project directory and run:

```sh
cd project_folder
npm install --save ngx-stars-rating
```

## Usage
1. Import the `NgxStarsRatingModule` into your Angular module:

```typescript
import { NgxStarsRatingModule } from 'ngx-stars-rating';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, NgxStarsRatingModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}
```

2. Add the `<ngx-stars-rating>` component to your HTML file:

```html
<!-- app.component.html -->
<ngx-stars-rating></ngx-stars-rating>
```

3. Optionally, configure the rating by providing input properties such as `rate`, `options`, and handling events such as `(onRate)`:

```html
<ngx-stars-rating
  [rate]="rateNumber"
  [options]="ratingOptions"
  (onRate)="onClickRate($event)"
  [starTemplate]="starCustomTemplate"
></ngx-stars-rating>
```

```typescript
import { IRatingOptions } from 'ngx-stars-rating';

export class AppComponent {
    public rateNumber: number = 4.7;
    public ratingOptions: IRatingOptions = {
        starsCount: 5,
        hoverable: true,
        clickable: true
    };

    public onClickRate(rate: number): void {
        console.log(rate, 'rate'); // Logs the clicked star number
    }
}
```

4. Customize stars using templates:

```html
<ng-template #starCustomTemplate>
  <span class="material-symbols-outlined" style="font-size: 55px">star</span>
</ng-template>
```

## Future Updates
In future versions, support for Forms and ReactiveForms (ngModel and formControl/formControlName) directives will be added.