Angular6 ng-select - Lightweight all in one UI Select, Multiselect and Autocomplete

Angular6 ng-select - Lightweight all in one UI Select, Multiselect and Autocomplete

Apr 07, 2019 / Ramesh Mhetre

ng-select

ng-select is the package for using multi-select within angular component. This package works great angular v5.x & v6.x

This package is very well documented here.

Installation & Usage

Install ng-select:

npm install --save @ng-select/ng-select

Import the NgSelectModule and angular FormsModule module:

import { NgSelectModule } from '@ng-select/ng-select';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [AppComponent],
  imports: [NgSelectModule, FormsModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

Include a theme:

To allow customization and theming, ng-select  bundle includes only generic styles that are necessary for correct layout and positioning. To get full look of the control, include one of the themes in your application. If you're using the Angular CLI, you can add this to your styles.scss  or include it in .angular-cli.json  (Angular v5 and below) or angular.json (Angular v6 onwards).

@import "~@ng-select/ng-select/themes/default.theme.css";
// ... or 
@import "~@ng-select/ng-select/themes/material.theme.css";

Features

  •  Custom binding to property or object
  •  Custom option, label, header and footer templates
  •  Virtual Scroll support with large data sets (>5000 items).
  •  Infinite scroll
  •  Keyboard navigation
  •  Multiselect
  •  Flexible autocomplete with client/server filtering
  •  Custom search
  •  Custom tags
  •  Append to
  •  Group items
  •  Output events
  •  Accessibility
  •  Good base functionality test coverage
  •  Themes

Demo

Here is the demo link different types of select boxes.


Angular Packages Angular News Angular

Similar Articles

Javascript Markdown parser: Markdown-it

Javascript Markdown parser: Markdown-it

Markdown-it is a javascript library/package which converts markdown text to HTML. Its very fast, efficient & easy to use within your project.
Read more...
Internet connection monitoring in Angular6

Internet connection monitoring in Angular6

Detect internet connection inside running angular application so you can change the behavior of the application.
Read more...
Efficient admin template using Angular 7+, Bootstrap 4 and Nebular: ngx-admin

Efficient admin template using Angular 7+, Bootstrap 4 and Nebular: ngx-admin

The most popular admin dashboard based on Angular 7+, Bootstrap 4+ and Nebular. Free and Open Source for personal and commercial purposes.
Read more...