Transmit diverse data to a different (unassociated) module within Angular

Question

Transmit diverse data to a different (unassociated) module within Angular

I am struggling to pass the content of a variable from one component to another in Angular. The two components are on different pages and not directly related, but I need to access the value of the variable in the second component's TypeScript file without displaying it on any page. Despite trying various tutorials, I have not been successful and feel lost about how to proceed.

Here is the file layout (I need to transfer variable content from the week component to the day component)

The code snippet below is located in p1_week-chart.component.ts:

else if (chart.data.labels[activeEls[0].index] == "Wednesday") {
          this.dayClicked = new Date(this.today);
          this.dayClicked.setDate(this.dayClicked.getDate() + 2);
          console.log(this.dayClicked);
          //seeking to send the content of this.dayClicked to the other component (p1_day-chart.component.ts)

Extra information: I only require TypeScript for this scenario, no HTML elements needed.

Any assistance would be greatly valued!

(Despite experimenting with several solutions such as BehaviorSubject, I am unable to successfully transmit the content of this.dayClicked to the p1_day-chart.component.ts file. While I've seen similar queries raised here, none of the suggestions have resolved my issue.)

angular typescript angular-components angular15

Answer 1

Answer №1

When working with unrelated components, a straightforward method to achieve your desired outcome is by passing the variable from one component to another through emission. To do this, you can utilize a service like the following:

import { Injectable, EventEmitter } from '@angular/core';
import { Subscription } from 'rxjs/internal/Subscription';

@Injectable({
  providedIn: 'root'
})
export class DataTransferService {

  emitData = new EventEmitter();
  subscription: Subscription;

  constructor() { }

  sendUpdatedData(key, value) {
    var dataToEmit = [key, value];
    this.emitData.emit(dataToEmit);
  }
}

In the component where you are emitting the variable:

Import DataTransferService
Declare private dataTransfer: DataTransferService in the constructor Then, when you have the variable ready to be emitted, use the following code:

this.dataTransfer.sendUpdatedData("Item selected", this.selectedItem);

In the component that needs to receive the variable:

Import DataTransferService
Declare private dataTransfer: DataTransferService in the constructor

this.dataTransfer.subscription = this.dataTransfer.emitData.subscribe((emittedData) => { if (emittedData[0] == "Item selected") { this.receivedSelectedItem = emittedData[1]; } });

Answer 2

When working with unrelated components, a straightforward method to achieve your desired outcome is by passing the variable from one component to another through emission. To do this, you can utilize a service like the following:

import { Injectable, EventEmitter } from '@angular/core';
import { Subscription } from 'rxjs/internal/Subscription';

@Injectable({
  providedIn: 'root'
})
export class DataTransferService {

  emitData = new EventEmitter();
  subscription: Subscription;

  constructor() { }

  sendUpdatedData(key, value) {
    var dataToEmit = [key, value];
    this.emitData.emit(dataToEmit);
  }
}

In the component where you are emitting the variable:

Import DataTransferService
Declare private dataTransfer: DataTransferService in the constructor Then, when you have the variable ready to be emitted, use the following code:

this.dataTransfer.sendUpdatedData("Item selected", this.selectedItem);

In the component that needs to receive the variable:

Import DataTransferService
Declare private dataTransfer: DataTransferService in the constructor

this.dataTransfer.subscription = this.dataTransfer.emitData.subscribe((emittedData) => { if (emittedData[0] == "Item selected") { this.receivedSelectedItem = emittedData[1]; } });

Answer 3

Answer №2

Rephrased based on your input @s_frix,

The component that requires the variable currently has this setup:

import { SharedParamsService } from 'src/app/components/charts/testcomponent';

//Some irrelevant code has been omitted here

//if dayClickedReceived: any; is added and console logged in ngOnInit() it will show "undefined"

  constructor(private http : HttpClient,
    private globalvars: GlobalvarsService, //not important
           private adapter: DateAdapter<any>, //not important 
    private datePipe: DatePipe, //not important
  private sharedParams: SharedParamsService) { console.log(this.urlDate); }
//ignore the console log that's for something else
              
  ngOnInit(): void {
  this.sharedParams.subsVar = this.sharedParams.invokeFirstComponentFunction .subscribe((emitted) => { if (emitted[0] == "Day clicked") { this.dayClickedReceived = emitted[1]; } });
}

Encountering error: "Property 'dayClickedReceived' does not exist..." If I create it and log it later, it shows as "undefined" when I switch to the page requiring it. (The event logs correctly when sent, but remains undefined when needed on the other page)

The goal is for the variable to be sent and triggered on the sending page, then accessed and utilized on the receiving page

Answer 4

Rephrased based on your input @s_frix,

The component that requires the variable currently has this setup:

import { SharedParamsService } from 'src/app/components/charts/testcomponent';

//Some irrelevant code has been omitted here

//if dayClickedReceived: any; is added and console logged in ngOnInit() it will show "undefined"

  constructor(private http : HttpClient,
    private globalvars: GlobalvarsService, //not important
           private adapter: DateAdapter<any>, //not important 
    private datePipe: DatePipe, //not important
  private sharedParams: SharedParamsService) { console.log(this.urlDate); }
//ignore the console log that's for something else
              
  ngOnInit(): void {
  this.sharedParams.subsVar = this.sharedParams.invokeFirstComponentFunction .subscribe((emitted) => { if (emitted[0] == "Day clicked") { this.dayClickedReceived = emitted[1]; } });
}

Encountering error: "Property 'dayClickedReceived' does not exist..." If I create it and log it later, it shows as "undefined" when I switch to the page requiring it. (The event logs correctly when sent, but remains undefined when needed on the other page)

The goal is for the variable to be sent and triggered on the sending page, then accessed and utilized on the receiving page

Answer 5

Answer №3

I managed to make it work using the following method:

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

@Injectable({
  providedIn: 'root'
})
export class SharedParamsService {

  message: string
  
  constructor() { }
  
  setMessage(data) {
    this.message = data;
  }

  getMessage() {
    return this.message;
  }

}

//Sending component:
message: any;

constructor(private sharedParams: SharedParamsService){}

//When the action occurs and a variable needs to be sent
this.sharedParams.setMessage(this.dayClicked);


//Receiving component:
message: any;

constructor(private sharedParams: SharedParamsService){}

ngOnInit(): void {
    this.message = this.sharedParams.getMessage(); 
}
//Now 'this.message' holds the correct variable that was sent and can be used in this component later on.

Big thanks to everyone for sharing their answers, really grateful! :)

Answer 6

I managed to make it work using the following method:

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

@Injectable({
  providedIn: 'root'
})
export class SharedParamsService {

  message: string
  
  constructor() { }
  
  setMessage(data) {
    this.message = data;
  }

  getMessage() {
    return this.message;
  }

}

//Sending component:
message: any;

constructor(private sharedParams: SharedParamsService){}

//When the action occurs and a variable needs to be sent
this.sharedParams.setMessage(this.dayClicked);


//Receiving component:
message: any;

constructor(private sharedParams: SharedParamsService){}

ngOnInit(): void {
    this.message = this.sharedParams.getMessage(); 
}
//Now 'this.message' holds the correct variable that was sent and can be used in this component later on.

Big thanks to everyone for sharing their answers, really grateful! :)

