Properties

NameTypeDefault
change (item?: any) => void null

Sets or gets the change function. It is called when a value is changed and the changed item is passed as parameter. The item argument has the following properties: enabled: boolean, encode: boolean, label: string, value: string, cssClass: string and checked: boolean. 

import { Component, ViewChild } from '@angular/core';
 
import { jqxRadioButtonGroupComponent } from 'jqwidgets-ng/jqxradiobuttongroup';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxRadioButtonGroup #myRadioButtonGroup 
       [change]='(item) => {  }'>
    Check Me Out!
    </jqxRadioButtonGroup>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myRadioButtonGroup', { static: false }) myRadioButtonGroup: jqxRadioButtonGroupComponent;
}
disabled boolean false

Sets or gets whether the CheckBoxGroup is disabled. 

import { Component, ViewChild } from '@angular/core';
 
import { jqxRadioButtonGroupComponent } from 'jqwidgets-ng/jqxradiobuttongroup';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxRadioButtonGroup #myRadioButtonGroup 
       [disabled]='true'>
    Check Me Out!
    </jqxRadioButtonGroup>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myRadioButtonGroup', { static: false }) myRadioButtonGroup: jqxRadioButtonGroupComponent;
}
items [] []

Sets or gets the items. Each item could be a string or an object. The object has the following properties: enabled: boolean, encode: boolean, label: string, value: string, cssClass: string and checked: boolean. 

import { Component, ViewChild } from '@angular/core';
 
import { jqxRadioButtonGroupComponent } from 'jqwidgets-ng/jqxradiobuttongroup';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxRadioButtonGroup #myRadioButtonGroup 
       [items]='[{label: "Item 1", value: "1"}, {label: "Item 2", value: "2"}]'>
    Check Me Out!
    </jqxRadioButtonGroup>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myRadioButtonGroup', { static: false }) myRadioButtonGroup: jqxRadioButtonGroupComponent;
}
value [] []

Sets or gets the value array. This property determines the checked item(s). 

import { Component, ViewChild } from '@angular/core';
 
import { jqxRadioButtonGroupComponent } from 'jqwidgets-ng/jqxradiobuttongroup';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxRadioButtonGroup #myRadioButtonGroup 
       [value]='["1"]'>
    Check Me Out!
    </jqxRadioButtonGroup>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myRadioButtonGroup', { static: false }) myRadioButtonGroup: jqxRadioButtonGroupComponent;
}
layout string vertical

Sets or gets the items layout. It can be 'horizontal' or 'vertical'. 

import { Component, ViewChild } from '@angular/core';
 
import { jqxRadioButtonGroupComponent } from 'jqwidgets-ng/jqxradiobuttongroup';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxRadioButtonGroup #myRadioButtonGroup 
       [layout]='"horizontal"'>
    Check Me Out!
    </jqxRadioButtonGroup>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myRadioButtonGroup', { static: false }) myRadioButtonGroup: jqxRadioButtonGroupComponent;
}
labelPosition string after

Sets or gets the items label position. It can be 'before' or 'after'. 

import { Component, ViewChild } from '@angular/core';
 
import { jqxRadioButtonGroupComponent } from 'jqwidgets-ng/jqxradiobuttongroup';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxRadioButtonGroup #myRadioButtonGroup 
       [labelPosition]='"before"'>
    Check Me Out!
    </jqxRadioButtonGroup>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myRadioButtonGroup', { static: false }) myRadioButtonGroup: jqxRadioButtonGroupComponent;
}
rtl boolean false

Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.

import { Component, ViewChild } from '@angular/core';
 
import { jqxRadioButtonGroupComponent } from 'jqwidgets-ng/jqxradiobuttongroup';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxRadioButtonGroup #myRadioButtonGroup 
       [rtl]='true'>
    Check Me Out!
    </jqxRadioButtonGroup>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myRadioButtonGroup', { static: false }) myRadioButtonGroup: jqxRadioButtonGroupComponent;
}
theme string '' 
import { Component, ViewChild } from '@angular/core';
 
