Choices

OverviewOfficial Website

ng-select is a TypeScript Package that converts the normal select or input into customizable select inputs with multi-select and autocomplete support.

Add Package

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

Remove Package

npm uninstall @ng-select/ng-select or you can remove package by removing specific package from package.json

Examples:

Title	Template
Default Choice	`<ng-select [(ngModel)]="selectedCar"> <ng-option *ngFor="let car of cars" [value]="car.id">{{car.name}}</ng-option> </ng-select>`
Option Groups	`<ng-select [items]="groups" bindLabel="name" groupBy="country" placeholder="Select an item"> <ng-template ng-label-tmp let-item="item"> <div class="group-label">{{ item.label }}</div> </ng-template> </ng-select>`
Options added with no search	`<ng-select [(ngModel)]="selectedCar" [searchable]="true"> <ng-option *ngFor="let car of cars" [value]="car.id">{{car.name}}</ng-option> </ng-select>`
Default Multiple Select	`<ng-select [items]="colors" bindLabel="name" [multiple]="true" placeholder="Select colors"></ng-select>/code>`
Multiple Select with remove button	`<ng-select [items]="selectValue" [multiple]="true"></ng-select>`
Multiple Select with options group.	`<ng-select [items]="Groups" [multiple]="true" bindLabel="name" bindValue="name" groupBy="country"> <ng-template ng-optgroup-tmp let-item="item"> {{item.country \|\| 'Unnamed group'}} </ng-template> </ng-select>`
Choices select limit with text input & removebutton	`<ng-select bindLabel="name" [addTag]="true" [multiple]="true" [hideSelected]="true" [minTermLength]="2" typeToSearchText="Please enter 2 or more characters"></ng-select>`
Choices with disable option	`<ng-select [items]="Default" bindLabel="name" [multiple]="true" [disabled]="disable" [(ngModel)]="selectedPeople"></ng-select>`