Overview of IntegralUI Rating for Angular

Created: 19 April 2018

IntegralUI Rating is an Angular component that visualizes ratings. It is fully customizable with option to choose the image that is used for a rating value. In this article, we will give detailed information on what features are included in the Rating component.

If you have any questions, don't hesitate to contact us at support@lidorsystems.com

As you can see in aboive demo, there are two Rating components, one showing stars while the other showing bricks. In addition, the first rating can display decimal values (represented by stars partially filled), while the second rating display full values. This is enabled by the increment property value, see more information below.

To change the rating value, simply click on it or left-click and hold the mouse cursor and move it across the rating space. You can also change the value using mouse-wheel.

How to Use IntegralUI Rating in Angular

To use the Rating component you need to do the following:

• In app template place the Rating component using the iui-rating tag name
• Use the ngModel directive to apply a rating value
• Specify the maximum value

• Angular
• HTML

// Rating with stars
public ctrlValue: number = 3.5;
                            

<iui-rating [(ngModel)]="ctrlValue"[max]="5"></iui-rating>                          
                            

By doing these steps, a Rating component displays maximum 5 stars (because by default star image is used), and also changes its value using the ngModel directive. Any change to the rating value is also applied to the referencing variable, two-way data binding.

Note This component supports ngModel directive and can be used within Angular Forms.

Supported Properties

You can use the following properties to change the appearance and behavior of the Rating component:

• controlStyle - specifies an object that contains all style settings for the component
• data - specifies an object that holds data related to the component
• enabled - determines whether the component is enabled or disabled
• increment - determines how the rating value changes: Free, Partial or Full
• max - specifies the maximum value
• name - uniquely identifies the component
• stepSize - determines the width of one rating image in pixels
• state - specifies the component state: disabled, hovered, etc.
• value - holds the current rating value

Setting the above properties you can modify the rating component and make it appear and function in a way best suited for your application.

Supported Events

The following events are supported:

• valueChanged - occurs when value property changes

Whenever the rating value changes, either from code or by user interaction, the valueChanged event is fired. By handling this event you can add custom action in your application.

How to Customize the Rating Appearance

The second rating component shown in this demo, uses some modifications. First, bricks replace the stars. This is accomplished by applying a different CSS styles to the component, using the controlStyle property. The maximum value is also changed so that now there are 20 bricks displayed. The increment property value is also changed to IntegralUIIncrementMode.Full, which allows rating component to display only integer values (displayed image is either empty or full).

• Angular
• HTML
• CSS

// Rating with bricks
public ctrlValue2: number = 12;
public brickIncrementMode: IntegralUIIncrementMode = IntegralUIIncrementMode.Full;

public ctrlStyle: any = {
    content: { normal: 'rtg-ovw-content' },
    rating: { normal: 'rtg-ovw-value' }
}                            

 <iui-rating [controlStyle]="ctrlStyle" [(ngModel)]="ctrlValue2" [increment]="brickIncrementMode" [max]="20" [stepSize]="8" ></iui-rating>
                            

/* Rating Showing Bricks */
.rtg-ovw-content
{
    background-image: url(app/integralui/resources/rating/brick-empty.png);
}
.rtg-ovw-value
{
    background-image: url(app/integralui/resources/rating/brick-full.png);
}
                            

Note When using different image for rating value, make sure the stepSize property has a value equal to the width of the image used. In this way, any change to the rating value is correctly displayed by the images.

Conclusion

IntegralUI Rating component allows you to display ratings in your Angular applications. By setting different values to available properties, you can modify the appearance and behavior of the component in a way that is best suited for your application.

The Rating component is part of IntegralUI Web.