0.9.1 • Published 7 years ago
@covalent/search v0.9.1
td-search-input
td-search-input element to generate a search input with its animated cancel button.
API Summary
Properties:
| Name | Type | Description |
|---|---|---|
debounce? | number | Debounce timeout between keypresses. Defaults to 400. |
placeholder? | string | Placeholder for the underlying input component. |
showUnderline? | boolean | Sets if the input underline should be visible. Defaults to 'false'. |
searchDebounce | function($event) | Event emitted after the debounce timeout. |
search | function($event) | Event emitted after the key enter has been pressed. |
clear? | function | Event emitted after the clear icon has been clicked. |
Usage
Example for HTML usage:
<td-search-input placeholder="Search here" [showUnderline]="false|true" [debounce]="500" (searchDebounce)="searchInputTerm = $event" (search)="searchInputTerm = $event" (clear)="searchInputTerm = ''">
</td-search-input>td-search-box
td-search-box element to generate a search box with animations.
API Summary
Properties:
| Name | Type | Description |
|---|---|---|
debounce? | number | Debounce timeout between keypresses. Defaults to 400. |
placeholder? | string | Placeholder for the underlying input component. |
backIcon? | string | The icon used to close the search toggle, only shown when alwaysVisible is false. Defaults to 'search' icon. |
showUnderline? | boolean | Sets if the input underline should be visible. Defaults to 'false'. |
alwaysVisible? | boolean | Sets if the input should always be visible. Defaults to 'false'. |
searchDebounce | function($event) | Event emitted after the debounce timeout. |
search | function($event) | Event emitted after the key enter has been pressed. |
clear? | function | Event emitted after the clear icon has been clicked. |
Usage
Example for HTML usage:
<td-search-box placeholder="Search here" [showUnderline]="false|true" [debounce]="500" [alwaysVisible]="false|true" (searchDebounce)="searchInputTerm = $event" (search)="searchInputTerm = $event" (clear)="searchInputTerm = ''">
</td-search-box>Setup
Import the CovalentSearchModule using the forRoot() method in your NgModule:
import { CovalentSearchModule } from '@covalent/chips';
@NgModule({
imports: [
CovalentSearchModule.forRoot(),
...
],
...
})
export class MyModule {}