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

@@ -24,6 +24,7 @@ export class CanvasDirective implements OnInit, OnChanges {
   @Input()
   private param: Param;
   
+
   @Output()
   private emitConfig: EventEmitter<Config>;
 
@@ -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,