title: How to do two way data stream between parent and child components? (Angular 5)
body: <p>I have a simple code example where I try sending from parent component data into child component and at the same time get it data from child to parent when data will be changed:</p>
  
  <p>Parent:</p>
  
  <pre><code>@Component({
    selector: 'app-parent',
    templateUrl: './parent.component.html',
    styleUrls: ['./parent.component.css']
  })
  export class ParentComponent {
  
    parentData:string = 'start value'
  
  }
  &lt;app-child [childData]="parentData"&gt;&lt;/app-child&gt;
  </code></pre>
  
  <p>Child:</p>
  
  <pre><code>@Component({
    selector: 'app-child',
    templateUrl: './child.component.html',
    styleUrls: ['./child.component.css']
  })
  export class ChildComponent {
  
    @Input() childData: string;
  
  }
  &lt;p&gt;
      {{childData}}
      &lt;br&gt;
      &lt;input [(ngModel)]="childData" type="text"&gt;
  &lt;/p&gt;
  </code></pre>
  
  <p>I need to annotate <code>@Output()</code> for  <code>childData</code> but it already annotated with <code>@Input()</code>.
  How to binding variables <code>childData</code> and <code>parentData</code>?</p>