### 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
- 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:90

`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:115

`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:127

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

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

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

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

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

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

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

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

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

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

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

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

### Outputs

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

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

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

### 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:55

### HostListeners

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

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

### Methods

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

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

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

onSearch
`onSearch(search: string)`
Inherited from `Search`
Defined in Search:191

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:214
Returns : `void`

Public registerOnChange
`registerOnChange(fn: any)`
Inherited from `Search`
Defined in Search:165

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:173

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:158

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:144

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

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

propagateChange
`propagateChange: ```
Default value : `(_: any) => {}`
Inherited from `Search`
Defined in Search:185
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:53
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 ""