@talenra/components documentation
  1. Components
  2. SearchInputComponent

File

search/src/search-input/search-input.component.ts

Description

SearchInput provides consistent styling and behaviour for different kinds of search inputs. It is typically wrapped by a SearchField.

Reactive form

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

Template driven form

Example :
// Component class
protected query = '';
Example :
<!-- Component template -->
<talenra-search-field>
  <input talenra-search [(ngModel)]="query" />
</talenra-search-field>

Import

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

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

See SearchFieldComponent

Implements

ControlValueAccessor AfterContentInit

Metadata

changeDetection ChangeDetectionStrategy.OnPush
host {
}
providers )
selector input[talenra-search]
styleUrls ./search-input.component.scss

Index

Methods
Inputs
Outputs
Accessors

Inputs

disabled
Type : null | unknown

Determines whether the control is disabled/enabled.

Example :
<input talenra-search [(ngModel)]="query" disabled />
kind
Type : TSearchKind
Default value : SearchKind.Default

Determinates the kind (or style) of the input. Used to support style variations.

NoIndent: Render a search without horizontal indent / padding.

Example :
<input talenra-search kind="no-indent" [(ngModel)]="query" />

Outputs

kind
Type : TSearchKind

Determinates the kind (or style) of the input. Used to support style variations.

NoIndent: Render a search without horizontal indent / padding.

Example :
<input talenra-search kind="no-indent" [(ngModel)]="query" />

Methods

Public focus
focus()

Sets the focus to the input.

Returns : void

Accessors

disabled
getdisabled()

Determines whether the control is disabled/enabled.

Example :
<input talenra-search [(ngModel)]="query" disabled />
Returns : null | unknown
setdisabled(value: null | unknown)

Set the control's disabled state

Parameters :
Name Type Optional
value null | unknown No
Returns : void

results matching ""

    No results matching ""