### File

`src/table/toolbar/table-toolbar-search.component.ts`

### Extends

`Search`

### Implements

`OnInit`

### Metadata

selector | `ibm-table-toolbar-search`
templateUrl | `../../search/search.component.html`

### Index

###### Properties
tableSearch Protected _size inputRef onTouched propagateChange Static searchCount
###### Methods
ngOnInit clearSearch doValueChange onSearch openSearch Public registerOnChange Public registerOnTouched Public writeValue
###### Inputs
expandable active autocomplete clearButtonTitle disabled id label name placeholder required size skeleton tableSearch theme toolbar value
###### Outputs
change clear open valueChange
###### HostBindings
class.bx--toolbar-search-container-active class.bx--toolbar-search-container-persistent class.bx--form-item
###### HostListeners
focusout keydown

### Inputs

`expandable` | Default value : `false`
Defined in src/table/toolbar/table-toolbar-search.component.ts:16

`active` | Set to `true` to expand the toolbar search component. Default value : `false`
Inherited from `Search`
Defined in Search:86

`autocomplete` | Sets the autocomplete attribute on the `input` element. For refernece: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#Values Default value : `"on"`
Inherited from `Search`
Defined in Search:111

`clearButtonTitle` | Used to set the `title` attribute of the clear button. Default value : `this.i18n.get().SEARCH.CLEAR_BUTTON`
Inherited from `Search`
Defined in Search:123

`disabled` | Set to `true` for a disabled search input. Default value : `false`
Inherited from `Search`
Defined in Search:74

`id` | The unique id for the search component. Default value : ``search-${Search.searchCount}``
Inherited from `Search`
Defined in Search:98

`label` | Sets the text inside the `label` tag. Default value : `this.i18n.get().SEARCH.LABEL`
Inherited from `Search`
Defined in Search:115

`name` | Sets the name attribute on the `input` element. Type : `string`
Inherited from `Search`
Defined in Search:94

`placeholder` | Sets the placeholder attribute on the `input` element. Default value : `this.i18n.get().SEARCH.PLACEHOLDER`
Inherited from `Search`
Defined in Search:119

`required` | Reflects the required attribute of the `input` element. Type : `boolean`
Inherited from `Search`
Defined in Search:102

`size` | Size of the search field.
Inherited from `Search`
Defined in Search:60

`skeleton` | Set to `true` for a loading search component. Default value : `false`
Inherited from `Search`
Defined in Search:82

`tableSearch` | Specifies whether the search component is used in the table toolbar. Default value : `false`
Inherited from `Search`
Defined in Search:90

`theme` | `light` or `dark` search theme. Type : `"light" | "dark"` Default value : `"dark"`
Inherited from `Search`
Defined in Search:56

`toolbar` | Set to `true` for a toolbar search component. Default value : `false`
Inherited from `Search`
Defined in Search:78

`value` | Sets the value attribute on the `input` element. Default value : `""`
Inherited from `Search`
Defined in Search:106

### Outputs

`change` | `$event` Type: `EventEmitter`
Inherited from `Search`
Defined in Search:128

`clear` | Emits an event when the clear button is clicked. `$event` Type: `EventEmitter`
Inherited from `Search`
Defined in Search:137

`open` | `$event` Type: `EventEmitter`
Inherited from `Search`
Defined in Search:133

`valueChange` | Emits an event when value is changed. `$event` Type: `EventEmitter`
Inherited from `Search`
Defined in Search:132

### HostBindings

class.bx--toolbar-search-container-active
`class.bx--toolbar-search-container-active: ```
Defined in src/table/toolbar/table-toolbar-search.component.ts:20

class.bx--toolbar-search-container-persistent
`class.bx--toolbar-search-container-persistent: ```
Defined in src/table/toolbar/table-toolbar-search.component.ts:18

class.bx--form-item
`class.bx--form-item: ```
Inherited from `Search`
Defined in Search:51

### HostListeners

focusout
Arguments : `'$event'`
`focusout(event)`
Inherited from `Search`
Defined in Search:229

keydown
Arguments : `'$event'`
`keydown(event: KeyboardEvent)`
Inherited from `Search`
Defined in Search:218

### Methods

ngOnInit
`ngOnInit()`
Defined in src/table/toolbar/table-toolbar-search.component.ts:24
Returns : `void`

clearSearch
`clearSearch()`
Inherited from `Search`
Defined in Search:196
Called when clear button is clicked. Returns : `void`

doValueChange
`doValueChange()`
Inherited from `Search`
Defined in Search:202
Returns : `void`

onSearch
`onSearch(search: string)`
Inherited from `Search`
Defined in Search:188
Called when text is written in the input. Parameters :
Name | Type | Optional | Description
search | `string` | No | `The input text.`
Returns : `void`

