title: Angular 2 pass data parent to child component
body: <p>I have two components its called app.component and child.component. I want to pass the data from parent to child. My code is below. Where am i making mistake?</p>
  
  <p>app.component.ts</p>
  
  <pre><code>import { ChildComponent } from './child.component';
  import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    entryComponents:[ChildComponent]
  })
  export class AppComponent {
    title = 'app works!';
  }
  </code></pre>
  
  <p>child.component.ts</p>
  
  <pre><code>    import { AppComponent } from './app.component';
      import { Component, Input } from '@angular/core';
  
      @Component({
        selector: 'child',
        templateUrl: './child.component.html'
      })
      export class ChildComponent {
       @Input() input :string;
  
  }
  </code></pre>
  
  <p>app.component.html</p>
  
  <pre><code>&lt;h1&gt;
    {{title}}
  &lt;/h1&gt;
  
  &lt;child [input]="parent to child"&gt; &lt;/child&gt;
  </code></pre>
  
  <p>child.component.html</p>
  
  <pre><code>&lt;div&gt;{{input}}&lt;/div&gt;
  </code></pre>
  
  <p>app.module.ts</p>
  
  <pre><code>import { ChildComponent } from './child.component';
  import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { FormsModule } from '@angular/forms';
  import { HttpModule } from '@angular/http';
  
  import { AppComponent } from './app.component';
  
  @NgModule({
    declarations: [
      AppComponent,
      ChildComponent
    ],
    imports: [
      BrowserModule,
      FormsModule,
      HttpModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>