AngularPicker

A searchable dropdown for Angular

This project was generated with Angular CLI version 1.3.0.

Installation

npm i --save nw-angular-picker

Example usage

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NwPickerModule } from '../lib/picker/picker.module';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NwPickerModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { IPickerItem } from 'nw-angular-picker';

public colors: IPickerItem[] = [
    {
        displayName: "red",
        id: "#f00",
        value: "#f00",
        added: false,
        excluded: false,
        parentId: null,
        searchValues: ["#f00"]
    },
    {
        displayName: "green",
        id: "#0f0",
        value: "#0f0",
        added: false,
        excluded: false,
        parentId: null,
        searchValues: ["#0f0"]
    },
    {
        displayName: "blue",
        id: "#00f",
        value: "#00f",
        added: false,
        excluded: false,
        parentId: null,
        searchValues: ["#00f"]
    },
    {
        displayName: "cyan",
        id: "#0ff",
        value: "#0ff",
        added: false,
        excluded: false,
        parentId: null,
        searchValues: ["#0ff"]
    },
    {
        displayName: "magenta",
        id: "#f0f",
        value: "#f0f",
        added: false,
        excluded: false,
        parentId: null,
        searchValues: ["#f0f"]
    },
    {
        displayName: "yellow",
        id: "#ff0",
        value: "#ff0",
        added: false,
        excluded: false,
        parentId: null,
        searchValues: ["#ff0"]
    },
    {
        displayName: "black",
        id: "#000",
        value: "#000",
        added: false,
        excluded: false,
        parentId: null,
        searchValues: ["#000"]
    }
]

<nw-angular-picker [items]="colors" [canExclude]="false">
    <i class="fa fa-globe custom-search-icon"></i>
</nw-angular-picker>

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Picker Inputs

items:IPickerItem[];

A flat list of picker items

inputClasses:string = '';

Classes to add the form input

placeholderText:string = 'Search...';

Default placeholder text

noSelectionsPlaceholderText:string = 'Search...';

Placeholder text to display when no items are selected

initialParentId:any = null;

For nested lists, allow the picker to open at any level in the hierarchy

shouldShowSelections:boolean = true;

Allow the option to view the selected items shortcut

canExclude:boolean = true;

Allow items to be excluded

isHeightDynamic:boolean;

Dynamically calculate the height of the dropdown (only applicable if isMobileDisplay is false)

isMultiSelect:boolean = true;

Can multiple items be selected. If false, dropdown closes on selection

isMobileDisplay: boolean = false;

Animates the opening of the dropdown

Picker Outputs

selections: EventEmitter<IPickerItem[]> = new EventEmitter<IPickerItem[]>();

When an item is toggled, all selected items are emitted

toggleInclude: EventEmitter<{ item: IPickerItem, searchTerm:string }> = new EventEmitter<{ item: IPickerItem, searchTerm:string }>();

Emits the included item plus any search term

toggleExclude: EventEmitter<{ item: IPickerItem, searchTerm:string }> = new EventEmitter<{ item: IPickerItem, searchTerm:string }>();

Emits the excluded item plus any search term

edit: EventEmitter<any> = new EventEmitter<any>();

Triggered when the user clicks to edit selections

closed: EventEmitter<any> = new EventEmitter<any>();

Emitted when the dropdown closes

focus: EventEmitter<ElementRef> = new EventEmitter<ElementRef>();

Emitted on input focus

clearAll: EventEmitter<any> = new EventEmitter<any>();

Emitted when all selections are cleared

clearSingle: EventEmitter<IPickerItem> = new EventEmitter<IPickerItem>();

Emits a single cleared item

clearSearch: EventEmitter<any> = new EventEmitter<any>();

Emitted when the search term is cleared

desc: EventEmitter<IPickerItem> = new EventEmitter<IPickerItem>();

Emitted when descending the hierarchy

asc: EventEmitter<IPickerItem> = new EventEmitter<IPickerItem>();

Emitted when ascending the hierarchy

Projected content

<ng-content select=".custom-search-icon"></ng-content></span>

Can add a custom icon to appear in the input on focus

<ng-content select=".results-footer"></ng-content>

Optional dropdown footer