JSPM – @nglibrary/ngx-choosy@1.1.2

Package Exports

@nglibrary/ngx-choosy

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@nglibrary/ngx-choosy) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

ngx-choosy

A dropdown/ selectbox for Angular 4+

Features

Custom template
Powerful search
Highly customizable
Less restyling

Installation

The library can be installed from npm or yarn package manager.

> yarn add @nglibrary/ngx-choosy

> npm install @nglibrary/ngx-choosy

Include module

// in main app module or shared module

import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { NgxChoosyModule } from '@nglibrary/ngx-choosy'; 

@NgModule({
  imports: [
    AppComponent,
    ...
    NgxChoosyModule.forRoot()
  ],
  declarations: [ AppComponent  ],
  providers: [ ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

Basic example

//  in component

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
 names:string[] = ['John','Peter','William','Kannan','Mustaq','Gabriel','Bunny','James'];
 choosy:any;

 onChoosy(event){
  this.choosy=event;
 }
}

<!-- in template -->

 <input type="text"  choosySingleSelect [options]="names"  [config]="{}" (isOpen)="isDropdownOpened=$event" (choosy)="onChoosy($event)" />

Custom template example

//  in component

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
 address:any[] =[{
    'id': 1,
    'street': '8 Scoville Pass',
    'city': 'Huaniao',
    'country': 'China'
  }, {
    'id': 2,
    'street': '82701 Mosinee Crossing',
    'city': 'Guanabacoa',
    'country': 'Cuba'
  }, {
    'id': 3,
    'street': '78011 Calypso Park',
    'city': 'Bayeux',
    'country': 'Brazil'
  }];
}

<!-- in template -->

<input type="text"  choosySingleSelect [options]="address" [config]="{}" [template]="addressTpl" />

<ng-template let-item #addressTpl>
  <div><strong>{{item.street}}</strong></div>
  <div>{{item.city}} - {{item.country}}</div>
</ng-template>

Choosy event

Choosy exposes three properties, actions, selections and notifications

{
  actions: {
    open(),
    close(),
    toggle(),
    updateConfig(),
    addOption(),
    removeOption(),
    selectOption(),
    disableOption(),
    clearDisabledOption(),
    clearDisabledOptions(),
    clearSelectedOption(),
    clearSelectedOptions(),
    resetOptions(),
    getSelectedOptions(),
    reloadOptions(),
    clear()
  },
  notifications, // Observable
  selections // Observable
}

actions has several methods to work with options and config dynamically

// in component
addNewOption() {
  this.choosy.actions.addOption('Casey')
}

selections is an Observable. You can subscribe to user selected items

onChoosy(event){
  this.choosy=event;
  this.choosy.selections.subscribe(item => {
    console.log(item);
  });
}

notifications is an another Observable which streams the events.

onChoosy(event){
  this.choosy=event;
  this.choosy.notifications.subscribe(notification => {
    console.log(notification);
  });
}

Config

{
  theme: 'default',
  displayValue:'',
  wrapInput:false,
  labels: {
    inputPlaceholder: 'Choose',
    searchPlaceholder: 'Search',
    noResultsToDisplay: 'No results found',
    noOptionsToDisplay: 'No Options to display',
    noOptionsProvided: 'No Options provided',
    XRecordsMatches: 'Records matching',
    XRecords: 'Records',
  },
  search: {
    enable: true,
    shouldSort: true,
    threshold: 0.0,
    tokenize: true,
    matchAllTokens: true,
    location: 0,
    distance: 100,
    maxPatternLength: 32,
    minMatchCharLength: 1,
    keys: ['value'],
    autoFocus: true,
    hasClearBtn: true
  },
  dropdown: {
    width: 300,
    height: 200,
    animation: false
  },
  footer: {
    enable: true,
    countSummary: true
  }
}

Documentation and demo in progress...