[](https://www.npmjs.com/package/@ngx-lib/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...
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
``js
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
`html`
`js
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"
}];
}
}
`
| Angular Version | Supported version |
| --------------- | ---------------------------- |
| Angular 6 - 8 | @ngx-lib/multiselect - 1.x.x |
| Angular 9+ | @ngx-lib/multiselect - 2.x.x |
We use npm to manage the dependencies and to run build tasks.multiselect/docs_app
You should run all these tasks from the 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.
ng test --project='multiselect'
1. ng test --project='multiselect' --code-coveragenpx http-server -c-1 -o -p 9875 ./coverage`
2.