feat: add css variables for rating-max, rating-value & rating-frac

Closes fvilers#5
KnodesCommunity · Jun 16, 2021 · 6a45716 · 6a45716
1 parent 7ad902f
commit 6a45716
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 0 deletions.
diff --git a/projects/ngx-material-rating/src/lib/ngx-material-rating.component.html b/projects/ngx-material-rating/src/lib/ngx-material-rating.component.html
@@ -1,5 +1,6 @@
 <ng-container *ngxRange="let index from 0 to max">
   <button mat-icon-button [class.dense]="dense" [class.readonly]="readonly" [color]=" color" [disabled]="disabled"
+    [style.--rating-value]="index + 1" [style.--rating-frac]="(index + 1) / max"
     [disableRipple]="readonly" (click)="onClick(index)">
     <mat-icon>{{getStar(index)}}</mat-icon>
   </button>

diff --git a/projects/ngx-material-rating/src/lib/ngx-material-rating.component.ts b/projects/ngx-material-rating/src/lib/ngx-material-rating.component.ts
@@ -7,6 +7,7 @@ import {
   Component,
   EventEmitter,
   forwardRef,
+  HostBinding,
   Input,
   Output,
 } from '@angular/core';
@@ -38,6 +39,7 @@ export class NgxMaterialRatingComponent implements ControlValueAccessor {
   color: ThemePalette = undefined;
 
   @Input()
+  @HostBinding( 'style.--rating-max' ) 
   get max(): number {
     return this._max;
   }