Precision Modes in Angular Rating Component

28 Sep 20233 minutes to read

You can use the precision property of the rating component to provide ratings with varying levels of precision.

The precision types of Rating are as follows:

• Full: The rating is increased in whole number increments. For example, if the current rating is 2, the next possible ratings are 3, 4, and so on.
• Half: The rating is increased in increments of 0.5 (half). For example, if the current rating is 2.5, the next possible ratings are 3, 3.5, 4, and so on.
• Quarter: The rating is increased in increments of 0.25 (quarter). For example, if the current rating is 3.75, the next possible ratings are 4, 4.25, 4.5, and so on.
• Exact: The rating is increased in increments of 0.1. For example, if the current rating is 3.9, the next possible ratings are 4, 4.1, 4.2, and so on.

app.component.ts

import { Component } from '@angular/core';
 
@Component({
  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 { }

app.module.ts

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

enableRipple(true);

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule, FormsModule, RatingModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);