Angular Dropdown With Search And Multi Select.

In this post, we will learn to select a dropdown menu with search and multi-select features. i=This is a simple example of a dropdown with search and multiple selection using ngselect. This article will implement an Angular ngselect box with search and multiselect.

What is Angular ng-select?

It’s an all-in-one lightweight, multi-select, and auto-complete library in Angular. It provides many features such as custom search, multiple selection, custom tags, add to etc. These are the features of ngselect.

Features of NgSelect

• A custom cover for a property or object
• Custom options templates, label, headers and footers
• Virtual scrolling support with large datasets (>5000 items).
• Infinite scrolling
• Keyboard navigation
• multiple choice
• Flexible auto-completion with client/server filtering
• Search for a costume
• Custom tags
• attach
• A group of items
• Output events
• accessibility
• Good base coverage for functionality testing
• Themes

Setting up an Angular project.

Use the command through the Angular CLI to create a brand new Angular project.

ng new ng-select-demo

Install and configure ng-select.

After creating the following Angular project we will install the ng-select page. Run the following command in the terminal to install ng-select:

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

Import in the app module.

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

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

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

Include a theme.

To allow customization and design, the ng-select package only includes generic styles needed for correct layout and positioning. To get a full view of the control, include one of the themes in your app. If you use Angular CLI, you can add this to your styles.scss or include it in .angular-cli.json (Angular v5 and below) or angular.json (Angular v6 and above).

@import "~@ng-select/ng-select/themes/default.theme.css";
// ... or 
@import "~@ng-select/ng-select/themes/material.theme.css";

practice.

To use a select element add the ng-select element in your template as shown below:

<!--Using ng-option and for loop-->
<ng-select [(ngModel)]="selectedCar" placeholder="Select item"  multiple="true">
   <ng-option *ngFor="let car of cars" [value]="car.id">{{car.name}}</ng-option>
</ng-select>

<!--Using items input-->
<ng-select [items]="cars" 
           bindLabel="name" 
           bindValue="id"
           [(ngModel)]="selectedCar">
</ng-select>

Set options in your consumption component:

@Component({...})
export class ExampleComponent {
    selectedCar: number;
    cars = [
        { id: 1, name: 'Volvo' },
        { id: 2, name: 'Saab' },
        { id: 3, name: 'Opel' },
        { id: 4, name: 'Audi' },
    ];
}

For its API details open the link below.

API details

Upload an image in Angular with PHP What are directives in Angular?