Web Components Rating Overview

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

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

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

    First, you need to install the Ignite UI for Web Components by running the following command:

    npm install igniteui-webcomponents
cmd

    Before using the IgcRatingComponent, you need to register it as follows:

    import { defineComponents, IgcRatingComponent } from "igniteui-webcomponents";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcRatingComponent);
ts

    For a complete introduction to the Ignite UI for Web Components, read the Getting Started topic.

    The simplest way to start using the IgcRatingComponent is as follows:

    <igc-rating></igc-rating>
html

    This will create a five-star rating component that can be used to input and read data from.

    Using Custom Symbols

    The IgcRatingComponent component allows you to use custom symbols in place of the default star symbols. If you want to use a different symbol, like SVG, icon or another unicode symbol, you should place IgcRatingSymbolComponent components between the opening and closing brackets of the IgcRatingComponent:

    <igc-rating>
  <igc-rating-symbol> <div>💙</div> <div slot="empty">💙</div> </igc-rating-symbol>
  <igc-rating-symbol> <div>💙</div> <div slot="empty">💙</div> </igc-rating-symbol>
  <igc-rating-symbol> <div>💙</div> <div slot="empty">💙</div> </igc-rating-symbol>
  <igc-rating-symbol> <div>💙</div> <div slot="empty">💙</div> </igc-rating-symbol>
</igc-rating>
html

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    The number of rating symbols between the opening and closing brackets of the rating component determines the max value.

    Single Selection

    The Ignite UI for Web Components Rating component has a single selection mode that allows users to provide different icons/elements for the different rating values. In this case, only one of the icons/elements can be selected and reflect the feedback given by the user.

    <igc-rating single>
  <igc-rating-symbol> <div>😣</div> <div slot="empty">😣</div> </igc-rating-symbol>
  <igc-rating-symbol> <div>😣</div> <div slot="empty">😣</div> </igc-rating-symbol>
  <igc-rating-symbol> <div>😣</div> <div slot="empty">😣</div> </igc-rating-symbol>
  <igc-rating-symbol> <div>😣</div> <div slot="empty">😣</div> </igc-rating-symbol>
  <igc-rating-symbol> <div>😣</div> <div slot="empty">😣</div> </igc-rating-symbol>
</igc-rating>
html

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    Keep in mind that the step attribute doesn't work with single selection mode.

    Ignite UI for Web Components | CTA Banner

    Empty & Selected

    The Ignite UI for Web Components Rating component allows users to use different icons/elements for the empty and the selected state of a single rating value. It is mandatory to provide 2 icons for each slot (empty and full) when declaring a symbol, even if they are the same. For instance:

    <igc-rating-symbol>
  <igc-icon collection="default" name="bandage"></igc-icon>
  <igc-icon collection="default" name="bacteria" slot="empty"></igc-icon>
</igc-rating-symbol>
html

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    Configuration

    Single

    Turns on the single visual mode for the rating. Useful when using symbols that communicate unique values, like feedback emoji faces.

    Value

    The value attribute sets the current value of the component.

    Label

    The label attribute allows setting the label value of the rating component.

    Value Format

    A format string which sets aria-valuetext. All instances of it will be replaced with the current value of the control. Important for screen-readers and useful for localization.

    Max Value

    The max attribute sets the maximum allowed value of the rating component.

    Step

    The step attribute sets the allowed fraction of steps between two symbols. Useful when splitting the rating symbols in halves.

    Hover Preview

    The hover-preview attribute makes the component show the possible outcome of user selection on hover. It is useful when you want to give instant feedback about what the selected value could be.

    Read-Only

    The readOnly attribute allows the users to set the IgcRatingComponent in read-only mode. This attribute is useful when you want to use the component for information purposes only.

    Disabled

    The disabled attribute disables the component, making it impossible to select a value using the mouse or keyboard.

    Methods

    Step Up

    The stepUp method increments the value of the component by n steps. Determined by the step factor.

    Step Down

    The stepDown method decrements the value of the component by n steps. Determined by the step factor.

    Events

    The IgcRatingComponent component emits two separate events - igcHover and igcChange.

    Hover Event

    The igcHover event is fired when hovering over a symbol. It provides the value of the symbol under the mouse cursor. Useful for creating custom value labels and readouts.

    Change Event

    The igcChange event is fired when the selected value changes.

    Styling

    The IgcRatingComponent component exposes CSS parts for almost all of its inner elements. The following table lists all of the exposed CSS parts:

    Name Description
    base The main wrapper which holds all of the rating elements.
    label The label part.
    value-label The value label part.
    symbols A wrapper for all rating symbols.
    symbol The part of the encapsulated default symbol.
    full The part of the encapsulated full symbols.
    empty The part of the encapsulated empty symbols. 
    igc-rating::part(full) {
  color: var(--ig-primary-500)
}

igc-rating::part(empty) {
  color: var(--ig-secondary-200);
}
css

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    API Reference

    Additional Resources