### File

`src/search/search.component.ts`

### Description

See demo

../../iframe.html?id=search--basic

### Implements

`ControlValueAccessor`

### Metadata

providers | `{ provide: NG_VALUE_ACCESSOR, useExisting: Search, multi: true }`
selector | `ibm-search`
templateUrl | `search.component.html`

### Index

###### Properties

- Protected _size
- inputRef
- onTouched
- propagateChange
- Static searchCount

###### Methods

- clearSearch
- doValueChange
- onSearch
- openSearch
- Public registerOnChange
- Public registerOnTouched
- Public writeValue

###### Inputs

- active
- autocomplete
- clearButtonTitle
- disabled
- id
- label
- name
- placeholder
- required
- size
- skeleton
- tableSearch
- theme
- toolbar
- value

###### Outputs

- change
- clear
- valueChange

###### HostBindings

- class.bx--form-item

###### HostListeners

- focusout
- keydown

###### Accessors

- size

### Constructor

`constructor(elementRef: ElementRef, i18n: I18n)`
Defined in src/search/search.component.ts:140

Creates an instance of `Search`.

Parameters :

Name | Type | Optional | Description
elementRef | `ElementRef` | No |
i18n | `I18n` | No | `The i18n translations.`

### Inputs

`active` | Set to `true` to expand the toolbar search component. Default value : `false`
Defined in src/search/search.component.ts: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"`
Defined in src/search/search.component.ts:111

`clearButtonTitle` | Used to set the `title` attribute of the clear button. Default value : `this.i18n.get().SEARCH.CLEAR_BUTTON`
Defined in src/search/search.component.ts:123

`disabled` | Set to `true` for a disabled search input. Default value : `false`
Defined in src/search/search.component.ts:74

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

`label` | Sets the text inside the `label` tag. Default value : `this.i18n.get().SEARCH.LABEL`
Defined in src/search/search.component.ts:115

`name` | Sets the name attribute on the `input` element. Type : `string`
Defined in src/search/search.component.ts:94

`placeholder` | Sets the placeholder attribute on the `input` element. Default value : `this.i18n.get().SEARCH.PLACEHOLDER`
Defined in src/search/search.component.ts:119

`required` | Reflects the required attribute of the `input` element. Type : `boolean`
Defined in src/search/search.component.ts:102

`size` | Size of the search field.
Defined in src/search/search.component.ts:60

`skeleton` | Set to `true` for a loading search component. Default value : `false`
Defined in src/search/search.component.ts:82

`tableSearch` | Specifies whether the search component is used in the table toolbar. Default value : `false`
Defined in src/search/search.component.ts:90

`theme` | `light` or `dark` search theme. Type : `"light" | "dark"` Default value : `"dark"`
Defined in src/search/search.component.ts:56

`toolbar` | Set to `true` for a toolbar search component. Default value : `false`
Defined in src/search/search.component.ts:78

`value` | Sets the value attribute on the `input` element. Default value : `""`
Defined in src/search/search.component.ts:106

### Outputs

`change` | `$event` Type: `EventEmitter`
Defined in src/search/search.component.ts:128

`clear` | Emits an event when the clear button is clicked. `$event` Type: `EventEmitter`
Defined in src/search/search.component.ts:136

`valueChange` | Emits an event when value is changed. `$event` Type: `EventEmitter`
Defined in src/search/search.component.ts:132

### HostBindings

class.bx--form-item
`class.bx--form-item: ```
Defined in src/search/search.component.ts:51

### HostListeners

focusout
Arguments : `'$event'`
`focusout(event)`
Defined in src/search/search.component.ts:227

keydown
Arguments : `'$event'`
`keydown(event: KeyboardEvent)`
Defined in src/search/search.component.ts:216

### Methods

clearSearch
`clearSearch()`
Defined in src/search/search.component.ts:195
Called when clear button is clicked. Returns : `void`

doValueChange
`doValueChange()`
Defined in src/search/search.component.ts:201
Returns : `void`

onSearch
`onSearch(search: string)`
Defined in src/search/search.component.ts:187

Called when text is written in the input.

