title: How make two-way of binding between grandchild and parent in angular2?
body: <p>I need to do two way of binding between parent and grandchild. Thus, I try to do two-way of binding between child and other two.</p>
  
  <p>Some think like that</p>
  
  <p>GrandChild &lt;==> Child &lt;==> Parent</p>
  
  <p>But it does not work as I expect.</p>
  
  <p>This is my grandchild:</p>
  
  <pre><code>&lt;svg [class.small-size]="!isFullScreen" [class.full-screen]="isFullScreen"&gt;
    &lt;ng-content&gt;&lt;/ng-content&gt;
  &lt;/svg&gt;
  ...
  
  export class FullScreenableSvgComponent {
  
    @Input() isFullScreen: Boolean;
    @Output() isFullScreenChange: EventEmitter&lt;Boolean&gt;;
  
    constructor() {
      this.isFullScreen = this.isFullScreen || false;
      this.isFullScreenChange = new EventEmitter&lt;Boolean&gt;();
    }
    ...
  }
  </code></pre>
  
  <p>This is my child:</p>
  
  <pre><code>&lt;fullscreenable-svg (window:resize)="onResize()" [(isFullScreen)]="isFullScreen"&gt;
      ...
  &lt;/fullscreenable-svg&gt;
  
  export class VisualizationComponent implements OnChanges, OnInit {
  
    @Input() isFullScreen: Boolean;
    @Output() isFullScreenChange: EventEmitter&lt;Boolean&gt;;
  
    constructor(private elementRef: ElementRef) {
  
      this.isFullScreenChange = new EventEmitter&lt;Boolean&gt;();
    }
    ...
  }
  </code></pre>
  
  <p>This is my parent:</p>
  
  <pre><code>&lt;visualization [(isFullScreen)]="isFullScreen" [nodes]="[]" [links]="[]"&gt;         
  &lt;/visualization&gt;
  &lt;div [hidden]="isFullScreen" style="position:absolute;"&gt;
      i am working
  &lt;/div&gt;
  </code></pre>