CheckAll option not working the first time

[prabhurangan]

When i select the checkAll option first time it is not working and gives me the below error & if i select any item and do checkAll it works fine????

EXCEPTION: Error in ./MultiselectDropdown class MultiselectDropdown - inline template:18:8 caused by: Cannot read property 'indexOf' of null ErrorHandler.handleError @ error_handler.js:54 next @ application_ref.js:348 schedulerFn @ async.js:93 SafeSubscriber.tryOrUnsub @ Subscriber.js:234 SafeSubscriber.next @ Subscriber.js:183 Subscriber._next @ Subscriber.js:125 Subscriber.next @ Subscriber.js:89 Subject.next @ Subject.js:55 EventEmitter.emit @ async.js:79 NgZone.triggerError @ ng_zone.js:333 onHandleError @ ng_zone.js:294 ZoneDelegate.handleError @ zone.js:334 Zone.runTask @ zone.js:169 ZoneTask.invoke @ zone.js:416 error_handler.js:56 ORIGINAL EXCEPTION: Cannot read property 'indexOf' of null ErrorHandler.handleError @ error_handler.js:56 next @ application_ref.js:348 schedulerFn @ async.js:93 SafeSubscriber.tryOrUnsub @ Subscriber.js:234 SafeSubscriber.next @ Subscriber.js:183 Subscriber._next @ Subscriber.js:125 Subscriber.next @ Subscriber.js:89 Subject.next @ Subject.js:55 EventEmitter.emit @ async.js:79 NgZone.triggerError @ ng_zone.js:333 onHandleError @ ng_zone.js:294 ZoneDelegate.handleError @ zone.js:334 Zone.runTask @ zone.js:169 ZoneTask.invoke @ zone.js:416 error_handler.js:59 ORIGINAL STACKTRACE: ErrorHandler.handleError @ error_handler.js:59 next @ application_ref.js:348 schedulerFn @ async.js:93 SafeSubscriber.tryOrUnsub @ Subscriber.js:234 SafeSubscriber.next @ Subscriber.js:183 Subscriber._next @ Subscriber.js:125 Subscriber.next @ Subscriber.js:89 Subject.next @ Subject.js:55 EventEmitter.emit @ async.js:79 NgZone.triggerError @ ng_zone.js:333 onHandleError @ ng_zone.js:294 ZoneDelegate.handleError @ zone.js:334 Zone.runTask @ zone.js:169 ZoneTask.invoke @ zone.js:416 error_handler.js:60 TypeError: Cannot read property 'indexOf' of null at http://localhost:4200/vendor.bundle.js:126314:28 at Array.map (native) at MultiselectDropdown.checkAll (http://localhost:4200/vendor.bundle.js:126313:14) at View_MultiselectDropdown5.handleEvent_2 (/MultiselectDropdownModule/MultiselectDropdown/component.ngfactory.js:258:56) at View_MultiselectDropdown5. (http://localhost:4200/vendor.bundle.js:102311:37) at HTMLAnchorElement. (http://localhost:4200/vendor.bundle.js:51586:53) at ZoneDelegate.invokeTask (http://localhost:4200/polyfills.bundle.js:6590:31) at Object.onInvokeTask (http://localhost:4200/vendor.bundle.js:35808:37) at ZoneDelegate.invokeTask (http://localhost:4200/polyfills.bundle.js:6589:36) at Zone.runTask (http://localhost:4200/polyfills.bundle.js:6393:47) at HTMLAnchorElement.ZoneTask.invoke (http://localhost:4200/polyfills.bundle.js:6643:38) ErrorHandler.handleError @ error_handler.js:60 next @ application_ref.js:348 schedulerFn @ async.js:93 SafeSubscriber.tryOrUnsub @ Subscriber.js:234 SafeSubscriber.next @ Subscriber.js:183 Subscriber._next @ Subscriber.js:125 Subscriber.next @ Subscriber.js:89 Subject.next @ Subject.js:55 EventEmitter.emit @ async.js:79 NgZone.triggerError @ ng_zone.js:333 onHandleError @ ng_zone.js:294 ZoneDelegate.handleError @ zone.js:334 Zone.runTask @ zone.js:169 ZoneTask.invoke @ zone.js:416 error_handler.js:63 ERROR CONTEXT: ErrorHandler.handleError @ error_handler.js:63 next @ application_ref.js:348 schedulerFn @ async.js:93 SafeSubscriber.tryOrUnsub @ Subscriber.js:234 SafeSubscriber.next @ Subscriber.js:183 Subscriber._next @ Subscriber.js:125 Subscriber.next @ Subscriber.js:89 Subject.next @ Subject.js:55 EventEmitter.emit @ async.js:79 NgZone.triggerError @ ng_zone.js:333 onHandleError @ ng_zone.js:294 ZoneDelegate.handleError @ zone.js:334 Zone.runTask @ zone.js:169 ZoneTask.invoke @ zone.js:416 error_handler.js:64 DebugContext {_view: View_MultiselectDropdown5, _nodeIndex: 2, _tplRow: 18, _tplCol: 8} ErrorHandler.handleError @ error_handler.js:64 next @ application_ref.js:348 schedulerFn @ async.js:93 SafeSubscriber.tryOrUnsub @ Subscriber.js:234 SafeSubscriber.next @ Subscriber.js:183 Subscriber._next @ Subscriber.js:125 Subscriber.next @ Subscriber.js:89 Subject.next @ Subject.js:55 EventEmitter.emit @ async.js:79 NgZone.triggerError @ ng_zone.js:333 onHandleError @ ng_zone.js:294 ZoneDelegate.handleError @ zone.js:334 Zone.runTask @ zone.js:169 ZoneTask.invoke @ zone.js:416 Subscriber.js:238 Uncaught ViewWrappedError {zone_symbol__error: Error: Error in ./MultiselectDropdown class MultiselectDropdown - inline template:18:8 caused by: Ca…, _nativeError: ZoneAwareError, originalError: TypeError: Cannot read property 'indexOf' of null at http://localhost:4200/vendor.bundle.js:1263…, context: DebugContext, zone_symbolstack: "Error: Error in ./MultiselectDropdown class Multis…ttp://localhost:4200/polyfills.bundle.js:6643:38)"…} SafeSubscriber.tryOrUnsub @ Subscriber.js:238 SafeSubscriber.next @ Subscriber.js:183 Subscriber._next @ Subscriber.js:125 Subscriber.next @ Subscriber.js:89 Subject.next @ Subject.js:55 EventEmitter.emit @ async.js:79 NgZone.triggerError @ ng_zone.js:333 onHandleError @ ng_zone.js:294 ZoneDelegate.handleError @ zone.js:334 Zone.runTask @ zone.js:169 ZoneTask.invoke @ zone.js:416

