@myfarms/mf-select

Playground: https://stackblitz.com/edit/mf-select

Getting started

Step 1: Install @myfarms/mf-select

$ npm install @myfarms/mf-select --save

Step 2: Import the MfSelectModule

import { 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 { }

Step3: Use the component in your template

<mf-select
  [items]='items'
></mf-select>

API

Inputs

| 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 | | 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 |

Outputs

| Output | Description | | ------------- | ------------- | | (update) | Fired on selected value change |

Methods and Properties

| 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 |

Other

| Name | Type | Description | | ------------- | ------------- | ------------- | | [mfOptionHighlight] | directive | Highlights search term in option. Accepts search term. Should be used on option element when customizing template |

Change Detection

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.

Development

To generate all *.js, *.d.ts and *.metadata.json files:

$ npm run build

To lint all *.ts files:

$ npm run lint

License

MIT © MyFarms