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

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 <span class="hljs-class">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";
<span class="hljs-regexp">// ... 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.