Sets or gets the animationShowDelay property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxRadioButton #myRadioButton
            [width]="250" [height]="25" [animationShowDelay]="400">
            <span>6 Months Contract</span>
        </jqxRadioButton>
        <jqxRadioButton
            [width]="250" [height]="25">
            <span>12 Months Contract</span>
        </jqxRadioButton>
    `
})
 
export class AppComponent {
    
}

Sets or gets the animationHideDelay property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxRadioButton #myRadioButton
            [width]="250" [height]="25" [animationHideDelay]="400">
            <span>6 Months Contract</span>
        </jqxRadioButton>
        <jqxRadioButton
            [width]="250" [height]="25">
            <span>12 Months Contract</span>
        </jqxRadioButton>
    `
})
 
export class AppComponent {
    
}

Sets or gets the boxSize property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxRadioButton #myRadioButton
            [width]="250" [height]="25" [boxSize]="'18px'">
            <span>6 Months Contract</span>
        </jqxRadioButton>
        <jqxRadioButton
            [width]="250" [height]="25">
            <span>12 Months Contract</span>
        </jqxRadioButton>
    `
})
 
export class AppComponent {
    
}

Sets or gets the checked property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxRadioButton #myRadioButton
            [width]="250" [height]="25" [checked]="true">
            <span>6 Months Contract</span>
        </jqxRadioButton>
        <jqxRadioButton
            [width]="250" [height]="25">
            <span>12 Months Contract</span>
        </jqxRadioButton>
    `
})
 
export class AppComponent {
    
}

Sets or gets the disabled property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxRadioButton #myRadioButton
            [width]="250" [height]="25" [disabled]="true">
            <span>6 Months Contract</span>
        </jqxRadioButton>
        <jqxRadioButton
            [width]="250" [height]="25">
            <span>12 Months Contract</span>
        </jqxRadioButton>
    `
})
 
export class AppComponent {
    
}

Sets or gets the enableContainerClick property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxRadioButton #myRadioButton
            [width]="250" [height]="25" [enableContainerClick]="false">
            <span>6 Months Contract</span>
        </jqxRadioButton>
        <jqxRadioButton
            [width]="250" [height]="25">
            <span>12 Months Contract</span>
        </jqxRadioButton>
    `
})
 
export class AppComponent {
    
}

Sets or gets the groupName property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxRadioButton #myRadioButton
            [width]="250" [height]="25" [groupName]="groupName">
            <span>6 Months Contract</span>
        </jqxRadioButton>
        <jqxRadioButton
            [width]="250" [height]="25">
            <span>12 Months Contract</span>
        </jqxRadioButton>
    `
})
 
export class AppComponent {
    
}

Sets or gets the hasThreeStates property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxRadioButton #myRadioButton
            [width]="250" [height]="25" [hasThreeStates]="true">
            <span>6 Months Contract</span>
        </jqxRadioButton>
        <jqxRadioButton
            [width]="250" [height]="25">
            <span>12 Months Contract</span>
        </jqxRadioButton>
    `
})
 
export class AppComponent {
    
}

Sets or gets the height property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxRadioButton #myRadioButton
            [width]="250" [height]="25">
            <span>6 Months Contract</span>
        </jqxRadioButton>
        <jqxRadioButton
            [width]="250" [height]="25">
            <span>12 Months Contract</span>
        </jqxRadioButton>
    `
})
 
export class AppComponent {
    
}

Sets or gets the rtl property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxRadioButton #myRadioButton
            [width]="250" [height]="25" [rtl]="true">
            <span>6 Months Contract</span>
        </jqxRadioButton>
        <jqxRadioButton
            [width]="250" [height]="25">
            <span>12 Months Contract</span>
        </jqxRadioButton>
    `
})
 
export class AppComponent {
    
}

Sets or gets the theme property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxRadioButton #myRadioButton
            [width]="250" [height]="25" [theme]="'artic'">
            <span>6 Months Contract</span>
        </jqxRadioButton>
        <jqxRadioButton
            [width]="250" [height]="25">
            <span>12 Months Contract</span>
        </jqxRadioButton>
    `
})
 
export class AppComponent {
    
}

Sets or gets the width property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxRadioButton #myRadioButton
            [width]="250" [height]="25">
            <span>6 Months Contract</span>
        </jqxRadioButton>
        <jqxRadioButton
            [width]="250" [height]="25">
            <span>12 Months Contract</span>
        </jqxRadioButton>
    `
})
 
export class AppComponent {
    
}

This event is triggered when the Radio Button is checked.

Code examples

