input binding not working well

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>
 

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 {

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]

src/app/canvas/canvas.directive.spec.ts

@@ -1,8 +0,0 @@
-import { CanvasDirective } from './canvas.directive';
-
-describe('CanvasDirective', () => {
-  it('should create an instance', () => {
-    const directive = new CanvasDirective();
-    expect(directive).toBeTruthy();
-  });
-});

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();
   }