title: Angular4 sharing data to child component
body: <p>I have a parent component that invokes an API and gets the data returned.
  It has a loop like this:</p>
  
  <pre><code>&lt;div *ngIf="campaign"&gt;
      &lt;div *ngFor="let question of campaign.questions" bzQuestion&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>You can see that I have another component called <strong>bzQuestion</strong> that repeats itself. I want to pass the data (question) to that component. I watched a video saying you can use <strong>@Input()</strong>, so I did this:</p>
  
  <pre><code>import { Component, OnInit, Input } from '@angular/core';
  import { IQuestion } from '../data/models/question.model';
  
  @Component({
    selector: 'bz-question',
    templateUrl: './question.component.html',
    styleUrls: ['./question.component.scss'],
    providers: [ ]
  })
  export class QuestionComponent {
    @Input() public question: IQuestion;
  }
  </code></pre>
  
  <p>I tried to then add the question to the child component by doing this to the parent:</p>
  
  <pre><code>&lt;div *ngIf="campaign"&gt;
      &lt;div *ngFor="let question of campaign.questions" [question]="question" bzQuestion&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But the compiler moans saying:</p>
  
  <blockquote>
    <p>Can't bind to 'question' since it isn't a known property of 'div'. ("</p>
  </blockquote>
  
  <p>Does anyone know what I am doing wrong?</p>