packages/@frontier-autocomplete/projects/ftr-autocomplete/src/lib/ftr-autocomplete.component.ts
FtrAutocompleteComponent
OnInit
OnDestroy
ControlValueAccessor
Validator
AfterViewInit
| providers |
{
provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => FtrAutocompleteComponent), multi: true
}
{
provide: NG_VALIDATORS, useExisting: forwardRef(() => FtrAutocompleteComponent), multi: true
}
|
| selector | ftr-autocomplete |
| styleUrls | ./ftr-autocomplete.component.scss |
| templateUrl | ./ftr-autocomplete.component.html |
constructor(platform: Platform, ftrAutocompleteService: FtrAutocompleteService, elementRef: ElementRef)
|
||||||||||||
|
Parameters :
|
| actionButtonIcon |
Type : IActionButton | undefined
|
|
|
| actionButtons |
Type : IActionButton[]
|
Default value : []
|
|
|
| ariaLabelText |
Default value : ''
|
|
Type: any. Description: Read the name of the button on ftr-autocomplete when using jaws |
| autocompleteDisabled |
Default value : false
|
|
|
| autoFocus |
Default value : false
|
|
|
| backgroundClass |
Default value : 'mat-background-white'
|
|
|
| compatibleMode |
Default value : false
|
|
Description: whether to use the old icons and styles |
| customTooltipMessages |
Type : []
|
| disabled |
Type : boolean
|
| displayOptionMode |
Type : ComboboxDisplayModeLocal
|
Default value : 'description-code'
|
|
Type: ComboboxDisplayModeLocal. Description: Controls display mode for options. |
| displayValueMode |
Type : ComboboxDisplayModeLocal
|
Default value : 'description-code'
|
|
Type: ComboboxDisplayModeLocal. Description: Controls display mode for input value. Also affects maxlength on input. |
| editLabelMenu |
Type : MatMenu | undefined
|
|
Type: MatMenu. Description: MatMenu interface for editing label. |
| errorMessages |
Type : string[]
|
Default value : []
|
|
|
| focusOutOnSelect |
Default value : false
|
|
|
| ftrTabIndex |
Type : number | undefined
|
|
|
| is2dArray |
Default value : false
|
|
Type: boolean. Description: whether the autocomplete is part of a 2D array. Default: false |
| label |
Default value : ''
|
|
|
| loading |
Default value : false
|
|
Description: displays value and is iteractable but not functional. |
| maxLength |
Type : number | undefined
|
|
|
| options |
| panelWidth |
Default value : ''
|
|
Accepts: 'auto' | number for px: for example, '50px' Description: Can override default panel width behaviour |
| placeholder |
Default value : ''
|
|
|
| readOnly |
Default value : false
|
|
Description: displays value and is iteractable but not functional. |
| required |
Default value : false
|
|
|
| requiredMessage |
Default value : ''
|
|
Type: string. Description: Supply required validation error message. |
| selectedOption |
| selectOnly |
Default value : false
|
|
Description: disable input on autocomplete. |
| showIcon |
Default value : true
|
|
Type: boolean. Description: whether to hide/show icon. Default: true |
| showTooltip |
Default value : true
|
|
|
| showTooltipInOptions |
Default value : false
|
|
|
| strictMode |
Default value : false
|
|
Description: turn on to apply strict text matching in filtering options. |
| tooltip |
Default value : ''
|
|
|
| useMatFormField |
Default value : true
|
|
Type: boolean. Description: whether to use mat-form-field to wrap the input element. Default: true |
| value |
Type : string
|
| ftrOnBlur |
Type : EventEmitter
|
|
|
| ftrOnButtonClicked |
Type : EventEmitter
|
|
|
| ftrOnChange |
Type : EventEmitter
|
|
Returns: typing text |
| ftrOnClick |
Type : EventEmitter
|
|
Description: mouse event, indicating whether the click occurs in the inside the input box |
| ftrOnEditLabelClosed |
Type : EventEmitter
|
|
Description: after edit label interface is closed (expect editLabelMenu to be defined) |
| ftrOnEditLabelOpened |
Type : EventEmitter
|
|
Description: after edit label interface is opened (expect editLabelMenu to be defined) |
| ftrOnFocus |
Type : EventEmitter
|
|
|
| ftrOnInputBlur |
Type : EventEmitter
|
|
Description: input blur event, emitted when the input loses focus. |
| ftrOnKeyDown |
Type : EventEmitter
|
|
Description: keydown event, indicating whether the keydown occurs in the autocomplete menu, or inside the input box |
| ftrOnKeyUp |
Type : EventEmitter
|
|
Description: keyup event, indicating whether the keyup occurs in the autocomplete menu, or inside the input box |
| ftrOnOpened |
Type : EventEmitter
|
|
|
| ftrOnSelected |
Type : EventEmitter
|
|
Returns: IFtrAutoCompleteOption |
| document:focusin |
Arguments : '$event'
|
document:focusin(event: FocusEvent)
|
| keydown |
Arguments : '$event'
|
keydown(event: KeyboardEvent)
|
| Public focus |
focus()
|
|
Returns :
void
|
| generateId | ||||||
generateId(label: string | undefined)
|
||||||
|
Parameters :
Returns :
string
|
| matchSearchToOption | ||||||
matchSearchToOption(value: string)
|
||||||
|
Parameters :
Returns :
IFtrAutoCompleteOption | undefined
|
| ngAfterViewInit |
ngAfterViewInit()
|
|
Returns :
void
|
| ngOnDestroy |
ngOnDestroy()
|
|
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| Public preventBlur | |||||||||
preventBlur(event: Event, isDisabled: boolean | undefined)
|
|||||||||
|
Parameters :
Returns :
void
|
| Public trackByMessage |
trackByMessage(_index: number, item: any)
|
|
Returns :
string
|
| autofillAttributeName |
Default value : Guid.create().toString()
|
| Public ftrAutocompleteService |
Type : FtrAutocompleteService
|
| hasSelectedOption |
Default value : false
|
| inputElement |
Type : ElementRef<HTMLInputElement>
|
Decorators :
@ViewChild('trigger')
|
| matAutocompletePosition |
Type : "auto" | "above" | "below"
|
Default value : 'auto'
|
| onChange |
Type : function
|
Default value : () => {...}
|
| onTouched |
Type : function
|
Default value : () => {...}
|
| opening |
Default value : false
|
| Public platform |
Type : Platform
|
| scrollEventHandler |
Default value : () => {...}
|
| showAll |
Default value : false
|
| textControl |
Type : FormControl | undefined
|
| options | ||||
getoptions()
|
||||
setoptions(opts)
|
||||
|
Parameters :
Returns :
void
|
| value | ||||||
getvalue()
|
||||||
setvalue(val: string)
|
||||||
|
Parameters :
Returns :
void
|
| selectedOption | ||||
getselectedOption()
|
||||
setselectedOption(val)
|
||||
|
Parameters :
Returns :
void
|
| disabled | ||||||
getdisabled()
|
||||||
setdisabled(value: boolean)
|
||||||
|
Parameters :
Returns :
void
|
| customMessages | ||||||
getcustomMessages()
|
||||||
setcustomMessages(value: [])
|
||||||
|
Type: IFtrCustomMessage[]. Description: messages for server-side errors. Could contain 3 types of messages: info/warn/error
Parameters :
Returns :
void
|
| customTooltipMessages | ||||||
getcustomTooltipMessages()
|
||||||
setcustomTooltipMessages(value: [])
|
||||||
|
Parameters :
Returns :
void
|
| hasClientSideErrors |
gethasClientSideErrors()
|
| hasErrors |
gethasErrors()
|
| showAllOptions | ||||||
setshowAllOptions(show: boolean)
|
||||||
|
Parameters :
Returns :
void
|
| borderColor |
getborderColor()
|
npm install --save @frontier/autocompleteHere is the list of dependent packages.
@angular/common@angular/material@angular/flex-layout@frontier/common-lib@frontier/action-toolbar@frontier/icon@frontier/translate-loaderrxjsimport { FtrAutocompleteModule } from '@frontier/autocomplete';
@NgModule({
declarations: [],
imports: [
BrowserAnimationsModule,
ReactiveFormsModule, // if using autocomplete in a Form
FormsModule, // if using autocomplete in a Form
FtrAutocompleteModule
],
providers: [],
exports: []
})
export class AppModule {
}<ftr-autocomplete [disabled]="disabled" [required]="required"
[strictMode]="strictMode" [selectOnly]="selectOnly"
[options]="data"
label="Select something" [value]="value"
(ftrOnSelected)="onSelect($event)"
(ftrOnChange)="onChange($event)" (ftrOnOpened)="onOpened()"
(ftrOnFocus)="onFocus()" (ftrOnBlur)="onBlur()"
(ftrOnButtonClicked)="onButtonClicked($event)">
</ftr-autocomplete>
<!-- using in a form -->
<form [formGroup]="form">
<ftr-autocomplete formControlName="country" [options]="data" label="Select country" [required]="required"></ftr-autocomplete>
</form>data = ['option 1','option 2','option 3'];
// data format when selectOnly mode is on:
data2 = [
{
text: 'option 1',
id: 'OPT1'
},
{
text: 'option 2',
id: 'OPT2'
}
];
// if using in a form
form: FormGroup = new FormGroup({
country: new FormControl('Australia'),
});
onChange(value: string) {
this.msg = `value changes to: ${value}`;
}
onSelect(value: IFtrAutoCompleteOption) {
this.msg = `value selected: ${value.text}`;
}
onButtonClicked(opening: boolean) {}