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

File

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

Extends

Search

Implements

AfterViewInit

Metadata

providers { provide: NG_VALUE_ACCESSOR, useExisting: TableToolbarSearch, multi: true }
selector cds-table-toolbar-search, ibm-table-toolbar-search
templateUrl ../../search/search.component.html

Index

Properties
Methods
Inputs
Outputs
HostBindings
HostListeners

Inputs

active
Type : boolean
Default value : false
Inherited from Search
Defined in Search:75

Set to true to expand the toolbar search component.
ariaLabel
Type : string
Inherited from Search
Defined in Search:120

Sets the aria label on the div element with the search role.
autocomplete
Type : string
Default value : "on"
Inherited from Search
Defined in Search:100

Sets the autocomplete attribute on the input element. For reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#Values
clearButtonTitle
Type : any
Default value : this.i18n.get().SEARCH.CLEAR_BUTTON
Inherited from Search
Defined in Search:112

Used to set the title attribute of the clear button.
disabled
Type : boolean
Default value : false
Inherited from Search
Defined in Search:58

Set to true for a disabled search input.
expandable
Type : boolean
Default value : false
Inherited from Search
Defined in Search:67

Set to true to make the search component expandable. expandable would override toolbar property behaviours.
id
Type : string
Default value : `search-${Search.searchCount}`
Inherited from Search
Defined in Search:87

The unique id for the search component.
label
Type : any
Default value : this.i18n.get().SEARCH.LABEL
Inherited from Search
Defined in Search:104

Sets the text inside the label tag.
name
Type : string
Inherited from Search
Defined in Search:83

Sets the name attribute on the input element.
placeholder
Type : any
Default value : this.i18n.get().SEARCH.PLACEHOLDER
Inherited from Search
Defined in Search:108

Sets the placeholder attribute on the input element.
required
Type : boolean
Inherited from Search
Defined in Search:91

Reflects the required attribute of the input element.
searchTitle
Type : string
Default value : ""
Inherited from Search
Defined in Search:116

Title for the search trigger
size
Type : "sm" | "md" | "lg"
Default value : "md"
Inherited from Search
Defined in Search:53

Size of the search field.
skeleton
Type : boolean
Default value : false
Inherited from Search
Defined in Search:71

Set to true for a loading search component.
tableSearch
Type : boolean
Default value : false
Inherited from Search
Defined in Search:79

Specifies whether the search component is used in the table toolbar.
theme
Type : "light" | "dark"
Default value : "dark"
Inherited from Search
Defined in Search:48
toolbar
Type : boolean
Default value : false
Inherited from Search
Defined in Search:62

Set to true for a toolbar search component.
value
Type : string
Default value : ""
Inherited from Search
Defined in Search:95

Sets the value attribute on the input element.

Outputs

clear
Type : EventEmitter
Inherited from Search
Defined in Search:129

Emits an event when the clear button is clicked.
open
Type : EventEmitter
Inherited from Search
Defined in Search:125
search
Type : EventEmitter
Inherited from Search
Defined in Search:133

Emits an event on enter.
valueChange
Type : EventEmitter
Inherited from Search
Defined in Search:124

Emits an event when value is changed.

HostBindings

class.cds--toolbar-content
Type : boolean
Default value : true
Defined in src/table/toolbar/table-toolbar-search.component.ts:27
class.cds--form-item
Type : boolean
Inherited from Search
Defined in Search:40

HostListeners

compositionend
Arguments : '$event'
compositionend(event)
Inherited from Search
Defined in Search:277

Called when IME composition finishes.
compositionstart
Arguments : '$event'
compositionstart(event)
Inherited from Search
Defined in Search:269

Called when using IME composition.
focusin
Arguments : '$event'
focusin(event)
Inherited from Search
Defined in Search:255
focusout
Arguments : '$event'
focusout(event)
Inherited from Search
Defined in Search:243
keydown
Arguments : '$event'
keydown(event: KeyboardEvent)
Inherited from Search
Defined in Search:223

Methods

ngAfterViewInit
ngAfterViewInit()
Defined in src/table/toolbar/table-toolbar-search.component.ts:29
Returns : void
clearSearch
clearSearch()
Inherited from Search
Defined in Search:205

Called when clear button is clicked.

Returns : void
compositionEnd
compositionEnd(event)
Decorators :
@HostListener('compositionend', ['$event'])
Inherited from Search
Defined in Search:277

Called when IME composition finishes.

Parameters :
Name Optional
event No
Returns : void
compositionStart
compositionStart(event)
Decorators :
@HostListener('compositionstart', ['$event'])
Inherited from Search
Defined in Search:269

Called when using IME composition.

Parameters :
Name Optional
event No
Returns : void
doValueChange
doValueChange()
Inherited from Search
Defined in Search:211
Returns : void
focusIn
focusIn(event)
Decorators :
@HostListener('focusin', ['$event'])
Inherited from Search
Defined in Search:255
Parameters :
Name Optional
event No
Returns : void
focusOut
focusOut(event)
Decorators :
@HostListener('focusout', ['$event'])
Inherited from Search
Defined in Search:243
Parameters :
Name Optional
event No
Returns : void
keyDown
keyDown(event: KeyboardEvent)
Decorators :
@HostListener('keydown', ['$event'])
Inherited from Search
Defined in Search:223
Parameters :
Name Type Optional
event KeyboardEvent No
Returns : void
onEnter
onEnter()
Inherited from Search
Defined in Search:198

