Angular Star Rating Overview

    Rating in Angular represents a widget enabling users to quickly provide feedback and evaluate a product or a service on a web page by using a star rating system. Simple to use, the component lets developers configure the size and the number of the displayed star rating items.

    The Ignite UI Angular Star Rating component can be easily installed from the igniteui-webcomponents package. It provides an intuitive rating experience for end-users, allowing them to view products/services and rate them (usually having the option to choose from 0 to 5 stars in the most common scenarios).

    Angular Rating Example

    This Angular Star Rating example demonstrates how you can use Ignite UI Angular to build simple five-star rating widget, comparing and displaying the score of different products.

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    Like this sample? Get access to our complete Ignite UI for Angular toolkit and start building your own apps in minutes. Download it for free.

    Getting Started with Ignite UI for Angular Star Rating

    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
cmd

    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);
typescript

    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 {}
typescript

    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>
html

    Using Angular Star Rating in 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';
// import { IgcFormsModule } from '@infragistics/igniteui-angular'; for licensed package

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

    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.

    Alternatively, as of 16.0.0 you can import the IgcFormControlDirective as a standalone dependency.

    // home.component.ts

import { FormsModule } from '@angular/forms';
import { IgcFormControlDirective } from 'igniteui-angular';
// import { IgcFormControlDirective } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: '<igc-rating name="modelRating" [(ngModel)]="product.Rating" max="10" label="Model Rating"></igc-rating>',
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IgcFormControlDirective, FormsModule]
})
export class HomeComponent {
    public product: Product;
}
typescript

    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>
html

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

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

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