title: Inter component property binding in Angular 2
body: <p>Child component has two data-bound input property, one of typo <code>string</code> (<code>inputVariable</code>) and another of type <code>string[]</code> (<code>inputArray</code>).</p>
  
  <pre><code>import {Component, Inject, Input} from 'angular2/core';
  @Component(
  {
      selector: 'child-app',
      template: `
      {{inputVariable}}
      &lt;input type="button" (click)="onButtonOneClick()" value="changeFoo"&gt;
      &lt;ul&gt;
        &lt;li *ngFor="#el of inputArray"&gt; {{el}} &lt;/li&gt;
      &lt;/ul&gt;        
      &lt;input type="button" (click)="onButtonTwoClick()" value="ChangeLi"&gt;       
      `
  })
  export class ChildAppComponent {
    @Input() inputVariable: string;
    @Input() inputArray: string[];
    onButtonOneClick() {
      this.inputVariable = 'new string';
    }
    onButtonTwoClick() {
      this.inputArray[0] = 'New element String';
    } 
  }
  </code></pre>
  
  <p>Parent component has same properties and Initializes child components corresponding properties inside template (<code>[inputArray]="inputArray" inputVariable="inputVariable"</code>)</p>
  
  <pre><code>import {Component} from 'angular2/core';
  import {ChildAppComponent} from './childApp.component';
  
  @Component({
  selector: 'my-app',
  template:
  `
  {{inputVariable}}
      &lt;input type="button" (click)="onButtonOneClick()" value="changeFoo"&gt;
      &lt;ul&gt;
        &lt;li *ngFor="#el of inputArray"&gt; {{el}} &lt;/li&gt;
      &lt;/ul&gt;        
      &lt;input type="button" (click)="onButtonTwoClick()" value="ChangeLi"&gt; 
     &lt;hr&gt;    
      &lt;child-app [inputArray]="inputArray" inputVariable="inputVariable"&gt; &lt;/child-app&gt;
    `,
    directives: [ChildAppComponent]
    })
   export class AppComponent {
     inputVariable: string = 'foo';
     inputArray: string[] = ['one', 'two'];
  
     onButtonOneClick() {
         this.inputVariable = 'new string';
     }
     onButtonTwoClick() {
        this.inputArray[0] = 'New element String';
     }
  }
  </code></pre>
  
  <p>Button clicks inside parent and child components changes values of corresponding property (<code>buttonOne</code> -> <code>inputVariable</code> &amp; <code>buttonTwo</code> -> <code>inputArray</code>)</p>
  
  <p>When click on second button (which changes <code>string[]</code> property value) change happens both in parent and in child component</p>
  
  <p>When click on first button (which changes <code>string</code> property value) change <b>only</b> happens inside parent or child (respective to which component's button i clicked)</p>
  
  <ul>
  <li>Why behaviour is different based on property type ? </li>
  <li>How to have two way binding between child and parent component's <code>string</code> properties ?</li>
  </ul>