NgShowcase

Ng - Rating

Rating provides insight into others opinions and experiences with a product. Use stars or other custom symbols (i.e. smiling faces) :p.

Styled byLS Rating

Basic example

3.5

  <Rating [Pattern]="'Base'" [Fraction]="true" [ShowValue]="true" [Rate]="3.5">
    <RatingItem *ngFor="let _ of [1,2,3,4]"></RatingItem>
  </Rating>

FA Icons

By default it takes accent color of active theme's as background.

Issues: Fraction color not set correctly on some mobile browsers

    <Rating [Fraction]="true" [Rate]="3.5">
      <RatingItem *ngFor="let num of [1,2,3,4,5]"><i class="fa-regular fa-star"></i></RatingItem>
    </Rating>

ReadOnly

If you want to use a rating to show the score you can use the ReadOnly option

      <Rating [Fraction]="true" [ReadOnly]="true" [Rate]="3.5">
        <RatingItem *ngFor="let _ of [1,2,3,4,5]"><i class="fa-regular fa-star"></i></RatingItem>
      </Rating>

Get selected value

To get the value selected by the user just listen for the (RateChanged)="rateChanged($event)" event that returns a value. Open the browser console to test how it's work

      <Rating [Fraction]="true" [Rate]="3.5" (RateChanged)="rateChanged($event)">
        <RatingItem *ngFor="let _ of [1,2,3,4,5]"><i class="fa-regular fa-star"></i></RatingItem>
      </Rating>

  rateChanged($event: number): void {
    console.log($event);
  }

Custom Icons & Colors

You can use FA icons easily. Just put inside RatingItem component. For changing color use [BgColor] porp.

      <Rating [Fraction]="true" [Rate]="2.5" [BgColor]="'darkred'">
        <RatingItem *ngFor="let _ of [1,2,3,4,5]"><i class="fa-solid fa-heart"></i></RatingItem>
      </Rating>
      <br>
      <!-- Spin -->
      <Rating [Fraction]="true" [Rate]="2.5" [BgColor]="'orange'">
        <RatingItem *ngFor="let _ of [1,2,3,4,5]"><i class="fa-solid fa-star fa-spin"></i></RatingItem>
      </Rating>

Shadow

For activate drop shadow on Rating, Just put [Shadow]="true" prop.

      <Rating [Fraction]="true" [Shadow]="true" [Rate]="2.5" [BgColor]="'#1D9559'">
        <RatingItem *ngFor="let _ of [1,2,3,4,5]"><i class="fa-solid fa-tree"></i></RatingItem>
      </Rating>

Dynamic icons

You can make your rating more dynamic by adding [Icons] prop with Fa Icons

  <Rating [Fraction]="true" [Rate]="2.5"
          [Icons]="['fa-solid fa-face-frown', 'fa-solid fa-face-frown-open', 'fa-solid fa-face-meh', 'fa-solid fa-face-smile', 'fa-solid fa-face-grin']"></Rating>
  <br>
  <Rating [Fraction]="true" [Rate]="2.5" [Icons]="regular"></Rating>

  solid = ['fa-solid fa-face-frown', 'fa-solid fa-face-frown-open', 'fa-solid fa-face-meh', 'fa-solid fa-face-smile', 'fa-solid fa-face-grin',];
  regular = ['fa-regular fa-face-frown', 'fa-regular fa-face-frown-open', 'fa-regular fa-face-meh', 'fa-regular fa-face-smile', 'fa-regular fa-face-grin',];