Development documentation
  1. Components
  2. UppSearchComponent

File

libs/upp-wdgt/src/components/upp-search/upp-search.ts

Description

UppSearchComponent provides a reusable search bar component that implements ControlValueAccessor for form integration.

This component can be used in both template-driven and reactive forms, and provides customization options for placeholder text, color, and disabled state.

Example :
Basic usage:
<upp-searchbar placeholder="Search..." (Changed)="onSearchChange($event)"></upp-searchbar>
Example :
Reactive form usage:
<upp-searchbar formControlName="searchTerm" [disabled]="isDisabled"></upp-searchbar>

Implements

ControlValueAccessor OnInit

Metadata

providers { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => UppSearchComponent), multi: true }
selector upp-search
styleUrls ./upp-search.scss
templateUrl ./upp-search.html

Index

Methods
Inputs
Outputs
Accessors

Constructor

constructor()

Constructs an instance of UppSearchComponent.

Inputs

color
Type : string
Default value : 'default'

Color for this item
disabled
Type : boolean
Default value : false

Disabled status for the text entry
kiosk
Type : boolean
Default value : true

Enables od disabled the kiosk input
placeholder
Type : string
Default value : ''

Placeholder text for the input.
value
Type : string | null

/

Outputs

Changed
Type : EventEmitter

Emits the current value when it changes.

Methods

ngOnInit
ngOnInit()

Lifecycle hook. Initializes the component and configures initial values.

Returns : void
OnClear
OnClear()

Clears the search value

Returns : void
registerOnChange
registerOnChange(fn: any)

Registers a callback function to be called when the input value changes. Required by ControlValueAccessor.

Parameters :
Name Type Optional Description
fn any No
  • The callback function.
Returns : void
registerOnTouched
registerOnTouched(fn: any)

Registers a callback function to be called when the input is touched. Required by ControlValueAccessor.

Parameters :
Name Type Optional Description
fn any No
  • The callback function.
Returns : void
setDisabledState
setDisabledState(isDisabled: boolean)

Sets the disabled state of the search input. Part of the ControlValueAccessor interface.

Parameters :
Name Type Optional Description
isDisabled boolean No

Whether the control should be disabled
Returns : void
writeValue
writeValue(value: any)

Writes a value to the input. Required by ControlValueAccessor.

Parameters :
Name Type Optional
value any No
Returns : void

Accessors

value
getvalue()

/

Returns : string | null
setvalue(v: string | null)

Sets a new value for the input. Updates the internal value, notifies Angular Forms, and triggers value change events.

Parameters :
Name Type Optional Description
v string | null No
  • The new value to set.
Returns : void 
<ion-item [color]="color" [ngClass]="{ 'disabled': disabled }" lines="none">
    <ion-icon slot="start" name="search-outline"></ion-icon>
    <upp-kb-input uppDataId="search-input" 
        [placeholder]="placeholder" 
        [(ngModel)]="value"
        [kiosk]="kiosk"
        [readonly]="disabled"  
        (Changed)="value = $event"
    ></upp-kb-input>
    <ion-icon uppDataId="search-clear" slot="end" name="close-circle-outline" (click)="OnClear()"></ion-icon>
</ion-item>

./upp-search.scss 

:host {
    width: 100%;

    ion-item {
        --padding-start: 0px !important;
        --inner-padding-start: 0px !important;
        --padding-end: 0px !important;
        --inner-padding-end: 0px !important;
        
        --background: inherit;
        color: inherit;
    
        upp-kb-input {
            margin: 0px 10px;
        }
    
        ion-icon {
            margin: 0px;
        }
    
        &.disabled {
            pointer-events: none;
            opacity: .6;
        }
    }    
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""