Security News
npm Updates Search Experience with New Objective Sorting Options
npm has a revamped search experience with new, more transparent sorting options—Relevance, Downloads, Dependents, and Publish Date.
@ng-select/ng-select
Advanced tools
Angular ng-select - All in One UI Select, Multiselect and Autocomplete
@ng-select/ng-select is a highly customizable Angular component for creating select dropdowns. It provides a wide range of features including single and multiple selection, custom templates, filtering, and more.
Single Selection
This feature allows users to select a single item from a dropdown list. The `items` input takes an array of objects, and `bindLabel` specifies the property to display in the dropdown.
<ng-select [items]="cities" bindLabel="name" placeholder="Select a city"></ng-select>
Multiple Selection
This feature enables users to select multiple items from the dropdown. Setting the `multiple` input to `true` allows for multiple selections.
<ng-select [items]="cities" bindLabel="name" [multiple]="true" placeholder="Select cities"></ng-select>
Custom Templates
Custom templates allow for more control over the appearance of the dropdown items. The `ng-option-tmp` directive can be used to define a custom template for each item.
<ng-select [items]="cities" bindLabel="name" placeholder="Select a city">
<ng-template ng-option-tmp let-item="item" let-index="index">
<div class="custom-option">
<span>{{item.name}}</span>
</div>
</ng-template>
</ng-select>
Filtering
The filtering feature allows users to search through the dropdown items. Setting the `searchable` input to `true` enables this functionality.
<ng-select [items]="cities" bindLabel="name" [searchable]="true" placeholder="Select a city"></ng-select>
Async Data
This feature supports loading data asynchronously. The `items` input can take an observable, and the dropdown will update as the data is loaded.
<ng-select [items]="cities$ | async" bindLabel="name" placeholder="Select a city"></ng-select>
ngx-select-dropdown is another Angular package for creating dropdowns. It offers similar functionalities such as single and multiple selection, custom templates, and filtering. However, it may not be as feature-rich or customizable as @ng-select/ng-select.
ng-multiselect-dropdown is focused on providing a multi-select dropdown component for Angular. It supports features like filtering and custom templates but is primarily designed for multiple selections, unlike @ng-select/ng-select which supports both single and multiple selections.
angular-ng-autocomplete is an Angular component for creating autocomplete dropdowns. It provides features like filtering and custom templates, similar to @ng-select/ng-select, but is more focused on autocomplete functionality rather than general dropdowns.
See Demo page.
Angular | ng-select |
---|---|
>=9.0.0 <10.0.0 | v4.x |
>=8.0.0 <9.0.0 | v3.x |
>=6.0.0 <8.0.0 | v2.x |
v5.x.x | v1.x |
perf(pencil): remove graphiteWidth option
BREAKING CHANGE: The graphiteWidth option has been removed. The default graphite width of 10mm is always used for performance reasons.
Library is under active development and may have API breaking changes for subsequent major versions after 1.0.0.
ng-select
:npm install --save @ng-select/ng-select
yarn add @ng-select/ng-select
import { NgSelectModule } from '@ng-select/ng-select';
import { FormsModule } from '@angular/forms';
@NgModule({
declarations: [AppComponent],
imports: [NgSelectModule, FormsModule],
bootstrap: [AppComponent]
})
export class AppModule {}
To allow customization and theming, ng-select
bundle includes only generic styles that are necessary for correct layout and positioning. To get full look of 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";
You can also set global configuration and localization messages by injecting NgSelectConfig service, typically in your root component, and customize the values of its properties in order to provide default values.
constructor(private config: NgSelectConfig) {
this.config.notFoundText = 'Custom not found';
this.config.appendTo = 'body';
// set the bindValue to global config when you use the same
// bindValue in most of the place.
// You can also override bindValue for the specified template
// by defining `bindValue` as property
// Eg : <ng-select bindValue="some-new-value"></ng-select>
this.config.bindValue = 'value';
}
If you are using SystemJS, you should also adjust your configuration to point to the UMD bundle.
In your systemjs config file, map
needs to tell the System loader where to look for ng-select
:
map: {
'@ng-select/ng-select': 'node_modules/@ng-select/ng-select/bundles/ng-select.umd.js',
}
Input | Type | Default | Required | Description |
---|---|---|---|---|
[addTag] | boolean | ((term: string) => any | Promise<any>) | false | no | Allows to create custom options. |
addTagText | string | Add item | no | Set custom text when using tagging |
appearance | string | underline | no | Allows to select dropdown appearance. Set to outline to add border instead of underline (applies only to Material theme) |
appendTo | string | null | no | Append dropdown to body or any other element using css selector. For correct positioning body should have position:relative |
bindValue | string | - | no | Object property to use for selected model. By default binds to whole object. |
bindLabel | string | label | no | Object property to use for label. Default label |
[closeOnSelect] | boolean | true | no | Whether to close the menu when a value is selected |
clearAllText | string | Clear all | no | Set custom text for clear all icon title |
[clearable] | boolean | true | no | Allow to clear selected value. Default true |
[clearOnBackspace] | boolean | true | no | Clear selected values one by one when clicking backspace. Default true |
[compareWith] | (a: any, b: any) => boolean | (a, b) => a === b | no | A function to compare the option values with the selected values. The first argument is a value from an option. The second is a value from the selection(model). A boolean should be returned. |
dropdownPosition | bottom | top | auto | auto | no | Set the dropdown position on open |
[groupBy] | string | Function | null | no | Allow to group items by key or function expression |
[groupValue] | (groupKey: string, cildren: any[]) => Object | - | no | Function expression to provide group value |
[selectableGroup] | boolean | false | no | Allow to select group when groupBy is used |
[selectableGroupAsModel] | boolean | true | no | Indicates whether to select all children or group itself |
[items] | Array<any> | [] | yes | Items array |
[loading] | boolean | - | no | You can set the loading state from the outside (e.g. async items loading) |
loadingText | string | Loading... | no | Set custom text when for loading items |
labelForId | string | - | no | Id to associate control with label. |
[markFirst] | boolean | true | no | Marks first item as focused when opening/filtering. |
[isOpen] | boolean | - | no | Allows manual control of dropdown opening and closing. True - won't close. False - won't open. |
maxSelectedItems | number | none | no | When multiple = true, allows to set a limit number of selection. |
[hideSelected] | boolean | false | no | Allows to hide selected items. |
[multiple] | boolean | false | no | Allows to select multiple items. |
notFoundText | string | No items found | no | Set custom text when filter returns empty result |
placeholder | string | - | no | Placeholder text. |
[searchable] | boolean | true | no | Allow to search for value. Default true |
[readonly] | boolean | false | no | Set ng-select as readonly. Mostly used with reactive forms. |
[searchFn] | (term: string, item: any) => boolean | null | no | Allow to filter by custom search function |
[searchWhileComposing] | boolean | true | no | Whether items should be filtered while composition started |
[trackByFn] | (item: any) => any | null | no | Provide custom trackBy function |
[clearSearchOnAdd] | boolean | true | no | Clears search input when item is selected. Default true . Default false when closeOnSelect is false |
[editableSearchTerm] | boolean | false | no | Allow to edit search query if option selected. Default false . Works only if multiple is false . |
[selectOnTab] | boolean | false | no | Select marked dropdown item using tab. Default false |
[openOnEnter] | boolean | true | no | Open dropdown using enter. Default true |
[typeahead] | Subject | - | no | Custom autocomplete or advanced filter. |
[minTermLength] | number | 0 | no | Minimum term length to start a search. Should be used with typeahead |
typeToSearchText | string | Type to search | no | Set custom text when using Typeahead |
[virtualScroll] | boolean | false | no | Enable virtual scroll for better performance when rendering a lot of data |
[inputAttrs] | { [key: string]: string } | - | no | Pass custom attributes to underlying input element |
[tabIndex] | number | - | no | Set tabindex on ng-select |
[keyDownFn] | ($event: KeyboardEvent) => bool | true | no | Provide custom keyDown function. Executed before default handler. Return false to suppress execution of default key down handlers |
Output | Description |
---|---|
(add) | Fired when item is added while [multiple]="true" . Outputs added item |
(blur) | Fired on select blur |
(change) | Fired on model change. Outputs whole model |
(close) | Fired on select dropdown close |
(clear) | Fired on clear icon click |
(focus) | Fired on select focus |
(search) | Fired while typing search term. Outputs search term with filtered items |
(open) | Fired on select dropdown open |
(remove) | Fired when item is removed while [multiple]="true" |
(scroll) | Fired when scrolled. Provides the start and end index of the currently available items. Can be used for loading more items in chunks before the user has scrolled all the way to the bottom of the list. |
(scrollToEnd) | Fired when scrolled to the end of items. Can be used for loading more items in chunks. |
Name | Description |
---|---|
open | Opens the select dropdown panel |
close | Closes the select dropdown panel |
focus | Focuses the select element |
blur | Blurs the select element |
Name | Type | Description |
---|---|---|
[ngOptionHighlight] | directive | Highlights search term in option. Accepts search term. Should be used on option element. README |
NgSelectConfig | configuration | Configuration provider for the NgSelect component. You can inject this service and provide application wide configuration. |
SELECTION_MODEL_FACTORY | service | DI token for SelectionModel implementation. You can provide custom implementation changing selection behaviour. |
Ng-select allows to provide custom selection implementation using SELECTION_MODEL_FACTORY
. To override default logic provide your factory method in your angular module.
// app.module.ts
providers: [
{ provide: SELECTION_MODEL_FACTORY, useValue: <SelectionModelFactory>CustomSelectionFactory }
]
// selection-model.ts
export function CustomSelectionFactory() {
return new CustomSelectionModel();
}
export class CustomSelectionModel implements SelectionModel {
...
}
Ng-select component implements OnPush
change detection which means the dirty checking checks for immutable
data types. That means if you do object mutations like:
this.items.push({id: 1, name: 'New item'})
Component will not detect a change. Instead you need to do:
this.items = [...this.items, {id: 1, name: 'New item'}];
This will cause the component to detect the change and update. Some might have concerns that
this is a pricey operation, however, it is much more performant than running ngDoCheck
and
constantly diffing the array.
If you are not happy with default styles you can easily override them with increased selector specificity or creating your own theme. This applies if you are using no ViewEncapsulation
or adding styles to global stylesheet. E.g.
<ng-select class="custom"></ng-select>
.ng-select.custom {
border:0px;
min-height: 0px;
border-radius: 0;
}
.ng-select.custom .ng-select-container {
min-height: 0px;
border-radius: 0;
}
If you are using ViewEncapsulation
, you could use special ::ng-deep
selector which will prevent scoping for nested selectors altough this is more of a workaround and we recommend using solution described above.
.ng-select.custom ::ng-deep .ng-select-container {
min-height: 0px;
border-radius: 0;
}
WARNING: Keep in mind that ng-deep is deprecated and there is no alternative to it yet. See Here.
By default when you use reactive forms validators or template driven forms validators css class ng-invalid
will be applied on ng-select. You can show errors state by adding custom css style
ng-select.ng-invalid.ng-touched .ng-select-container {
border-color: #dc3545;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 3px #fde6e8;
}
Contributions are welcome. You can start by looking at issues with label Help wanted or creating new Issue with proposal or bug report. Note that we are using https://conventionalcommits.org/ commits format.
Perform the clone-to-launch steps with these terminal commands.
git clone https://github.com/ng-select/ng-select
cd ng-select
yarn
yarn run start
yarn run test
or
yarn run test:watch
To release to npm just run ./release.sh
, of course if you have permissions ;)
This component is inspired by React select and Virtual scroll. Check theirs amazing work and components :)
FAQs
Angular ng-select - All in One UI Select, Multiselect and Autocomplete
We found that @ng-select/ng-select demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
npm has a revamped search experience with new, more transparent sorting options—Relevance, Downloads, Dependents, and Publish Date.
Security News
A supply chain attack has been detected in versions 1.95.6 and 1.95.7 of the popular @solana/web3.js library.
Research
Security News
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.