Typeahead multi-select dropdown component for angular
npm install ngx-type-ahead> Typeahead multi-select dropdown component for angular. Demo
> The version 2.x.x is for Angular 6+. If you are using older version of Angular (v2-v5) please use previous version.
``
npm install --save ngx-type-ahead
Items can be simple strings or they could be objects. Here is a brief list of functionality:
* Standard type ahead functionality
* Custom inputs (only if suggestions are strings)
* Fixed scope of values - limited to suggestions
* Selecting multiple values
* Suggestions as an array or observable of array
* Suggestion as an object - user specifies which property is view value and which is value indentifier.
you need to import the module and simply place component in your template.`ts
@NgModule({
imports: [
TypeaheadModule
],
bootstrap: [AppComponent]
})
export class AppModule { }
`html
`API
$3
supports following properties:
- suggestions: TypeaheadSuggestions - List or observable list of elements which represent set of possible suggestions. For more information on type check TypeaheadSuggestions.
Default value is [].
- itemTemplate: TemplateRef - Custom template template for items in suggestions list and badges in multi select scenario. Exposed properties are item and index.
- custom: boolean - Flag indicating whether custom values are allowed.
Default value is true.
- multi: boolean - Flag indicating whether control accepts multiple values/array of values.
Default value is false.
- complex: boolean - Flag indicating whether suggestion represents an Object instead of simple string.
Default value is false.
- idField: string - Only for complex suggestions. Object's indicator property name used as a value for form component. Can be just in combination with multi, but automatically cancels custom.
Default value is id.
- nameField: string - Only for complex suggestions. Object's name property. This value will be shown in dropdown and in the input, but idField will be saved to form.
Default value is name.
- settings: TypeaheadSettings - Additional typeahead settings, mostly style related that will most likely be shared among different type-ahead elements. $3
Type representing suggestions. Can be:
* string[]
* Object[]
* Observable
* Observable$3
`ts
export interface TypeaheadSettings {
/* how much should be user's typing debounced /
typeDelay: number; // Default is 50
/* maximal number of visible items in dropdown. If value is 0, list will not be limited /
suggestionsLimit: number; // Default is
/* text shown when there are no matches /
noMatchesText: string; // Default is /* css classes for parts of type-ahead /
tagClass: string; // Default is
tagRemoveIconClass: string; // Default is
dropdownMenuClass: string; // Default is
dropdownMenuExpandedClass: string; // Default is
dropdownMenuItemClass: string; // Default is
dropdownToggleClass: string; // Default is
}