added binging between directive and parent component

src/app/app.component.html

@@ -1,8 +1,6 @@
-<canvas appCanvas></canvas>
+<canvas appCanvas (emitConfig)="updateCanvasConfig($event)"></canvas>
 
-<ul>
-  <li>https://github.com/d3/d3-interpolate</li>
-  <li>https://github.com/d3/d3-timer</li>
-  <li>https://github.com/d3/d3-scale-chromatic</li>
+<ul *ngIf="canvasConfig">
+  <li><pre>{{canvasConfig | json}}</pre></li>
 </ul>
 

src/app/app.component.scss

@@ -9,13 +9,20 @@ canvas {
 ul {
   display: flex;
   position: absolute;
+  top: 0;
+  right: auto;
   bottom: 0;
   left: 0;
-  right: 0;
   justify-content: center;
   margin: 0;
   padding: 3rem;
   background: rgba(0,0,0,0.1);
 
   list-style-type: none;
+
+  li {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
 }

src/app/app.component.ts

@@ -1,4 +1,5 @@
-import { Component } from '@angular/core';
+import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
+import { Config } from './models/config.model';
 import * as d3 from 'd3';
 
 @Component({
@@ -7,5 +8,9 @@ import * as d3 from 'd3';
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
-  title = 'app';
+  public canvasConfig: Config|null;
+
+  public updateCanvasConfig(config): void {
+    this.canvasConfig = config;
+  }
 }

src/app/canvas/canvas.directive.ts

@@ -1,14 +1,15 @@
-import { Directive, ElementRef, Renderer, AfterViewInit, HostListener } from '@angular/core';
+import { Directive, ElementRef, Renderer, AfterViewInit, HostListener, Output, EventEmitter, OnInit } from '@angular/core';
 import { Config } from './../models/config.model';
 
 @Directive({
   selector: '[appCanvas]'
 })
-export class CanvasDirective implements AfterViewInit {
+export class CanvasDirective implements OnInit {
   private canvas: any;
   private context: any;
   public config: Config;
 
+  @Output() emitConfig: EventEmitter<Config>;
   @HostListener('window:resize', ['$event'])
   private onResize(event) {
     this.updateConfig();
@@ -20,9 +21,10 @@ export class CanvasDirective implements AfterViewInit {
   ) {
     this.canvas = el.nativeElement;
     this.context = this.canvas.getContext('2d');
+    this.emitConfig = new EventEmitter();
   }
 
-  ngAfterViewInit() {
+  ngOnInit() {
     this.updateConfig();
   }
 
@@ -39,6 +41,7 @@ export class CanvasDirective implements AfterViewInit {
         y: this.canvas.clientHeight
       },
     };
-    console.log(this.config);
+    // Emit Config to parent Component
+    this.emitConfig.next(this.config);
   }
 }

src/app/models/config.model.ts

@@ -1,8 +1,8 @@
 import { Point } from './point.model';
 
 export interface Config {
-  width: Number;
-  height: Number;
+  width: number;
+  height: number;
   start: Point;
   end: Point;
 }