softsimon / ngx-bootstrap-multiselect Goto Github PK

I'm using SystemJS as module loader and configured it as following:

(function (global) {
  System.config({
    paths: {
      'npm:': "node_modules/"
    },
    map: {
      // ...
      'angular-2-dropdown-multiselect': "npm:angular-2-dropdown-multiselect/src/multiselect-dropdown.js",
    ...

After 0.3.4 release, an html template was extracted into a separate file and that broke my setup. Now I'm getting a nasty error:

Unhandled Promise rejection: Failed to load multiselect-dropdown.html ;
Zone: <root> ; 
Task: Promise.then ; 
Value: Failed to load multiselect-dropdown.html

I tried to fix it with another line in map section of SystemJS config:

'multiselect-dropdown.html': "npm:angular-2-dropdown-multiselect/src/multiselect-dropdown.html"

but it didn't help.

Could you, please, suggest a solution or guide me to a more appropriate way of including your library?

I am unable to import MultiselectDropdownModule in ngModule.
I install it in npm through this
npm install angular2-dropdown-multiselect --save-dev
and unable to import using this
import {MultiselectDropdownModule} from "angular-2-dropdown-multiselect"; or
import {MultiselectDropdownModule} from "angular-2-dropdown-multiselect/multiselect-dropdown";
I am using angular 2.0.0

Even though repository contains up-to-date package.json file, in npm repository the file is outdated. There package requires [email protected] and cause npm to complain:
"UNMET PEER DEPENDENCY [email protected]"

Please, update the package in order to bump up version of RXJS dependency.
https://unpkg.com/angular-2-dropdown-multiselect/package.json

Dropdown menu is not closed on IE after clicking outside.
Even the demo link is not working on IE (http://softsimon.github.io/angular-2-dropdown-multiselect/)
Observed some error as below

Error: Object doesn't support property or method 'keys'
Error loading http://softsimon.github.io/angular-2-dropdown-multiselect/src/main.ts
   {
      [functions]: ,
      __proto__: { },
      description: "undefined",
      message: "Object doesn't support property or method 'keys'
	Error loading http://softsimon.github.io/angular-2-dropdown-multiselect/src/main.ts",
      name: "Error",
      number: NaN,
      stack: "TypeError: Object doesn't support property or method 'keys'
   at Anonymous function (https://code.angularjs.org/2.0.0-beta.15/angular2.dev.js:842:5)
   at Anonymous function (https://code.angularjs.org/2.0.0-beta.15/angular2.dev.js:841:3)
   at i (https://code.angularjs.org/tools/system.js:4:31560)
   at s (https://code.angularjs.org/tools/system.js:4:31192)
   at Anonymous function (https://code.angularjs.org/tools/system.js:4:31647)
   at Anonymous function (https://code.angularjs.org/2.0.0-beta.15/angular2.dev.js:11361:3)
   at i (https://code.angularjs.org/tools/system.js:4:31560)
   at s (https://code.angularjs.org/tools/system.js:4:31192)
   at Anonymous function (https://code.angularjs.org/tools/system.js:4:31647)
   at Anonymous function (https://code.angularjs.org/2.0.0-beta.15/angular2.dev.js:12594:3)"
   }

now it is: model: number[];

it could be : model: Array;

in case of no binding [(ngModel)] the setSelected method works with undefined property...

Option for customization 'CheckAll' and 'UncheckAll' is missing:

1. There is no possibility to change type of selected icon - 'checkboxes' | 'glyphicon'. This part is missing in template.
2. There is no possibility to change displayed text when all items are selected.

Is there an easy way to emulate just being able to select one option at a time? I have set the selectionLimit:1, and closeOnSelect: true, which works, but when selecting a different option, it forces you to first deselect whichever one is currently selected before you can select a new option.

Can I get around this so that clicking on a new (unselected) option automatically deselects other selected options in a single click (ie. standard single selection behaviour)?

Please disregard this question as there is one (but it has been closed)

In html, the <option value="id">text</option>, the ID is text, but the IMultiSelectOption enforces a numeric id. This would require me to basically make another mapping from those options to values, since I need string values for my options.

Please add support for Keyboard shortcuts to improve user experience when filling forms.

For example lets take an example of a form with three inputs where 2nd input is angular-2-dropdown-multiselect.

When user press Tab key while focus is on angular-2-dropdown-multiselect, the focus should be set on the next input i.e. 3rd form field in this case.

Pressing Shift + Tab key from angular-2-dropdown-multiselect should set focus on previous input i.e. angular-2-dropdown-multiselect i.e. 1st form field in this case.

When the angular-2-dropdown-multiselect is open, allow scrolling of options through Up and Down arrow keys. Pressing Spacebar should check the focused option. Pressing Enter Key cloud select the option and close the Dropdown.

When the angular-2-dropdown-multiselect is open, pressing Esc Key should close the Select list, while keeping focus on the Select list (so that when the user press Enter key it should open the select list again).

When the angular-2-dropdown-multiselect is Open, pressing Tab or Shift + Tab key should close the select list and focus should be switched to the next input of the form (or previous input in case of Shift + Tab).

When filters are enabled opening the angular-2-dropdown-multiselect should set focus on the search field. Pressing Tab key on Search field, should set focus on options list (where user can use Up/Down arrow keys to navigate between options), whereas Esc Key should clear the the search text so that user can enter new search term. When the search field is empty pressing Esc key could close the select list.

Tried to follow instructions but not able to get it to work. Took angular quick start project and added the dependency as npm package but when the import statement gives TypeScript error saying can't find module.

Please can you fix the way your npm packaging is setup and include the JS and D files. As of right now GULP fails to bundle the package. Thanks, SK

Does this have support for optgroups?

Hi @softsimon,

I'm expecting to need this plugin for a work project. Consequently, I want to make sure I can help keep this up-to-date and functioning optimally.

What would work best for you if I wanted to be a regular contributor to this project?

I've have tried to update this code to the best of my ability, but have run into a slight problem as I don't know Angular 2 very well. I have been looking up the problem trying to diagnosis it and found that I'm not the only one with this problem: http://stackoverflow.com/questions/38811532/cant-bind-to-ngformcontrol-since-it-isnt-a-known-native-property Just wondering if your plan is to do maintenance on it. I guess it's the forms.

When I pre-fill [(ngModel)] for example like this constructor () {this.selectedOptions = [1,2];},
I am getting this error - Cannot read property 'filter' of undefined, screenshoot - http://joxi.ru/vAWexn5sZbQxmW
Here is how my template and class are looking like this:

// I tried public
private selectedOptions:number[];
  constructor () {
    this.selectedOptions = [1,2];
  }

 <ss-multiselect-dropdown [options]="clients" [settings]="{enableSearch: true}"
                                             [(ngModel)]="selectedOptions"
                                             [ngModelOptions]="{standalone: true}"
                                             (ngModelChange)="onChangeClient($event)">
</ss-multiselect-dropdown>

I would be grateful if you help me .

Pls can we have a new release with latest fixes in them. Thanks,

There seems to be an issue when using a Model approach to Forms rather than using the Template based approach.

I'm using it like so in Angular2 RC6 using angular-cli:

<ss-multiselect-dropdown [options]="myOptions" [formControl]="form.controls['myControl']" (change)="onChange($event)"></ss-multiselect-dropdown>

And its giving me the following error:

EXCEPTION: Error in http://localhost:4200/app/features/some/some.template.html:122:57 caused by: Error trying to diff ''
ORIGINAL EXCEPTION: Error trying to diff ''
ORIGINAL STACKTRACE:
Error: Error trying to diff ''
    at DefaultIterableDiffer.diff (core.umd.js:6396)
    at MultiselectDropdown.ngDoCheck (multiselect-dropdown.ts:176)
    at DebugAppView._View_SomeComponent0.detectChangesInternal (SomeComponent.ngfactory.js:2200)
    at DebugAppView.AppView.detectChanges (core.umd.js:12061)
    at DebugAppView.detectChanges (core.umd.js:12166)
    at DebugAppView.AppView.detectViewChildrenChanges (core.umd.js:12087)
    at DebugAppView._View_SomeComponent_Host0.detectChangesInternal (SomeComponent_Host.ngfactory.js:31)
    at DebugAppView.AppView.detectChanges (core.umd.js:12061)
    at DebugAppView.detectChanges (core.umd.js:12166)
    at DebugAppView.AppView.detectContentChildrenChanges (core.umd.js:12079)
ERROR CONTEXT:
DebugContext {_view: _View_SomeComponent0, _nodeIndex: 178, _tplRow: 122, _tplCol: 57}
Uncaught Error: Error in http://localhost:4200/app/features/some/some.template.html:122:57 caused by: Error trying to diff ''

Any help would be greatly appreciated

is there any solution for updating dynamicTitle in parent component same like updateNumSelected ? i'm getting titles only after checking checkbox and i cannot find way to update it before action, im getting only sum of checked checkboxes.

if you set selectionLimit to 1 and checkedStyle to 'checkboxes' you still can select multiple checkboxes even though the model gets only one value assigned. It's probably not what one want. I got around this by adding another option to the checkedStyle entry:

checkedStyle?: 'checkboxes' | 'glyphicon' | 'radio';

and in the template

                    <input *ngIf="settings.checkedStyle == 'radio'" name="radioitem" type="radio" [checked]="isSelected(option)" />

and in setSelected

        if (this.settings.checkedStyle == 'radio') {
            this.model = [option.id];
        }

what changes should i need such that it emits entire object that i have selected and is there is no property to pre select an option by default?

I am currently using JSPM w/ angular 2.4.4

Getting this error during runtime.

Error: Module http://localhost:3000/jspm_packages/npm/[email protected]/src/multiselect-dropdown.js interpreted as cjs module format, but called System.register

package.json

{
  "name": "ng2-seed",
  "version": "0.0.1",
  "scripts": {
    "clean": "gulp clean",
    "compile-prod": "gulp compile --env prod",
    "compile-dev": "gulp compile --env dev",
    "compile-aot": "gulp compile:aot --env aot",
    "serve-fe": "gulp"
  },
  "jspm": {
    "dependencies": {
      "@angular/common": "npm:@angular/common@~2.4.3",
      "@angular/compiler": "npm:@angular/compiler@~2.4.3",
      "@angular/core": "npm:@angular/core@~2.4.3",
      "@angular/forms": "npm:@angular/forms@~2.4.3",
      "@angular/http": "npm:@angular/http@~2.4.3",
      "@angular/platform-browser": "npm:@angular/platform-browser@~2.4.3",
      "@angular/platform-browser-dynamic": "npm:@angular/platform-browser-dynamic@~2.4.3",
      "@angular/router": "npm:@angular/router@~3.4.0",
      "angular-2-dropdown-multiselect": "npm:angular-2-dropdown-multiselect@^0.4.0",
      "angular2-datatable": "npm:angular2-datatable@^0.5.2",
      "highcharts": "npm:[email protected]",
      "jquery": "npm:jquery@^3.1.1",
      "moment": "npm:moment@^2.13.0",
      "ng2-bootstrap": "npm:ng2-bootstrap@^1.2.6",
      "ng2-dropdown-multiselect": "npm:ng2-dropdown-multiselect@^1.1.1",
      "ng2-highcharts": "npm:ng2-highcharts@^0.6.5",
      "raphael": "npm:raphael@^2.2.7",
      "reflect-metadata": "npm:reflect-metadata@^0.1.9",
      "rxjs": "npm:rxjs@^5.0.2",
      "treant-js": "npm:treant-js@^1.0.1",
      "underscore": "npm:underscore@^1.8.3",
      "zone.js": "npm:zone.js@^0.7.4"
    },
    "devDependencies": {
      "babel": "npm:babel-core@^5.8.24",
      "babel-runtime": "npm:babel-runtime@^5.8.24",
      "core-js": "npm:core-js@^1.1.4",
      "typescript": "npm:typescript@~2.0.10"
    }
  },
  "dependencies": {
    "@angular/common": "~2.4.3",
    "@angular/compiler": "~2.4.3",
    "@angular/compiler-cli": "~2.4.3",
    "@angular/core": "~2.4.3",
    "@angular/forms": "~2.4.3",
    "@angular/http": "~2.4.3",
    "@angular/platform-browser": "~2.4.3",
    "@angular/platform-browser-dynamic": "~2.4.3",
    "@angular/platform-server": "~2.4.3",
    "@angular/router": "~3.4.0",
    "connect-history-api-fallback": "^1.3.0",
    "core-js": "^2.4.1",
    "jspm": "^0.16.48",
    "reflect-metadata": "^0.1.9",
    "rxjs": "^5.0.2",
    "systemjs": "^0.19.41",
    "zone.js": "^0.7.4"
  },
  "devDependencies": {
    "@types/jasmine": "^2.5.36",
    "@types/jquery": "^2.0.38",
    "@types/node": "^6.0.56",
    "angular-2-dropdown-multiselect": "^0.4.0",
    "angular2-datatable": "^0.5.2",
    "autoprefixer": "^6.6.0",
    "browser-sync": "^2.18.5",
    "canonical-path": "0.0.2",
    "concurrently": "^3.1.0",
    "del": "^2.2.2",
    "gulp": "^3.9.1",
    "gulp-clean-css": "^2.3.2",
    "gulp-env": "^0.4.0",
    "gulp-html-replace": "^1.6.2",
    "gulp-inline-ng2-template": "^4.0.0",
    "gulp-jshint": "^2.0.4",
    "gulp-postcss": "^6.2.0",
    "gulp-preprocess": "^2.0.0",
    "gulp-rename": "^1.2.2",
    "gulp-replace": "^0.5.4",
    "gulp-rev": "^7.1.2",
    "gulp-rev-collector": "^1.1.1",
    "gulp-sass": "^3.0.0",
    "gulp-size": "^2.1.0",
    "gulp-sourcemaps": "^1.9.1",
    "gulp-tslint": "^7.0.1",
    "gulp-typescript": "^3.1.3",
    "highcharts": "^5.0.6",
    "http-server": "^0.9.0",
    "jquery": "^3.1.1",
    "jshint": "^2.9.4",
    "lite-server": "^2.2.2",
    "lodash": "^4.16.4",
    "moment": "^2.13.0",
    "ng2-bootstrap": "^1.2.6",
    "ng2-highcharts": "^0.6.5",
    "path": "^0.12.7",
    "raphael": "^2.2.7",
    "require-dir": "^0.3.1",
    "rollup": "^0.40.0",
    "rollup-plugin-commonjs": "^7.0.0",
    "rollup-plugin-node-resolve": "^2.0.0",
    "rollup-plugin-uglify": "^1.0.1",
    "run-sequence": "^1.2.2",
    "treant-js": "^1.0.1",
    "tslint": "^4.1.0",
    "typescript": "~2.0.10",
    "yargs": "^6.5.0"
  }
}

Any help would be great!

First of all, thanks for the module!

It would be nice to have onAdded and onRemoved events that fires the id of an element when it is selected or unselected .

Right now I maintain an extra copy of the list of selected id's to compare a new list of id's against each time an element is added/removed to find out which element has been added or removed. This is a bit of a nuisance.

Getting an exception error:

Uncaught (in promise): Template parse errors:
Can't bind to 'ngFormControl' since it isn't a known native property ("" class="form-control" placeholder="{{ texts.searchPlaceholder }}" aria-describedby="sizing-addon3" [ERROR ->][ngFormControl]="search">
<span class="input-group-btn" *ngIf="searchFilterTe"): MultiselectDropdown@7:141

Switched libraries to use @angular/core and @angular/common but I don't think that would be the issue.

enchancment request:
I am using bootstrap 4, and only checkbox are working + it does not look good

hi @softsimon
Is there any material design support for this component.

the title is pretty much self-explanatory - I would look into this but I unfortunately don't have the time at the moment and this isn't a big deal for me.

When the page is displayed and that nothing is selected, the default title is not displayed because no changes are detected :

ngDoCheck() {
    let changes = this.differ.diff(this.model);
    if (changes) {
        this.updateNumSelected();
        this.updateTitle();
    }
}

Hi,

Just wondering if there is a way to overwrite the default styling. Specifically the .dropdown-menu class ?

Thanks
Tam

Can you post a project where you list this component as a dependency and use it in the project? I followed the instructions and it seems like a lot of stuff is missing to allow npm etc to index things right. I can't use the module without specifying the full relative path to your ts file. Once I do get it running I get a lot of errors. A example project that uses your component would be awesome!

Hi,

I am using this package in my project. But i am finding an error 'Can't bind to 'ngModel' since it isn't a known property of 'ss-multiselect-dropdown'.

Process which i have done is:
1.app.module->

import {MultiselectDropdownModule} from 'angular-2-dropdown-multiselect/src/multiselect-dropdown';
@NgModule({
imports: [ BrowserModule, AppRoutingModule, ChartModule, DatepickerModule,MultiSelectModule,MultiselectDropdownModule ],
...//
})

2. Systemjs.config

(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
'angular-2-dropdown-multiselect/src/multiselect-dropdown':'npm:angular-2-dropdown-multiselect/src/multiselect-dropdown'
},
packages: {
// add packages here
'angular-2-dropdown-multiselect/src/multiselect-dropdown':{
main:'../multiselect-dropdown',
defaultExtension:'js'
}
}
});
})(this);

3. header.component

import { Component,Input } from '@angular/core';
import {IMultiSelectOption} from 'angular-2-dropdown-multiselect/src/multiselect-dropdown';

@component({
moduleId: module.id,
selector: 'header',
templateUrl: 'header.component.html'
})
export class HeaderComponent{

private selectedOptions: number[];
private myOptions: IMultiSelectOption[] = [
{ id: 1, name: 'Option 1' },
{ id: 2, name: 'Option 2' },
];
constructor(private contextService: ContextService){
};
}

4. header(html):

Version Details:

ubuntu 14.04

[email protected] extraneous

node.js v7.3.0

npm 3.10.10

Can you please provide any demo example of this package implementation ?

So, I have got this piece fitting and working exactly as expected in my project with code below.

I also want to perform a validation to check if atleast one option is selected from the dropdown.

Using template driven form, I got the validation also working by adding 'required' attribute and reference variable (#market) binding to ngModel .

//pixel.component.ts

  /* Multi Select Dropdown settings*/
  private multiSelectDropDownSettings: IMultiSelectSettings = {
    pullRight: true,
    enableSearch: false,
    showCheckAll: true,
    showUncheckAll: true,
    dynamicTitleMaxItems: 1
  };

  private multiSelectDropDownTexts: IMultiSelectTexts = {
    checkAll: 'Check all',
    uncheckAll: 'Clear',
    checked: 'checked',
    checkedPlural: 'checked',
    searchPlaceholder: 'Search..',
    defaultTitle: 'Select',
  };

  /* Options for dropdown */
  markets: Market[] = [
    {id: 1, name: "Denmark"},
    {id: 2, name: "France"},
    {id: 3, name: "Germany"},
    {id: 4, name: "Greece"}
  ];

//pixel.component.html
<form #pixelform="ngForm" novalidate (ngSubmit)="showParameters(pixelform, pixelform.valid)">
	<div class="form-group">
		<label for="name">Pixel Name</label>
		<input type="text" class="form-control" required id="name" name="name" #name="ngModel" [(ngModel)]="pixel.name">
		<small [hidden]="name.valid || (name.pristine && !pixelform.submitted)" class="text-danger">
			Name is required.
		</small>
	</div>
	<div class="form-group">
		<label for="market">Market</label>
		<ss-multiselect-dropdown  id="market" required name="market" [settings]="multiSelectDropDownSettings" [texts]="multiSelectDropDownTexts" [options]="markets" #market="ngModel" [(ngModel)]="pixel.market"></ss-multiselect-dropdown>
		<small [hidden]="market.valid || (market.pristine && !pixelform.submitted)" class="text-danger">
			Market must be selected.
		</small>
	</div>
	<button type="submit" class="btn btn-primary pull-right" [disabled]="!pixelform.form.valid">Submit</button>
</form>

But when I uncheck all the selections, angular doesn't update the 'ng-touched ng-dirty ng-valid' classes on <ss-multiselect-dropdown> and Submit button is not disabled.

Can you please check what's missing in my code or if the approach is wrong ?

I am using Angular CLI, when I try to build app with command "ng build --prod --aot", it started throwing error.

ERROR in Error encountered resolving symbol values statically. Calling function 'makeDecorator',
function calls are not supported. Consider replacing the function or lambda with a reference to a
n exported function, resolving symbol Injectable in /home/spaneos/Videos/ng2aot/node_modules/angu
lar-2-dropdown-multiselect/node_modules/@angular/core/src/di/metadata.d.ts, resolving symbol Opaq
ueToken in /home/spaneos/Videos/ng2aot/node_modules/angular-2-dropdown-multiselect/node_modules/@
angular/core/src/di/opaque_token.d.ts, resolving symbol OpaqueToken in /home/spaneos/Videos/ng2ao
t/node_modules/angular-2-dropdown-multiselect/node_modules/@angular/core/src/di/opaque_token.d.ts

ERROR in ./src/main.ts
Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in '/home/spaneos/V
ideos/ng2aot/src'
@ ./src/main.ts 4:0-74
@ multi main

Please help me on this. We are going to production in next week.

Hi,

My select settings:

    private brandSelectSettings: IMultiSelectSettings = {
    pullRight: false,
    enableSearch: true,
    checkedStyle: 'checkboxes',
    buttonClasses: 'btn btn-info',
    selectionLimit: 0,
    closeOnSelect: false,
    showCheckAll: false,
    showUncheckAll: true,
    dynamicTitleMaxItems: 1,
    maxHeight: '300px',
    };

And i set them on select like this:

<ss-multiselect-dropdown [options]="brands" [(ngModel)]="model.selectedBrands" [options]="brandSelectSettings" [texts]="multiSelectTexts" (ngModelChange)="onBrandSelect($event)" [hidden] = "brandSelectionHidden"> </ss-multiselect-dropdown>

As you can see on my settings, dynamicTitleMaxItems is set to 1. It's still working like it's been set to 4.

Seems like there are no packages for this component. Are they available? Or I can try to add it.

Hi, could you confirm it's compatible with Angular2 final version and New module implementation from RC7 with NgModule ?

I attached bootstrap.css in index.html but now all the css of other components are being changed .

Any workaround?

Hello,
So I've got this defined, since I want only one selection of an element. If one is already selected and another one is chosen I'd like to change it to that one but seems I can't. Therefore I want to show the check icon for feedback for the user. But it seems it doesn't work.

Below is how I detailed it. Please let me know if I'm missing something or it actually doesn't work.

private myOptions: IMultiSelectOption[] = [
    { id: 1, name: 'C++' },
    { id: 2, name: 'Java' },
];

private mySettings: IMultiSelectSettings = {

    selectionLimit: 1,
    closeOnSelect: true,
    checkedStyle: 'checkboxes'
}
private myTexts: IMultiSelectTexts = {
    checked: 'checked',
    defaultTitle: 'Programming Languages'
};

onChange($event){
    alert($event);
}

called as:
<ss-multiselect-dropdown [options]="myOptions" [settings]="mySettings" [texts]="myTexts" [(ngModel)]="selectedOptions" (ngModelChange)="onChange($event)"></ss-multiselect-dropdown>

Hi,
How do I populate the options from a JSON file?

Thanks.

Hi,

It would be nice when its single select and you can toggle between each item without having to click on it first to uncheck it.

after following the Usage given in GiT i am Getting 404 Error like below not sure what i missed.

I see "Uncaught ReferenceError: System is not defined"

I am using "bootstrap 4.0.0-alpha.5" for my project. Please suggest if that worked for you.

Is there any chance I'm missing something? I would like to call a function after finishing selecting all that I want and the dropdown closes or hides. Does this exist?

Thanks!

It would really be great if the selectedOption / event returned full option array of objects instead of only array of ids i.e [{id: 2, name: "hello"}]

Is there a way to add 1 line selection without checkbox? (I wish to use your project for my entire web)
I tried to overcome by limit the selection to "1"
but there is a bug, you can select more than 1, and it will not select the your new selection and remove old selection

Line 146: this.settings = Object.assign(this.defaultSettings, this.settings);
Line 147: this.texts = Object.assign(this.defaultTexts, this.texts);

I added these lines to fix it on my end.
//Reference: microsoft/TypeScript#3889
interface ObjectCtor extends ObjectConstructor {
assign(target: any, ...sources: any[]): any;
}
declare var Object: ObjectCtor;

Typescript Version: 1.0.3.0
Not sure if the latest typescript would've fixed my issue :)