Angular API

ejRating

3 Aug 201824 minutes to read

The Rating control provides an intuitive Rating experience that enables you to select a number of stars that represent a Rating. You can configure the item size, orientation and the number of displayed items in the Rating control. You can also customize the Rating star image by using custom CSS.

Example

<ej-rating [value]="rate" [allowReset]=true > 
</ej-rating>

import {Component} from '@angular/core';
import {ViewEncapsulation} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html',
  styleUrls: ['./rating.component.css'],
  encapsulation: ViewEncapsulation.None,

})
export class DefaultComponent {
    rate: number;
    constructor() {
        this.rate = 3;
    }
}

Requires

module:jQuery
module:jquery.easing.1.3.js
module:ej.core.js
module:ej.rating.js

Members

allowReset `boolean`

Enables the rating control with reset button.It can be used to reset the rating control value.

Default Value

true

Example

<ej-rating [value]="rate" [allowReset]=true > 
</ej-rating>

import {Component} from '@angular/core';
import {ViewEncapsulation} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html',
  styleUrls: ['./rating.component.css'],
  encapsulation: ViewEncapsulation.None,

})
export class DefaultComponent {
    rate: number;
    constructor() {
        this.rate = 3;
    }
}

cssClass `string`

Specify the CSS class to achieve custom theme.

Default Value

””

Example

<ej-rating [value]="rate" cssClass="cssClass" > 
</ej-rating>

import {Component} from '@angular/core';
import {ViewEncapsulation} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html',
  styleUrls: ['./rating.component.css'],
  encapsulation: ViewEncapsulation.None,

})
export class DefaultComponent {
    rate: number;
    constructor() {
        this.rate = 3;
    }
}

The css must be defined in stylesheet.

<style>
.cssClass{
    border: 10px solid grey;
}
</style>

enabled `boolean`

When this property is set to false, it disables the rating control.

Default Value

true

Example

<ej-rating [value]="rate" [enabled]=true > 
</ej-rating>

import {Component} from '@angular/core';
import {ViewEncapsulation} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html',
  styleUrls: ['./rating.component.css'],
  encapsulation: ViewEncapsulation.None,

})
export class DefaultComponent {
    rate: number;
    constructor() {
        this.rate = 3;
    }
}

enablePersistence `boolean`

Save current model value to browser cookies for state maintenance. While refresh the page Rating control values are retained.

Default Value

false

Example

<ej-rating [value]="rate" [enablePersistence]=true > 
</ej-rating>

import {Component} from '@angular/core';
import {ViewEncapsulation} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html',
  styleUrls: ['./rating.component.css'],
  encapsulation: ViewEncapsulation.None,

})
export class DefaultComponent {
    rate: number;
    constructor() {
        this.rate = 3;
    }
}

height `string`

Specifies the height of the Rating control wrapper.

Default Value

null

Example

<ej-rating [value]="rate" height="50" [allowReset]=true > 
</ej-rating>

import {Component} from '@angular/core';
import {ViewEncapsulation} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html',
  styleUrls: ['./rating.component.css'],
  encapsulation: ViewEncapsulation.None,

})
export class DefaultComponent {
    rate: number;
    constructor() {
        this.rate = 3;
    }
}

htmlAttributes `object`

Specifies the list of HTML attributes to be added to rating control.

Default Value

{}

Example

<ej-rating [value]="rate" [htmlAttributes]="attributes" > 
</ej-rating>

import {Component} from '@angular/core';
import {ViewEncapsulation} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html',
  styleUrls: ['./rating.component.css'],
  encapsulation: ViewEncapsulation.None,

})
export class DefaultComponent {
    rate: number;
    attributes: any;
    constructor() {
        this.rate = 3;
        this.attributes={"aria-label":"rating"};
    }
}

incrementStep `number`

Specifies the value to be increased while navigating between shapes(stars) in Rating control.

Default Value

1

Example

<ej-rating [value]="rate" [incrementStep]="incrementStep" > 
</ej-rating>

import {Component} from '@angular/core';
import {ViewEncapsulation} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html',
  styleUrls: ['./rating.component.css'],
  encapsulation: ViewEncapsulation.None,

})
export class DefaultComponent {
    rate: number;
    incrementStep: number;
    constructor() {
        this.rate = 3;
        this.incrementStep = 1;
    }
}

maxValue `number`

Allow to render the maximum number of Rating shape(star).

Default Value

5

Example

