Passing parent child in Angular2

Question

How can nested components interact with each other in Angular 2?

Adding @Parent() to any level constructor violates the application.

Given the following code, how can I grab a message from GrandParent, Parent, Child, and GrandChild at each level?

/ client / grandparent

 import {Component, View, bootstrap} from 'angular2/angular2'; import {ParentCmp} from 'client/parent'; import {ChildCmp} from 'client/child'; import {GrandChildCmp} from 'client/grandchild'; @Component({ selector: 'grand-parent' }) @View({ template: ` <div style="background-color: lightgreen; padding: 10px;"> <h1>Grand-Parent</h1> <p>Parent: {{parentMessage}}</p> <p>Child: {{childMessage}}</p> <p>Grand-Child: {{grandChildMessage}}</p> <parent></parent> </div> `, directives: [ParentCmp] }) class GrandParent { message:string; parentMessage:string; childMessage: string; grandChildMessage: string; constructor() { this.message = "message from grandparent"; //this.parentMessage = parent.message; //this.childMessage = child.message; //this.grandChildMessage = grandChild.message; } } bootstrap(GrandParent); 

/ client / parent

 import {Component, View, Parent} from 'angular2/angular2'; import {GrandParentCmp} from 'client/grandparent'; import {ChildCmp} from 'client/child'; import {GrandChildCmp} from 'client/grandchild'; @Component({ selector: 'parent' }) @View({ template: ` <div style="background-color: lightblue; padding: 10px;"> <p>Grand-Parent: {{grandParentMessage}}</p> <h1>Parent</h1> <p>Child: {{childMessage}}</p> <p>Grand-Child: {{grandChildMessage}}</p> <child></child> </div> `, directives: [ChildCmp] }) export class ParentCmp { message:string; grandParentMessage:string; childMessage:string; grandChildMessage:string; constructor() { this.message = "message from parent"; //this.grandParentMessage = grandParent.message; //this.childMessage = child.message; //this.grandChildMessage = grandChild.message; } } 

/ client / child

 import {Component, View, Host} from 'angular2/angular2'; import {GrandParentCmp} from 'client/grandparent'; import {ParentCmp} from 'client/parent'; import {GrandChildCmp} from 'client/grandchild'; @Component({ selector: 'child' }) @View({ template: ` <div style="background-color: orange; padding: 10px;"> <p>GrandParent: {{grandParentMessage}}</p> <p>Parent: {{parentMessage}}</p> <h1>Child</h1> <p>Grand-Child: {{grandChildMessage}}</p> <grand-child></grand-child> </div> `, directives: [GrandChildCmp] }) export class ChildCmp { message:string; grandParentMessage:string; parentMessage:string; grandChildMessage:string; constructor() { this.message = "message from child"; //this.grandParentMessage = grandParent.message; //this.parentMessage = parent.message; //this.grandChildMessage = grandChild.message; } } 

/ client / grandchild

 import {Component, View, Host} from 'angular2/angular2'; import {GrandParentCmp} from 'client/grandparent'; import {ParentCmp} from 'client/parent'; import {ChildCmp} from 'client/child'; @Component({ selector: 'grand-child' }) @View({ template: ` <div style="background-color: lightgrey; padding: 10px;"> <p>Grand-Parent: {{grandParentMessage}}</p> <p>Parent: {{parentMessage}}</p> <p>Child</p> <h1>Grand-Child: {{grandChildMessage}}</h1> <child></child> </div> ` }) export class GrandChildCmp { message:string; grandParentMessage:string; parentMessage:string; grandChildMessage:string; constructor() { this.message = "message from grandchild"; //this.grandParentMessage = grandParent.message; //this.parentMessage = parent.message; //this.grandChildMessage = grandChild.message; } } 

I have included a link to the Github Repo .