carbon-components-angular documentation
  1. Components
  2. TableHeadCheckbox

File

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

Metadata

selector [cdsTableHeadCheckbox], [ibmTableHeadCheckbox]
styles :host { width: 10px; }
template 
<cds-checkbox
	*ngIf="!skeleton"
	inline="true"
	[name]="name"
	[checked]="checked"
	[indeterminate]="indeterminate"
	(checkedChange)="change.emit()"
	[hideLabel]="true">
		{{getAriaLabel() | async}}
</cds-checkbox>

Index

Properties
Methods
Inputs
Outputs
HostBindings
Accessors

Constructor

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

Inputs

ariaLabel
Type : string | Observable
Defined in src/table/head/table-head-checkbox.component.ts:42
checked
Type : boolean
Default value : false
Defined in src/table/head/table-head-checkbox.component.ts:33
indeterminate
Type : boolean
Default value : false
Defined in src/table/head/table-head-checkbox.component.ts:35
name
Type : string
Default value : `select-all-${TableHeadCheckbox.tableSelectAllCount++}`
Defined in src/table/head/table-head-checkbox.component.ts:39
skeleton
Type : boolean
Default value : false
Defined in src/table/head/table-head-checkbox.component.ts:37

Outputs

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

HostBindings

class.cds--table-column-checkbox
Type : boolean
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
Default value : this.i18n.getOverridable("TABLE.CHECKBOX_HEADER")
Defined in src/table/head/table-head-checkbox.component.ts:54
hostClass
Default value : true
Decorators :
@HostBinding('class.cds--table-column-checkbox')
Defined in src/table/head/table-head-checkbox.component.ts:52
Private Static tableSelectAllCount
Type : number
Default value : 0
Defined in src/table/head/table-head-checkbox.component.ts:31

Accessors

ariaLabel
getariaLabel()
Defined in src/table/head/table-head-checkbox.component.ts:46
setariaLabel(value: string | Observable)
Defined in src/table/head/table-head-checkbox.component.ts:42
Parameters :
Name Type Optional
value string | Observable<string> No
Returns : void 
import {
	Component,
	Input,
	Output,
	HostBinding,
	EventEmitter
} from "@angular/core";
import { I18n } from "carbon-components-angular/i18n";
import { Observable } from "rxjs";

@Component({
	// tslint:disable-next-line: component-selector
	selector: "[cdsTableHeadCheckbox], [ibmTableHeadCheckbox]",
	template: `
		<cds-checkbox
			*ngIf="!skeleton"
			inline="true"
			[name]="name"
			[checked]="checked"
			[indeterminate]="indeterminate"
			(checkedChange)="change.emit()"
			[hideLabel]="true">
				{{getAriaLabel() | async}}
		</cds-checkbox>
	`,
	styles: [`
        :host { width: 10px; }
    `]
})
export class TableHeadCheckbox {
	private static tableSelectAllCount = 0;

	@Input() checked = false;

	@Input() indeterminate = false;

	@Input() skeleton = false;

	@Input() name = `select-all-${TableHeadCheckbox.tableSelectAllCount++}`;

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

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

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

	@HostBinding("class.cds--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

results matching ""

    No results matching ""