Rating

The Ignite UI Rating component allows users to view and provide feedback.

Angular Rating Example

Basic Usage

Ignite UI Rating is a standard web component and as such can be used in an Angular application.

Follow the steps below to add the Ignite UI Web Components package to your Angular project and set it up in order to use the component.

First, install the igniteui-webcomponents package

npm install igniteui-webcomponents --save

Next, you should call the defineCustomElements() function with IgcRatingComponent argument either in your main.ts file or in the component .ts file that is using IgcRating.

import { defineComponents, IgcRatingComponent } from 'igniteui-webcomponents';

defineComponents(IgcRatingComponent);

You also need to include the CUSTOM_ELEMENTS_SCHEMA schema in the AppModule:

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';

@NgModule({
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {}

With these you can now add the Rating component in an Angular component template and use its inputs and outputs:

<igc-rating value="ratingVal" min="1" max="5" (igcChange)="ratingChanged($event);"></igc-rating>

Using Rating in Angular Forms

In Angular forms, components often need to be able to bind their values with ngModel or use formControl which requires an implementation of Angular's ControlValueAccessor interface. Ignite UI for Angular package provides such implementation in the form of a directive that uses an element selector to attach to supported web components. Currently IgcRating is the only component that it supports. To use the directive you just need to import IgcFormsModule from the library.

import { IgcFormsModule } from 'igniteui-angular';

@NgModule({
    imports: [
        IgcFormsModule
    ]
})
export class AppModule { }

Note

If you are importing IgcFormsModule and using either ngModel or formControl, you no longer need to include CUSTOM_ELEMENTS_SCHEMA as Angular will recognize the igc-rating tag by the custom ControlValueAccessor directive.

Add a rating with e.g. ngModel for value and it will two-way bind with your model without issues.

<igc-rating name="modelRating" [(ngModel)]="model.Rating" max="10" label="Model Rating"></igc-rating>

The following application shows one example of how this integration works in a real use-case with forms.

For further information on the usage of the Rating component, you can check out this topic.