core/select/typeahead.component.ts
ControlValueAccessor
Validator
AfterViewInit
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 |
Properties |
Methods |
Inputs |
Outputs |
allowFreeEntries |
Type : boolean
|
Default value : true
|
autoClose |
Type : boolean
|
Default value : true
|
container |
Type : string | "body"
|
Default value : ''
|
disabled |
Type : boolean
|
Default value : false
|
displayProperty |
Type : string
|
Default value : 'name'
|
hideNew |
Type : boolean
|
Default value : false
|
icon |
Type : string
|
Default value : 'caret-down'
|
maxlength |
Type : string | number
|
name |
Type : string
|
Default value : this.displayProperty
|
placeholder |
Type : string
|
required |
Type : boolean
|
Default value : false
|
selected |
Type : IIdentified
|
Default value : {
id: null
}
|
onIconClick |
Type : EventEmitter
|
onSearch |
Type : EventEmitter
|
doBlur |
doBlur()
|
Returns :
void
|
getDisplayProperty |
getDisplayProperty()
|
Returns :
any
|
handleKeyboard | ||||
handleKeyboard(event)
|
||||
Parameters :
Returns :
void
|
ngAfterViewInit |
ngAfterViewInit()
|
Returns :
void
|
ngOnDestroy |
ngOnDestroy()
|
Returns :
void
|
onShown |
onShown()
|
Returns :
void
|
registerOnChange | ||||||
registerOnChange(fn: any)
|
||||||
Parameters :
Returns :
void
|
registerOnTouched | ||||||
registerOnTouched(fn: any)
|
||||||
Parameters :
Returns :
void
|
reset |
reset()
|
Resets the input field - clear value and clean field to be pristine and untouched.
Returns :
void
|
setDisabledState | ||||||
setDisabledState(isDisabled: boolean)
|
||||||
Parameters :
Returns :
void
|
validate | ||||||
validate(_ctrl: AbstractControl)
|
||||||
Parameters :
Returns :
literal type
|
writeValue | ||||
writeValue(value)
|
||||
Parameters :
Returns :
void
|
dropdown |
Type : BsDropdownDirective
|
Decorators :
@ViewChild('dropdown', {static: false})
|
list |
Type : QueryList<ListItemComponent>
|
Decorators :
@ContentChildren(ListItemComponent)
|
searchControl |
Type : ElementRef
|
Decorators :
@ViewChild('searchControl', {static: false})
|
searchControlModel |
Decorators :
@ViewChild('searchControlModel', {static: false})
|
<div
class="c8y-search-dropdown 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
#searchControlModel="ngModel"
type="text"
class="form-control text-truncate"
[ngClass]="{'p-r-80': !hideNew &&
(selected
? selected.id === null && getDisplayProperty()?.length > 0 && allowFreeEntries
: false),
'p-r-40': hideNew || getDisplayProperty()?.length === 0
}"
[required]="required"
[ngModel]="selected ? getDisplayProperty() : ''"
[placeholder]="placeholder | translate"
(blur)="doBlur()"
[name]="name"
[maxlength]="maxlength"
[disabled]="disabled"
title="{{ placeholder | translate }}"
/>
<span
class="label label-info p-absolute"
style="top: 10px; right: 40px; z-index: 10"
translate
*ngIf="
!hideNew &&
(selected
? selected.id === null && getDisplayProperty()?.length > 0 && allowFreeEntries
: false)
"
>
New
</span>
<span class="input-group-btn">
<button
type="button"
class="btn btn-clean"
title="{{ 'Search' | translate }}"
[disabled]="disabled"
(click)="onIconClick.emit({ icon, $event });"
>
<i [c8yIcon]="icon" class="text-primary"></i>
</button>
</span>
</div>
<c8y-list-group
class="dropdown-menu dropdown-menu--modal"
*dropdownMenu
[style.width]="container === 'body' ? searchControl.clientWidth + 'px' : undefined"
>
<ng-content select="div, c8y-li, c8y-list-item, button, a"></ng-content>
</c8y-list-group>
</div>