Angular 9|8|7 Single & Multiple Select using @ng-select Package Tricks and Tutorial

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.

[lwptoc]

 

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.

$ ng new angular-ngselect
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS

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:

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

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:

// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

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

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

 

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:

/* You can add global styles to this file, and also import other style files */

/* @import "~@ng-select/ng-select/themes/ant.design.theme.css"; */
@import "~@ng-select/ng-select/themes/default.theme.css";
/* @import "~@ng-select/ng-select/themes/material.theme.css"; */

Default Theme

Ant Design Theme

Material Theme

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

You may see an error

can’t resolve ‘@ng-select/ng-select/themes/default.theme.css’

Make sure to add ~ in the front

 

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:

<ng-select [items]="cheeseTypes"
     bindLabel="text"
     bindValue="id"
     [(ngModel)]="selectedCheese">
</ng-select>

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:

// app.component.ts
import { Component } from '@angular/core';

interface CheesyObject {
  id: number;
  text: string;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  cheeseTypes: CheesyObject[];
  selectedCheese: number;

  constructor(){
    // Select box data
    this.cheeseTypes = [
      {
        id:1001,
        text:'Roquefort'
      },{
        id:1002,
        text:'Camembert'
      },{
        id:1003,
        text:'Cotija'
      },{
        id:1004,
        text:'Mozzarella'
      },{
        id:1005,
        text:'Feta'
      }
    ]

    // Selected Value
    this.selectedCheese = 1004;

  }
}

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:

<ng-select [items]="largeObject"
     bindLabel="text"
     bindValue="id"
     [(ngModel)]="selectedCheese"
     [virtualScroll]="true"
>
</ng-select>

Enable/ Disable ng-select

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

<button (click)="isSelectDisabled = !isSelectDisabled" class="btn btn-primary">
    <ng-container *ngIf="isSelectDisabled; else elseTemplate">
        Click to Enable
    </ng-container>
    <ng-template #elseTemplate>
        Click to Disable
    </ng-template>
</button>


<ng-select [items]="largeObject"
    bindLabel="text"
    bindValue="id"
    [(ngModel)]="selectedCheese"
    [virtualScroll]="true"
    [disabled]="isSelectDisabled"
    >
</ng-select>

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

/* Ng Select Disabled State */

ng-select.ng-select-disabled input,
ng-select.ng-select-disabled .ng-select-container{
    cursor: not-allowed!important;
}
ng-select.ng-select-disabled .ng-arrow-wrapper{
    display: none;
}
ng-select.ng-select-disabled .ng-value{
    color: #afafaf;
}

 

 

Conclusion

So here we discussed some common challenges and their simple solutions while implementing ng-select dropdown filters in the applications.