Playground: https://stackblitz.com/edit/mf-select
$ npm install @myfarms/mf-select --saveimport { NgModule } from '@angular/core';
import { MfSelectModule } from '@myfarms/mf-select';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent,
],
imports: [
MfSelectModule,
],
bootstrap: [ AppComponent ]
})
export class AppModule { }<mf-select
[items]='items'
></mf-select>| Input | Type | Default | Description |
|---|---|---|---|
| items | string[] | object[] | Observable<string[] | object[]> |
[] |
Items array or Observable results in an array |
| itemLabel | string |
'name' |
Object property to use for label |
| categoryLabel | string |
'category' |
Grouping based on category, with category header rows |
| appendTo | string |
null |
Append dropdown to body or any other element using css selector |
| dropdownPosition | 'bottom' | 'top' | 'auto' |
'auto' |
Set the dropdown position on open |
| dropdownWidth | number |
- |
Static width of the dropdown in pixels |
| placeholder | string |
'Select...' |
Placeholder text |
| placeholderLoading | string |
'Loading...' |
Placeholder text while loading |
| allowClear | boolean |
true |
Allow dropdown selection to be cleared via 'X' button |
| optionRowHeight | number |
28 |
Allow a custom row height to be set, which matters mostly when the search filter is used |
| loading | boolean |
false |
Flag for manually setting loading spinner |
| floatingLabel | string | undefined |
undefined |
Floating label that shows when item is selected |
| backgroundColor | string |
'white' |
Background color for the select box and dropdown |
| floatingLabelColor | string |
'white' |
Background color for the floating label |
| searchTemplateLeft | TemplateRef<any> |
- |
Template for content left of search |
| searchTemplateRight | TemplateRef<any> |
- |
Template for content right of search |
| selectedTemplate | TemplateRef<any> |
- |
Template for content of selected item |
| optionTemplate | TemplateRef<any> |
- |
Template for content of each item in the dropdown |
| optionCategoryTemplate | TemplateRef<any> |
- |
Template for content of each category header in the dropdown |
| Output | Description |
|---|---|
| (update) | Fired on selected value change |
| Name | Description |
|---|---|
| selectedItem | The selected item |
| toggle() | Opens/closes the select dropdown panel, whichever is appropriate |
| open() | Opens the select dropdown panel |
| close() | Closes the select dropdown panel |
| selectItem(item) | Selects the passed item |
| Name | Type | Description |
|---|---|---|
| [mfOptionHighlight] | directive | Highlights search term in option. Accepts search term. Should be used on option element when customizing template |
Ng-select component implements OnPush change detection which means the dirty checking checks for immutable
data types. That means if you do object mutations like:
this.items.push({id: 1, name: 'New item'})Component will not detect a change. Instead you need to do:
this.items = [...this.items, { id: 1, name: 'New item' }];This will cause the component to detect the change and update. Some might have concerns that
this is a pricey operation, however, it is much more performant than running ngDoCheck and
constantly diffing the array.
To generate all *.js, *.d.ts and *.metadata.json files:
$ npm run buildTo lint all *.ts files:
$ npm run lintMIT © MyFarms