import { jqxRadioButtonGroupComponent } from 'jqwidgets-ng/jqxradiobuttongroup';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxRadioButtonGroup #myRadioButtonGroup 
       [theme]='"material"'>
    Check Me Out!
    </jqxRadioButtonGroup>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myRadioButtonGroup', { static: false }) myRadioButtonGroup: jqxRadioButtonGroupComponent;
}

Events

Methods

NameArgumentsReturn Type
getValue None

Gets the value.

import { Component, ViewChild } from '@angular/core';
 
import { jqxRadioButtonGroupComponent } from 'jqwidgets-ng/jqxradiobuttongroup';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxRadioButtonGroup #myRadioButtonGroup 
      >
    Check Me Out!
    </jqxRadioButtonGroup>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myRadioButtonGroup', { static: false }) myRadioButtonGroup: jqxRadioButtonGroupComponent;
  
  public ngAfterViewInit(): void {
    this.myRadioButtonGroup.getValue();
  }
}
getValueAt index

Gets an item value at index. 

import { Component, ViewChild } from '@angular/core';
 
import { jqxRadioButtonGroupComponent } from 'jqwidgets-ng/jqxradiobuttongroup';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxRadioButtonGroup #myRadioButtonGroup 
      >
    Check Me Out!
    </jqxRadioButtonGroup>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myRadioButtonGroup', { static: false }) myRadioButtonGroup: jqxRadioButtonGroupComponent;
  
  public ngAfterViewInit(): void {
    this.myRadioButtonGroup.getValueAt();
  }
}
enableAt index

Enables an item at index. 

import { Component, ViewChild } from '@angular/core';
 
import { jqxRadioButtonGroupComponent } from 'jqwidgets-ng/jqxradiobuttongroup';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxRadioButtonGroup #myRadioButtonGroup 
      >
    Check Me Out!
    </jqxRadioButtonGroup>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myRadioButtonGroup', { static: false }) myRadioButtonGroup: jqxRadioButtonGroupComponent;
  
  public ngAfterViewInit(): void {
    this.myRadioButtonGroup.enableAt();
  }
}
disableAt index

Disables an item at index. 

import { Component, ViewChild } from '@angular/core';
 
import { jqxRadioButtonGroupComponent } from 'jqwidgets-ng/jqxradiobuttongroup';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxRadioButtonGroup #myRadioButtonGroup 
      >
    Check Me Out!
    </jqxRadioButtonGroup>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myRadioButtonGroup', { static: false }) myRadioButtonGroup: jqxRadioButtonGroupComponent;
  
  public ngAfterViewInit(): void {
    this.myRadioButtonGroup.disableAt();
  }
}
checkAt index

Checks an item at index. 

import { Component, ViewChild } from '@angular/core';
 
import { jqxRadioButtonGroupComponent } from 'jqwidgets-ng/jqxradiobuttongroup';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxRadioButtonGroup #myRadioButtonGroup 
      >
    Check Me Out!
    </jqxRadioButtonGroup>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myRadioButtonGroup', { static: false }) myRadioButtonGroup: jqxRadioButtonGroupComponent;
  
  public ngAfterViewInit(): void {
    this.myRadioButtonGroup.checkAt();
  }
}
uncheckAt index

Unchecks an item at index. 

import { Component, ViewChild } from '@angular/core';
 
import { jqxRadioButtonGroupComponent } from 'jqwidgets-ng/jqxradiobuttongroup';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxRadioButtonGroup #myRadioButtonGroup 
      >
    Check Me Out!
    </jqxRadioButtonGroup>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myRadioButtonGroup', { static: false }) myRadioButtonGroup: jqxRadioButtonGroupComponent;
  
  public ngAfterViewInit(): void {
    this.myRadioButtonGroup.uncheckAt();
  }
}
uncheckAll None

Unchecks all items. 

import { Component, ViewChild } from '@angular/core';
 
import { jqxRadioButtonGroupComponent } from 'jqwidgets-ng/jqxradiobuttongroup';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxRadioButtonGroup #myRadioButtonGroup 
      >
    Check Me Out!
    </jqxRadioButtonGroup>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myRadioButtonGroup', { static: false }) myRadioButtonGroup: jqxRadioButtonGroupComponent;
  
  public ngAfterViewInit(): void {
    this.myRadioButtonGroup.uncheckAll();
  }
}
checkValue value

