Tips for exchanging information between two distinct components within Angular across separate modules

Question

Tips for exchanging information between two distinct components within Angular across separate modules

How do I share data between 2 different components from 2 different modules?

I have a dashboard module and a preference module, each with their respective components: dashboard.component.ts and preference.component.ts

In order to pass data between these components, I created a bar.service.ts service with the following code:

private messageSource = 'orderView';

  changeMessage(message: string) {
    this.messageSource = message;
  }

The preference.component.ts file includes the following code:

this.bar.changeMessage('groupByView');

And the dashboard.component.ts contains:

console.log(this.bar.messageSource);

Both modules are accessed through routing, with the preference module displaying the preference page and the dashboard module displaying the dashboard page.

However, when a user is on the preference page and changes the messageSource to 'groupByView', it does not reflect on the dashboard page.

The dashboard page always shows the value 'orderView' in the messageSource.

angular typescript

Answer 1

Answer №1

To incorporate observables into your Angular project, you can utilize the built-in functionalities.

Here is an example of setting up a service (YourService):

@Injectable() // { providedIn: 'root' } ? read below
export class YourService {
  messageSourceSubject: BehaviorSubject<string> = new BehaviorSubject<string>('orderView');
  messageSource: Observable<string> = this.messageSourceSubject.asObservable();

    publishMessage(message: string): void {
      this.messageSourceSubject.next(message);
    }
}

Make sure to register your service in the root service (providedIn property of Injectable) or within the providers array of your root module.

When accessing data in TypeScript within your components:

constructor(public yourService: YourService) {
  this.yourService
    .messageSource
    .subscribe(message => console.log(message));
  // Remember to unsubscribe either on destroy (`subscription.unsubscribe` - subscribe returns it) or using `pipe(takeUntil(this.destroy))`, which is an RxJS operator from `rxjs/operators`.
}

If you want to display this data in HTML:

<div>{{ yourService.messageSource | async }}</div>

The async keyword represents an AsyncPipe, available in CommonModule from @angular/common. Using AsyncPipe automatically handles unsubscribing for you.

For components using the ChangeDetectionStrategy.OnPush mode, ensure Angular triggers change detection in the future by utilizing the ChangeDetectorRef dependency and calling its markForCheck method when necessary.

Answer 2

To incorporate observables into your Angular project, you can utilize the built-in functionalities.

Here is an example of setting up a service (YourService):

@Injectable() // { providedIn: 'root' } ? read below
export class YourService {
  messageSourceSubject: BehaviorSubject<string> = new BehaviorSubject<string>('orderView');
  messageSource: Observable<string> = this.messageSourceSubject.asObservable();

    publishMessage(message: string): void {
      this.messageSourceSubject.next(message);
    }
}

Make sure to register your service in the root service (providedIn property of Injectable) or within the providers array of your root module.

When accessing data in TypeScript within your components:

constructor(public yourService: YourService) {
  this.yourService
    .messageSource
    .subscribe(message => console.log(message));
  // Remember to unsubscribe either on destroy (`subscription.unsubscribe` - subscribe returns it) or using `pipe(takeUntil(this.destroy))`, which is an RxJS operator from `rxjs/operators`.
}

If you want to display this data in HTML:

<div>{{ yourService.messageSource | async }}</div>

The async keyword represents an AsyncPipe, available in CommonModule from @angular/common. Using AsyncPipe automatically handles unsubscribing for you.

For components using the ChangeDetectionStrategy.OnPush mode, ensure Angular triggers change detection in the future by utilizing the ChangeDetectorRef dependency and calling its markForCheck method when necessary.

Answer 3

Answer №2

You can utilize the Subject feature.

View Demo

Bar Service Implementation:

import { Injectable } from '@angular/core';
import { Subject }    from 'rxjs';

@Injectable()
export class BarService {

// Observable string sources
  private messageSource = new Subject<string>();
  messageSource$ = this.messageSource.asObservable();


