NgSelect with Single/ Multiple Selection and Search Filter in Angular

Creating a new Angular project

Now we will be creating a new Angular project Using Ng CLI tool we will create for which we have to run below command:

Installing & Configuring the ng-select

Now, we will be installing the ng-select page.

Step 1) Installation

For installing the ng-select, run the following command:

 

Step 2) Importing in the App Module

Further, we have to import NgSelectModule & FormsModule in app.module.ts file:

Step 3) Theming

Now, our final step is to add a theme for giving a style to our awesome ng-select component.

We can choose any of the three themes available. We just need to import the selected theme 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";

The installation and configurations of ng-select are completed which can be used in our application at any place:

Using ng-select Component

To create a select component add t The ng-select component is added for creating a select component. It is shown below:

Update component class content with the following code:

Some of the following properties are mandatory and some are optional:

  • items : It is an array or object of local or remote content to populate as select options.
  • bindLabel : It is the property of an object which is wanted to be shown as a label in the select box.
  • placeholder : It is that text shown when no selection has been made.
  • appendTo : To the ng-select element, the options wrapper is appended by default but to the other elements as well, it can be added.
  • multiple : Single or multiple options can be selected by setting true or false
  • searchable : Boolean; Enable or disable filter feature.
  • clearable : Boolean; To clear the selected value, add or remove the cross icon.
  • 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

In ng-select, ng-option element can be used as well to customize the view of options as shown below:

We will be having selected variable in the component as an array of id’s

Showing the Checkboxes using Select Options

By using selectableGroup & selectableGroupAsModel properties, we can show Checkboxes with each item and as group checkboxes as well.

Getting Values on Change

We can use (change) event binder to get values on selection change:

Also check, @ng-select Validation, Multiselection, Custom Property Binding and Checkboxes

 

Output Event Binding

By using the following output property methods, we can trigger the event on select box operations :

Also, read enable Virtual Scroll in ng-select

The Template-driven Validation on NgSelect

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

On ng-select, name and required property is added as shown below:

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

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

So, we have learnt about the basic implementation on the ng-select module to quickly integrate into an Angular project.

You can find out more examples and options here.

Leave a comment

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