Angular2: variable / function of the parent class of the child component

Question

I have a variable in the parent component that can be modified by the child, the parent will use this variable in the view and therefore must propagate the changes.

import {Component, View} from 'angular2/core'; @Component({selector: 'parent'}) @View({ directives: [Child], template: `<childcomp></childcomp>` }) class Parent { public sharedList = new Array(); constructor() { } } @Component({selector: 'child'}) @View({template: `...`}) class Child { constructor() { //access 'sharedList' from parent and set values sharedList.push("1"); sharedList.push("2"); sharedList.push("3"); sharedList.push("4"); } } 

Answer 1

If you use data binding of input properties with JavaScript reference type (for example, Object, Array, Date, etc.), then the parent and child will have a link to the same / same object. Any changes made to the shared object will be visible to both parents and children.

In the parent template:

 <child [aList]="sharedList"></child> 

The child has:

 @Input() aList; ... updateList() { this.aList.push('child'); } 

If you want to add items to the list when building the child, use ngOnInit() (not the constructor (), because the data properties are not initialized at this point):

 ngOnInit() { this.aList.push('child1') } 

This Plunker shows a working example with buttons in the parent and child components that modify the general list.

Please note that in the case of a child, you should not reassign the link. For example, do not do this in the child: this.aList = someNewArray; If you do this, the parent and child components will have references to two different arrays.

If you want to share a primitive type (i.e. string, number, boolean), you can put it in an array or object (i.e. put it inside a reference type) or you could emit() event from a child when it changes primitive value (i.e. parent listens for a custom event, and the child will have an EventEmitter output EventEmitter . See @kit answer for more information.)

Update 2015/12/22: the heavy-loader example in the Structural Directives uses the technique I presented above. The main / parent component has a logs array property associated with child components. Detailed components push() to this array, and the parent component maps the array.

Answer 2

How about a little cheating like NgModel with NgForm? You must register your parent as a provider, and then load the parent into the constructor of the child.

Thus, you do not need to put [sharedList] on all of your children.

 // Parent.ts export var parentProvider = { provide: Parent, useExisting: forwardRef(function () { return Parent; }) }; @Component({ moduleId: module.id, selector: 'parent', template: '<div><ng-content></ng-content></div>', providers: [parentProvider] }) export class Parent { @Input() public sharedList = []; } // Child.ts @Component({ moduleId: module.id, selector: 'child', template: '<div>child</div>' }) export class Child { constructor(private parent: Parent) { parent.sharedList.push('Me.'); } } 

Then your html

 <parent [sharedList]="myArray"> <child></child> <child></child> </parent> 

Answer 3

Basically, you cannot directly access variables from the parent. You do this by events. The component output property is responsible for this. I would suggest reading https://angular.io/docs/ts/latest/guide/template-syntax.html#input-and-output-properties

Answer 4

You can do this In the parent component, declare:

 get self(): ParenComponentClass { return this; } 

In the child component after importing the ParenComponentClass, declare:

 private _parent: ParenComponentClass ; @Input() set parent(value: ParenComponentClass ) { this._parent = value; } get parent(): ParenComponentClass { return this._parent; } 

Then in the parent template you can do

 <childselector [parent]="self"></childselector> 

Now from the child you can access the parent’s public properties and methods using

 this.parent 

Answer 5

The main article in the Angular2 documentation on this subject:

https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-child

It covers the following:

• Passing data from parent to child with input binding

• Toggle input properties with setter

• Change input properties using ngOnChanges

• Parent is listening to a child event

• Parent interacts with child through local variable

• Parent calls ViewChild

• Parent and children communicate through the service.