Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular2: child component access parent class variable/function

Tags:

angular

I have a variable in the parent component that might be changed by child, parent will be using this variable in the view and thus has to propagate 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");     } } 
like image 269
Khaled Avatar asked Dec 10 '15 11:12

Khaled


People also ask

Can a child class access parent variables?

The reference holding the child class object reference will not be able to access the members (functions or variables) of the child class. This is because the parent reference variable can only access fields that are in the parent class.

How do you access the parent component function in a child component?

A ViewChild is a decorator which is used when we want to access a child component inside the parent component, we use the decorator @ViewChild() in Angular. Here I have declared a variable name child as decorator @ViewChild(). As shown below we can access childMethod of child component inside the parent component.

How do you pass variable from parent component to child component?

Pass data from parent to child component using @Input() decorator, which allows data to pass through templates and child to parent component using @Output() decorator with the help of Event Emitter. Create a new Angular project using the following NPM command: ng new componentSharing.


2 Answers

If you use input property databinding with a JavaScript reference type (e.g., Object, Array, Date, etc.), then the parent and child will both have a reference to the same/one object. Any changes you make to the shared object will be visible to both parent and child.

In the parent's template:

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

In the child:

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

If you want to add items to the list upon construction of the child, use the ngOnInit() hook (not the constructor(), since the data-bound properties aren't initialized at that point):

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

This Plunker shows a working example, with buttons in the parent and child component that both modify the shared list.

Note, in the child you must not reassign the reference. E.g., don't do this in the child: this.aList = someNewArray; If you do that, then the parent and child components will each have references to two different arrays.

If you want to share a primitive type (i.e., string, number, boolean), you could put it into an array or an object (i.e., put it inside a reference type), or you could emit() an event from the child whenever the primitive value changes (i.e., have the parent listen for a custom event, and the child would have an EventEmitter output property. See @kit's answer for more info.)

Update 2015/12/22: the heavy-loader example in the Structural Directives guides uses the technique I presented above. The main/parent component has a logs array property that is bound to the child components. The child components push() onto that array, and the parent component displays the array.

like image 147
Mark Rajcok Avatar answered Oct 14 '22 22:10

Mark Rajcok


What about a little trickery like NgModel does with NgForm? You have to register your parent as a provider, then load your parent in the constructor of the child.

That way, you don't have to put [sharedList] on all 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> 

You can find more information on the subject in the Angular documentation: https://angular.io/guide/dependency-injection-in-action#find-a-parent-component-by-injection

like image 35
jsgoupil Avatar answered Oct 14 '22 22:10

jsgoupil