@terminus/ui-search
v5.1.1
Published
<h1>Search</h1>
Downloads
4
Keywords
Readme
Table of Contents
Installation
Use the ng add
command to quickly install all the needed dependencies:
ng add @terminus/ui-search
CSS imports
In your top-level stylesheet, add these imports:
@import '~@terminus/design-tokens/css/library-design-tokens.css';
@import '~@terminus/ui-styles/terminus-ui.css';
CSS resources
Load the needed font families by adding this link to the <head>
of your application:
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap" rel="stylesheet">
Usage
<ts-search
inputHint="Enter at least 17 characters"
inputLabel="Search for a tactic"
></ts-search>
Auto-submit
When enabled, the submit button will not be shown and debounced queries will be emitted automatically.
<ts-search [autoSubmit]="true"></ts-search>
Button theme
Any valid TsButtonThemeTypes
can be passed in:
<ts-search buttonTheme="secondary"></ts-search>
Error message
A custom error message can be displayed:
<ts-search errorMessage="Special characters not allowed."></ts-search>
No validation or hint
The space reserved for the validation message or hint can be removed if it is not needed:
<ts-search [noValidationOrHint]="true"></ts-search>
Events
<ts-search (submitted)="myFunction($event)"></ts-search>
| Event | Description | Payload |
|:------------|:---------------------------------------------------------------------|:-------------------|
| changed
| Fired when the drawer expansion starts | string
|
| cleared
| Fired when the drawer collapse starts | boolean
|
| submitted
| Fired when the search query is submitted (manually or automatically) | TsSearchResponse
|
Default options
With the forRoot statement you can configure module.
@NgModule({
imports: [
TsSearchModule.forRoot({ debounceTime: 400 })
]
})
export class YourModule { }
| Property | Description | Payload |
| :------------- | :-----------------------------------------------------------------------------| :----------------- |
| debounceTime
| Discard emitted values that take less than the specified time between output | number
|