### File

`src/radio/radio-group.component.ts`

### Description

See demo

class: RadioGroup

selector: `ibm-radio-group`

source: `src/forms/radio.component.ts`

Ex:

     * <ibm-radio-group [(ngModel)]="radio">
     *     <ibm-radio *ngFor="let one of manyRadios" [value]="one">
     *        Radio {{one}}
     *     </ibm-radio>
     * </ibm-radio-group>
     *
     * Radio selected: {{radio}}
     *

     * manyRadios = ["one", "two", "three", "four", "five", "six"];
     *

Also see: `Radio`

../../iframe.html?id=radio--basic

### Implements

`AfterContentInit` `AfterViewInit` `ControlValueAccessor`

### Metadata

providers | `{ provide: NG_VALUE_ACCESSOR, useExisting: RadioGroup, multi: true }`
selector | `ibm-radio-group`

template

    <div
    	class="bx--radio-button-group"
    	[ngClass]="{
    		'bx--radio-button-group--vertical': orientation === 'vertical',
    		'bx--radio-button-group--label-left': orientation === 'vertical' && labelPlacement === 'left'
    	}"
    	role="radiogroup">
    	<ng-content></ng-content>
    </div>

### Index

###### Properties

- Protected _disabled
- Protected _name
- Protected _selected
- Protected _skeleton
- Protected _value
- Protected isInitialized
- onTouched
- propagateChange
- Static radioGroupCount
- radios

###### Methods

- checkSelectedRadio
- emitChangeEvent
- ngAfterContentInit
- ngAfterViewInit
- Public registerOnChange
- Public registerOnTouched
- Protected updateChildren
- Protected updateRadioChangeHandler
- updateRadioNames
- updateRadios
- updateSelectedRadioFromValue
- writeValue

###### Inputs

- disabled
- labelPlacement
- name
- orientation
- selected
- skeleton
- value

###### Outputs

- change

###### HostBindings

- class.bx--form-item

###### Accessors

- selected
- value
- name
- skeleton

### Inputs

`disabled` | Set to true to disable the whole radio group Default value : `false`
Defined in src/radio/radio-group.component.ts:143

`labelPlacement` | Type : `"right" | "left"` Default value : `"right"`
Defined in src/radio/radio-group.component.ts:75

`name` | Replaces the name associated with the `RadioGroup` with the provided parameter. Type : `string`
Defined in src/radio/radio-group.component.ts:129

`orientation` | Type : `"horizontal" | "vertical"` Default value : `"horizontal"`
Defined in src/radio/radio-group.component.ts:73

`selected` | Sets the passed in `Radio` item as the selected input within the `RadioGroup`.
Defined in src/radio/radio-group.component.ts:92

`skeleton` | Returns the skeleton value in the `RadioGroup` if there is one. Type : `any`
Defined in src/radio/radio-group.component.ts:149

`value` | Sets the value/state of the selected `Radio` within the `RadioGroup` to the passed in value. Type : `any`
Defined in src/radio/radio-group.component.ts:109

### Outputs

`change` | Emits event notifying other classes of a change using a `RadioChange` class. `$event` Type: `EventEmitter<RadioChange>`
Defined in src/radio/radio-group.component.ts:80

### HostBindings

class.bx--form-item
`class.bx--form-item: ```
Default value : `true`
Defined in src/radio/radio-group.component.ts:164
Binds 'bx--form-item' value to the class for `RadioGroup`.

### Methods

checkSelectedRadio
`checkSelectedRadio()`
Defined in src/radio/radio-group.component.ts:194
Updates the selected `Radio` to be checked (selected). Returns : `void`

emitChangeEvent
`emitChangeEvent(event: RadioChange)`
Defined in src/radio/radio-group.component.ts:219

Creates a class of `RadioChange` to emit the change in the `RadioGroup`.

Parameters :

Name | Type | Optional
event | `RadioChange` | No

Returns : `void`

ngAfterContentInit
`ngAfterContentInit()`
Defined in src/radio/radio-group.component.ts:251
Returns : `void`

ngAfterViewInit
`ngAfterViewInit()`
Defined in src/radio/radio-group.component.ts:261
Returns : `void`

Public registerOnChange
`registerOnChange(fn: any)`
Defined in src/radio/radio-group.component.ts:268

Used to set method to propagate changes back to the form.

Parameters :

Name | Type | Optional
fn | `any` | No

