Labels in Angular Rating Component

26 Feb 20266 minutes to read

You can use the showLabel property to display a label that shows the current value of the rating. When the showLabel property is set to true, a label will be displayed.

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">
                  <input ejs-rating id="rating" showLabel='true' value="3"  />
                </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));

Label position

Position the rating label using the labelPosition property. The following positions are supported:

• Top: Label appears above the rating items.
• Bottom: Label appears below the rating items.
• Left: Label appears to the left of the rating items.
• Right: Label appears to the right of the rating items.

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>Left Label Position</Label><br/>
                  <input ejs-rating id="rating1" value="3" showLabel="true" labelPosition="Left" /><br/>
                  <Label>Right Label Position</Label><br />
                  <input ejs-rating id="rating2" value="3" showLabel="true" /><br/>
                  <Label>Top Label Position </Label><br />
                  <input ejs-rating id="rating3" value="3" showLabel="true" labelPosition="Top" /><br/>
                  <Label>Bottom Label Position</Label><br />
                  <input ejs-rating id="rating4" value="3" showLabel="true" labelPosition="Bottom" />
                </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));

Label template

You can use the labelTemplate tag directive to specify a custom template for the Label of the rating. The current value of the rating will be passed as the value property in the template context when building the content of the label. This allows you to include dynamic information about the rating in the template.

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">
                  <input ejs-rating id="rating" value="3" showLabel="true" [labelTemplate]="labelTemplate" />
                  
                  <ng-template #labelTemplate let-data="">
                      <span> out of 5</span>
                  </ng-template>
                </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));