ngx-select-extended

v0.2.1

Published

3 years ago

Angular 2 and angular 4 and angular 6 multiselect dropdown component.

Downloads

0High
0Medium
0Low

angular 2 multiselect dropdown angular 4 multiselect dropdown angular multiselect angular dropdown angular 6 dropdown multiselect

Angular 2/4/6/8 Multiselect Dropdown

Angular 2 multiselect dropdown component for web applications. Easy to integrate and use.

NOTE: This is a fork of angular2-multiselect-dropdown.

Angular 2/4/6/8 Multiselect Dropdown
Important Notice !! - From v3.0.0 onwards, you need to include default.theme.css file to get the basic styling of the dropdown. Refer to themes and theming section below
[Documentation | Demos / Examples.](#documentation--demos--examples)

Important Notice !!

From v3.0.0 onwards, you need to include `default.theme.css` file to get the basic styling of the dropdown. Refer to `themes and theming` section below

Documentation | Demos / Examples.

Getting Started

Installation

The Mutiselect Dropdown package is published on the npm Registry.
Install the package : npm install ngx-multiselect-dropdown
Once installed import AngularMultiSelectModule from the installed package into your module as follows:

Usage

Import AngularMultiSelectModule into NgModule in app.module.ts. Angular's FormsModule is also required.

import { AngularMultiSelectModule } from 'ngx-multiselect-dropdown';
import { FormsModule } from '@angular/forms';

@NgModule({
  // ...
  imports: [
    AngularMultiSelectModule,
    FormsModule
  ]
  // ...
})

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>

Themes and Theming

From v3.0.0 onwards, you need to include default.theme.css file to get the basic styling of the dropdown.
The component package has a themes folder in node_modules at ngx-multiselect-dropdown\themes\default.theme.css
Include the default.theme.css in angular-cli.json (for versions below angular 6) and angular.json (for version 6 or more).
Refer this file on how to add the css file to your angular project.

You can create your own theme from now on. You can have a look at example scss theming file at Default theme

Template - For custom html of menu item

<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>

Template - For custom html of Selected item - badge

<angular2-multiselect [data]="dropdownList" [(ngModel)]="selectedItems" [settings]="dropdownSettings">
  <c-badge>
           <ng-template let-item="item">
            <label style="margin: 0px;">{{item.itemName}}</label>
            <img [src]="item.image" style="width: 16px; margin-right: 5px;" />
           </ng-template>
  </c-badge>  
</angular2-multiselect>

Template Driven Forms support


<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: '[email protected]',
        skills: [{ "id": 1, "itemName": "Angular" }]
    };

Reactive Forms support


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

Settings

The following list of settings are supported by the component. Configure the settings to meet your requirement.

Events

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)"
onGroupSelect - Returns the selected group items as an array. Example: (onGroupSelect)="onGroupSelect($event)"
onGroupDeSelect - Returns the sun-elected group items as an array. Example: (onGroupDeSelect)="onGroupDeSelect($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)"
onScrollToEnd - Callback event fired when the dropdown list is scrolled to the end. Usually used with virtual scrolling, to load data on scroll. Example : (onScrollToEnd)="fetchMore($event)"
onAddFilterNewItem - Callback event fired when you click the Add button which will appear when addNewItemOnFilter setting is enabled. Example : (onAddFilterNewItem)="onAddItem($event)"
onFilterSelectAll - Callback event fired when the list is filtered and all filtered items are selected with select all filtered items checkbox. Example : (onFilterSelectAll)="onFilterSelectAll($event)"
onFilterDeSelectAll - Callback event fired when the list is filtered and all filtered items are de-selected with de-select all filtered items checkbox. Example : (onFilterDeSelectAll)="onFilterDeSelectAll($event)"

Run locally

Clone the repository or downlod the .zip,.tar files.
Run npm install
Run ng serve for a dev server
Navigate to http://localhost:4200/ The app will automatically reload if you change any of the source files.

License

MIT License.