diff --git a/README.md b/README.md
index 957e123..517b93a 100644
--- a/README.md
+++ b/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
diff --git a/projects/ng-select2/package.json b/projects/ng-select2/package.json
index 36503ce..b270b24 100644
--- a/projects/ng-select2/package.json
+++ b/projects/ng-select2/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ng-select2",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "Angular 8 wrapper component of jQuery select2.",
   "repository": {
     "type": "git",
@@ -28,4 +28,4 @@
     "@types/select2": "^4.0.x",
     "select2": "^4.0.x"
   }
-}
+}
\ No newline at end of file
diff --git a/projects/ng-select2/src/lib/ng-select2.component.ts b/projects/ng-select2/src/lib/ng-select2.component.ts
index 1c8f011..af6127b 100644
--- a/projects/ng-select2/src/lib/ng-select2.component.ts
+++ b/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() {
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 345f45a..2ae0dfb 100644
--- a/src/app/app.component.html
+++ b/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>
\ No newline at end of file
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 96899d2..de0202f 100644
--- a/src/app/app.module.ts
+++ b/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,
diff --git a/src/app/demos/change/change.component.ts b/src/app/demos/change/change.component.ts
index 6b886f1..19bcfbb 100644
--- a/src/app/demos/change/change.component.ts
+++ b/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;
   }
 
diff --git a/src/app/demos/template/template.component.spec.ts b/src/app/demos/template/template.component.spec.ts
deleted file mode 100644
index 3c4ffa0..0000000
--- a/src/app/demos/template/template.component.spec.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-/* tslint:disable:no-unused-variable */
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { DebugElement } from '@angular/core';
-
-import { TemplateComponent } from './template.component';
-
-describe('TemplateComponent', () => {
-  let component: TemplateComponent;
-  let fixture: ComponentFixture<TemplateComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ TemplateComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(TemplateComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/src/app/demos/value-changed/value-changed.component.css b/src/app/demos/value-changed/value-changed.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/demos/value-changed/value-changed.component.html b/src/app/demos/value-changed/value-changed.component.html
new file mode 100644
index 0000000..4a4fee1
--- /dev/null
+++ b/src/app/demos/value-changed/value-changed.component.html
@@ -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>
\ No newline at end of file
diff --git a/src/app/demos/value-changed/value-changed.component.ts b/src/app/demos/value-changed/value-changed.component.ts
new file mode 100644
index 0000000..c11e167
--- /dev/null
+++ b/src/app/demos/value-changed/value-changed.component.ts
@@ -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);
+  }
+}