@talenra/components documentation
  1. Components
  2. SearchFieldComponent

File

search/src/search-field/search-field.component.ts

Description

SearchField is a wrapper for SearchField. The wrapper/field-architecture gives the consuming app direct access to and thus full control over the wrapped field.

Example:

Example :
// Component class
protected searchForm: FormGroup = new FormGroup({
  query: new FormControl(''),
});
Example :
<!-- Component template -->
<talenra-search-field">
  <input talenra-search formControlName="query" />
</talenra-search-field>

Import

Example :
import { SearchFieldComponent } from '@talenra/components/search';

../../../#/search

See SearchInputComponent

Implements

OnInit AfterContentInit

Metadata

changeDetection ChangeDetectionStrategy.OnPush
host {
}
selector talenra-search-field
imports ClearButtonComponent IconComponent ButtonComponent FieldUnderlineComponent
styleUrls ./search-field.component.scss
templateUrl ./search-field.component.html

Index

Inputs
Outputs

Inputs

showButton
Type : boolean, unknown
Default value : false, { transform: booleanAttribute }

Determines whether the search button is displayed.

Example :
<!-- Component template -->
<talenra-search-field" showButton>
  <input talenra-search formControlName="query" />
</talenra-search-field>
showIcon
Type : boolean, unknown
Default value : false, { transform: booleanAttribute }

Determines whether the magnifying glass icons is displayed.

Example :
<!-- Component template -->
<talenra-search-field" showIcon>
  <input talenra-search formControlName="query" />
</talenra-search-field>
size
Type : TSearchFieldSize
Default value : SearchFieldSize.M

Determines the size of SearchField. Defaults to 'm'.

Example :
<talenra-search-field ... size="s"></talenra-search-field>

See SearchFieldSize

Outputs

clear
Type : SearchClear

Event emitted when SearchField's clear button (×) clicked.
search
Type : SearchTrigger

Event emitted when the SearchField is submitted.

Example :
// Component class
import { SearchTrigger } from '@talenra/components/search';

protected searchForm: FormGroup = new FormGroup({
  query: new FormControl(''),
});

onSearch: (search: SearchTrigger) => {
  console.log(`SearchField (id: ${search.source.id}) is submitted with value ${search.value}.`);
}
Example :
<!-- Component template -->
<form [formGroup]="searchForm">
  <talenra-search-field showButton (search)="onSearch($event)">
    <input talenra-search formControlName="query" />
  </talenra-search-field>
</form>

results matching ""

    No results matching ""