fix valueChanged #14

Author: icecoldfire

README.md

@@ -113,5 +113,8 @@ Every single demo is separate component. Bellow you can find links to components
 - default value
 - tags
 
+#### [Demo](https://github.com/tealpartners/ng-select2/tree/master/src/app/demos/value-changed)
+- Demo with value changed output to console log
+
 
 Demo forked from: https://github.com/NejcZdovc/ng2-select2-demo

projects/ng-select2/src/lib/ng-select2.component.ts

@@ -64,7 +64,7 @@ export class NgSelect2Component implements AfterViewInit, OnChanges, OnDestroy,
   @Input() options: Options;
 
   // emitter when value is changed
-  @Output() valueChanged = new EventEmitter();
+  @Output() valueChanged = new EventEmitter<string | string[]>();
 
   private element: any = undefined;
   private check = false;
@@ -104,6 +104,7 @@ export class NgSelect2Component implements AfterViewInit, OnChanges, OnDestroy,
 
       const newValue: string | string[] = this.value;
       this.setElementValue(newValue);
+      this.valueChanged.emit(newValue);
       this.propagateChange(newValue);
     }
 
@@ -112,6 +113,7 @@ export class NgSelect2Component implements AfterViewInit, OnChanges, OnDestroy,
       const newValue: string = changes['value'].currentValue;
 
       this.setElementValue(newValue);
+      this.valueChanged.emit(newValue);
       this.propagateChange(newValue);
     }
 
@@ -148,8 +150,8 @@ export class NgSelect2Component implements AfterViewInit, OnChanges, OnDestroy,
       // const newValue: string = (e.type === 'select2:unselect') ? '' : this.element.val();
       const newValue = this.element.val();
 
+      this.valueChanged.emit(newValue);
       this.propagateChange(newValue);
-      this.setElementValue(newValue);
     });
   }
 
@@ -236,11 +238,10 @@ export class NgSelect2Component implements AfterViewInit, OnChanges, OnDestroy,
     }
   }
 
-  propagateChange = (value: any) => { };
+  propagateChange = (value: string | string[]) => { };
 
   registerOnChange(fn: any) {
     this.propagateChange = fn;
-    this.valueChanged.subscribe(fn);
   }
 
   registerOnTouched() {

src/app/app.component.html

@@ -14,4 +14,6 @@ <h1>ng-select2 demo's</h1>
   <app-multiple></app-multiple>
   <hr>
   <app-custom-array></app-custom-array>
+  <hr>
+  <app-value-changed></app-value-changed>
 </div>

src/app/app.module.ts

@@ -1,17 +1,18 @@
 import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 import { NgSelect2Module } from 'ngSelect2';
 
 import { AppComponent } from './app.component';
 import { BasicComponent } from './demos/basic/basic.component';
-import { OptionsComponent } from './demos/options/options.component';
 import { ChangeComponent } from './demos/change/change.component';
+import { CustomArrayComponent } from './demos/custom-array/custom-array.component';
 import { DynamicComponent } from './demos/dynamic/dynamic.component';
 import { MultipleComponent } from './demos/multiple/multiple.component';
+import { OptionsComponent } from './demos/options/options.component';
 import { TemplateComponent } from './demos/template/template.component';
+import { ValueChangedComponent } from './demos/value-changed/value-changed.component';
 import { DataService } from './services/data.service';
-import { FormsModule } from '@angular/forms';
-import { CustomArrayComponent } from './demos/custom-array/custom-array.component';
 
 
 @NgModule({
@@ -23,7 +24,8 @@ import { CustomArrayComponent } from './demos/custom-array/custom-array.componen
     DynamicComponent,
     TemplateComponent,
     MultipleComponent,
-    CustomArrayComponent
+    CustomArrayComponent,
+    ValueChangedComponent
   ],
   imports: [
     BrowserModule,

src/app/demos/change/change.component.ts

@@ -15,6 +15,7 @@ export class ChangeComponent implements OnInit {
     return this._value;
   }
   set value(value: string) {
+    console.log('set value with ' + value);
     this._value = value;
   }
 

src/app/demos/template/template.component.spec.ts

@@ -0,0 +1,7 @@
+<h2>8. Value changed</h2>
+<ng-select2 [data]="exampleData"
+            [ngModel]="test"
+            (valueChanged)="valueChanged($event)"
+            (ngModelChange)="modelChanged($event)"
+            [width]="300">
+</ng-select2>

src/app/demos/value-changed/value-changed.component.css

@@ -0,0 +1,42 @@
+import { Component, OnInit } from '@angular/core';
+import { Select2OptionData } from 'ngSelect2';
+
+@Component({
+  selector: 'app-value-changed',
+  templateUrl: './value-changed.component.html',
+  styleUrls: ['./value-changed.component.css']
+})
+export class ValueChangedComponent implements OnInit {
+  public test = 'value-changed-1';
+  public exampleData: Array<Select2OptionData>;
+
+  ngOnInit() {
+    this.exampleData = [
+      {
+        id: 'value-changed-1',
+        text: 'Value changed 1'
+      },
+      {
+        id: 'value-changed-2',
+        disabled: true,
+        text: 'Value changed 2'
+      },
+      {
+        id: 'value-changed-3',
+        text: 'Value changed 3'
+      },
+      {
+        id: 'value-changed-4',
+        text: 'Value changed 4'
+      }
+    ];
+  }
+
+  public valueChanged(event: string) {
+    console.log('value changed: ' + event);
+  }
+
+  public modelChanged(event: string) {
+    console.log('model changed: ' + event);
+  }
+}