### File

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

### Metadata

selector | `[ibmTableHeadCheckbox]`
styles | `:host { width: 10px; }`
template |
    <ibm-checkbox
    	*ngIf="!skeleton"
    	inline="true"
    	[size]="(size !== 'sm' ? 'md' : 'sm')"
    	[checked]="checked"
    	[indeterminate]="indeterminate"
    	(change)="change.emit()"
    	[aria-label]="getAriaLabel() | async">
    </ibm-checkbox>

### Index

###### Properties
Protected _ariaLabel
###### Methods
getAriaLabel
###### Inputs
ariaLabel checked indeterminate size skeleton
###### Outputs
change
###### HostBindings
class.bx--table-column-checkbox
###### Accessors
ariaLabel

### Constructor

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

### Inputs

`ariaLabel` |
Defined in src/table/head/table-head-checkbox.component.ts:42

`checked` | Default value : `false`
Defined in src/table/head/table-head-checkbox.component.ts:35

`indeterminate` | Default value : `false`
Defined in src/table/head/table-head-checkbox.component.ts:37

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

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

### Outputs

`change` | `$event` Type: `EventEmitter`
Defined in src/table/head/table-head-checkbox.component.ts:50

### HostBindings

class.bx--table-column-checkbox
`class.bx--table-column-checkbox: ```
Default value : `true`
Defined in src/table/head/table-head-checkbox.component.ts:52

### Methods

getAriaLabel
`getAriaLabel()`
Defined in src/table/head/table-head-checkbox.component.ts:58
Returns : `Observable<string>`

### Properties

Protected _ariaLabel
`_ariaLabel: ```
Default value : `this.i18n.getOverridable("TABLE.CHECKBOX_HEADER")`
Defined in src/table/head/table-head-checkbox.component.ts:54

### Accessors

ariaLabel
get `ariaLabel()`
Defined in src/table/head/table-head-checkbox.component.ts:46
set `ariaLabel(value)`
Defined in src/table/head/table-head-checkbox.component.ts:42
Parameters :
Name | Optional
value | No
Returns : `void`

    import {
    	Component,
    	Input,
    	Output,
    	HostBinding,
    	EventEmitter
    } from "@angular/core";
    import { I18n, Overridable } from "./../../i18n/i18n.module";
    import { Observable } from "rxjs";

    @Component({
    	// tslint:disable-next-line: component-selector
    	selector: "[ibmTableHeadCheckbox]",
    	template: `
    		<ibm-checkbox
    			*ngIf="!skeleton"
    			inline="true"
    			[size]="(size !== 'sm' ? 'md' : 'sm')"
    			[checked]="checked"
    			[indeterminate]="indeterminate"
    			(change)="change.emit()"
    			[aria-label]="getAriaLabel() | async">
    		</ibm-checkbox>
    	`,
    	styles: [`
            :host { width: 10px; }
        `]
    })
    export class TableHeadCheckbox {
    	/**
    	 * Size of the table rows.
    	 */
    	@Input() size: "sm" | "sh" | "md" | "lg" = "md";

    	@Input() checked = false;

    	@Input() indeterminate = false;

    	@Input() skeleton = false;

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

    	get ariaLabel() {
    		return this._ariaLabel.value;
    	}

    	@Output() change = new EventEmitter<boolean>();

    	@HostBinding("class.bx--table-column-checkbox") hostClass = true;

    	protected _ariaLabel = this.i18n.getOverridable("TABLE.CHECKBOX_HEADER");

    	constructor(protected i18n: I18n) { }

    	getAriaLabel(): Observable<string> {
    		return this._ariaLabel.subject;
    	}
    }

            :host { width: 10px; }

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""