@atlantis-of-code/aoc-client documentation
  1. Components
  2. AocAutocompleteComponent

File

projects/aoc-client/components/aoc-autocomplete/aoc-autocomplete.component.ts

Implements

OnInit AfterContentInit OnDestroy

Metadata

encapsulation ViewEncapsulation.None
selector aoc-autocomplete
standalone true
imports AocUiInputGroupComponent AocUiAutocompleteComponent AocAutocompleteExtraButtonsDirective AocUiButtonDirective AocUiTooltipDirective NgIf NgTemplateOutlet
template 
<aoc-ui-input-group>
  <ng-container *ngTemplateOutlet="aocAutocompleteExtraButtonsStart"></ng-container>
  <aoc-ui-autocomplete
    [options]="models"
    [display]="display"
    [optionNgStyle]="optionNgStyle"
    [optionNgClass]="optionNgClass"
    [minLength]="minlength"
    [delay]="delay"
    [inputId]="inputId"
    [name]="name"
    [placeholder]="placeholder"
    [readonly]="readonly"
    [tabindex]="tabIndex"
    [dataKey]="dataKey"
    [autofocus]="autofocus"
    [noResultsFoundMessage]="noResultsFoundMessage"
    [optionsPerPage]="optionsPerPage"
    [totalOptions]="totalCount"
    (onFocus)="focus($event)"
    (onBlur)="blur($event)"
    (onDropdownClick)="dropdownClick($event)"
    (onQuery)="query($event)"
    (onPageChange)="pageChange($event)"
    (onInputEnterKeyPressed)="inputEnterKeyPressed($event)"
  >
  </aoc-ui-autocomplete>

  <ng-container *ngTemplateOutlet="aocAutocompleteExtraButtonsMiddle"></ng-container>

  <button
    aocUiButton
    [disabled]="!control || control.disabled"
    *ngIf="canAdd"
    tabindex="-1"
    (click)="add()"
    icon="add"
    [aocUiTooltip]="i18nAdd"
  ></button>
  <button
    aocUiButton
    *ngIf="modelConfig.canEdit()"
    tabindex="-1"
    [disabled]="!control || control.disabled || control.value == null || editButtonTooltip"
    (click)="edit()"
    icon="edit_square"
    [aocUiTooltip]="editButtonTooltip ?? i18nEdit"
  ></button>
  <button
    aocUiButton
    *ngIf="modelConfig.canDelete()"
    tabindex="-1"
    [disabled]="!control || control.disabled || control.value == null || deleteButtonTooltip"
    (click)="delete()"
    icon="remove"
    [aocUiTooltip]="deleteButtonTooltip ?? i18nDelete"
  ></button>

  <ng-container *ngTemplateOutlet="aocAutocompleteExtraButtonsEnd"></ng-container>
</aoc-ui-input-group>

Index

Properties
Inputs
Outputs

Constructor

constructor(ngControl: NgControl, aocUiPlatformService: AocUiPlatformService, restService: AocRestService, deleteService: AocDeleteService, aocFormWindowService: AocFormWindowService, aocMisc: AocMisc, l: AocUiLoggerDirective, aocFormController: AocFormController, aocUiWindowDynRef: AocUiWindowDynRef, aocAutocompletePaginatorOptionsPerPage: number)
Parameters :
Name Type Optional
ngControl NgControl No
aocUiPlatformService AocUiPlatformService No
restService AocRestService No
deleteService AocDeleteService No
aocFormWindowService AocFormWindowService No
aocMisc AocMisc No
l AocUiLoggerDirective No
aocFormController AocFormController No
aocUiWindowDynRef AocUiWindowDynRef No
aocAutocompletePaginatorOptionsPerPage number No

Inputs

autofocus
Type : boolean
Default value : false
dataKey
Type : string
Default value : 'id'
delay
Type : number
Default value : 300
display
Type : AocUiDisplay
dynFormGroup
Type : AocDynFormGroup
Default value : {}
inputId
Type : string
minlength
Type : number
Default value : 0
modelConfig
Type : AocModelConfig<T>
modelEmitter
Type : AocModelEmitter<AocModel>
modelListener
Type : AocModelListener<AocModel>
name
Type : string
noResultsFoundMessage
Type : string
optionNgClass
Type : AocUiNgClass<T>
optionNgStyle
Type : AocUiNgStyle<T>
optionsPerPage
Type : number
Default value : 5
overlayMaxHeight
Type : string
Default value : '200px'
placeholder
Type : string
readonly
Type : boolean
Default value : false
restOptions
Type : AocRestOptions
Default value : {}
tabIndex
Type : number
where
Type : AocFilterQuery

Outputs

modelsChange
Type : EventEmitter
onBlur
Type : EventEmitter
onDropdownClick
Type : EventEmitter
onFocus
Type : EventEmitter
onInputEnterKeyPressed
Type : EventEmitter
onQuery
Type : EventEmitter
restOptionsChange
Type : EventEmitter
whereChange
Type : EventEmitter

Properties

aocAutocompleteExtraButtonsTemplates
Type : QueryList<AocAutocompleteExtraButtonsDirective>
Decorators :
@ContentChildren(AocAutocompleteExtraButtonsDirective)

results matching ""

    No results matching ""