# ngx-star-rating-enhanced-enhanced

> Simple Angular rating control from angular2 application using fontawesome icon.

Latest version **2.1.0** (published 2022-01-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install ngx-star-rating-enhanced-enhanced
pnpm add ngx-star-rating-enhanced-enhanced
yarn add ngx-star-rating-enhanced-enhanced
bun add ngx-star-rating-enhanced-enhanced
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.0 |
| Published | 2022-01-12 |
| First published | 2022-01-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 12 |
| Unpacked size | 51 KB |
| Known vulnerabilities | 0 (+26 in 4 direct dependencies) |
| Install scripts | no |
| Author | Shyam Bandla |
| Maintainers | shyam_bandla |
| Keywords | angular, rating, angular2, angular8, ngx-star-rating-enhanced, ngx-rating, angular 8, angular 9, angular 10, angular 11, angular 12, angular 13 |

## Links

- npm: https://www.npmjs.com/package/ngx-star-rating-enhanced-enhanced
- Repository: https://github.com/jitendradp/ngx-star-rating-enhanced
- Homepage: https://github.com/jitendradp/ngx-star-rating-enhanced#readme
- Issues: https://github.com/jitendradp/ngx-star-rating-enhanced/issues
- npm.io page: https://npm.io/package/ngx-star-rating-enhanced-enhanced

## Dependencies (12)

- [rxjs](https://npm.io/package/rxjs.md) ~7.4.0
- [tslib](https://npm.io/package/tslib.md) ^2.0.0
- [zone.js](https://npm.io/package/zone.js.md) ~0.11.4
- [@angular/core](https://npm.io/package/@angular/core.md) ~13.0.1
- [@angular/forms](https://npm.io/package/@angular/forms.md) ~13.0.1
- [@angular/common](https://npm.io/package/@angular/common.md) ~13.0.1
- [@angular/router](https://npm.io/package/@angular/router.md) ~13.0.1
- [@angular/compiler](https://npm.io/package/@angular/compiler.md) ~13.0.1
- [webpack-dev-server](https://npm.io/package/webpack-dev-server.md) ^4.5.0
- [@angular/animations](https://npm.io/package/@angular/animations.md) ~13.0.1
- [@angular/platform-browser](https://npm.io/package/@angular/platform-browser.md) ~13.0.1
- [@angular/platform-browser-dynamic](https://npm.io/package/@angular/platform-browser-dynamic.md) ~13.0.1

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

- 2.1.0 (latest) — 2022-01-12
- 2.1.1 (angular,rating,angular2,angular8,ngx-star-rating-enhanced,ngx-rating, angular 8, angular 10, angular 11, angular 12, angular 13) — 2022-01-12

## README

# ngx-star-rating-enhanced
  
<p align="center">
  <h1 align="center">Angular Star Rating (ngx star rating)</h1>
</p>

Simple Angular rating control from angular2 application using fontawesome icon.

[Demo can be found here](https://stackblitz.com/edit/ngx-star-rating-enhanced)

![ngx-star-rating-enhanced angular rating](https://github.com/jitendradp/ngx-star-rating-enhanced/raw/master/resources/ngx-star-rating-enhanced-sample.png)


## Installation

1. Install npm module:

      ```npm install ngx-star-rating-enhanced --save```
 
2. Include fontawesome css:
      
      ```<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">```
 
 ## Usage

Import `NgxStarRatingModule` module in your app, and use a component in your html:

      import { NgxStarRatingModule } from 'ngx-star-rating-enhanced';
      
      // Include tag into your component
      <ngx-star-rating-enhanced [formControl]="rating" [id]="'rating'" [disabled]="true"></ngx-star-rating-enhanced>
     
     
 * `<ngx-star-rating-enhanced>`:
    * `[(ngModel)] | formControl  = ngModel or formControl
    * '[id] = Unique id for each control
    * `[disabled]="true|false"` = Enable/Disable star rating. Default is false.
    
     
## Sample


```typescript
// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgxStarRatingModule } from 'ngx-star-rating-enhanced';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgxStarRatingModule,
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

// app.component.ts
import { Component } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],

})
export class AppComponent {
  public form: FormGroup;

  constructor(NgxStarRatingEnhanced fb: FormBuilder){
    this.rating3 = 0;
    this.form = this.fb.group({
      rating: ['', Validators.required],
    })
  }
}

// app.component.html
<form [formGroup]="form">
    <ngx-star-rating-enhanced formControlName="rating" [id]="'rating'"></ngx-star-rating-enhanced>
    <div>Rating: {{form.value.rating}}</div>
    <p>form is valid: {{ form.valid ? 'true' : 'false' }}</p>
</form>
```

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