Called on enter.

Returns : void
onSearch
onSearch(search: string)
Inherited from Search
Defined in Search:187

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:216
Returns : void
Public registerOnChange
registerOnChange(fn: any)
Inherited from Search
Defined in Search: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)
Inherited from Search
Defined in Search: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)
Inherited from Search
Defined in Search:154

This is the initial value set to the component

Parameters :
Name Type Optional Description
value any No

The input value.
Returns : void

Properties

hostClass
Default value : true
Decorators :
@HostBinding('class.cds--toolbar-content')
Defined in src/table/toolbar/table-toolbar-search.component.ts:27
size
Type : "sm" | "md" | "lg"
Default value : "lg"
Defined in src/table/toolbar/table-toolbar-search.component.ts:25
tableSearch
Default value : true
Defined in src/table/toolbar/table-toolbar-search.component.ts:23
inputRef
Type : ElementRef
Decorators :
@ViewChild('input')
Inherited from Search
Defined in Search:135
Protected isComposing
Default value : false
Inherited from Search
Defined in Search:140

Sets true when composing text via IME.
onTouched
Type : function
Default value : () => {...}
Inherited from Search
Defined in Search:176

Called when search input is blurred. Needed to properly implement ControlValueAccessor.
propagateChange
Default value : () => {...}
Inherited from Search
Defined in Search:181

Method set in registerOnChange to propagate changes back to the form.
Static searchCount
Type : number
Default value : 0
Inherited from Search
Defined in Search:38

Variable used for creating unique ids for search components.

 
import { Search } from "carbon-components-angular/search";
import {
	Component,
	HostBinding,
	Input,
	OnInit,
	AfterViewInit
} from "@angular/core";
import { NG_VALUE_ACCESSOR } from "@angular/forms";

@Component({
	selector: "cds-table-toolbar-search, ibm-table-toolbar-search",
	templateUrl: "../../search/search.component.html",
	providers: [
		{
			provide: NG_VALUE_ACCESSOR,
			useExisting: TableToolbarSearch,
			multi: true
		}
	]
})
export class TableToolbarSearch extends Search implements AfterViewInit {
	tableSearch = true;

	size: "sm" | "md" | "lg" = "lg";

	@HostBinding("class.cds--toolbar-content") hostClass = true;

	ngAfterViewInit() {
		setTimeout(() => {
			if (this.value) {
				this.openSearch();
			}
		});
	}
}

<div
	class="cds--search"
	[ngClass]="{
		'cds--search--sm': size === 'sm',
		'cds--search--md': size === 'md',
		'cds--search--lg': size === 'lg',
		'cds--search--light': theme === 'light',
		'cds--skeleton': skeleton,
		'cds--search--expandable': expandable && !tableSearch,
		'cds--search--expanded': expandable && !tableSearch && active,
		'cds--toolbar-search': toolbar && !expandable,
		'cds--toolbar-search--active': toolbar && !expandable && active,
		'cds--toolbar-search-container-persistent': tableSearch && !expandable,
		'cds--toolbar-search-container-expandable': tableSearch && expandable,
		'cds--toolbar-search-container-active': tableSearch && expandable && active
	}"
	role="search"
	[attr.aria-label]="ariaLabel"
	(click)="openSearch()">
	<label class="cds--label" [for]="id">{{label}}</label>

	<div *ngIf="skeleton; else enableInput" class="cds--search-input"></div>
	<ng-template #enableInput>
		<input
			#input
			class="cds--search-input"
			[type]="tableSearch || !toolbar ? 'text' : 'search'"
			[id]="id"
			[value]="value"
			[autocomplete]="autocomplete"
			[placeholder]="placeholder"
			[disabled]="disabled"
			[required]="required"
			(input)="onSearch($event.target.value)"
			(keyup.enter)="onEnter()"/>
		<button
			*ngIf="!tableSearch && toolbar"
			class="cds--toolbar-search__btn"
			(click)="openSearch()"
			aria-label="Open search">
			<svg cdsIcon="search" size="16" class="cds--search-magnifier-icon"></svg>
		</button>
		<svg
			cdsIcon="search"
			*ngIf="tableSearch || !toolbar"
			class="cds--search-magnifier-icon"
			size="16">
		</svg>
	</ng-template>

	<button
		*ngIf="tableSearch || !toolbar"
		class="cds--search-close"
		[ngClass]="{
			'cds--search-close--hidden': !value || value.length === 0
		}"
		[title]="clearButtonTitle"
		(click)="clearSearch()">
		<span class="cds--visually-hidden">{{ clearButtonTitle }}</span>
		<svg cdsIcon="close" size="16"></svg>
	</button>
</div>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""