<ej-rating [value]="rate" [maxValue]="maxValue" > 
</ej-rating>

import {Component} from '@angular/core';
import {ViewEncapsulation} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html',
  styleUrls: ['./rating.component.css'],
  encapsulation: ViewEncapsulation.None,

})
export class DefaultComponent {
    maxValue: number;
    constructor() {
        this.maxValue = 5;
    }
}

minValue `number`

Allow to render the minimum number of Rating shape(star).

Default Value

0

Example

<ej-rating [value]="rate" [minValue]="minValue" > 
</ej-rating>

import {Component} from '@angular/core';
import {ViewEncapsulation} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html',
  styleUrls: ['./rating.component.css'],
  encapsulation: ViewEncapsulation.None,

})
export class DefaultComponent {
    minValue: number;
    constructor() {
        this.minValue = 3;
    }
}

orientation `enum`

Specifies the orientation of Rating control. See Orientation

Name	Type	Default	Description
Horizontal	string	horizontal	Used to set Orientation as Horizontal
Vertical	string	vertical	Used to set Orientation as Vertical

Default Value

ej.Rating.Orientation.Horizontal

Example

<ej-rating [value]="rate" orientation="vertical" > 
</ej-rating>

import {Component} from '@angular/core';
import {ViewEncapsulation} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html',
  styleUrls: ['./rating.component.css'],
  encapsulation: ViewEncapsulation.None,

})
export class DefaultComponent {
    rate: number;
    constructor() {
        this.rate = 3;
    }
}

precision `enum`

Helps to provide more precise ratings.Rating control supports three precision modes - full, half, and exact. See Precision

Name	Type	Default	Description
Exact	string	exact	Used to set Precision as Exact
Full	string	full	Used to set Precision as Full
Half	string	half	Used to set Precision as Half

Default Value

“full”

Example

<ej-rating [value]="rate" precision="half" > 
</ej-rating>

import {Component} from '@angular/core';
import {ViewEncapsulation} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html',
  styleUrls: ['./rating.component.css'],
  encapsulation: ViewEncapsulation.None,

})
export class DefaultComponent {
    rate: number;
    constructor() {
        this.rate = 3;
    }
}

readOnly `boolean`

Interaction with Rating control can be prevented by enabling this API.

Default Value

false

Example

<ej-rating [value]="rate" [readOnly]=true > 
</ej-rating>

import {Component} from '@angular/core';
import {ViewEncapsulation} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html',
  styleUrls: ['./rating.component.css'],
  encapsulation: ViewEncapsulation.None,

})
export class DefaultComponent {
    rate: number;
    constructor() {
        this.rate = 3;
    }
}

shapeHeight `number`

To specify the height of each shape in Rating control.

Default Value

23

Example

<ej-rating [value]="rate" [shapeHeight]="shapeHeight" > 
</ej-rating>

import {Component} from '@angular/core';
import {ViewEncapsulation} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html',
  styleUrls: ['./rating.component.css'],
  encapsulation: ViewEncapsulation.None,

})
export class DefaultComponent {
    rate: number;
    shapeHeight: number;
    constructor() {
        this.rate = 3;
        this.shapeHeight = 50;
    }
}

shapeWidth `number`

To specify the width of each shape in Rating control.

Default Value

23

Example

<ej-rating [value]="rate" [shapeWidth]="shapeWidth" > 
</ej-rating>

import {Component} from '@angular/core';
import {ViewEncapsulation} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html',
  styleUrls: ['./rating.component.css'],
  encapsulation: ViewEncapsulation.None,

})
export class DefaultComponent {
    rate: number;
    shapeWidth: number;
    constructor() {
        this.rate = 3;
        this.shapeWidth = 50;
    }
}

showTooltip `boolean`

Enables the tooltip option.Currently selected value will be displayed in tooltip.

Default Value

true

Example

<ej-rating [value]="rate" [showTooltip]=true > 
</ej-rating>

import {Component} from '@angular/core';
import {ViewEncapsulation} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html',
  styleUrls: ['./rating.component.css'],
  encapsulation: ViewEncapsulation.None,

})
export class DefaultComponent {
    rate: number;
    constructor() {
        this.rate = 3;
    }
}

value `number`

To specify the number of stars to be selected while rendering.

Default Value

1

Example

<ej-rating [value]="rate" [allowReset]=true > 
</ej-rating>

