Properties

NameTypeDefault
count Number 5

Sets or gets the count property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxRating #myRating
            [width]="350" [height]="35" [count]="8">
        </jqxRating>
    `
})
 
export class AppComponent {
    
}
disabled Boolean false

Sets or gets the disabled property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxRating #myRating
            [width]="350" [height]="35" [disabled]="true">
        </jqxRating>
    `
})
 
export class AppComponent {
    
}
height String | Number auto

Sets or gets the height property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxRating #myRating
            [width]="350" [height]="35">
        </jqxRating>
    `
})
 
export class AppComponent {
    
}
itemHeight Number auto

Sets or gets the itemHeight property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxRating #myRating
            [width]="350" [height]="35" [itemHeight]="30">
        </jqxRating>
    `
})
 
export class AppComponent {
    
}
itemWidth Number auto

Sets or gets the itemWidth property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxRating #myRating
            [width]="350" [height]="35" [itemWidth]="20">
        </jqxRating>
    `
})
 
export class AppComponent {
    
}
precision Number 1

Sets or gets the precision property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxRating #myRating
            [width]="350" [height]="35" [precision]="0.5">
        </jqxRating>
    `
})
 
export class AppComponent {
    
}
singleVote Boolean false

Sets or gets the singleVote property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxRating #myRating
            [width]="350" [height]="35" [singleVote]="true">
        </jqxRating>
    `
})
 
export class AppComponent {
    
}
value Number 0

Sets or gets the value property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxRating #myRating
            [width]="350" [height]="35" [value]="3">
        </jqxRating>
    `
})
 
export class AppComponent {
    
}
width String | Number auto

Sets or gets the width property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxRating #myRating
            [width]="350" [height]="35">
        </jqxRating>
    `
})
 
export class AppComponent {
    
}

Events

change Event

The change event is triggered when the rating is changed.

Code examples

Bind to the change event of jqxRating. 

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxRating #myRating(onChange)="Change($event)"
            [width]="350" [height]="35">
        </jqxRating>
    `
})
 
export class AppComponent {
    Change(event: any): void 
    {
        // Do Something
    }

    
}

Methods

NameReturn TypeArguments
disable Void None 
import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxRating #myRating
            [width]="350" [height]="35">
        </jqxRating>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myRating') myRating: jqxRatingComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myRating.disable();
    }

    
}
enable Void None 
import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxRating #myRating
            [width]="350" [height]="35">
        </jqxRating>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myRating') myRating: jqxRatingComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myRating.enable();
    }

    
}
getValue Number None 
import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxRating #myRating
            [width]="350" [height]="35">
        </jqxRating>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myRating') myRating: jqxRatingComponent; 
 
    ngAfterViewInit(): void 
    {
        let value = this.myRating.getValue();
    }

    
}
setValue Void value: Number 
import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxRating #myRating
            [width]="350" [height]="35">
        </jqxRating>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myRating') myRating: jqxRatingComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myRating.setValue(20);
    }

    
}
val Number value: Number 
import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxRating #myRating
            [width]="350" [height]="35">
        </jqxRating>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myRating') myRating: jqxRatingComponent; 
 
    ngAfterViewInit(): void 
    {
        let value = this.myRating.val();
    }

    
}