### File

`src/table/cell/table-expand-button.component.ts`

### Metadata

selector | `[ibmTableExpandButton]`
template |
    <button
    	*ngIf="expandable"
    	class="bx--table-expand__button"
    	[attr.aria-label]="getAriaLabel() | async"
    	(click)="expandRow.emit()">
    	<ibm-icon-chevron-right16 innerClass="bx--table-expand__svg"></ibm-icon-chevron-right16>
    </button>

### Index

###### Properties
Protected _ariaLabel
###### Methods
getAriaLabel
###### Inputs
ariaLabel expandable expanded skeleton
###### Outputs
expandRow
###### HostBindings
attr.data-previous-value class.bx--table-expand
###### Accessors
ariaLabel

### Constructor

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

### Inputs

`ariaLabel` |
Defined in src/table/cell/table-expand-button.component.ts:36

`expandable` | Set to true to indicate the row can be expanded. Defaults to false to allow for correct column alignment Default value : `false`
Defined in src/table/cell/table-expand-button.component.ts:33

`expanded` | Set to true to indicate the row has expanded Default value : `false`
Defined in src/table/cell/table-expand-button.component.ts:28

`skeleton` | Default value : `false`
Defined in src/table/cell/table-expand-button.component.ts:44

### Outputs

`expandRow` | `$event` Type: `EventEmitter`
Defined in src/table/cell/table-expand-button.component.ts:52

### HostBindings

attr.data-previous-value
`attr.data-previous-value: ```
Defined in src/table/cell/table-expand-button.component.ts:48

class.bx--table-expand
`class.bx--table-expand: ```
Default value : `true`
Defined in src/table/cell/table-expand-button.component.ts:46

### Methods

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

### Properties

Protected _ariaLabel
`_ariaLabel: ```
Default value : `this.i18n.getOverridable("TABLE.EXPAND_BUTTON")`
Defined in src/table/cell/table-expand-button.component.ts:54

### Accessors

ariaLabel
get `ariaLabel()`
Defined in src/table/cell/table-expand-button.component.ts:40
set `ariaLabel(value)`
Defined in src/table/cell/table-expand-button.component.ts:36
Parameters :
Name | Optional
value | No
Returns : `void`

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

    @Component({
    	// tslint:disable-next-line: component-selector
    	selector: "[ibmTableExpandButton]",
    	template: `
    		<button
    			*ngIf="expandable"
    			class="bx--table-expand__button"
    			[attr.aria-label]="getAriaLabel() | async"
    			(click)="expandRow.emit()">
    			<ibm-icon-chevron-right16 innerClass="bx--table-expand__svg"></ibm-icon-chevron-right16>
    		</button>
    	`
    })
    export class TableExpandButton {
    	/**
    	 * Set to true to indicate the row has expanded
    	 */
    	@Input() expanded = false;
    	/**
    	 * Set to true to indicate the row can be expanded.
    	 * Defaults to false to allow for correct column alignment
    	 */
    	@Input() expandable = false;

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

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

    	@Input() skeleton = false;

    	@HostBinding("class.bx--table-expand") expandClass = true;

    	@HostBinding("attr.data-previous-value") get previousValue() {
    		return this.expanded ? "collapsed" : null;
    	}

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

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

    	constructor(protected i18n: I18n) { }

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

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""