Neurological Phenomenon Multiplexer

    @nglibrary/ngx-choosy
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.2 • Public • Published

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

    Install

    npm i @nglibrary/ngx-choosy

    DownloadsWeekly Downloads

    0

    Version

    1.1.2

    License

    MIT

    Last publish

    Collaborators

    • lokesh-coder