Events in Angular Rating Component

27 Apr 20245 minutes to read

This section describes the rating events that will be triggered when appropriate actions are performed. The following events are available in the rating component.

beforeItemRender

The rating component triggers the beforeItemRender event before rendering each rating item. The RatingItemEventArgs passed as an event argument provides the details of the item to be rendered.

import { Component } from '@angular/core';
import { RatingItemEventArgs } from '@syncfusion/ej2-angular-inputs';
 
@Component({
  selector: 'app-root',
  template: `<!-- To Render Rating component. -->
                <div class="wrap">
                  <input ejs-rating id='rating' (beforeItemRender)="beforeItemRender($event)"/><br />
                </div>`
})

export class AppComponent {
  public beforeItemRender(args: RatingItemEventArgs){
    //Your required action here
  };
}

created

The rating component triggers the created event when the rendering of the rating component is completed.

import { Component } from '@angular/core';
import { RatingItemEventArgs } from '@syncfusion/ej2-angular-inputs';
 
@Component({
  selector: 'app-root',
  template: `<!-- To Render Rating component. -->
                <div class="wrap">
                  <input ejs-rating id='rating' (created)="created()"/><br />
                </div>`
})

export class AppComponent {
  public created(){
    //Your required action here
  };
}

onItemHover

The rating component triggers the onItemHover event when the rating item is hovered. The RatingHoverEventArgs passed as an event argument provides the details of the hovered item.

import { Component } from '@angular/core';
import { RatingHoverEventArgs } from '@syncfusion/ej2-angular-inputs';
 
@Component({
  selector: 'app-root',
  template: `<!-- To Render Rating component. -->
                <div class="wrap">
                  <input ejs-rating id='rating' (onItemHover)="onItemHover($event)"/><br />
                </div>`
})

export class AppComponent {
  public onItemHover(args: RatingHoverEventArgs) {
    //Your required action here
  };
}

valueChanged

The rating component triggers the valueChanged event when the value of the rating is changed. The RatingChangedEventArgs passed as an event argument provides the details when value is changed.

import { Component } from '@angular/core';
import { RatingChangedEventArgs } from '@syncfusion/ej2-angular-inputs';
 
@Component({
  selector: 'app-root',
  template: `<!-- To Render Rating component. -->
                <div class="wrap">
                  <input ejs-rating id='rating' (valueChanged)="valueChanged($event)"/><br />
                </div>`
})

export class AppComponent {
  public valueChanged(args: RatingChangedEventArgs) {
    //Your required action here
  };
}

Below example demonstrates the valueChanged event of the Rating component.

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';
import { RatingChangedEventArgs } from '@syncfusion/ej2-angular-inputs';
 
@Component({
imports: [
         FormsModule, RatingModule
    ],


standalone: true,
  selector: 'app-root',
  template: `<!-- To Render Rating component. -->
                <div class="wrap">
                  <input ejs-rating id='rating' (valueChanged)="valueChanged($event)"/><br />
                </div>`
})

export class AppComponent {
  public valueChanged(args: RatingChangedEventArgs) {
    alert("Previous Value:" + args.previousValue + "\nValue:" + args.value);
  };
}

main.ts

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