Rating

The Rating component is slightly modified to make it more beautiful. Let's have a glance.

Basic

Wrap ngb-rating with class .rating to apply custom styles.

<div class="rating">
  <ngb-rating [(rate)]="basicCurrentRate" class="outline-none"></ngb-rating>
</div>

Result :

Custom Icons

<div class="rating">
  <ngb-rating [(rate)]="iconsCurrentRate">
    <ng-template let-fill="fill" let-index="index"
      ><span class="fa fa-star-o" [class.fa-star]="fill === 100"></span
    ></ng-template>
  </ngb-rating>
</div>

Result :

Sizes

<div class="rating rating-sm">
  <ngb-rating [(rate)]="sizeSMCurrentRate" class="outline-none"></ngb-rating>
</div>

<div class="rating">
  <ngb-rating [(rate)]="sizeCurrentRate" class="outline-none"></ngb-rating>
</div>

<div class="rating rating-lg">
  <ngb-rating [(rate)]="sizeLGCurrentRate" class="outline-none"></ngb-rating>
</div>

Result:

You can check demo on this (opens new window) page.