import {Component} from '@angular/core';
import {ViewEncapsulation} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html',
  styleUrls: ['./rating.component.css'],
  encapsulation: ViewEncapsulation.None,

})
export class DefaultComponent {
    rate: number;
    constructor() {
        this.rate = 3;
    }
}

width `string`

Specifies the width of the Rating control wrapper.

Default Value

null

Example

<ej-rating [value]="rate" width="500" > 
</ej-rating>

import {Component} from '@angular/core';
import {ViewEncapsulation} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html',
  styleUrls: ['./rating.component.css'],
  encapsulation: ViewEncapsulation.None,

})
export class DefaultComponent {
    rate: number;
    constructor() {
        this.rate = 3;
    }
}

Methods

destroy()

Destroy the Rating widget all events bound will be unbind automatically and bring the control to pre-init state.

Example

<ej-rating id="rating" [value]="rate" > 
</ej-rating>

<button type="button" (click)="OnClick()">Destroy</button>

import {Component} from '@angular/core';
import {ViewEncapsulation} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html',
  styleUrls: ['./rating.component.css'],
  encapsulation: ViewEncapsulation.None,

})
export class DefaultComponent {
    rate: number;
    constructor() {
        this.rate = 3;
    }

    OnClick(){


var obj = $("#rating").data("ejRating");


obj.destroy();

}
}

<ej-rating id="rating" [value]="rate" > 
</ej-rating>

<button type="button" (click)="OnClick()">Destroy</button>

import {Component} from '@angular/core';
import {ViewEncapsulation} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html',
  styleUrls: ['./rating.component.css'],
  encapsulation: ViewEncapsulation.None,

})
export class DefaultComponent {
    rate: number;
    constructor() {
        this.rate = 3;
    }

    OnClick(){


 $("#rating").ejRating("destroy");

}
}

getValue()

To get the current value of rating control.

Returns:

number

Example

<ej-rating id="rating" [value]="rate" > 
</ej-rating>

<button type="button" (click)="OnClick()">GetValue</button>

import {Component} from '@angular/core';
import {ViewEncapsulation} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html',
  styleUrls: ['./rating.component.css'],
  encapsulation: ViewEncapsulation.None,

})
export class DefaultComponent {
    rate: number;
    constructor() {
        this.rate = 3;
    }

    OnClick(){


var obj = $("#rating").data("ejRating");


obj.getValue();

}
}

<ej-rating id="rating" [value]="rate" > 
</ej-rating>

<button type="button" (click)="OnClick()">GetValue</button>

import {Component} from '@angular/core';
import {ViewEncapsulation} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html',
  styleUrls: ['./rating.component.css'],
  encapsulation: ViewEncapsulation.None,

})
export class DefaultComponent {
    rate: number;
    constructor() {
        this.rate = 3;
    }

    OnClick(){


$("#rating").ejRating("getValue");

}
}

hide()

To hide the rating control.

Example

<ej-rating id="rating" [value]="rate" > 
</ej-rating>

<button type="button" (click)="OnClick()">Hide</button>

import {Component} from '@angular/core';
import {ViewEncapsulation} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html',
  styleUrls: ['./rating.component.css'],
  encapsulation: ViewEncapsulation.None,

})
export class DefaultComponent {
    rate: number;
    constructor() {
        this.rate = 3;
    }

    OnClick(){


var obj = $("#rating").data("ejRating");


obj.hide();

}
}

<ej-rating id="rating" [value]="rate" > 
</ej-rating>

<button type="button" (click)="OnClick()">Hide</button>

import {Component} from '@angular/core';
import {ViewEncapsulation} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html',
  styleUrls: ['./rating.component.css'],
  encapsulation: ViewEncapsulation.None,

})
export class DefaultComponent {
    rate: number;
    constructor() {
        this.rate = 3;
    }

    OnClick(){


 $("#rating").ejRating("hide");

}
}

refresh()

User can refresh the rating control to identify changes.

Example

<ej-rating id="rating" [value]="rate" > 
</ej-rating>

<button type="button" (click)="OnClick()">Refresh</button>

import {Component} from '@angular/core';
import {ViewEncapsulation} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html',
  styleUrls: ['./rating.component.css'],
  encapsulation: ViewEncapsulation.None,

})
export class DefaultComponent {
    rate: number;
    constructor() {
        this.rate = 3;
    }

    OnClick(){


var obj = $("#rating").data("ejRating");


obj.refresh();

}
}

<ej-rating id="rating" [value]="rate" > 
</ej-rating>