Returns : `void`

Public registerOnTouched
`registerOnTouched(fn: any)`
Defined in src/radio/radio-group.component.ts:276

Registers a callback to be triggered when the control has been touched.

Parameters :

Name | Type | Optional | Description
fn | `any` | No | `Callback to be triggered when the checkbox is touched.`

Returns : `void`

Protected updateChildren
`updateChildren()`
Defined in src/radio/radio-group.component.ts:290
Returns : `void`

Protected updateRadioChangeHandler
`updateRadioChangeHandler()`
Defined in src/radio/radio-group.component.ts:296
Returns : `void`

updateRadioNames
`updateRadioNames()`
Defined in src/radio/radio-group.component.ts:225
Returns : `void`

updateRadios
`updateRadios()`
Defined in src/radio/radio-group.component.ts:233
Synchronizes radio properties. Returns : `void`

updateSelectedRadioFromValue
`updateSelectedRadioFromValue()`
Defined in src/radio/radio-group.component.ts:203
Use the value of the `RadioGroup` to update the selected radio to the right state (selected state). Returns : `void`

writeValue
`writeValue(value: any)`
Defined in src/radio/radio-group.component.ts:247

Updates the value of the `RadioGroup` using the provided parameter.

Parameters :

Name | Type | Optional
value | `any` | No

Returns : `void`

### Properties

Protected _disabled
`_disabled: ```
Default value : `false`
Defined in src/radio/radio-group.component.ts:173
Reflects whether or not the input is disabled and cannot be selected.

Protected _name
`_name: ```
Default value : ``radio-group-${RadioGroup.radioGroupCount++}``
Defined in src/radio/radio-group.component.ts:189
The name attribute associated with the `RadioGroup`.

Protected _selected
`_selected: `Radio``
Type : `Radio`
Default value : `null`
Defined in src/radio/radio-group.component.ts:185
The `Radio` within the `RadioGroup` that is selected.

Protected _skeleton
`_skeleton: ```
Default value : `false`
Defined in src/radio/radio-group.component.ts:177
Reflects whether or not the dropdown is loading.

Protected _value
`_value: `any``
Type : `any`
Default value : `null`
Defined in src/radio/radio-group.component.ts:181
The value of the selected option within the `RadioGroup`.

Protected isInitialized
`isInitialized: ```
Default value : `false`
Defined in src/radio/radio-group.component.ts:169
To track whether the `RadioGroup` has been initialized.

onTouched
`onTouched: `function``
Type : `function`
Default value : `() => {}`
Defined in src/radio/radio-group.component.ts:283
Needed to properly implement ControlValueAccessor.

propagateChange
`propagateChange: ```
Default value : `(_: any) => {}`
Defined in src/radio/radio-group.component.ts:288
Method set in registerOnChange to propagate changes back to the form.

Static radioGroupCount
`radioGroupCount: `number``
Type : `number`
Default value : `0`
Defined in src/radio/radio-group.component.ts:71
Used for creating the `RadioGroup` 'name' property dynamically.

radios
`radios: `QueryList<Radio>``
Type : `QueryList<Radio>`
Decorators : `@ContentChildren(undefined)`
Defined in src/radio/radio-group.component.ts:86
The `Radio` input items in the `RadioGroup`.

### Accessors

selected
get `selected()`
Defined in src/radio/radio-group.component.ts:101
Returns the `Radio` that is selected within the `RadioGroup`.
set `selected(selected)`
Defined in src/radio/radio-group.component.ts:92

Sets the passed in `Radio` item as the selected input within the `RadioGroup`.

Parameters :

Name | Optional
selected | No

Returns : `void`

value
get `value()`
Defined in src/radio/radio-group.component.ts:121
Returns the value/state of the selected `Radio` within the `RadioGroup`.
set `value(newValue: any)`
Defined in src/radio/radio-group.component.ts:109

Sets the value/state of the selected `Radio` within the `RadioGroup` to the passed in value.

Parameters :

Name | Type | Optional
newValue | `any` | No

Returns : `void`

name
get `name()`
Defined in src/radio/radio-group.component.ts:136
Returns the associated name of the `RadioGroup`.
set `name(name: string)`
Defined in src/radio/radio-group.component.ts:129

Replaces the name associated with the `RadioGroup` with the provided parameter.

Parameters :

Name | Type | Optional
name | `string` | No

Returns : `void`