Transmit diverse data to a different (unassociated) module within Angular

Answer №1

Answer №2

Answer №3

Similar questions

Encounter the error message "Unable to resolve all parameters" after including the Interceptor

Discover one among numerous interfaces available for handling Promise responses

What is the most efficient way to organize a JSON by a designated property in order to showcase it in an Angular data table?

Hiding collapsible navbar in Angular 7 when in responsive mode

Utilizing Typescript's baseUrl compiler configuration for node development

The name 'DEV' is not discoverable at the moment

Exploring the capabilities of Angular and Django Rest Framework applications

Is it possible to utilize a template literal with a variable as an object key?

Issue with TypeScript when using Redux DevTools Extension: "Type 'Window' does not contain property '__REDUX_DEVTOOLS_EXTENSION_COMPOSE__'."

Bespoke Socket.io NodeJS chamber

Troubleshooting problem with applying ngClass to rows and columns in ngFor

In Angular 2, you can include a routerLink in a child component that directs to the root

Tips for declaring a dynamically sized array in Typescript?

ability to utilize controller object through service

Troubleshooting a cross-component property problem involving a fetch request within a subscription

Issue with vue-class-component: encountering TS2339 error when trying to call a method within

Limiting the input of a user to a maximum of a five-digit integer with a maximum of two decimal points using Angular 2 and ngModel

How can one access the request context from within a decorator in Nest JS?

Is it possible to verify if an object matches a type without explicitly setting it as that type?

React.jsx: The type provided is invalid; it should be a string for built-in components or a class/function, but instead, an object or react-native-ui-datepicker was received

Transmit diverse data to a different (unassociated) module within Angular

Answer №1

Answer №2

Answer №3

Similar questions

Encounter the error message "Unable to resolve all parameters" after including the Interceptor

Discover one among numerous interfaces available for handling Promise responses

What is the most efficient way to organize a JSON by a designated property in order to showcase it in an Angular data table?

Hiding collapsible navbar in Angular 7 when in responsive mode

Utilizing Typescript's baseUrl compiler configuration for node development

The name '__DEV__' is not discoverable at the moment

Exploring the capabilities of Angular and Django Rest Framework applications

Is it possible to utilize a template literal with a variable as an object key?

Issue with TypeScript when using Redux DevTools Extension: "Type 'Window' does not contain property '__REDUX_DEVTOOLS_EXTENSION_COMPOSE__'."

Bespoke Socket.io NodeJS chamber

Troubleshooting problem with applying ngClass to rows and columns in ngFor

In Angular 2, you can include a routerLink in a child component that directs to the root

Tips for declaring a dynamically sized array in Typescript?

ability to utilize controller object through service

Troubleshooting a cross-component property problem involving a fetch request within a subscription

Issue with vue-class-component: encountering TS2339 error when trying to call a method within

Limiting the input of a user to a maximum of a five-digit integer with a maximum of two decimal points using Angular 2 and ngModel

How can one access the request context from within a decorator in Nest JS?

Is it possible to verify if an object matches a type without explicitly setting it as that type?

React.jsx: The type provided is invalid; it should be a string for built-in components or a class/function, but instead, an object or react-native-ui-datepicker was received

The name 'DEV' is not discoverable at the moment