<button type="button" (click)="OnClick()">Refresh</button>

import {Component} from '@angular/core';
import {ViewEncapsulation} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html',
  styleUrls: ['./rating.component.css'],
  encapsulation: ViewEncapsulation.None,

})
export class DefaultComponent {
    rate: number;
    constructor() {
        this.rate = 3;
    }

    OnClick(){


 $("#rating").ejRating("refresh");

}
}

reset()

To reset the rating value.

Example

<ej-rating id="rating" [value]="rate" > 
</ej-rating>

<button type="button" (click)="OnClick()">Reset</button>

import {Component} from '@angular/core';
import {ViewEncapsulation} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html',
  styleUrls: ['./rating.component.css'],
  encapsulation: ViewEncapsulation.None,

})
export class DefaultComponent {
    rate: number;
    constructor() {
        this.rate = 3;
    }

    OnClick(){


var obj = $("#rating").data("ejRating");


obj.reset();

}
}

<ej-rating id="rating" [value]="rate" > 
</ej-rating>

<button type="button" (click)="OnClick()">Reset</button>

import {Component} from '@angular/core';
import {ViewEncapsulation} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html',
  styleUrls: ['./rating.component.css'],
  encapsulation: ViewEncapsulation.None,

})
export class DefaultComponent {
    rate: number;
    constructor() {
        this.rate = 3;
    }

    OnClick(){


 $("#rating").ejRating("reset");

}
}

setValue(value)

To set the rating value.

Name	Type	Description
value	string\|number	Specifies the rating value.

Example

<ej-rating id="rating" [value]="rate" > 
</ej-rating>

<button type="button" (click)="OnClick()">Set value</button>

import {Component} from '@angular/core';
import {ViewEncapsulation} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html',
  styleUrls: ['./rating.component.css'],
  encapsulation: ViewEncapsulation.None,

})
export class DefaultComponent {
    rate: number;
    constructor() {
        this.rate = 3;
    }

    OnClick(){


var obj = $("#rating").data("ejRating");


obj.setValue(5);

}
}

<ej-rating id="rating" [value]="rate" > 
</ej-rating>

<button type="button" (click)="OnClick()">Set value</button>

import {Component} from '@angular/core';
import {ViewEncapsulation} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html',
  styleUrls: ['./rating.component.css'],
  encapsulation: ViewEncapsulation.None,

})
export class DefaultComponent {
    rate: number;
    constructor() {
        this.rate = 3;
    }

    OnClick(){


 $("#rating").ejRating("setValue",5);

}
}

show()

To show the rating control

Example

<ej-rating id="rating" [value]="rate" (create)="onCreate()" > 
</ej-rating>

<button type="button" (click)="OnClick()">Show</button>

import {Component} from '@angular/core';
import {ViewEncapsulation} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html',
  styleUrls: ['./rating.component.css'],
  encapsulation: ViewEncapsulation.None,

})
export class DefaultComponent {
    rate: number;
    constructor() {
        this.rate = 3;
    }
    onCreate(){
        $("#rating").ejRating("hide");
    }
    OnClick(){


var obj = $("#rating").data("ejRating");


obj.show();

}
}

<ej-rating id="rating" [value]="rate" (create)="onCreate()" > 
</ej-rating>

<button type="button" (click)="OnClick()">Show</button>

import {Component} from '@angular/core';
import {ViewEncapsulation} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html',
  styleUrls: ['./rating.component.css'],
  encapsulation: ViewEncapsulation.None,

})
export class DefaultComponent {
    rate: number;
    constructor() {
        this.rate = 3;
    }
    onCreate(){
        $("#rating").ejRating("hide");
    }
    OnClick(){


 $("#rating").ejRating("show");

}
}

Events

change

Fires when Rating value changes.

Name

Type

Description

argument

Object

Event parameters from rating

Name	Type	Description
value	number	returns the current value.
cancel	boolean	if the event should be canceled; otherwise, false.
model	object	returns the rating model
type	string	returns the name of the event
event	object	returns the mouse click event args values.

Example

<ej-rating id="rating" [value]="rate" (ejchange)="onChange($event)" > 
</ej-rating>

import {Component} from '@angular/core';
import {ViewEncapsulation} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html',
  styleUrls: ['./rating.component.css'],
  encapsulation: ViewEncapsulation.None,

})
export class DefaultComponent {
    rate: number;
    constructor() {
        this.rate = 3;
    }

