Rating

A star rating as native radios in a radiogroup, with two-way binding via [(value)] (0 for none) and a configurable [maximum]. Arrow keys move between the stars, the value submits with a form under name, and it works without JavaScript. (previewChange) reports the star under the pointer (null when it leaves); label and starLabel localise the names.

Basic usage

  
    
      
        <bs-rating [maximum]="5" [(value)]="ratingValue"></bs-rating>

  
    
      
        import { Component, model } from '@angular/core';
        
    
      
        import { BsRatingComponent } from '@mintplayer/ng-bootstrap/rating';
        
    
      
        
        
    
      
        @Component({
        
    
      
          selector: 'my-rating-demo',
        
    
      
          templateUrl: './my-rating-demo.component.html',
        
    
      
          imports: [BsRatingComponent],
        
    
      
        })
        
    
      
        export class MyRatingDemoComponent {
        
    
      
          protected readonly ratingValue = model(3);
        
    
      
        }

Angular forms

Template-driven [(ngModel)] and reactive [formControl] both bind through the component's ControlValueAccessor: the value, the disabled state, and touched when focus leaves.

  
    
      
        <!-- template-driven (FormsModule) -->
        
    
      
        <bs-rating [(ngModel)]="value"></bs-rating>
        
    
      
        
        
    
      
        <!-- reactive (ReactiveFormsModule): control = new FormControl(...) -->
        
    
      
        <bs-rating [formControl]="control"></bs-rating>