pass data between grandparent and child angular 2

Question

in angular2 I have an addproperty component(grandparent) and addproperty2 component(parent) and a checkbox component(child).In grandparent there is a form with add button that if user click checkboxes which are in parent component will be shown and again that add button is exist. grandparent html:

    <div *ngIf="page2">
      <add-property-page2></add-property-page2>
    </div>

    <div class="text-center col-sm-12">
      <button [disabled]="!propertyForm.form.valid"
              (click)="onSubmit($event,value,amlak)"
              type="submit" class="btn btn-success">Add
      </button>
    </div>

It means if page2 is true it shows the parent html inside grandparent. grandparent component:

import {Component, OnInit, ViewChild, ViewEncapsulation,Input} from '@angular/core';
import {AddPropertyPage2Component} from "./add-paroperty-page2.component";
@Component({
selector: 'add-property',
templateUrl: './add-property.html'
})
export class AddPropertyComponent implements OnInit {
private page2: boolean;
@ViewChild(AddPropertyPage2Component)
private checkbox: AddPropertyPage2Component;
onSubmit($event: any) {
$event.preventDefault();
if(this.page2){
  this.amlak.emkanat = this.checkbox.emkan.filter(e=>e.checked == true);
 }
}

parent html:

<div class="col-md-12 form-group">
<checkbox></checkbox>
 </div>

parent component:

import {Component, OnInit,ViewChild} from '@angular/core';
import {CheckBoxComponent} from './checkbox.component';
@Component({
selector:'add-property-page2',
templateUrl:'./add-property-page2.html',
})
export class AddPropertyPage2Component{
 @ViewChild(CheckBoxComponent)
 private checkboxcomponent: CheckBoxComponent;
 public emkan = this.checkboxcomponent.emkanats;
  }

and checkbox component:

import {Component, OnInit} from '@angular/core';
import {checkBoxClass} from '../models/checkboxClass';
import {CheckBoxService} from '../services/checkbox.service';
@Component({
selector: 'checkbox',
styleUrls: ['./checkbox.css'],
templateUrl: './checkbox.html',
})
 export class CheckBoxComponent implements OnInit {
 public emkanats: checkBoxClass[];

 constructor(private checkboxService: CheckBoxService) {
  }

  ngOnInit() {
  this.checkboxService.getCheckboxes().subscribe(res => this.emkanats = 
  res);
  }
  }

this is checkbox class:

export class checkBoxClass {
title:string;
 value:string;
checked:boolean;
 image:number;
 }

checkbox service:

import {Injectable} from '@angular/core';
import {checkBoxClass} from '../models/checkboxClass';
import {Http,Headers,Response} from '@angular/http';
 import { Observable }     from 'rxjs/Observable';
 import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

@Injectable() export class CheckBoxService{
 private checkboxUrl:string = '../../checkbox.json';

 constructor(private http:Http){}

 getCheckboxes(): Observable<checkBoxClass[]> {
  return this.http.get(this.checkboxUrl)
  .map(response => response.json())
 }
 }

Now the error is this: Cannot read property 'emkan' of undefined I have used viewchild method in two components but I don't know the reason of this error. Could you help me to solve this problem by using viewchild method? Thank you very much.