    onChange(args){




}
}

click

Fires when Rating control is clicked successfully.

Name

Type

Description

argument

Object

Event parameters from rating

Name	Type	Description
value	number	returns the current value.
cancel	boolean	if the event should be canceled; otherwise, false.
model	object	returns the rating model
type	string	returns the name of the event
event	object	returns the mouse click event args values.

Example

<ej-rating id="rating" [value]="rate" (ejclick)="onChange($event)" > 
</ej-rating>

import {Component} from '@angular/core';
import {ViewEncapsulation} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html',
  styleUrls: ['./rating.component.css'],
  encapsulation: ViewEncapsulation.None,

})
export class DefaultComponent {
    rate: number;
    constructor() {
        this.rate = 3;
    }

    onChange(args){




}
}

create

Fires when Rating control is created.

Name

Type

Description

argument

Object

Event parameters from rating

Name	Type	Description
cancel	boolean	if the event should be canceled; otherwise, false.
model	object	returns the rating model
type	string	returns the name of the event.

Example

<ej-rating id="rating" [value]="rate" (create)="onCreate($event)" > 
</ej-rating>

import {Component} from '@angular/core';
import {ViewEncapsulation} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html',
  styleUrls: ['./rating.component.css'],
  encapsulation: ViewEncapsulation.None,

})
export class DefaultComponent {
    rate: number;
    constructor() {
        this.rate = 3;
    }

    onCreate(args){




}
}

destroy

Fires when Rating control is destroyed successfully.

Name

Type

Description

argument

Object

Event parameters from rating

Name	Type	Description
cancel	boolean	if the event should be canceled; otherwise, false.
model	object	returns the rating model
type	string	returns the name of the event

Example

<ej-rating id="rating" [value]="rate" (destroy)="destroy($event)" > 
</ej-rating>

import {Component} from '@angular/core';
import {ViewEncapsulation} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html',
  styleUrls: ['./rating.component.css'],
  encapsulation: ViewEncapsulation.None,

})
export class DefaultComponent {
    rate: number;
    constructor() {
        this.rate = 3;
    }

    destroy(args){




}
}

mouseout

Fires when mouse hover is removed from Rating control.

Name

Type

Description

argument

Object

Event parameters from rating

Name	Type	Description
value	number	returns the current value.
cancel	boolean	if the event should be canceled; otherwise, false.
model	object	returns the rating model
type	string	returns the name of the event
event	object	returns the mouse click event args values.

Example

<ej-rating id="rating" [value]="rate" (mouseover)="mouseout($event)" > 
</ej-rating>

import {Component} from '@angular/core';
import {ViewEncapsulation} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html',
  styleUrls: ['./rating.component.css'],
  encapsulation: ViewEncapsulation.None,

})
export class DefaultComponent {
    rate: number;
    constructor() {
        this.rate = 3;
    }

    mouseout(args){




}
}

mousemove

Fires when mouse move is moving the Rating control.

Name

Type

Description

argument

Object

Event parameters from rating

Name	Type	Description
value	number	returns the current value.
cancel	boolean	if the event should be canceled; otherwise, false.
model	object	returns the rating model
type	string	returns the name of the event
event	object	returns the mouse click event args values.

Example

<ej-rating id="rating" [value]="rate" (mouseover)="mouse($event)" > 
</ej-rating>

import {Component} from '@angular/core';
import {ViewEncapsulation} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html',
  styleUrls: ['./rating.component.css'],
  encapsulation: ViewEncapsulation.None,

})
export class DefaultComponent {
    rate: number;
    constructor() {
        this.rate = 3;
    }

    mouse(args){




}
}

mouseover

Fires when mouse hovered over the Rating control.

Name

Type

Description

argument

Object

Event parameters from rating

Name	Type	Description
value	number	returns the current value.
cancel	boolean	if the event should be canceled; otherwise, false.
model	object	returns the rating model
type	string	returns the name of the event
event	object	returns the mouse click event args values.
index	object	returns the current index value.

Example

<ej-rating id="rating" [value]="rate" (mouseover)="mouseover($event)" > 
</ej-rating>

import {Component} from '@angular/core';
import {ViewEncapsulation} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html',
  styleUrls: ['./rating.component.css'],
  encapsulation: ViewEncapsulation.None,

})
export class DefaultComponent {
    rate: number;
    constructor() {
        this.rate = 3;
    }

    mouseover(args){




}
}