Precision Modes in Angular Rating Component

26 Feb 20262 minutes to read

The precision property allows you to control the granularity at which users can rate. Choose from the following precision modes:

• Full: Ratings increment by 1.0 (whole numbers only). Example: 1, 2, 3, 4, 5.
• Half: Ratings increment by 0.5 (half-step precision). Example: 1, 1.5, 2, 2.5, 3.
• Quarter: Ratings increment by 0.25 (quarter-step precision). Example: 1, 1.25, 1.5, 1.75, 2.
• Exact: Ratings increment by 0.1 (fine-grain precision). Example: 1, 1.1, 1.2, 1.3, 1.4.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { RatingModule } from '@syncfusion/ej2-angular-inputs'
import { enableRipple } from '@syncfusion/ej2-base'

import { Component } from '@angular/core';
 
@Component({
imports: [
         FormsModule, RatingModule
    ],


standalone: true,
  selector: 'app-root',
  template: `<!-- To Render Rating component. -->
                <div class="wrap">
                    <Label>Full Precision</Label><br />
                    <input ejs-rating id="rating1" precision="Full" value="3"  /><br />
                    <Label>Half Precision</Label><br />
                    <input ejs-rating id="rating2" precision="Half" value="2.5" /><br />
                    <Label>Quarter Precision</Label><br />
                    <input ejs-rating id="rating3" precision="Quarter" value="3.75" /><br />
                    <Label>Exact Precision</Label><br />
                    <input ejs-rating id="rating4" precision="Exact" value="2.3" /><br />
                </div>`
})

export class AppComponent { }

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));