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 {}