Angular Dropdown With Search And Multi Select.

Angular Dropdown With Search And Multi Select.

Angular Dropdown With Search And Multi Select.
Angular Dropdown With Search And Multi Select.

In this post, we will learn to select dropdown with search and multi-select features. i=It’s a simple example of a dropdown with search and multi-select using ngselect. This article will implement an angular ngselect box with search and multi select.

What is Angular ng-select?

It is a Lightweight all in one UI Select, Multiselect, and Autocomplete library in Angular. It provides many features such as custom search, multi-select, custom tags, append to, etc. These are the features of ngselect.

Features Of NgSelect

 

  • Custom binding to property or object
  • Custom option, label, header, and footer templates
  • Virtual Scroll support with large data sets (>5000 items).
  • Infinite scroll
  • Keyboard navigation
  • Multiselect
  • Flexible autocomplete with client/server filtering
  • Custom Search
  • Custom tags
  • Append to
  • Group items
  • Output events
  • Accessibility
  • Good base functionality test coverage
  • Themes

Setup Angular Project.

Use command via Angular CLI to create a brand new Angular project.

ng new ng-select-demo

Install & Configure ng-select.

After creating an Angular project next 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 App Module.

To use the ng-select component, we need to import NgSelectModule & FormsModule in the 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 theming, the ng-select bundle includes only generic styles that are necessary for correct layout and positioning. To get a full look at the control, include one of the themes in your application. If you’re using the 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 onwards).

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

Usage.

To use a select component add the ng-select component 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>

Define options in your consuming 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 below link.

API Details

 

Upload Image In Angular With PHP           What Are Directives in Angular?

Related Posts