  constructor() { }


  changeMessage(message: string) {
     this.messageSource.next(message);
  }

}

Preference Component Logic:

import { Component, OnInit } from '@angular/core';
import { BarService } from '../bar.service';
@Component({
  selector: 'app-preference',
  templateUrl: './preference.component.html',
  styleUrls: ['./preference.component.css']
})
export class PreferenceComponent implements OnInit {

  constructor(private barService: BarService) { }

  ngOnInit() {

  }
  onChange() {
    this.barService.changeMessage(`Update dashboard at ${ new Date()}`)
  }

}

Preference Template Structure:

<p>
preference operational! 
<button (click)="onChange()">Refresh Dashboard</button>
</p>

Dashboard Component Setup:

import { Component, OnInit } from '@angular/core';
import { BarService } from '../bar.service';
@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {

  changeMessage: any;
 constructor(private barService: BarService) { }

  ngOnInit() {
    this.barService.messageSource$.subscribe((res)=>{
      this.changeMessage = res;
    });
  }

}

Dashboard Template Display:

<p>
dashboard functioning well! {{changeMessage}}
</p>

Answer 4

You can utilize the Subject feature.

View Demo

Bar Service Implementation:

import { Injectable } from '@angular/core';
import { Subject }    from 'rxjs';

@Injectable()
export class BarService {

// Observable string sources
  private messageSource = new Subject<string>();
  messageSource$ = this.messageSource.asObservable();


  constructor() { }


  changeMessage(message: string) {
     this.messageSource.next(message);
  }

}

Preference Component Logic:

import { Component, OnInit } from '@angular/core';
import { BarService } from '../bar.service';
@Component({
  selector: 'app-preference',
  templateUrl: './preference.component.html',
  styleUrls: ['./preference.component.css']
})
export class PreferenceComponent implements OnInit {

  constructor(private barService: BarService) { }

  ngOnInit() {

  }
  onChange() {
    this.barService.changeMessage(`Update dashboard at ${ new Date()}`)
  }

}

Preference Template Structure:

<p>
preference operational! 
<button (click)="onChange()">Refresh Dashboard</button>
</p>

Dashboard Component Setup:

import { Component, OnInit } from '@angular/core';
import { BarService } from '../bar.service';
@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {

  changeMessage: any;
 constructor(private barService: BarService) { }

  ngOnInit() {
    this.barService.messageSource$.subscribe((res)=>{
      this.changeMessage = res;
    });
  }

}

Dashboard Template Display:

<p>
dashboard functioning well! {{changeMessage}}
</p>

Tips for exchanging information between two distinct components within Angular across separate modules

Answer №1

Answer №2

Similar questions

When an item in the accordion is clicked, the modal's left side scroll bar automatically scrolls to the top. Is there a solution to prevent this behavior and

extract objects from an array of objects based on a specified array

Preserve the timestamp of when the radio query was chosen

The HTTP GET request was successful, however, there is no data being displayed on the screen

Angular 7 - Creating tooltips with multiline text

"Exploring the world of unit testing with Chutzpah and Jasmine in TypeScript

Tips for adding an item to an array within a Map using functional programming in TypeScript/JavaScript

Why is the lifecycle callback not being triggered?

PrimeNG editor: The value is not being displayed in the formControl

Sending intricate JavaScript object to the controller. The array of objects is consistently empty

Error: Unable to locate binding.gyp file

Issue with Angular @Input when navigating back in browser causing component to not render

Retrieve a zip file using Angular RX and extract its contents

The function of edit does not exist

Exploring the functionality of angular reactive forms in creating intricate JSON structures

Update the js file by incorporating the import statement

How can we enhance the React.Component interface by adding a "direct" property?

Looping issue with ForEach in Typscript with Firebase Functions

Show the distinct values of a mat-select element that retrieves information from an Angular filtered dataSource

Retrieve the file from the input field