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.
Upload Image In Angular With PHP What Are Directives in Angular?
The post Angular Dropdown With Search And Multi Select. appeared first on PHPFOREVER.