ng-multiselect-angular
v0.0.8
Published
Angular multiselect dropdown component for web applications. Easy to integrate and use. It can be bind to any custom data source.
Downloads
25
Maintainers
Readme
NgMultiselectAngular
Angular multiselect dropdown component for web applications. Easy to integrate and use. It can be bind to any custom data source.
Getting Started
Package Features
dropdown with single/multiple selction option bind to any custom data source search item with custom placeholder text select/un-select all items can use images in list
Installation Steps
npm i ng-multiselect-angular
And then add it in your module (see app.module.ts):
import { NgMultiselectAngularModule } from 'ng-multiselect-angular';
@NgModule({
imports: [
NgMultiselectAngularModule
]
})
export class AppModule {}
And then add it in your Component (see app.component.ts):
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
title = 'sample';
public list:any[]=[];
public settings = {
isSearch: false,
placeholder: 'Select Country',
isSelectAll: true,
isShowImage: true,
singleSelect: true
};
ngOnInit(): void {
this.list = [
{ id: 1, name: 'India', image: 'assets/images/baby.jpg', checked: false},
{ id: 2, name: 'Us', image: 'assets/images/baby.jpg', checked: true },
{ id: 3, name: 'China', image: 'assets/images/baby.jpg', checked: false},
{ id: 4, name: 'Russia', image: 'assets/images/baby.jpg', checked: false},
{ id: 5, name: 'Japan', image: 'assets/images/baby.jpg', checked: false},
{ id: 6, name: 'sriLankan', image: 'assets/images/baby.jpg', checked: false},
];
}
public onSelect(data:any) {
console.log(data);
}
public onSelectAll(list:any) {
console.log(list);
}
public onUnSelectAll(list:any) {
console.log(list);
}
public onUnSelect(data:any) {
console.log(data);
}
}
And then add it in your HTML (see app.component.html):
<ng-multiselect-angular
[dropdownList]="list"
[selectSettings]="settings"
(onSelectAll)="onSelectAll($event)"
(onSelect)="onSelect($event)"
(onUnSelect)="onUnSelect($event)"
(onUnSelectAll)="onUnSelectAll($event)">
</ng-multiselect-angular>