Noodles, Poodles and More!

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

    1.0.7 • Public • Published

    https://nodei.co/npm/@ngx-lib/multiselect.png?downloads=true&downloadRank=true&stars=true HitCount Known Vulnerabilities Build Status

    Multiselect

    This project focuses on serving an intuitive select control. This look and feel of the component has been inspired by AngularJS isteven-multiselect directive, but from coding perspective, this may not be architectured in the similar way. It supports ultimate features like

    • 🖱️Virtual scroll
    • 📃Forms
    • 🎨Theming (bootstrap/material)
    • 👀Observable
    • 🅰️@angular 6+
    • 👨‍👧‍👧Grouping
    • etc...

    visit docs

    Getting Started

    It's super easy to get started with Angular multiselect dropdown. Only three steps are required:

    1. Install @ngx-lib/multiselect package

      npm install -S @ngx-lib/multiselect
    2. Import module NgxMultiselectModule into your app.module.ts

      import { NgxMultiselectModule } from '@ngx-lib/multiselect';
      
      @NgModule({
          imports: [
              ...,
              NgxMultiselectModule // <-- add module in imports
          ],
          bootstrap: [AppComponent],
          providers: [...],
          declarations: [...]
      })
      export class AppModule {
      
      }
    3. Use ngx-multiselect on HTML

      <ngx-multiselect
          [(ngModel)]="selectedCountry"
          [options]="countries"
          ngDefaultControl>
      </ngx-multiselect>
      import { Component, OnInit } from '@angular/core';
      
      @Component({...})
      export class AppComponent implements OnInit {
          countries;
          selectedCountry;
      
          ngOnInit() {
              this.countries = [
                  { id: 1, name: "India"},
                  { id: 2, name: "USA" },
                  { id: 3, name: "China" },
                  { id: 4, name: "Japan" }
              ];
      
              this.selectedCountry = [{
                  id: 1,
                  name: "India"
              }];
          }
      }

    Stackblitz Demo

    Developer tasks

    We use npm to manage the dependencies and to run build tasks. You should run all these tasks from the multiselect/docs_app folder. Here are the most important tasks you might need to use:

    • npm install - install all the dependencies.

    • npm run setup - install all the dependencies and run dgeni on the docs.

    • npm run build - create a production build of the application (after installing dependencies, etc).

    • npm start - run a development web server that watches the files; then builds the doc-viewer and reloads the page, as necessary.

    • npm run serve-and-sync - run both the docs-watch and start in the same console.

    • npm run lint - check that the doc-viewer code follows our style rules.

    • npm test - watch all the source files, for the doc-viewer, and run all the unit tests when any change.

    • npm test -- --watch=false - run all the unit tests once.

    • npm run e2e - run all the e2e tests for the doc-viewer.

    • npm run docs - generate all the docs from the source files.

    • npm run docs-watch - watch the multiselect source and the docs files and run a short-circuited doc-gen for the docs that changed (don't work properly at the moment).

    • npm run docs-lint - check that the doc gen code follows our style rules.

    • npm run docs-test - run the unit tests for the doc generation code.

    • npm run build-ie-polyfills - generates a js file of polyfills that can be loaded in Internet Explorer.

    Running unit tests

    Run test cases

    ng test --project='multiselect'

    Check code coverage

    1. ng test --project='multiselect' --code-coverage
    2. npx http-server -c-1 -o -p 9875 ./coverage

    alt text

    Install

    npm i @ngx-lib/multiselect

    DownloadsWeekly Downloads

    109

    Version

    1.0.7

    License

    MIT

    Unpacked Size

    543 kB

    Total Files

    32

    Last publish

    Collaborators

    • ngx-lib-admin
    • pankajparkar
    • nitinkalenk