skeleton
set `skeleton(value: any)`
Defined in src/radio/radio-group.component.ts:156

Sets the skeleton value for all `Radio` to the skeleton value of `RadioGroup`.

Parameters :

Name | Type | Optional
value | `any` | No

Returns : `void`

    import {
    	AfterContentInit,
    	ContentChildren,
    	Component,
    	EventEmitter,
    	forwardRef,
    	Input,
    	Output,
    	QueryList,
    	HostBinding,
    	AfterViewInit
    } from "@angular/core";
    import { NG_VALUE_ACCESSOR, ControlValueAccessor } from "@angular/forms";
    import { Radio } from "./radio.component";
    import { RadioChange } from "./radio-change.class";

    /**
     * [See demo](../../?path=/story/radio--basic)
     *
     * class: RadioGroup
     *
     * selector: `ibm-radio-group`
     *
     * source: `src/forms/radio.component.ts`
     *
     *
     * Ex:
     * ```html
     * <ibm-radio-group [(ngModel)]="radio">
     * 	<ibm-radio *ngFor="let one of manyRadios" [value]="one">
     *		Radio {{one}}
     * 	</ibm-radio>
     * </ibm-radio-group>
     *
     * Radio selected: {{radio}}
     * ```
     *
     * ```typescript
     * manyRadios = ["one", "two", "three", "four", "five", "six"];
     * ```
     *
     * Also see: [`Radio`](#ibm-radio)
     *
     * <example-url>../../iframe.html?id=radio--basic</example-url>
     */
    @Component({
    	selector: "ibm-radio-group",
    	template: `
    		<div
    			class="bx--radio-button-group"
    			[ngClass]="{
    				'bx--radio-button-group--vertical': orientation === 'vertical',
    				'bx--radio-button-group--label-left': orientation === 'vertical' && labelPlacement === 'left'
    			}"
    			role="radiogroup">
    			<ng-content></ng-content>
    		</div>
    	`,
    	providers: [
    		{
    			provide: NG_VALUE_ACCESSOR,
    			useExisting: RadioGroup,
    			multi: true
    		}
    	]
    })
    export class RadioGroup implements AfterContentInit, AfterViewInit, ControlValueAccessor {
    	/**
    	 * Used for creating the `RadioGroup` 'name' property dynamically.
    	 */
    	static radioGroupCount = 0;

    	@Input() orientation: "horizontal" | "vertical" = "horizontal";

    	@Input() labelPlacement: "right" | "left" =  "right";

    	/**
    	 * Emits event notifying other classes of a change using a `RadioChange` class.
    	 */
    	@Output() change: EventEmitter<RadioChange> = new EventEmitter<RadioChange>();

    	/**
    	 * The `Radio` input items in the `RadioGroup`.
    	 */
    	// tslint:disable-next-line:no-forward-ref
    	@ContentChildren(forwardRef(() => Radio)) radios: QueryList<Radio>;

    	/**
    	 * Sets the passed in `Radio` item as the selected input within the `RadioGroup`.
    	 */
    	@Input()
    	set selected(selected: Radio | null) {
    		this._selected = selected;
    		this.value = selected ? selected.value : null;
    		this.checkSelectedRadio();
    	}

    	/**
    	 * Returns the `Radio` that is selected within the `RadioGroup`.
    	 */
    	get selected() {
    		return this._selected;
    	}

    	/**
    	 * Sets the value/state of the selected `Radio` within the `RadioGroup` to the passed in value.
    	 */
    	@Input()
    	set value(newValue: any) {
    		if (this._value !== newValue) {
    			this._value = newValue;

    			this.updateSelectedRadioFromValue();
    			this.checkSelectedRadio();
    		}
    	}

    	/**
    	 * Returns the value/state of the selected `Radio` within the `RadioGroup`.
    	 */
    	get value() {
    		return this._value;
    	}

    	/**
    	 * Replaces the name associated with the `RadioGroup` with the provided parameter.
    	 */
    	@Input()
    	set name(name: string) {
    		this._name = name;
    		this.updateRadios();
    	}
    	/**
    	 * Returns the associated name of the `RadioGroup`.
    	 */
    	get name() {
    		return this._name;
    	}

    	/**
    	 * Set to true to disable the whole radio group
    	 */
    	@Input() disabled = false;

    	/**
    	 * Returns the skeleton value in the `RadioGroup` if there is one.
    	 */
    	@Input()
    	get skeleton(): any {
    		return this._skeleton;
    	}

    	/**
    	 * Sets the skeleton value for all `Radio` to the skeleton value of `RadioGroup`.
    	 */
    	set skeleton(value: any) {
    		this._skeleton = value;
    		this.updateChildren();
    	}

    	/**
    	 * Binds 'bx--form-item' value to the class for `RadioGroup`.
    	 */
    	@HostBinding("class.bx--form-item") radioButtonGroupClass = true;

    	/**
    	 * To track whether the `RadioGroup` has been initialized.
    	 */
    	protected isInitialized = false;
    	/**
    	 * Reflects whether or not the input is disabled and cannot be selected.
    	 */
    	protected _disabled = false;
    	/**
    	 * Reflects whether or not the dropdown is loading.
    	 */
    	protected _skeleton = false;
    	/**
    	 * The value of the selected option within the `RadioGroup`.
    	 */
    	protected _value: any = null;
    	/**
    	 * The `Radio` within the `RadioGroup` that is selected.
    	 */
    	protected _selected: Radio = null;
    	/**
    	 * The name attribute associated with the `RadioGroup`.
    	 */
    	protected _name = `radio-group-${RadioGroup.radioGroupCount++}`;

    	/**
    	 * Updates the selected `Radio` to be checked (selected).
    	 */
    	checkSelectedRadio() {
    		if (this.selected && !this._selected.checked) {
    			this.selected.checked = true;
    		}
    	}

    	/**
    	 * Use the value of the `RadioGroup` to update the selected radio to the right state (selected state).
    	 */
    	updateSelectedRadioFromValue() {
    		let alreadySelected = this._selected != null && this._selected.value === this._value;

    		if (this.radios && !alreadySelected) {
    			this._selected = null;
    			this.radios.forEach(radio => {
    				if (radio.checked) {
    					this._selected = radio;
    				}
    			});
    		}
    	}

    	/**
    	 * Creates a class of `RadioChange` to emit the change in the `RadioGroup`.
    	 */
    	emitChangeEvent(event: RadioChange) {
    		this.change.emit(event);
    		this.propagateChange(event.value);
    		this.onTouched();
    	}

    	updateRadioNames() {
    		console.warn("updateRadioNames had been deprecated. Use updateRadios instead");
    		this.updateRadios();
    	}

    	/**
    	 * Synchronizes radio properties.
    	 */
    	updateRadios() {
    		if (this.radios) {
    			setTimeout(() => {
    				this.radios.forEach(radio => radio.name = this.name);
    				if (this.labelPlacement === "left") {
    					this.radios.forEach(radio => radio.labelPlacement = "left");
    				}
    			});
    		}
    	}

    	/**
    	 * Updates the value of the `RadioGroup` using the provided parameter.
    	 */
    	writeValue(value: any) {
    		this.value = value;
    	}

    	ngAfterContentInit() {
    		this.radios.changes.subscribe(() => {
    			this.updateRadios();
    			this.updateRadioChangeHandler();
    		});

    		this.updateChildren();
    		this.updateRadioChangeHandler();
    	}

    	ngAfterViewInit() {
    		this.updateRadios();
    	}

    	/**
    	 * Used to set method to propagate changes back to the form.
    	 */
    	public registerOnChange(fn: any) {
    		this.propagateChange = fn;
    	}

    	/**
    	 * Registers a callback to be triggered when the control has been touched.
    	 * @param fn Callback to be triggered when the checkbox is touched.
    	 */
    	public registerOnTouched(fn: any) {
    		this.onTouched = fn;
    	}

    	/**
    	 * Needed to properly implement ControlValueAccessor.
    	 */
    	onTouched: () => any = () => {};

    	/**
    	 * Method set in registerOnChange to propagate changes back to the form.
    	 */
    	propagateChange = (_: any) => {};

    	protected updateChildren() {
    		if (this.radios) {
    			this.radios.forEach(child => child.skeleton = this.skeleton);
    		}
    	}

    	protected updateRadioChangeHandler() {
    		this.radios.forEach(radio => {
    			radio.registerRadioChangeHandler((event: RadioChange) => {
    				// update selected and value from the event
    				this._selected = event.source;
    				this._value = event.value;
    				// bubble the event
    				this.emitChangeEvent(event);
    			});
    		});
    	}
    }

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""