Bindings seem to be working now.

src/app/app.component.html

@@ -9,7 +9,7 @@
   <li>
     <label>
       <div>Amount of points</div>
-      <input type="number" [(ngModel)]="canvasParam.points" max="10" min="0" step="1">
+      <input type="number" name="canvasParam.points" [(ngModel)]="canvasParam.points" max="10" min="0" step="1">
     </label>
   </li>
   <li>

src/app/app.component.scss

@@ -5,6 +5,7 @@
   top: 0;
   left: 0;
   overflow: hidden;
+  background: rgb(55,55,55)
 }
 
 ul {
@@ -19,10 +20,11 @@ ul {
   margin: 0;
   padding: 3rem;
   background: rgba(0,0,0,0.3);
-  opacity: 0.3;
+  // opacity: 0.3;
   transition: all 360ms 120ms ease-out;
   cursor: pointer;
   list-style-type: none;
+  color:white;
 
   &:hover {
     opacity: 1;

src/app/app.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+// import { FormsModule } from '@angular/forms';
 
 import { Param } from './models/param.model';
 import { Config } from './models/config.model';

src/app/app.module.ts

@@ -12,7 +12,7 @@ import { CanvasDirective } from './canvas/canvas.directive';
   ],
   imports: [
     BrowserModule,
-    FormsModule
+    FormsModule,
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/canvas/canvas.directive.ts

@@ -23,6 +23,7 @@ export class CanvasDirective implements OnInit, OnChanges {
 
   @Input()
   private param: Param;
+  
 
   @Output()
   private emitConfig: EventEmitter<Config>;
@@ -31,7 +32,7 @@ export class CanvasDirective implements OnInit, OnChanges {
   private onResize(event) {
     this.resetLines();
     this.resetPoints();
-    this.init();
+    this.init();  
   }
 
   constructor(
@@ -45,6 +46,12 @@ export class CanvasDirective implements OnInit, OnChanges {
     console.log(changes.param);
   }
 
+  ngDoCheck(){
+    this.resetLines();
+    this.resetPoints();
+    this.init();  
+  }
+
   ngOnInit() {
     this.init();
   }
@@ -113,6 +120,8 @@ export class CanvasDirective implements OnInit, OnChanges {
 
   private expandPoints(points: Point[]) {
     const newPoints: Point[] = [];
+    
+    
     const matrix = {
       min: {
         x: points.reduce((a, b) => a.x < b.x ? a : b).x,
@@ -123,7 +132,7 @@ export class CanvasDirective implements OnInit, OnChanges {
         y: points.reduce((a, b) => a.y > b.y ? a : b).y,
       }
     };
-
+    
     points.splice(1, 0, {
       x: this.config.end.x,
       y: this.config.height - this.config.height * this.param.margin.y
@@ -134,7 +143,7 @@ export class CanvasDirective implements OnInit, OnChanges {
     });
 
     for (let i = 0; i < this.param.points; i++) {
-      points.splice(2, 0, this.generateRandomPoint(matrix));
+      points.splice(2, 0, this.generateRandomPoint(matrix));      
     }
 
     return points;
@@ -148,7 +157,7 @@ export class CanvasDirective implements OnInit, OnChanges {
 
     let point = null;
     
-    if (group.size() <= 1) {
+    if (group.size()<=1) {
       return this.expandPoints([
         this.config.start,
         this.config.end
@@ -167,8 +176,8 @@ export class CanvasDirective implements OnInit, OnChanges {
     return points;
   }
 
-  private generateRandomPoint(matrix) {
-    return {
+  private generateRandomPoint(matrix) {    
+    return { 
       x: Random.randomUniform(matrix.min.x, matrix.max.x)(),
       y: Random.randomUniform(matrix.min.y, matrix.max.y)()
     };
@@ -288,7 +297,7 @@ export class CanvasDirective implements OnInit, OnChanges {
    * Update Config Parameters and emit to parent component.
    */
   private updateConfig(): void {
-    const margin = this.canvas.clientWidth * this.param.margin.x;
+    const margin = this.canvas.clientWidth * this.param.margin.x;    
     
     this.config = {
       width: this.canvas.clientWidth,