Web SDK documentation
  1. Components
  2. TypeaheadComponent

File

core/select/typeahead.component.ts

Implements

ControlValueAccessor Validator

Metadata

providers { provide: NG_VALUE_ACCESSOR, multi: true, useExisting: forwardRef(() => TypeaheadComponent) } { provide: NG_VALIDATORS, useExisting: forwardRef(() => TypeaheadComponent), multi: true }
selector c8y-typeahead
templateUrl ./typeahead.component.html

Index

Properties
Methods
Inputs
Outputs

Inputs

allowFreeEntries

Type : boolean

Default value : true

autoClose

Type : boolean

Default value : true

container

Type : "" | "body"

Default value : ''

disabled

Type : boolean

Default value : false

displayProperty

Type : string

Default value : 'name'

icon

Type : string

Default value : 'caret-down'

name

Type : string

Default value : this.displayProperty

placeholder

Type : string

required

Type : boolean

Default value : false

selected

Type : IIdentified

Default value : { id: null }

Outputs

onIconClick $event Type: EventEmitter
onSearch $event Type: EventEmitter

Methods

doBlur
doBlur()
Returns : void
getDisplayProperty
getDisplayProperty()
Returns : any
handleKeyboard
handleKeyboard(event)
Parameters :
Name Optional
event No
Returns : void
ngAfterViewInit
ngAfterViewInit()
Returns : void
ngOnDestroy
ngOnDestroy()
Returns : void
onShown
onShown()
Returns : void
registerOnChange
registerOnChange(fn: any)
Parameters :
Name Type Optional
fn any No
Returns : void
registerOnTouched
registerOnTouched(fn: any)
Parameters :
Name Type Optional
fn any No
Returns : void
validate
validate(ctrl: AbstractControl)
Parameters :
Name Type Optional
ctrl AbstractControl No
Returns : literal type
writeValue
writeValue(value)
Parameters :
Name Optional
value No
Returns : void

Properties

dropdown
dropdown: BsDropdownDirective
Type : BsDropdownDirective
Decorators :
@ViewChild('dropdown', {static: undefined})
list
list: QueryList<ListItemComponent>
Type : QueryList<ListItemComponent>
Decorators :
@ContentChildren(ListItemComponent)
searchControl
searchControl: ElementRef
Type : ElementRef
Decorators :
@ViewChild('searchControl', {static: undefined})
 
<div
  class="c8y-child-assets-selector dropdown fit-w"
  dropdown
  [container]="container"
  placement="bottom left"
  #dropdown="bs-dropdown"
  [autoClose]="true"
  (onShown)="onShown()"
  [isDisabled]="disabled"
>
  <div class="input-group input-group-dropdown" dropdownToggle>
    <input
      #searchControl
      type="text"
      class="form-control text-truncate p-r-24"
      [required]="required"
      [ngModel]="selected ? getDisplayProperty() : ''"
      [placeholder]="placeholder | translate"
      (blur)="doBlur()"
      [name]="name"
      [disabled]="disabled"
      title="{{ placeholder | translate }}"
    />

    <span
      class="label label-info p-absolute"
      style="top: 10px; right: 40px; z-index: 10;"
      translate
      *ngIf="
        selected
          ? selected.id === null && getDisplayProperty()?.length > 0 && allowFreeEntries
          : false
      "
    >
      New
    </span>

    <span class="input-group-btn">
      <button
        type="button"
        class="btn btn-clean"
        [disabled]="disabled"
        (click)="onIconClick.emit(icon)"
      >
        <i [c8yIcon]="icon"></i>
      </button>
    </span>
  </div>

  <c8y-list-group class="dropdown-menu dropdown-menu--modal" *dropdownMenu>
    <ng-content select="div, c8y-li, c8y-list-item, button, a"></ng-content>
  </c8y-list-group>
</div>
Copy

result-matching ""

    No results matching ""