Stack Exchange
pass data between grandparent and child angular 2
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. 

Would be possible to make plunker?

Hey there. Try to use the "ngAfterViewInit" lifecycle hook in your AddPropertyPage2Component component to read data from "emkanats" from the checkboxcomponent variable. See https://angular.io/guide/lifecycle-hooks

You need to use a shared service. Use an approach like this: https://stackoverflow.com/a/45710245/1791913