openSearch
`openSearch()`
Inherited from `Search`
Defined in Search:211
Returns : `void`

Public registerOnChange
`registerOnChange(fn: any)`
Inherited from `Search`
Defined in Search:162
Sets a method in order to propagate changes back to the form. Parameters :
Name | Type | Optional
fn | `any` | No
Returns : `void`

Public registerOnTouched
`registerOnTouched(fn: any)`
Inherited from `Search`
Defined in Search:170
Registers a callback to be triggered when the control has been touched. Parameters :
Name | Type | Optional | Description
fn | `any` | No | `Callback to be triggered when the search input is touched.`
Returns : `void`

Public writeValue
`writeValue(value: any)`
Inherited from `Search`
Defined in Search:155
This is the initial value set to the component Parameters :
Name | Type | Optional | Description
value | `any` | No | `The input value.`
Returns : `void`

### Properties

tableSearch
`tableSearch: ```
Default value : `true`
Defined in src/table/toolbar/table-toolbar-search.component.ts:14

Protected _size
`_size: `"sm" | "xl"``
Type : `"sm" | "xl"`
Default value : `"xl"`
Inherited from `Search`
Defined in Search:141

inputRef
`inputRef: `ElementRef``
Type : `ElementRef`
Decorators : `@ViewChild('input')`
Inherited from `Search`
Defined in Search:139

onTouched
`onTouched: `function``
Type : `function`
Default value : `() => {}`
Inherited from `Search`
Defined in Search:177
Called when search input is blurred. Needed to properly implement `ControlValueAccessor`.

propagateChange
`propagateChange: ```
Default value : `(_: any) => {}`
Inherited from `Search`
Defined in Search:182
Method set in `registerOnChange` to propagate changes back to the form.

Static searchCount
`searchCount: `number``
Type : `number`
Default value : `0`
Inherited from `Search`
Defined in Search:49
Variable used for creating unique ids for search components.

    import { Search } from "./../../search/search.component";
    import {
    	Component,
    	HostBinding,
    	Input,
    	OnInit
    } from "@angular/core";

    @Component({
    	selector: "ibm-table-toolbar-search",
    	templateUrl: "../../search/search.component.html"
    })
    export class TableToolbarSearch extends Search implements OnInit {
    	tableSearch = true;

    	@HostBinding("class.bx--toolbar-search-container-expandable") @Input() expandable = false;

    	@HostBinding("class.bx--toolbar-search-container-persistent") get persistentClass() { return !this.expandable; }

    	@HostBinding("class.bx--toolbar-search-container-active") get activeClass() {
    		return this.active && (this.value !== null || this.value !== "");
    	}

    	ngOnInit() {
    		this.size = "sm";
    		if (this.expandable) {
    			this.toolbar = true;
    		}
    	}
    }

    <div
    	class="bx--search"
    	[ngClass]="{
    		'bx--search--sm': size === 'sm',
    		'bx--search--xl': size === 'xl',
    		'bx--search--light': theme === 'light',
    		'bx--skeleton': skeleton,
    		'bx--toolbar-search': toolbar,
    		'bx--toolbar-search--active': toolbar && active
    	}"
    	role="search">
    	<label class="bx--label" [for]="id">{{label}}</label>

    	<div *ngIf="skeleton; else enableInput" class="bx--search-input"></div>
    	<ng-template #enableInput>
    		<input
    			#input
    			*ngIf="!toolbar || active || value !== ''"
    			class="bx--search-input"
    			[type]="tableSearch || !toolbar ? 'text' : 'search'"
    			role="search"
    			[id]="id"
    			[value]="value"
    			[autocomplete]="autocomplete"
    			[placeholder]="placeholder"
    			[disabled]="disabled"
    			[required]="required"
    			(input)="onSearch($event.target.value)"/>
    		<button *ngIf="!tableSearch && toolbar" class="bx--toolbar-search__btn" (click)="openSearch()">
    			<ibm-icon-search16 class="bx--search-magnifier"></ibm-icon-search16>
    		</button>
    		<ibm-icon-search16 *ngIf="tableSearch || !toolbar" (click)="openSearch()" class="bx--search-magnifier"></ibm-icon-search16>
    	</ng-template>

    	<button
    		*ngIf="tableSearch || !toolbar"
    		class="bx--search-close"
    		[ngClass]="{
    			'bx--search-close--hidden': !value || value.length === 0
    		}"
    		[title]="clearButtonTitle"
    		[attr.aria-label]="clearButtonTitle"
    		(click)="clearSearch()">
    		<ibm-icon-close16></ibm-icon-close16>
    	</button>
    </div>

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""