![New axobject-query Maintainer Faces Backlash Over Controversial Decision to Support Legacy Node.js Versions](https://cdn.sanity.io/images/cgdhsj6q/production/86e6ebdea652d20da070ebbda20134b839972db7-1024x1024.webp?w=800&fit=max&auto=format)
Security News
New axobject-query Maintainer Faces Backlash Over Controversial Decision to Support Legacy Node.js Versions
A JavaScript library maintainer is under fire after merging a controversial PR to support legacy versions of Node.js.
angular2-multiselect-dropdown
Advanced tools
Readme
Angular 2 multiselect dropdown component for web applications. Easy to integrate and use.
The Mutiselect Dropdown package is published on the npm Registry.
Install the package :
npm install angular2-multiselect-dropdown
Once installed import AngularMultiSelectModule
from the installed package into your module as follows:
Import AngularMultiSelectModule
into NgModule
in app.module.ts
import { AngularMultiSelectModule } from 'angular2-multiselect-dropdown/angular2-multiselect-dropdown';
@NgModule({
// ...
imports: [
AngularMultiSelectModule,
]
// ...
})
Declare the component data variables and options in your component where you want to consume the dropdown component.
import { Component, OnInit } from '@angular/core';
export class AppComponent implements OnInit {
dropdownList = [];
selectedItems = [];
dropdownSettings = {};
ngOnInit(){
this.dropdownList = [
{"id":1,"itemName":"India"},
{"id":2,"itemName":"Singapore"},
{"id":3,"itemName":"Australia"},
{"id":4,"itemName":"Canada"},
{"id":5,"itemName":"South Korea"},
{"id":6,"itemName":"Germany"},
{"id":7,"itemName":"France"},
{"id":8,"itemName":"Russia"},
{"id":9,"itemName":"Italy"},
{"id":10,"itemName":"Sweden"}
];
this.selectedItems = [
{"id":2,"itemName":"Singapore"},
{"id":3,"itemName":"Australia"},
{"id":4,"itemName":"Canada"},
{"id":5,"itemName":"South Korea"}
];
this.dropdownSettings = {
singleSelection: false,
text:"Select Countries",
selectAllText:'Select All',
unSelectAllText:'UnSelect All',
enableSearchFilter: true,
classes:"myclass custom-class"
};
}
onItemSelect(item:any){
console.log(item);
console.log(this.selectedItems);
}
OnItemDeSelect(item:any){
console.log(item);
console.log(this.selectedItems);
}
onSelectAll(items: any){
console.log(items);
}
onDeSelectAll(items: any){
console.log(items);
}
}
Add the following component tag in you template
<angular2-multiselect [data]="dropdownList" [(ngModel)]="selectedItems"
[settings]="dropdownSettings"
(onSelect)="onItemSelect($event)"
(onDeSelect)="OnItemDeSelect($event)"
(onSelectAll)="onSelectAll($event)"
(onDeSelectAll)="onDeSelectAll($event)"></angular2-multiselect>
<angular2-multiselect [data]="dropdownList" [(ngModel)]="selectedItems" [settings]="dropdownSettings">
<c-item>
<ng-template let-item="item">
<label style="color: #333;min-width: 150px;">{{item.itemName}}</label>
<img [src]="item.image" style="width: 30px; border: 1px solid #efefef;margin-right: 20px;" />
<label>Capital - {{item.capital}}</label>
</ng-template>
</c-item>
</angular2-multiselect>
<form (ngSubmit)="onSubmit()" #loginForm="ngForm" style="border: 1px solid #ccc; padding: 10px;">
<div class="form-group">
<label for="name">Skills</label>
<angular2-multiselect [data]="itemList" [(ngModel)]="formModel.skills"
[settings]="settings"
(onSelect)="onItemSelect($event)"
(onDeSelect)="OnItemDeSelect($event)"
(onSelectAll)="onSelectAll($event)"
(onDeSelectAll)="onDeSelectAll($event)" name="skills">
</angular2-multiselect>
</div>
</form>
formModel = {
name: '',
email: 'ascasc@aa.com',
skills: [{ "id": 1, "itemName": "Angular" }]
};
<form [formGroup]="userForm" novalidate style="border: 1px solid #ccc; padding: 10px;">
<div class="form-group">
<label for="name">Skills</label>
<angular2-multiselect [data]="itemList" [(ngModel)]="selectedItems"
[settings]="settings"
(onSelect)="onItemSelect($event)"
(onDeSelect)="OnItemDeSelect($event)"
(onSelectAll)="onSelectAll($event)"
(onDeSelectAll)="onDeSelectAll($event)" formControlName="skills">
</angular2-multiselect>
</div>
</form>
userForm: FormGroup;
this.userForm = this.fb.group({
name: '',
email: ['', Validators.required],
skills: [[], Validators.required]
});
The following list of settings are supported by the component. Configure the settings to meet your requirement.
Setting | Type | Description | Default Value |
---|---|---|---|
singleSelection | Boolean | To set the dropdown for single item selection only. | false |
text | String | Text to be show in the dropdown, when no items are selected. | 'Select' |
enableCheckAll | Boolean | Enable the option to select all items in list | false |
selectAllText | String | Text to display as the label of select all option | Select All |
unSelectAllText | String | Text to display as the label of unSelect option | UnSelect All |
enableSearchFilter | Boolean | Enable filter option for the list. | false |
maxHeight | Number | Set maximum height of the dropdown list in px. | 300 |
badgeShowLimit | Number | Limit the number of badges/items to show in the input field. If not set will show all selected. | All |
classes | String | Custom classes to the dropdown component. Classes are added to the dropdown selector tag. To add multiple classes, the value should be space separated class names. | '' |
limitSelection | Number | Limit the selection of number of items from the dropdown list. Once the limit is reached, all unselected items gets disabled. | none |
disabled | Boolean | Disable the dropdown | false |
searchPlaceholderText | String | Custom text for the search placeholder text. Default value would be 'Search' | 'Search' |
groupBy | String | Name of the field by which the list should be grouped. | none |
searchAutofocus | Boolean | Autofocus search input field | true |
onSelect
- Return the selected item on selection.
Example : (onSelect)="onItemSelect($event)"onDeSelect
- Return the un-selected item on un-selecting.
Example : (onDeSelect)="OnItemDeSelect($event)"onSelectAll
- Return the list of all selected items.
Example : (onSelectAll)="onSelectAll($event)"onDeSelectAll
- Returns an empty array.
Example : (onDeSelectAll)="onDeSelectAll($event)"onOpen
- Callback method fired after the dropdown opens
Example : (onOpen)="onOpen($event)"onClose
- Callback method, fired when the dropdown is closed
Example : (onClose)="onClose($event)"npm install
ng serve
for a dev serverhttp://localhost:4200/
The app will automatically reload if you change any of the source files.MIT License.
FAQs
Angular Multiselct dropdown component library for Angular version 11, 10, 9,8,6,4
The npm package angular2-multiselect-dropdown receives a total of 13,506 weekly downloads. As such, angular2-multiselect-dropdown popularity was classified as popular.
We found that angular2-multiselect-dropdown demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer 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
A JavaScript library maintainer is under fire after merging a controversial PR to support legacy versions of Node.js.
Security News
Results from the 2023 State of JavaScript Survey highlight key trends, including Vite's dominance, rising TypeScript adoption, and the enduring popularity of React. Discover more insights on developer preferences and technology usage.
Security News
The US Justice Department has penalized two consulting firms $11.3 million for failing to meet cybersecurity requirements on federally funded projects, emphasizing strict enforcement to protect sensitive government data.