Bindings are made and param changes are communicating to canvas.directive.

src/app/app.component.html

@@ -9,25 +9,25 @@
   <li>
     <label>
       <div>Amount of points</div>
-      <input type="number" name="canvasParam.points" [(ngModel)]="canvasParam.points" max="10" min="0" step="1">
+      <input type="number" name="points" [(ngModel)]="canvasParam.points" max="10" min="0" step="1">
     </label>
   </li>
   <li>
     <label>
       <div>Margin X</div>
-      <input type="number" [(ngModel)]="canvasParam.margin.x" max="1" min="0" step="0.1">
+      <input type="number" name="marginX" [(ngModel)]="canvasParam.margin.x" max="1" min="0" step="0.1">
     </label>
   </li>
   <li>
     <label>
       <div>Margin Y</div>
-      <input type="number" [(ngModel)]="canvasParam.margin.y" max="1" min="0" step="0.1">
+      <input type="number" name="marginY" [(ngModel)]="canvasParam.margin.y" max="1" min="0" step="0.1">
     </label>
   </li>
   <li>
       <label>
         <div>Stroke Width</div>
-        <input type="number" [(ngModel)]="canvasParam.stroke.width" max="10" min="0" step="0.1">
+        <input type="number" name="strokeWidth" [(ngModel)]="canvasParam.stroke.width" max="10" min="0" step="0.1">
       </label>
     </li>
 </ul>

src/app/app.component.ts

@@ -31,7 +31,24 @@ export class AppComponent {
       spread: 80,
       showGrid: true
     };
-  }
+
+    /**
+     * A test of canvasParam.margin change and binding to canvas.directive
+     */
+    let x = 1;
+    let intrvlId = setInterval(() => {
+      if (x < 5) {
+        this.canvasParam.margin.x += 0.2;
+        x += 1;
+        console.log("canvas param  ", this.canvasParam.margin.x);
+      } else {
+        clearInterval(intrvlId);
+      }
+    }, 1000);
+    /**
+     * 
+     */
+  };
 
   public updateCanvasConfig(config): void {
     this.canvasConfig = config;

src/app/canvas/canvas.directive.ts

@@ -22,7 +22,8 @@ export class CanvasDirective implements OnInit, OnChanges {
   public config: Config;
 
   @Input()
-  private param: Param;
+  public param: Param;
+  public marginX: Param['margin']['x'];
   
 
   @Output()
@@ -43,13 +44,17 @@ export class CanvasDirective implements OnInit, OnChanges {
   }
 
   ngOnChanges(changes: SimpleChanges) {
-    console.log(changes.param);
+    console.log("ch ch ch chaaaangesss ",changes.param);
   }
 
   ngDoCheck(){
+    this.paramAdjustment();
+  }
+
+  paramAdjustment(){
     this.resetLines();
     this.resetPoints();
-    this.init();  
+    this.init(); 
   }
 
   ngOnInit() {
@@ -121,7 +126,6 @@ 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,
@@ -131,7 +135,7 @@ export class CanvasDirective implements OnInit, OnChanges {
         x: points.reduce((a, b) => a.x > b.x ? a : b).x,
         y: points.reduce((a, b) => a.y > b.y ? a : b).y,
       }
-    };
+    }
     
     points.splice(1, 0, {
       x: this.config.end.x,
@@ -143,7 +147,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;
@@ -176,7 +180,8 @@ export class CanvasDirective implements OnInit, OnChanges {
     return points;
   }
 
-  private generateRandomPoint(matrix) {    
+  private generateRandomPoint(matrix) { 
+       
     return { 
       x: Random.randomUniform(matrix.min.x, matrix.max.x)(),
       y: Random.randomUniform(matrix.min.y, matrix.max.y)()