![Namecheap Takes Down Polyfill.io Service Following Supply Chain Attack](https://cdn.sanity.io/images/cgdhsj6q/production/6af25114feaaac7179b18127c83327568ff592d1-1024x1024.webp?w=800&fit=max&auto=format)
Security News
Namecheap Takes Down Polyfill.io Service Following Supply Chain Attack
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
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 |
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)"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
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
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.
Security News
A JavaScript library maintainer is under fire after merging a controversial PR to support legacy versions of Node.js.