title: Angular2 Data binding between Components
body: <p>I started developing an Angular2 App recently based on the MEAN stack and I ran into some problems with data binding. I looked at the documentation and every question on here, but I can't find my mistake. I hope someone will be able to point me in the right direction. </p>
  
  <p>One of my components is called by </p>
  
  <pre><code>&lt;app-canvas-block-card [block]=block [canvas]=canvas&gt;&lt;/app-canvas-block-card&gt;
  </code></pre>
  
  <p>Both properties are accepted in the CanvasBlockCardComponent:</p>
  
  <pre><code>import { Component, OnInit, Input } from '@angular/core';
  import { ICanvasBlock } from '../../../../interfaces/canvas-block.interface';
  import { ICanvas } from '../../../../interfaces/canvas.interface';
  
  @Component({
    selector: 'app-canvas-block-card',
    templateUrl: './canvas-block-card.component.html',
    styleUrls: ['./canvas-block-card.component.scss']
  })
  export class CanvasBlockCardComponent implements OnInit {
  
    @Input() canvas: ICanvas;
    @Input() block: ICanvasBlock;
  
    constructor() { }
  
    ngOnInit() {
      console.dir(this.canvas);
      console.dir(this.block);
    }
  
  }
  </code></pre>
  
  <p>But when I try to bind them to the next component in the template of CanvasBlockCardComponent by using </p>
  
  <pre><code>&lt;a [routerLink]="['/canvas', canvas._id, block._id]" [block]="block" [canvas]="canvas"&gt;&lt;i class="fa fa-edit"&gt;&lt;/i&gt;&lt;/a&gt;
  </code></pre>
  
  <p>I get errors thrown:</p>
  
  <pre><code>Can't bind to 'block' since it isn't a known property of 'a'.
  Can't bind to 'canvas' since it isn't a known property of 'a'.
  </code></pre>
  
  <p>The component (CanvasDetailComponent) called by the link looks like this:</p>
  
  <pre><code>import { Component, OnInit, Input } from '@angular/core';
  import { ICanvas } from '../../../../interfaces/canvas.interface';
  import { ICanvasBlock } from '../../../../interfaces/canvas-block.interface';
  
  @Component({
    selector: 'app-canvas-detail',
    templateUrl: './canvas-detail.component.html',
    styleUrls: ['./canvas-detail.component.scss']
  })
  export class CanvasDetailComponent implements OnInit {
  
    @Input() canvas: ICanvas;
    @Input() block: ICanvasBlock;
  
    constructor() {}
  
    ngOnInit() {
    }
  
  }
  </code></pre>