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
`

$3

`
import { NgMultiselectAngularModule } from 'ng-multiselect-angular';

@NgModule({
imports: [
NgMultiselectAngularModule
]
})
export class AppModule {}
`

$3

`
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);
}
}
`

$3

`
[dropdownList]="list"
[selectSettings]="settings"
(onSelectAll)="onSelectAll($event)"
(onSelect)="onSelect($event)"
(onUnSelect)="onUnSelect($event)"
(onUnSelectAll)="onUnSelectAll($event)">

``