### File

`src/table/cell/table-radio.component.ts`

### Metadata

selector | `[ibmTableRadio]`

template

    <ibm-radio
    	*ngIf="!skeleton"
    	[attr.aria-label]="getLabel() | i18nReplace:getSelectionLabelValue(row) | async"
    	[checked]="selected"
    	(change)="change.emit()">
    </ibm-radio>

### Index

###### Properties

- Protected _label

###### Methods

- getLabel
- getSelectionLabelValue

###### Inputs

- label
- row
- selected
- selectionLabelColumn
- skeleton

###### Outputs

- change

###### Accessors

- label

### Constructor

`constructor(i18n: I18n)`
Defined in src/table/cell/table-radio.component.ts:56

Parameters :

Name | Type | Optional
i18n | `I18n` | No

### Inputs

`label` |
Defined in src/table/cell/table-radio.component.ts:29

`row` | Type : `any[]`
Defined in src/table/cell/table-radio.component.ts:24

`selected` | Default value : `false`
Defined in src/table/cell/table-radio.component.ts:26

`selectionLabelColumn`

Used to populate the row selection checkbox label with a useful value if set.

Example:

         * <ibm-table [selectionLabelColumn]="0"></ibm-table>
         * <!-- results in aria-label="Select first column value"
         * (where "first column value" is the value of the first column in the row -->
         *

Type : `number`

Defined in src/table/cell/table-radio.component.ts:47

`skeleton` | Default value : `false`
Defined in src/table/cell/table-radio.component.ts:49

### Outputs

`change` | Emits if a single row is selected. `$event` Type: `EventEmitter`
Defined in src/table/cell/table-radio.component.ts:54

### Methods

getLabel
`getLabel()`
Defined in src/table/cell/table-radio.component.ts:67
Returns : `Observable<string>`

getSelectionLabelValue
`getSelectionLabelValue(row: TableItem[])`
Defined in src/table/cell/table-radio.component.ts:60

Parameters :

Name | Type | Optional
row | `TableItem[]` | No

Returns : `{ value: any; }`

### Properties

Protected _label
`_label: ```
Default value : `this.i18n.getOverridable("TABLE.CHECKBOX_ROW")`
Defined in src/table/cell/table-radio.component.ts:56

### Accessors

label
get `label()`
Defined in src/table/cell/table-radio.component.ts:33
set `label(value)`
Defined in src/table/cell/table-radio.component.ts:29

Parameters :

Name | Optional
value | No

Returns : `void`

    import {
    	Component,
    	Input,
    	Output,
    	EventEmitter
    } from "@angular/core";
    import { I18n, Overridable } from "./../../i18n/i18n.module";
    import { TableItem } from "./../table-item.class";
    import { Observable } from "rxjs";

    @Component({
    	// tslint:disable-next-line: component-selector
    	selector: "[ibmTableRadio]",
    	template: `
    		<ibm-radio
    			*ngIf="!skeleton"
    			[attr.aria-label]="getLabel() | i18nReplace:getSelectionLabelValue(row) | async"
    			[checked]="selected"
    			(change)="change.emit()">
    		</ibm-radio>
    	`
    })
    export class TableRadio {
    	@Input() row: any[];

    	@Input() selected = false;

    	@Input()
    	set label(value: string | Observable<string>) {
    		this._label.override(value);
    	}

    	get label() {
    		return this._label.value;
    	}

    	/**
    	 * Used to populate the row selection checkbox label with a useful value if set.
    	 *
    	 * Example:
    	 * ```
    	 * <ibm-table [selectionLabelColumn]="0"></ibm-table>
    	 * <!-- results in aria-label="Select first column value"
    	 * (where "first column value" is the value of the first column in the row -->
    	 * ```
    	 */
    	@Input() selectionLabelColumn: number;

    	@Input() skeleton = false;

    	/**
    	 * Emits if a single row is selected.
    	 */
    	@Output() change = new EventEmitter();

    	protected _label = this.i18n.getOverridable("TABLE.CHECKBOX_ROW");

    	constructor(protected i18n: I18n) { }

    	getSelectionLabelValue(row: TableItem[]) {
    		if (!this.selectionLabelColumn) {
    			return { value: this.i18n.get().TABLE.ROW };
    		}
    		return { value: row[this.selectionLabelColumn].data };
    	}

    	getLabel(): Observable<string> {
    		return this._label.subject;
    	}
    }

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""