Bind to the checked event of jqxRadioButton.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxRadioButton #myRadioButton(onChecked)="Checked($event)"
            [width]="250" [height]="25">
            <span>6 Months Contract</span>
        </jqxRadioButton>
        <jqxRadioButton
            [width]="250" [height]="25">
            <span>12 Months Contract</span>
        </jqxRadioButton>
    `
})
 
export class AppComponent {
    Checked(event: any): void 
    {
        // Do Something
    }

    
}
							
						

This is triggered when the Radio Button's state changes from one state to another.

Code examples

Bind to the change event of jqxRadioButton.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxRadioButton #myRadioButton(onChange)="Change($event)"
            [width]="250" [height]="25">
            <span>6 Months Contract</span>
        </jqxRadioButton>
        <jqxRadioButton
            [width]="250" [height]="25">
            <span>12 Months Contract</span>
        </jqxRadioButton>
    `
})
 
export class AppComponent {
    Change(event: any): void 
    {
        // Do Something
    }

    
}
							
						

This event is triggered when the Radio Button is unchecked.

Code examples

Bind to the unchecked event of jqxRadioButton.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxRadioButton #myRadioButton(onUnchecked)="Unchecked($event)"
            [width]="250" [height]="25">
            <span>6 Months Contract</span>
        </jqxRadioButton>
        <jqxRadioButton
            [width]="250" [height]="25">
            <span>12 Months Contract</span>
        </jqxRadioButton>
    `
})
 
export class AppComponent {
    Unchecked(event: any): void 
    {
        // Do Something
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxRadioButton #myRadioButton
            [width]="250" [height]="25">
            <span>6 Months Contract</span>
        </jqxRadioButton>
        <jqxRadioButton
            [width]="250" [height]="25">
            <span>12 Months Contract</span>
        </jqxRadioButton>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myRadioButton') myRadioButton: jqxRadioButtonComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myRadioButton.check();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxRadioButton #myRadioButton
            [width]="250" [height]="25">
            <span>6 Months Contract</span>
        </jqxRadioButton>
        <jqxRadioButton
            [width]="250" [height]="25">
            <span>12 Months Contract</span>
        </jqxRadioButton>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myRadioButton') myRadioButton: jqxRadioButtonComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myRadioButton.disable();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxRadioButton #myRadioButton
            [width]="250" [height]="25">
            <span>6 Months Contract</span>
        </jqxRadioButton>
        <jqxRadioButton
            [width]="250" [height]="25">
            <span>12 Months Contract</span>
        </jqxRadioButton>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myRadioButton') myRadioButton: jqxRadioButtonComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myRadioButton.destroy();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxRadioButton #myRadioButton
            [width]="250" [height]="25">
            <span>6 Months Contract</span>
        </jqxRadioButton>
        <jqxRadioButton
            [width]="250" [height]="25">
            <span>12 Months Contract</span>
        </jqxRadioButton>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myRadioButton') myRadioButton: jqxRadioButtonComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myRadioButton.enable();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxRadioButton #myRadioButton
            [width]="250" [height]="25">
            <span>6 Months Contract</span>
        </jqxRadioButton>
        <jqxRadioButton
            [width]="250" [height]="25">
            <span>12 Months Contract</span>
        </jqxRadioButton>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myRadioButton') myRadioButton: jqxRadioButtonComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myRadioButton.focus();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxRadioButton #myRadioButton
            [width]="250" [height]="25">
            <span>6 Months Contract</span>
        </jqxRadioButton>
        <jqxRadioButton
            [width]="250" [height]="25">
            <span>12 Months Contract</span>
        </jqxRadioButton>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myRadioButton') myRadioButton: jqxRadioButtonComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myRadioButton.render();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxRadioButton #myRadioButton
            [width]="250" [height]="25">
            <span>6 Months Contract</span>
        </jqxRadioButton>
        <jqxRadioButton
            [width]="250" [height]="25">
            <span>12 Months Contract</span>
        </jqxRadioButton>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myRadioButton') myRadioButton: jqxRadioButtonComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myRadioButton.uncheck();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxRadioButton #myRadioButton
            [width]="250" [height]="25">
            <span>6 Months Contract</span>
        </jqxRadioButton>
        <jqxRadioButton
            [width]="250" [height]="25">
            <span>12 Months Contract</span>
        </jqxRadioButton>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myRadioButton') myRadioButton: jqxRadioButtonComponent; 
 
    ngAfterViewInit(): void 
    {
        let value = this.myRadioButton.val();
    }

    
}