Web SDK documentation
  1. Components
  2. TypeaheadTypeComponent

File

core/dynamic-forms/typeahead/typeahead.type.component.ts

Extends

FieldType

Implements

OnInit

Metadata

changeDetection ChangeDetectionStrategy.OnPush
selector c8y-typeahead-type
templateUrl ./typeahead.type.component.html

Index

Properties
Methods

Constructor

constructor(cdRef: ChangeDetectorRef, translateService: TranslateService)
Parameters :
Name Type Optional
cdRef ChangeDetectorRef No
translateService TranslateService No

Methods

ngOnInit
ngOnInit()
Returns : void
selectOption
selectOption(opt)
Parameters :
Name Optional
opt No
Returns : void
setPipe
setPipe(filterStr: string)
Parameters :
Name Type Optional
filterStr string No
Returns : void

Properties

Static Readonly CONFIG
Type : ConfigOption
Default value : { types: [{ name: 'typeahead', component: TypeaheadTypeComponent }] }
defaultPlaceholder$
Default value : defer(() => isObservable(this.to?.c8yForOptions) ? this.to?.c8yForOptions : of(this.to?.c8yForOptions)) .pipe( map(({ data }) => get(data[0], this.labelProp || 'name')), map(example => { return !!example ? this.translateService.instant(gettext('Start typing to search, e.g. {{ example }}'), { example }) : this.translateService.instant(gettext('No items')); }) )
filterPipe
Type : UnaryFunction< | >
labelProp
Type : string
match
Type : boolean
Default value : false
pattern
Type : string
placeholder$
Default value : defer(() => of(this.to?.placeholder)) .pipe( switchMap(placeholder => (placeholder ? of(placeholder) : this.defaultPlaceholder$.pipe( startWith(this.translateService.instant(gettext('Start typing to search'))) ))) )
selected
Type : IIdentified 
<c8y-typeahead
  [required]="to?.required || false"
  [placeholder]="placeholder$ | async"
  [displayProperty]="to?.displayProperty"
  [selected]="selected"
  [allowFreeEntries]="to?.allowFreeEntries || false"
  [container]="to?.container || ''"
  [disabled]="to?.disabled"
  (onSearch)="setPipe($event)"
  [formControl]="formControl"
  [class.is-invalid]="showError"
  [formlyAttributes]="field">

  <c8y-li *c8yFor="let opt of to?.c8yForOptions; loadMore: to?.loadMore || 'auto'; pipe: filterPipe; notFound: notFoundTemplate; loadingTemplate: loading;"
          (click)="selectOption(opt); setPipe('')"
          class="p-l-8 p-r-8 c8y-list__item--link">
    <c8y-highlight [text]="opt[labelProp]" [pattern]="pattern"></c8y-highlight>
  </c8y-li>
  <ng-template #notFoundTemplate>
    <c8y-li class="bg-gray-lighter p-8" *ngIf="pattern.length > 0 && !match">
      <p><strong translate>No match found.</strong></p>
    </c8y-li>
  </ng-template>
  <ng-template #loading>
    <c8y-li class="text-center p-t-8 p-relative">
      <c8y-loading></c8y-loading>
    </c8y-li>
  </ng-template>
</c8y-typeahead>

results matching ""

    No results matching ""