Angular SelectBox/ DropDown with Filter and Virtual Scroll features

How about adding some powerful features to your traditional select box or drop-down controls from where a user can select single or multiple values.

The ng-select package is widely used in Angular projects as it is very easy to install and features add up more on performance and make user interactions friendly.

Here we will discuss how to install and configure the ng-select component, also discuss its important features with examples.

Let’s get started with a new Angular project…

Create a new Angular project

By using the NG CLI tool we will quickly create a new project. If you already have one, just skip this step.

The current version on ng cli is 8.3.19

Install & Configure ng-select

After creating the project, run the following command to install the ng-select package in your project.

Run following NPM command in terminal to install the ng-select package:

Add NgSelectModule & FormsModule in App Module to enable the usage of the ng-select component in the application.

Open the app.module.ts file then replace with below code:

Adding a theme

By default ng-select package provides three themes which we can use by simply importing them in the styles.css file as shown below:

Default Theme

Ant Design Theme

Material Theme

We will also let you know how to quickly override this style using a quick CSS patch 😉

So we are done!

Let’s check how to use it?

Adding the NgSelect

To add we need to use the ng-select directive component in our template. Following is the simplest form of ng-select with required properties:

If you look closely we added four properties that are easy to understand why we used them.

[item] property is used to bind static objects of items which will be shown in select options. This can be a dynamic data set we can get from server which we will discuss later.

The bindLabel takes the key name of the object whose text will be shown apon selection.

Similarly, the bindValue property is the key name of the source object that will act as the select box value.

In the [(ngModel)] we can pass the value of the item which needs to be selected by default. Check out the component code below which you can add in the app.component.ts file:

Virtual Scroll in ng-select

The virtual scroll is one of the best features in the ng-select box, which really fastens the select box operations which are loaded with a large number of options. Just check the performance of select boxes with and without virtual scroll feature:

NgSelect without Virtual Scroll: It takes time to open options as all the items added at once in DOM.

NgSelect with Virtual Scroll: It greatly improves the select performance as it only loads options in DOM which are visible to the user.

 

To enable Virtual Scroll just add [virtualScroll]="true" as shown below:

Enable/ Disable

Use [disabled] property with a boolean value as true(Disable) or false(Enable)

Make ng-select as Required

To make ng-select as required in the form we can simply add required or [required]="true"(for conditional) .

CSS Styling

Two most important and required CSS styles need to be added for Required and Disabled states.

NgSelect CSS for Disabled State

 

 

 

Leave a comment

Your email address will not be published. Required fields are marked *