# ngx-stars-rating

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

Latest version **1.1.0** (published 2024-02-29) · 0 weekly downloads

## Install

```sh
npm install ngx-stars-rating
pnpm add ngx-stars-rating
yarn add ngx-stars-rating
bun add ngx-stars-rating
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2024-02-29 |
| First published | 2022-11-21 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 60.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Rado Poghossian |
| Maintainers | padcllc |
| Keywords | Angular, Angular Library, Stars, Star Rating, Angular Star Rating |

## Links

- npm: https://www.npmjs.com/package/ngx-stars-rating
- npm.io page: https://npm.io/package/ngx-stars-rating

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.3.0

## Alternatives

- [lodash.startswith](https://npm.io/package/lodash.startswith.md) — 769.7K weekly downloads
- [@tarojs/service](https://npm.io/package/@tarojs/service.md) — 33.9K weekly downloads
- [io.extendreality.tilia.indicators.spatialtargets.unity](https://npm.io/package/io.extendreality.tilia.indicators.spatialtargets.unity.md) — 131 weekly downloads
- [@rtarojs/taro](https://npm.io/package/@rtarojs/taro.md) — 90 weekly downloads
- [node-branch-io](https://npm.io/package/node-branch-io.md) — 50 weekly downloads

## Recent versions

- 1.1.0 (latest) — 2024-02-29
- 1.0.1 — 2022-11-30
- 1.0.0 — 2022-11-30
- 0.0.8 — 2022-11-22
- 0.0.7 — 2022-11-22
- 0.0.6 — 2022-11-22
- 0.0.5 — 2022-11-22
- 0.0.4 — 2022-11-22
- 0.0.3 — 2022-11-21
- 0.0.2 — 2022-11-21
- 0.0.1 — 2022-11-21

## README

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

---
_Source: https://npm.io/package/ngx-stars-rating · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._