Parameters :

Name | Type | Optional | Description
search | `string` | No | `The input text.`

Returns : `void`

openSearch
`openSearch()`
Defined in src/search/search.component.ts:210
Returns : `void`

Public registerOnChange
`registerOnChange(fn: any)`
Defined in src/search/search.component.ts:161

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)`
Defined in src/search/search.component.ts:169

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)`
Defined in src/search/search.component.ts:154

This is the initial value set to the component

Parameters :

Name | Type | Optional | Description
value | `any` | No | `The input value.`

Returns : `void`

### Properties

Protected _size
`_size: `"sm" | "xl"``
Type : `"sm" | "xl"`
Default value : `"xl"`
Defined in src/search/search.component.ts:140

inputRef
`inputRef: `ElementRef``
Type : `ElementRef`
Decorators : `@ViewChild('input')`
Defined in src/search/search.component.ts:138

onTouched
`onTouched: `function``
Type : `function`
Default value : `() => {}`
Defined in src/search/search.component.ts:176
Called when search input is blurred. Needed to properly implement `ControlValueAccessor`.

propagateChange
`propagateChange: ```
Default value : `(_: any) => {}`
Defined in src/search/search.component.ts:181
Method set in `registerOnChange` to propagate changes back to the form.

Static searchCount
`searchCount: `number``
Type : `number`
Default value : `0`
Defined in src/search/search.component.ts:49
Variable used for creating unique ids for search components.

### Accessors

size
get `size()`
Defined in src/search/search.component.ts:68
set `size(value)`
Defined in src/search/search.component.ts:60

Size of the search field.

Parameters :

Name | Optional
value | No

