title: Passing Data into a Component angular5
body: <p>the value "name" is not initialized in component .
  There are a ways to pass data into a component using decorator @input? </p>
  
  <p>ng -v </p>
  
  <p>Angular CLI: 1.6.3</p>
  
  <p>Node: 8.9.4</p>
  
  <p>OS: linux x64</p>
  
  <p>Angular: 5.1.3</p>
  
  <p><em>My app.component.ts</em> </p>
  
  <pre><code>import { Component, Input } from '@angular/core';
  
  @Component({
      selector: 'hello-world',
      template: '&lt;p&gt;Hello, {{name}}!&lt;/p&gt;',
  })
  export class HelloComponent {
      @Input() name: string;
  }
  </code></pre>
  
  <p><em>app.module.ts</em></p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { FormsModule } from '@angular/forms';
  import { HelloComponent } from './app.component';
  
  @NgModule({
     declarations: [
         HelloComponent
     ],
     imports: [
         BrowserModule,FormsModule
     ],
     providers: [],
     bootstrap: [HelloComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p><em>index.html</em></p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Front&lt;/title&gt;
      &lt;base href="/"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-  scale=1"&gt;
      &lt;link rel="icon" type="image/x-icon" href="favicon.ico"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
       &lt;hello-world name="World"&gt;&lt;/hello-world&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>