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

  • HTML
    • <ej-rating [value]="rate" [allowReset]=true > 
</ej-rating>
  • TS
    • 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

  • HTML
    • <ej-rating [value]="rate" [allowReset]=true > 
</ej-rating>
  • TS
    • 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

  • HTML
    • <ej-rating [value]="rate" cssClass="cssClass" > 
</ej-rating>
  • TS
    • 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.

  • HTML
    • <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

  • HTML
    • <ej-rating [value]="rate" [enabled]=true > 
</ej-rating>
  • TS
    • 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

  • HTML
    • <ej-rating [value]="rate" [enablePersistence]=true > 
</ej-rating>
  • TS
    • 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

  • HTML
    • <ej-rating [value]="rate" height="50" [allowReset]=true > 
</ej-rating>
  • TS
    • 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

  • HTML
    • <ej-rating [value]="rate" [htmlAttributes]="attributes" > 
</ej-rating>
  • TS
    • 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

  • HTML
    • <ej-rating [value]="rate" [incrementStep]="incrementStep" > 
</ej-rating>
  • TS
    • 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

  • HTML
    • <ej-rating [value]="rate" [maxValue]="maxValue" > 
</ej-rating>
  • TS
    • 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

  • HTML
    • <ej-rating [value]="rate" [minValue]="minValue" > 
</ej-rating>
  • TS
    • 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

  • HTML
    • <ej-rating [value]="rate" orientation="vertical" > 
</ej-rating>
  • TS
    • 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

  • HTML
    • <ej-rating [value]="rate" precision="half" > 
</ej-rating>
  • TS
    • 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

  • HTML
    • <ej-rating [value]="rate" [readOnly]=true > 
</ej-rating>
  • TS
    • 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

  • HTML
    • <ej-rating [value]="rate" [shapeHeight]="shapeHeight" > 
</ej-rating>
  • TS
    • 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

  • HTML
    • <ej-rating [value]="rate" [shapeWidth]="shapeWidth" > 
</ej-rating>
  • TS
    • 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

  • HTML
    • <ej-rating [value]="rate" [showTooltip]=true > 
</ej-rating>
  • TS
    • 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

  • HTML
    • <ej-rating [value]="rate" [allowReset]=true > 
</ej-rating>
  • TS
    • 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

  • HTML
    • <ej-rating [value]="rate" width="500" > 
</ej-rating>
  • TS
    • 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

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

<button type="button" (click)="OnClick()">Destroy</button>
  • TS
    • 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();

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

<button type="button" (click)="OnClick()">Destroy</button>
  • TS
    • 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

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

<button type="button" (click)="OnClick()">GetValue</button>
  • TS
    • 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();

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

<button type="button" (click)="OnClick()">GetValue</button>
  • TS
    • 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

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

<button type="button" (click)="OnClick()">Hide</button>
  • TS
    • 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();

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

<button type="button" (click)="OnClick()">Hide</button>
  • TS
    • 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

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

<button type="button" (click)="OnClick()">Refresh</button>
  • TS
    • 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();

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

<button type="button" (click)="OnClick()">Refresh</button>
  • TS
    • 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

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

<button type="button" (click)="OnClick()">Reset</button>
  • TS
    • 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();

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

<button type="button" (click)="OnClick()">Reset</button>
  • TS
    • 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

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

<button type="button" (click)="OnClick()">Set value</button>
  • TS
    • 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);

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

<button type="button" (click)="OnClick()">Set value</button>
  • TS
    • 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

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

<button type="button" (click)="OnClick()">Show</button>
  • TS
    • 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();

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

<button type="button" (click)="OnClick()">Show</button>
  • TS
    • 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

  • HTML
    • <ej-rating id="rating" [value]="rate" (ejchange)="onChange($event)" > 
</ej-rating>
  • TS
    • 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

  • HTML
    • <ej-rating id="rating" [value]="rate" (ejclick)="onChange($event)" > 
</ej-rating>
  • TS
    • 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

  • HTML
    • <ej-rating id="rating" [value]="rate" (create)="onCreate($event)" > 
</ej-rating>
  • TS
    • 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

  • HTML
    • <ej-rating id="rating" [value]="rate" (destroy)="destroy($event)" > 
</ej-rating>
  • TS
    • 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

  • HTML
    • <ej-rating id="rating" [value]="rate" (mouseover)="mouseout($event)" > 
</ej-rating>
  • TS
    • 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

  • HTML
    • <ej-rating id="rating" [value]="rate" (mouseover)="mouse($event)" > 
</ej-rating>
  • TS
    • 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

  • HTML
    • <ej-rating id="rating" [value]="rate" (mouseover)="mouseover($event)" > 
</ej-rating>
  • TS
    • 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){




}
}