[jakubnavratil]

Problem is here: https://github.com/softsimon/angular-2-dropdown-multiselect/blob/master/src/multiselect-dropdown.ts#L321 this.model is undefined with first checkAll Maybe author will fix it?

[softsimon]

I will look into it tonight.

[jakubnavratil]

Thank you, if possible, can you add support for fontawesome for checkAll/uncheckAll? Thats quickie :)

[prabhurangan]

Let me know when you push this changes to github will take the latest and keep working on it... thank you

[softsimon]

Actually I cannot reproduce this bug. this.model should be defined in that stage. It will only happen if I manually bind a NULL variable to [(ngModel)]="myModel"?

myModel should be an empty array (type: number[]) if you want to start empty.

[jakubnavratil]

You propably right, in my code im not using [(ngModel)] ... which may be desired in some cases. To fix this,i thing its enough to init variable in definition: public model: number[] = [];

[softsimon]

@trubit Are there any use cases for supporting null ngModel? Isn't the component being useless then? :)

[jakubnavratil]

Propably not, I just needed working UI and found this :) Next time I use ngModel

[justicewebtech]

If you are using formBuilder use the following syntax

formBuilder.group({ 'mySelect': [[]] })

That will initialize an empty array for you.

[softsimon]

A fix is now commited to the component.