Angular 8/7 NgSelect with Single/ Multiple Selection and Search Filter

In this tutorial, we will discuss an awesome Dropdown select UI component which is loaded with many useful features which makes it a great choice for Angular project.

Showing listings of data for user selection is generally shown to the user in Select drop-down HTML control. Which is a traditional and nice way to show a limited set of data for selection.

But what if we have dynamic data lists which can have thousands of rows to show? We can’t simply feed all data to UI DOMS as it may adversely affect page performance.

In such a case, we can use ng-select component which not only let users select single of multiple options but can also load data dynamically to act like a typeahead or autocomplete suggestions.

The ng-select is also preferred as there is no need for any other dependency like Bootstrap or Angular Material.

Let’s get to know how quickly use it!

For making this tutorial simple we will first create a new Angular project in latest version 8.

Create a new Angular project

Using Ng CLI tool we will create a new Angular project by running below command in terminal:

Install & Configure ng-select

After creating an Angular project next we will install ng-select page.

Step 1) Run the following command in terminal to install ng-select:


Step 2) To use ng-select component, we need to import NgSelectModule & FormsModule in app.module.ts file:


Step 3) Finally, add a theme to style our awesome ng-select component.

We already have three themes available to select from. Import any of the following in the style.css file:

@import "[email protected]/ng-select/themes/default.theme.css";
@import "[email protected]/ng-select/themes/material.theme.css";

@import "[email protected]/ng-select/themes/";

Now we are done with ng-select installation and configurations required to use anywhere in our application:

Use ng-select Component

To create a select component add the ng-select component as shown below:

with component class content:

There are some required and optional properties:

items: Array or object of local or remote content to populate as select options.

bindLabel: The property of object which we want to show as a label in select box.

placeholder: Text shown to the user when nothing is selected.

appendTo: By default, the options wrapper is appended to the ng-select element but it can be added to other elements using this property.

multiple: Single or multiple options can be selected by setting true or false

searchable: Boolean; Enable or disable filter feature.

clearable: Boolean; Add or remove cross icon to clear selected value.

maxSelectedItems: When multiple is set to true we can limit maximum items available to select.

disabled: Enable or disable the select component.

Using ng-select with ng-options

We can also use ng-option element in ng-select to customize the view of options as shown below:

In component, we will have selected variable as an array of id’s

Show Checkboxes with Select Options

Checkboxes can be shown with each item and also as group checkboxes by using selectableGroup & selectableGroupAsModel properties.

Get Values on Change

To get values on selection change use (change) event binder

Output Event Binding

The event can be triggered on select box operations by using the following output property methods:

Template-driven Validation on NgSelect

For simple form validation, just put ng-select in a form with template variable #myForm and (submit) method.

On ng-select add name and required property as shown below:

In component class, we will get the template variable reference using @ViewChild() and check form’s validation in submitForm method:

Also, add the following CSS style in styles.css at project root to highlight error on  ng-select:


So here we discussed the basic implementation on the ng-select module to quickly integrate into an Angular project. Check out more examples and options here.

Leave a Reply

6 Comment threads
0 Thread replies
Most reacted comment
Hottest comment thread
6 Comment authors
Fahim HossainSUBRATA NANDIhosamSenthil KumarDANIELLE TEIXEIRA OLIVEIRA Recent comment authors
newest oldest most voted
Notify of

Very well, congratulations and thank you very much for sharing your knowledge, I only have one question, within the styles there is a way to show the selected ones with chekbox and not in the input


Hi, confratulations, and my example I can’t use a checkbox in modal. It ends up breaking the layout up, is at the top of the site, an appendTo = “body” option should work, can you helpme?

Senthil Kumar
Senthil Kumar

Hi.. Thanks for the detailed write-up
can you please let me know how to set up the default value in ‘Reactive forms’ i.e without using ngModel.
Thank you


good job



The above technique is appreciated. I implemented in dropdown and working fine in REST API using MEAN stack. But when I am trying to select from one dropdown then the _id is selected in all other dropdown s also where the other dropdowns are implemented using the same code.


Fahim Hossain

Thanks a bunch for the details! Really appreciate your insights!