🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
Book a DemoInstallSign in
Socket

angular2-dropdown-multiselect

Package Overview
Dependencies
Maintainers
1
Versions
1
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

angular2-dropdown-multiselect

Customizable dropdown multiselect in Angular 2 with bootstrap css.

1.2.1
latest
Source
npm
Version published
Weekly downloads
69
283.33%
Maintainers
1
Weekly downloads
 
Created
Source

AngularX Dropdown Multiselect for Bootstrap CSS

Works with Angular Final and AOT compilation

Customizable dropdown multiselect in AngularX, TypeScript with bootstrap css.

See demo: http://softsimon.github.io/angular-2-dropdown-multiselect

Dependencies

  • Bootstrap CSS 3 or 4
  • Font Awesome (optional)

Quick start options

  • Download the latest release.
  • Clone the repo: git clone https://github.com/softsimon/angular-2-dropdown-multiselect.git.
  • Install with Bower: bower install angular-2-dropdown-multiselect --save.
  • Install with npm: npm install angular-2-dropdown-multiselect --save-dev.

Usage

Import MultiselectDropdown into your @NgModule.

import { MultiselectDropdownModule } from 'angular-2-dropdown-multiselect';

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

Define options in your consuming component:

import { IMultiSelectOption } from 'angular-2-dropdown-multiselect';

export class MyClass implements OnInit {
    optionsModel: number[];
    ngOnInit() {
        myOptions: IMultiSelectOption[] = [
            { id: 1, name: 'Option 1' },
            { id: 2, name: 'Option 2' },
        ];
    }
    onChange() {
        console.log(this.optionsModel);
    }
}

In your template, use the component directive:

<ss-multiselect-dropdown [options]="myOptions" [(ngModel)]="optionsModel" (ngModelChange)="onChange($event)"></ss-multiselect-dropdown>

Customize

Import the IMultiSelectOption and IMultiSelectTexts interfaces to enable/override settings and text strings:


// Default selection
optionsModel: number[] = [1, 2];

// Settings configuration
mySettings: IMultiSelectSettings = {
    enableSearch: true,
    checkedStyle: 'fontawesome',
    buttonClasses: 'btn btn-default btn-block',
    dynamicTitleMaxItems: 3,
    displayAllSelectedText: true
};

// Text configuration
myTexts: IMultiSelectTexts = {
    checkAll: 'Select all',
    uncheckAll: 'Unselect all',
    checked: 'item selected',
    checkedPlural: 'items selected',
    searchPlaceholder: 'Find',
    defaultTitle: 'Select',
    allSelected: 'All selected',
};

// Labels / Parents
myOptions: IMultiSelectOption[] = [
    { id: 1, name: 'Car brands', isLabel: true },
    { id: 2, name: 'Volvo', parentId: 1 },
    { id: 3, name: 'Honda', parentId: 1 },
    { id: 4, name: 'BMW', parentId: 1 },
    { id: 5, name: 'Colors', isLabel: true },
    { id: 6, name: 'Blue', parentId: 5 },
    { id: 7, name: 'Red', parentId: 5 },
    { id: 8, name: 'White', parentId: 5 }
];

<ss-multiselect-dropdown [options]="myOptions" [texts]="myTexts" [settings]="mySettings" [(ngModel)]="optionsModel"></ss-multiselect-dropdown>

Settings

SettingDescriptionDefault Value
pullRightFloat the dropdown to the rightfalse
enableSearchEnable searching the dropdown itemsfalse
checkedStyleStyle of checked items one of 'checkboxes', 'glyphicon' or 'fontawesome''checkboxes'
buttonClassesCSS classes to apply to the trigger button'btn btn-default'
itemClassesCSS classes to apply to items''
containerClassesCSS classes to apply to container div'dropdown-inline'
selectionLimitMaximum number of items that may be selected (0 = no limit)0
autoUnselectUnselect the previous selection(s) once selectionLimit is reachedfalse
closeOnSelectIf enabled, dropdown will be closed after selectionfalse
showCheckAllDisplay the checkAll item to select all optionsfalse
showUncheckAllDisplay the uncheckAll item to unselect all optionsfalse
fixedTitleUse the default title (do not apply the dynamic title)false
dynamicTitleMaxItemsThe maximum number of options to display in the dynamic title3
maxHeightThe maximum height for the dropdown (including unit)'300px'
displayAllSelectedTextDisplay the allSelected text when all options are selectedfalse

Texts

Text ItemDescriptionDefault Value
checkAllThe text for the "check all" option'Check all'
uncheckAllThe text for the "uncheck all" option'Uncheck all'
checkedText for "checked" with single item selected (used in dynamic title)'checked'
checkedPluralText for "checked" with multiple items selected (used in dynamic title)'checked'
searchPlaceholderText initially displayed in search input'Search...'
defaultTitleTitle displayed in button before selection'Select'
allSelectedText displayed when all items are selected (must be enabled in options)'All selected'

Other examples

Single select

Although this dropdown is designed for multiple selections, a common request is to only allow a single selection without requiring the user to unselect their previous selection each time. This can be accomplished by setting selectionLimit to 1 and autoUnselect to true.

{
  ...
  selectionLimit: 1,
  autoUnselect: true,
  ...
}

Use model driven forms with ReactiveFormsModule:

import { IMultiSelectOption } from 'angular-2-dropdown-multiselect';

export class MyClass implements OnInit {
    model: number[];
    myOptions: IMultiSelectOption[] = [
        { id: 1, name: 'Option 1' },
        { id: 2, name: 'Option 2' },
    ];

    ngOnInit() {
        this.myForm = this.formBuilder.group({
            optionsModel: [1, 2], // Default model
        });

        this.myForm.controls['optionsModel'].valueChanges
            .subscribe((selectedOptions) => {
                // changes
            });
    }
}
<form [formGroup]="myForm">
    <ss-multiselect-dropdown [options]="myOptions" formControlName="optionsModel"></ss-multiselect-dropdown>
</form>

Developing

Pull requests are welcome!

License

[MIT]

Keywords

angular 2

FAQs

Package last updated on 02 May 2017

Did you know?

Socket

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.

Install

Related posts