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)
|
||||||
|
Parameters :
|
| autocompleteDisabled |
Default value : false
|
|
|
| autoFocus |
Default value : false
|
|
|
| compatibleMode |
Default value : false
|
|
Description: whether to use the old icons and styles |
| disabled |
Type : boolean
|
| 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
|
|
|
| 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 |
| 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
|
|
|
| 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 |
| Public focus |
focus()
|
|
Returns :
void
|
| ngAfterViewInit |
ngAfterViewInit()
|
|
Returns :
void
|
| ngOnDestroy |
ngOnDestroy()
|
|
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| Public trackByMessage |
trackByMessage(_index: number, item: any)
|
|
Returns :
string
|
| autofillAttributeName |
Default value : Guid.create().toString()
|
| 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 | ||||||
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
|
| hasClientSideErrors |
gethasClientSideErrors()
|
| 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) {}