Checks an item by value. 

import { Component, ViewChild } from '@angular/core';
 
import { jqxRadioButtonGroupComponent } from 'jqwidgets-ng/jqxradiobuttongroup';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxRadioButtonGroup #myRadioButtonGroup 
      >
    Check Me Out!
    </jqxRadioButtonGroup>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myRadioButtonGroup', { static: false }) myRadioButtonGroup: jqxRadioButtonGroupComponent;
  
  public ngAfterViewInit(): void {
    this.myRadioButtonGroup.checkValue();
  }
}
uncheckValue value

Unchecks an item by value. 

import { Component, ViewChild } from '@angular/core';
 
import { jqxRadioButtonGroupComponent } from 'jqwidgets-ng/jqxradiobuttongroup';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxRadioButtonGroup #myRadioButtonGroup 
      >
    Check Me Out!
    </jqxRadioButtonGroup>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myRadioButtonGroup', { static: false }) myRadioButtonGroup: jqxRadioButtonGroupComponent;
  
  public ngAfterViewInit(): void {
    this.myRadioButtonGroup.uncheckValue();
  }
}
disable None

Disables the CheckBoxGroup. 

import { Component, ViewChild } from '@angular/core';
 
import { jqxRadioButtonGroupComponent } from 'jqwidgets-ng/jqxradiobuttongroup';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxRadioButtonGroup #myRadioButtonGroup 
      >
    Check Me Out!
    </jqxRadioButtonGroup>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myRadioButtonGroup', { static: false }) myRadioButtonGroup: jqxRadioButtonGroupComponent;
  
  public ngAfterViewInit(): void {
    this.myRadioButtonGroup.disable();
  }
}
destroy None

Destroys the widget. 

import { Component, ViewChild } from '@angular/core';
 
import { jqxRadioButtonGroupComponent } from 'jqwidgets-ng/jqxradiobuttongroup';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxRadioButtonGroup #myRadioButtonGroup 
      >
    Check Me Out!
    </jqxRadioButtonGroup>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myRadioButtonGroup', { static: false }) myRadioButtonGroup: jqxRadioButtonGroupComponent;
  
  public ngAfterViewInit(): void {
    this.myRadioButtonGroup.destroy();
  }
}
enable None

Enables the CheckBoxGroup. 

import { Component, ViewChild } from '@angular/core';
 
import { jqxRadioButtonGroupComponent } from 'jqwidgets-ng/jqxradiobuttongroup';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxRadioButtonGroup #myRadioButtonGroup 
      >
    Check Me Out!
    </jqxRadioButtonGroup>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myRadioButtonGroup', { static: false }) myRadioButtonGroup: jqxRadioButtonGroupComponent;
  
  public ngAfterViewInit(): void {
    this.myRadioButtonGroup.enable();
  }
}
render None

Renders the widget. 

import { Component, ViewChild } from '@angular/core';
 
import { jqxRadioButtonGroupComponent } from 'jqwidgets-ng/jqxradiobuttongroup';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxRadioButtonGroup #myRadioButtonGroup 
      >
    Check Me Out!
    </jqxRadioButtonGroup>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myRadioButtonGroup', { static: false }) myRadioButtonGroup: jqxRadioButtonGroupComponent;
  
  public ngAfterViewInit(): void {
    this.myRadioButtonGroup.render();
  }
}
val value

Sets or gets the value. 

import { Component, ViewChild } from '@angular/core';
 
import { jqxRadioButtonGroupComponent } from 'jqwidgets-ng/jqxradiobuttongroup';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxRadioButtonGroup #myRadioButtonGroup 
      >
    Check Me Out!
    </jqxRadioButtonGroup>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myRadioButtonGroup', { static: false }) myRadioButtonGroup: jqxRadioButtonGroupComponent;
  
  public ngAfterViewInit(): void {
    this.myRadioButtonGroup.val();
  }
}