@myfarms/mf-select NPM

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