Transferring data between two TypeScript files of different Angular 2 components

Question

Transferring data between two TypeScript files of different Angular 2 components

I have two components, Component A and Component B, which are not parent-child components but I need to pass data from Component A to Component B.

Example:
Component A.ts has an array of data:
myData: [
   {'name':'some a','email':'some <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="630223040e020a0f4d000c0e">[email protected]</a>','grades':{}},
   {'name':'some b','email':'some <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1c7e5c7b717d7570327f7371">[email protected]</a>','grades':{}}
]

I need to pass this myData to Component B.ts

javascript angular typescript angular2-template angular2-services

Answer 1

Answer №1

If A and B do not have a parent/child relationship, the most effective approach is to utilize a shared service which is injected into their constructors.

component A:

constructor(private sharingService: SharingService) { }

public myArray = [];

func() {
    ...
    this.sharingService.save(this.myArray);
}

Service:

import { Injectable, } from '@angular/core';

@Injectable()
constructor() {}

private array = [];

save(array) {
    this.array = array;
}

fetch() {
    return this.array;
}

component B:

constructor(private sharingService: SharingService) { }

public yourArray = this.sharingService.fetch();

For further information on services and component interaction, refer to the Angular site tutorial.

Answer 2

If A and B do not have a parent/child relationship, the most effective approach is to utilize a shared service which is injected into their constructors.

component A:

constructor(private sharingService: SharingService) { }

public myArray = [];

func() {
    ...
    this.sharingService.save(this.myArray);
}

Service:

import { Injectable, } from '@angular/core';

@Injectable()
constructor() {}

private array = [];

save(array) {
    this.array = array;
}

fetch() {
    return this.array;
}

component B:

constructor(private sharingService: SharingService) { }

public yourArray = this.sharingService.fetch();

For further information on services and component interaction, refer to the Angular site tutorial.

Answer 3

Answer №2

My opinion aligns with the response from @Deceptive Dessert. Utilizing a service is crucial for facilitating data sharing between distinct components. The issue you're encountering with 'undefined' stems from invoking the fetch method within the constructor without specifying an initial value for the array, as demonstrated in: private array. To mitigate this, ensure that you either assign an initial value to the array or refrain from calling the fetch method until the array is no longer considered undefined.

Answer 4

My opinion aligns with the response from @Deceptive Dessert. Utilizing a service is crucial for facilitating data sharing between distinct components. The issue you're encountering with 'undefined' stems from invoking the fetch method within the constructor without specifying an initial value for the array, as demonstrated in: private array. To mitigate this, ensure that you either assign an initial value to the array or refrain from calling the fetch method until the array is no longer considered undefined.

Transferring data between two TypeScript files of different Angular 2 components

Answer №1

component A:

Service:

component B:

Answer №2

Similar questions

Exploring Scroll Functionality for Inner Components Within Mat-tab

The argument supplied to the `openUri()` function should be in the form of a string, but instead, it is displaying as "undefined". Please ensure that the initial parameter provided to either `mongoose.connect()`

Using React.js to Retrieve Data from the Server without AJAX Calls

Is it possible to navigate directly to a route using hashRouter instead of BrowserRouter after building a react app with webpack?

The Art of Angular Architecture: Transmitting Information from Parent to Child

Tips for efficiently exporting and handling data from a customizable table

Discovering the specific type of an object property in TypeScript

Is there a way to avoid a child div overflowing its parent div when adjusting the CSS zoom property?

Is there a way to verify the success of a Firebase push event upon submitting a form?

Vuejs dropdown selections are not working as expected due to a bug

UI-Router is failing to transition states when $state.go() is called

Is there a way to trigger the opening of a new file or page when a CSS animation comes to an end?

Troubleshooting: jQuery.load function not functioning properly within ASP.NET MVC

Guide to toggling the anchor tag functionality as a button with JavaScript

Dynamically Updating Radio Button Status in Angular 7 Using Material Design

Set the mat-option as active by marking it with a check symbol

Get the unique _id value of the object once it has been added to an established collection

Can you explain the meaning behind this TypeScript variable declaration syntax?

What is the process for reinserting a list item into the nested elements?

Can a search engine algorithm be developed to display an iframe based on the keywords entered in the search query?