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/ant.design.theme.css";

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.

Thanks for visiting :) Let me know if you have some suggestions or feedback for this post in the comment section. Looking for any tutorial or demo on FreakyJolly, just drop me a message here

2
Leave a Reply

avatar
2 Comment threads
0 Thread replies
2 Followers
 
Most reacted comment
Hottest comment thread
2 Comment authors
DANIELLE TEIXEIRA OLIVEIRAyeinis Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
yeinis
Guest
yeinis

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

DANIELLE TEIXEIRA OLIVEIRA
Guest
DANIELLE TEIXEIRA OLIVEIRA

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?