<div class="row"> <div class="col-md-6"> <div class="card"> <div class="card-body"> <h4 class="card-title">Basic demo</h4> <h6 class="card-subtitle">This is basic demo for rating {{currentRate}}</h6> <ngb-rating [(rate)]="currentRate"></ngb-rating> <div class="m-t-10">Rate: <b>{{currentRate}}</b></div> </div> </div> </div> <div class="col-md-6"> <div class="card"> <div class="card-body"> <h4 class="card-title">Custom star template <span class="badge badge-success text-white">New</span></h4> <h6 class="card-subtitle">Custom rating template provided as child element</h6> <ngb-rating [(rate)]="currentRate"> <ng-template let-fill="fill" let-index="index"> <span class="star" [class.filled]="fill === 100" [class.bad]="index < 3">★</span> </ng-template> </ngb-rating> <div class="m-t-10">Rate: <b>{{currentRate}}</b></div> </div> </div> </div> <div class="col-md-6"> <div class="card"> <div class="card-body"> <h4 class="card-title">Events and readonly ratings</h4> <h6 class="card-subtitle">This is demo for readonly ratings </h6> <ngb-rating [(rate)]="selected" (hover)="hovered=$event" (leave)="hovered=0" [readonly]="readonly"></ngb-rating> <div class="m-t-10">Selected: <b>{{selected}}</b><br/>Hovered: <b>{{hovered}}</b> </div><button class="btn btn-sm m-t-10 btn-outline-{{readonly ? 'danger' : 'success'}}" (click)="readonly = !readonly"> {{ readonly ? "readonly" : "editable"}} </button> </div> </div> </div> <div class="col-md-6"> <div class="card"> <div class="card-body"> <h4 class="card-title">Custom decimal rating</h4> <h6 class="card-subtitle">Custom rating template provided via a variable. Shows fine-grained rating display</h6> <ng-template #t let-fill="fill"> <span *ngIf="fill === 100" class="heart full">♥</span> <span *ngIf="fill === 0" class="heart">♥</span> <span *ngIf="fill < 100 && fill > 0" class="heart"> <span class="half" [style.width.%]="fill">♥</span>♥ </span> </ng-template> <ngb-rating [(rate)]="currentRate2" [starTemplate]="t" [readonly]="true" max="5"></ngb-rating> <div>Rate: <b>{{currentRate2}}</b></div> <button class="btn btn-sm btn-outline-primary" (click)="currentRate2 = 1.50">1.50</button> <button class="btn btn-sm btn-outline-primary" (click)="currentRate2 = 4.72">4.72</button> </div> </div> </div> <div class="col-md-6"> <div class="card"> <div class="card-body"> <h4 class="card-title">Form integration</h4> <h6 class="card-subtitle">NgModel and reactive forms can be used without the 'rate' binding</h6> <div class="form-group" [class.has-success]="ctrl.valid" [class.has-danger]="ctrl.invalid"> <ngb-rating [formControl]="ctrl"></ngb-rating> <div class="form-control-feedback"> <div *ngIf="ctrl.valid">Thanks!</div> <div *ngIf="ctrl.errors">Please rate us</div> </div> </div> <hr> <pre>Model: <b>{{ ctrl.value }}</b></pre> <button class="btn btn-sm btn-outline-{{ ctrl.disabled ? 'danger' : 'success'}}" (click)="toggle()"> {{ ctrl.disabled ? "control disabled" : " control enabled" }} </button> <button class="btn btn-sm btn-outline-primary" (click)="ctrl.setValue(null)">Clear</button> </div> </div> </div> </div>