From d08f9e4c7c8fe3f603d1c0f7f85dfaa6a84a45fb Mon Sep 17 00:00:00 2001
From: Michael Czechowski <mail@dailysh.it>
Date: Sun, 13 May 2018 03:08:50 +0200
Subject: [PATCH] input binding not working well

---
 src/app/app.component.html              |  6 +++++-
 src/app/app.component.ts                |  7 +++++--
 src/app/app.module.ts                   |  4 +++-
 src/app/canvas/canvas.directive.spec.ts |  8 --------
 src/app/canvas/canvas.directive.ts      | 17 +++++++++++------
 5 files changed, 24 insertions(+), 18 deletions(-)
 delete mode 100644 src/app/canvas/canvas.directive.spec.ts

diff --git a/src/app/app.component.html b/src/app/app.component.html
index acbec93..8714b7f 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,9 +1,13 @@
-<div class="canvas" appCanvas (emitConfig)="updateCanvasConfig($event)" [param]="canvasParam"></div>
+<div appCanvas class="canvas"  (emitConfig)="updateCanvasConfig($event)" [param]="canvasParam"></div>
 
 <ul *ngIf="canvasConfig">
   <li><b>Static Configuration</b></li>
   <li><pre>{{canvasConfig | json}}</pre></li>
   <li><b>Changeable Parameters</b></li>
   <li><pre>{{canvasParam | json}}</pre></li>
+
+  <li>
+    <div><input type="number" [(ngModel)]="canvasParam.points"></div>
+  </li>
 </ul>
 
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 12f771b..f9c8aff 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,4 +1,5 @@
-import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 
 import { Param } from './models/param.model';
 import { Config } from './models/config.model';
@@ -11,6 +12,7 @@ import { Config } from './models/config.model';
 export class AppComponent {
   public canvasConfig: Config;
   public canvasParam: Param;
+  public test: number;
 
   constructor() {
     this.canvasParam = {
@@ -18,8 +20,9 @@ export class AppComponent {
         start: '#cc0045',
         end: '#0067cc'
       },
-      points: 5
+      points: 3
     };
+    this.test = 1;
   }
 
   public updateCanvasConfig(config): void {
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 921becd..29bdc93 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,5 +1,6 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 
 import { AppComponent } from './app.component';
 import { CanvasDirective } from './canvas/canvas.directive';
@@ -10,7 +11,8 @@ import { CanvasDirective } from './canvas/canvas.directive';
     CanvasDirective
   ],
   imports: [
-    BrowserModule
+    BrowserModule,
+    FormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
diff --git a/src/app/canvas/canvas.directive.spec.ts b/src/app/canvas/canvas.directive.spec.ts
deleted file mode 100644
index d5fe8a5..0000000
--- a/src/app/canvas/canvas.directive.spec.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { CanvasDirective } from './canvas.directive';
-
-describe('CanvasDirective', () => {
-  it('should create an instance', () => {
-    const directive = new CanvasDirective();
-    expect(directive).toBeTruthy();
-  });
-});
diff --git a/src/app/canvas/canvas.directive.ts b/src/app/canvas/canvas.directive.ts
index f9bd68f..922cd2e 100644
--- a/src/app/canvas/canvas.directive.ts
+++ b/src/app/canvas/canvas.directive.ts
@@ -1,4 +1,4 @@
-import { Directive, ElementRef, Renderer, AfterViewInit, HostListener, Output, EventEmitter, OnInit, Input } from '@angular/core';
+import { ElementRef, HostListener, Output, EventEmitter, OnInit, Input, OnChanges, SimpleChanges, Directive } from '@angular/core';
 import * as Selection from 'd3-selection';
 import * as Shape from 'd3-shape';
 import * as Random from 'd3-random';
@@ -11,7 +11,7 @@ import { Param } from './../models/param.model';
 @Directive({
   selector: '[appCanvas]'
 })
-export class CanvasDirective implements OnInit {
+export class CanvasDirective implements OnInit, OnChanges {
   private canvas: any;
   private defs: any;
   private gradient: any;
@@ -20,9 +20,11 @@ export class CanvasDirective implements OnInit {
   private drag: Point;
   public config: Config;
 
-  @Input() param: Param;
+  @Input()
+  private param: Param;
 
-  @Output() emitConfig: EventEmitter<Config>;
+  @Output()
+  private emitConfig: EventEmitter<Config>;
 
   @HostListener('window:resize', ['$event'])
   private onResize(event) {
@@ -30,13 +32,16 @@ export class CanvasDirective implements OnInit {
   }
 
   constructor(
-    private el: ElementRef,
-    private renderer: Renderer
+    private el: ElementRef
   ) {
     this.canvas = el.nativeElement;
     this.emitConfig = new EventEmitter();
   }
 
+  ngOnChanges(changes: SimpleChanges) {
+    console.log(changes.param);
+  }
+
   ngOnInit() {
     this.init();
   }