Ways to transfer data between components in Angular 2: Passing variables between children

Question

Ways to transfer data between components in Angular 2: Passing variables between children

Within my application, I have a parent component (P) and two children components (C1) and (C2). Both C1 and C2 are children of the parent component P, but they are not nested. In the parent template, it is structured as follows:

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

In component C1, there is a variable named myVar (which is a number) that I want to be able to decrease and increase within component C2, and then pass the updated value back to C1. How can I achieve this without using shared services?

javascript angular typescript

Answer 1

Answer №1

To transfer a variable from child1 to child2, you can utilize an EventEmitter in Angular. Emit the variable from child1 using the EventEmitter and catch it as an input within the parent component. Then, pass it to child2 within the selector.

Child 1:

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

Catch the emitted data within the parent component and pass it to Child 2 in the Parent HTML template:

<child2-component [testData]="testData"></child2-component>

Child 2:

import { Input} from '@angular/core';
@Input() testData;

Answer 2

To transfer a variable from child1 to child2, you can utilize an EventEmitter in Angular. Emit the variable from child1 using the EventEmitter and catch it as an input within the parent component. Then, pass it to child2 within the selector.

Child 1:

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

Catch the emitted data within the parent component and pass it to Child 2 in the Parent HTML template:

<child2-component [testData]="testData"></child2-component>

Child 2:

import { Input} from '@angular/core';
@Input() testData;

Ways to transfer data between components in Angular 2: Passing variables between children

Answer №1

Similar questions

Encountering the error message "Uncaught Error: Objects are not valid as a React child" even though I am not passing objects as children in my React component

The Bar Graph Transition in d3 is Running Backwards

click events in backbone not triggering as expected

What could be causing the malfunction of the Facebook iframe like button?

Setting default values for multiple selections can be accomplished by following these steps

Using jQuery and AJAX to dynamically add data to POST parameters

Step-by-step guide on integrating jQuery-ui with Asp Core+ Angular 4 template using Visual Studio 2017

Is there a way to horizontally navigate a pallet using Next and Prev buttons?

Getting Your Redux Form Ready for Submission

Is there a way to remove a particular map from Firestore?

Tips for updating Ref objects in React

Is it possible to execute ng-repeat on-click when ng-show evaluates to true?

When using json_decode with $_POST, it may return NULL

Prevent users from deleting options in Autocomplete by disabling the backspace key

Innovative feature: Customizable dropdown options in PrimeNg for Angular 4

Encountering an issue: JwPagination in angular 9 throws an error of "Cannot read property 'currentValue' of undefined"

Creating a function in React to be passed as a prop

Tips for handling a multi-step form in React?

exploring div element(s) with jQuery

Searching for an element by a unique custom attribute in jQuery