Returns : `void`

    import {
    	Component,
    	Input,
    	EventEmitter,
    	Output,
    	HostBinding,
    	ElementRef,
    	HostListener,
    	ViewChild
    } from "@angular/core";
    import { NG_VALUE_ACCESSOR, ControlValueAccessor } from "@angular/forms";
    import { I18n } from "../i18n/i18n.module";

    /**
     * @deprecated in favor of `valueChange`, to be removed in the next major carbon-components-angular version
     * Used to emit changes performed on search components.
     */
    export class SearchChange {
    	/**
    	 * Contains the `Search` that has been changed.
    	 */
    	source: Search;
    	/**
    	 * The value of the `Search` field encompassed in the `SearchChange` class.
    	 */
    	value: string;
    }

    /**
     * [See demo](../../?path=/story/search--basic)
     *
     * <example-url>../../iframe.html?id=search--basic</example-url>
     */
    @Component({
    	selector: "ibm-search",
    	templateUrl: "search.component.html",
    	providers: [
    		{
    			provide: NG_VALUE_ACCESSOR,
    			useExisting: Search,
    			multi: true
    		}
    	]
    })
    export class Search implements ControlValueAccessor {
    	/**
    	 * Variable used for creating unique ids for search components.
    	 */
    	static searchCount = 0;

    	@HostBinding("class.bx--form-item") get containerClass() { return !this.toolbar; }

    	/**
    	 * `light` or `dark` search theme.
    	 */
    	@Input() theme: "light" | "dark" = "dark";
    	/**
    	 * Size of the search field.
    	 */
    	@Input() set size(value: "sm" | "lg" | "xl") {
    		if (value === "lg") {
    			console.warn("size `lg` has been deprecated and replaced by `xl`");
    			value = "xl";
    		}
    		this._size = value;
    	}

    	get size(): "sm" | "lg" | "xl" {
    		return this._size;
    	}
    	/**
    	 * Set to `true` for a disabled search input.
    	 */
    	@Input() disabled = false;
    	/**
    	 * Set to `true` for a toolbar search component.
    	 */
    	@Input() toolbar = false;
    	/**
    	 * Set to `true` for a loading search component.
    	 */
    	@Input() skeleton = false;
    	/**
    	 * Set to `true` to expand the toolbar search component.
    	 */
    	@Input() active = false;
    	/**
    	 * Specifies whether the search component is used in the table toolbar.
    	 */
    	@Input() tableSearch = false;
    	/**
    	 * Sets the name attribute on the `input` element.
    	 */
    	@Input() name: string;
    	/**
    	 * The unique id for the search component.
    	 */
    	@Input() id = `search-${Search.searchCount}`;
    	/**
    	 * Reflects the required attribute of the `input` element.
    	 */
    	@Input() required: boolean;
    	/**
    	 * Sets the value attribute on the `input` element.
    	 */
    	@Input() value = "";
    	/**
    	 * Sets the autocomplete attribute on the `input` element.
    	 * For refernece: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#Values
    	 */
    	@Input() autocomplete = "on";
    	/**
    	 * Sets the text inside the `label` tag.
    	 */
    	@Input() label = this.i18n.get().SEARCH.LABEL;
    	/**
    	 * Sets the placeholder attribute on the `input` element.
    	 */
    	@Input() placeholder = this.i18n.get().SEARCH.PLACEHOLDER;
    	/**
    	 * Used to set the `title` attribute of the clear button.
    	 */
    	@Input() clearButtonTitle = this.i18n.get().SEARCH.CLEAR_BUTTON;
    	/**
    	 * @deprecated in favor of `valueChange`, to be removed in the next major carbon-components-angular version
    	 * Emits event notifying other classes when a change in state occurs in the input.
    	 */
    	@Output() change = new EventEmitter<SearchChange>();
    	/**
    	 * Emits an event when value is changed.
    	 */
    	@Output() valueChange = new EventEmitter<string>();
    	/**
    	 * Emits an event when the clear button is clicked.
    	 */
    	@Output() clear = new EventEmitter();

    	@ViewChild("input") inputRef: ElementRef;

    	protected _size: "sm" | "xl" = "xl";

    	/**
    	 * Creates an instance of `Search`.
    	 * @param i18n The i18n translations.
    	 */
    	constructor(protected elementRef: ElementRef, protected i18n: I18n) {
    		Search.searchCount++;
    	}

    	/**
    	 * This is the initial value set to the component
    	 * @param value The input value.
    	 */
    	public writeValue(value: any) {
    		this.value = value;
    	}

    	/**
    	 * Sets a method in order to propagate changes back to the form.
    	 */
    	public registerOnChange(fn: any) {
    		this.propagateChange = fn;
    	}

    	/**
    	 * Registers a callback to be triggered when the control has been touched.
    	 * @param fn Callback to be triggered when the search input is touched.
    	 */
    	public registerOnTouched(fn: any) {
    		this.onTouched = fn;
    	}

    	/**
    	 * Called when search input is blurred. Needed to properly implement `ControlValueAccessor`.
    	 */
    	onTouched: () => any = () => {};

    	/**
    	 * Method set in `registerOnChange` to propagate changes back to the form.
    	 */
    	propagateChange = (_: any) => {};

    	/**
    	 * Called when text is written in the input.
    	 * @param search The input text.
    	 */
    	onSearch(search: string) {
    		this.value = search;
    		this.doValueChange();
    	}

    	/**
    	 * Called when clear button is clicked.
    	 */
    	clearSearch(): void {
    		this.value = "";
    		this.clear.emit();
    		this.propagateChange(this.value);
    	}

    	doValueChange() {
    		let event = new SearchChange();
    		event.source = this;
    		event.value = this.value;
    		this.change.emit(event);
    		this.valueChange.emit(this.value);
    		this.propagateChange(this.value);
    	}

    	openSearch() {
    		this.active = true;
    		setTimeout(() => this.inputRef.nativeElement.focus());
    	}

    	@HostListener("keydown", ["$event"])
    	keyDown(event: KeyboardEvent) {
    		if (this.toolbar) {
    			if (event.key === "Escape") {
    				this.active = false;
    			} else if (event.key === "Enter") {
    				this.openSearch();
    			}
    		}
    	}

    	@HostListener("focusout", ["$event"])
    	focusOut(event) {
    		if (this.toolbar &&
    			this.inputRef.nativeElement.value === "" &&
    			event.relatedTarget === null) {
    			this.active = false;
    		}
    	}
    }

    <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 ""