Anna F Anna F - 2 years ago 69
TypeScript Question

How to pass variable from child to child in Angular2

I have three components : parent (P) and two children (C1) and (C2)
(they are both children of P component and they are not nested)
in parent template it looks like

<c1-component></c1-component>
<c2-component></c2-component>


I have a variable
myVar
in
C1
(number), which I want decrease and increase in
C2
component and give a new value of this variable back to
C1
(so, I want to pass not a function, but variable). How could I pass this variable from
C1
to
C2
?
I would like to solve this problem without shared services.

Answer Source

You could emit the variable from child1 using a EventEmitter to the parent. Catch it as an input within the parent and then pass it to child2 within the selector.

Child 1:

import { Output } from '@angular/core';
@Output() testVariable = new EventEmitter();

Catch within parent and emit in Parent html:

<c2-component [testVariable]="testVariable"></c2-component>

Child 2:

import { Input} from '@angular/core';
@Input() testVariable = new EventEmitter();
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download