| Name | Type | Default |
|---|
|
animationShowDelay
|
Number
|
250
|
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 {
}
|
|
animationHideDelay
|
Number
|
300
|
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 {
}
|
|
boxSize
|
Size
|
"13px"
|
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 {
}
|
|
checked
|
Boolean
|
false
|
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 {
}
|
|
disabled
|
Boolean
|
false
|
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 {
}
|
|
enableContainerClick
|
Boolean
|
true
|
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 {
}
|
|
groupName
|
String
|
""
|
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 {
}
|
|
hasThreeStates
|
Boolean
|
false
|
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 {
}
|
|
height
|
Size
|
null
|
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 {
}
|
|
rtl
|
Boolean
|
false
|
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 {
}
|
|
theme
|
String
|
''
|
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 {
}
|
|
width
|
Size
|
null
|
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 {
}
|
|
|
|
checked
|
Event
|
|
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
}
}
|
|
change
|
Event
|
|
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
}
}
|
|
unchecked
|
Event
|
|
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
}
}
|
|
|
| Name | Return Type | Arguments |
|---|
|
check
|
Void
|
None
|
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();
}
}
|
|
disable
|
Void
|
None
|
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();
}
}
|
|
destroy
|
Void
|
None
|
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();
}
}
|
|
enable
|
Void
|
None
|
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();
}
}
|
|
focus
|
Void
|
None
|
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();
}
}
|
|
render
|
Void
|
None
|
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();
}
}
|
|
uncheck
|
Void
|
None
|
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();
}
}
|
|
val
|
Boolean
|
value: Boolean
|
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();
}
}
|