### File

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

### Metadata

selector | `[ibmTableCheckbox]`
template |
    <ibm-checkbox
    	*ngIf="!skeleton"
    	inline="true"
    	[aria-label]="getLabel() | i18nReplace:getSelectionLabelValue(row) | async"
    	[size]="(size !== 'sm' ? 'md' : 'sm')"
    	[checked]="selected"
    	(change)="change.emit()">
    </ibm-checkbox>

### Index

###### Properties
Protected _label
###### Methods
getLabel getSelectionLabelValue
###### Inputs
label row selected selectionLabelColumn size skeleton
###### Outputs
change
###### Accessors
label

### Constructor

`constructor(i18n: I18n)`
Defined in src/table/cell/table-checkbox.component.ts:63
Parameters :
Name | Type | Optional
i18n | `I18n` | No

### Inputs

`label` |
Defined in src/table/cell/table-checkbox.component.ts:36

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

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

`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-checkbox.component.ts:54

`size` | Size of the table rows. Type : `"sm" | "md" | "lg"` Default value : `"md"`
Defined in src/table/cell/table-checkbox.component.ts:33

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

### Outputs

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

### Methods

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

getSelectionLabelValue
`getSelectionLabelValue(row: TableItem[])`
Defined in src/table/cell/table-checkbox.component.ts:67
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-checkbox.component.ts:63

### Accessors

label
get `label()`
Defined in src/table/cell/table-checkbox.component.ts:40
set `label(value)`
Defined in src/table/cell/table-checkbox.component.ts:36
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: "[ibmTableCheckbox]",
    	template: `
    		<ibm-checkbox
    			*ngIf="!skeleton"
    			inline="true"
    			[aria-label]="getLabel() | i18nReplace:getSelectionLabelValue(row) | async"
    			[size]="(size !== 'sm' ? 'md' : 'sm')"
    			[checked]="selected"
    			(change)="change.emit()">
    		</ibm-checkbox>
    	`
    })
    export class TableCheckbox {
    	@Input() row: any[];

    	@Input() selected = false;

    	/**
    	 * Size of the table rows.
    	 */
    	@Input() size: "sm" | "md" | "lg" = "md";

    	@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 ""