self.context.onChange is not a function

[pep2]

I have created a new angular project using angular client - https://github.com/angular/angular-cli#installation Have linked to bootstrap cdn - https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.cs

Have added the relevant code to app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';

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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    MultiselectDropdownModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Then have added the code to the app.component.ts file

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';

  private selectedOptions: number[];
  private myOptions: IMultiSelectOption[] = [
    { id: 1, name: 'Option 1' },
    { id: 2, name: 'Option 2' },
  ];

}

Then in the app.component.html

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

Then I receive the below error:

EXCEPTION: Error in ./AppComponent class AppComponent - inline template:4:0 caused by: self.context.onChange is not a function ORIGINAL EXCEPTION: self.context.onChange is not a function ORIGINAL STACKTRACE: TypeError: self.context.onChange is not a function at CompiledTemplate.proxyViewClass.View_AppComponent0.handleEvent_3 (component.ngfactory.js:100) at CompiledTemplate.proxyViewClass. (view.js:664) at SafeSubscriber.schedulerFn [as _next] (async.js:105) at SafeSubscriber.tryOrUnsub (Subscriber.js:223) at SafeSubscriber.next (Subscriber.js:172) at Subscriber._next (Subscriber.js:125) at Subscriber.next (Subscriber.js:89) at EventEmitter.Subject.next (Subject.js:55) at EventEmitter.emit (async.js:79) at NgModel.viewToModelUpdate (ng_model.js:195) at MultiselectDropdown.onModelChange (shared.js:41) at MultiselectDropdown.setSelected (multiselect-dropdown.ts:204) at View_MultiselectDropdown8.handleEvent_0 (component.ngfactory.js:601) at View_MultiselectDropdown8. (view.js:664) at HTMLLIElement. (dom_renderer.js:490) ERROR CONTEXT: DebugContext {_view: C…e.proxyViewClass, _nodeIndex: 3, _tplRow: 4, _tplCol: 0} Uncaught ViewWrappedError {zone_symbolerror: Error: Error in ./AppComponent class AppComponent - inline template:4:0 caused by: self.context.onCh…, _nativeError: ZoneAwareError, originalError: TypeError: self.context.onChange is not a function at CompiledTemplate.proxyViewClass.View_AppCo…, context: DebugContext, zone_symbol__stack: "Error: Error in ./AppComponent class AppComponent …(http://localhost:4200/vendor.bundle.js:10242:13)"…}

[softsimon]

You need to implement the method onChange in your class or remove (ngModelChange)="onChange($event)" from your HTML-template.

[pep2]

Thank you very much! It works! As you prob guessed from that I am new to Angular!