When it comes to communication between components, using subjects can be a convenient solution.
For instance, if there are 3 components – A, B, and C – and you want to pass data from component A to component C, you need to create a service first.
Take the following example:
export class DataTransferService {
private messageSubject = new Subject<string>();
Data$ = this.messageCommand.asObservable();
sendMessage(msg: string) {
this.messageSubject.next(msg);
}
}
In this scenario, a string value `msg` is passed from component A to the service. The service utilizes a subject that is observable and emits the value to those who have subscribed to the method in the service as illustrated below.
import { Component, OnInit } from '@angular/core';
import { DataTransferService} from '../services/message.service';
@Component({
selector: 'app-component-one',
templateUrl: './component-one.component.html',
styleUrls: ['./component-one.component.css']
})
export class AComponent implements OnInit {
constructor(private DataService: DataTransferService) { }
ngOnInit() {
}
const msg = "This is passed to the service";
yourActionMethod() {
this.DataService.sendMessage(msg);
}
}
Subsequently, we can subscribe to that service in component C so that the `msg` value is emitted.
import { Component, OnInit, OnDestroy } from '@angular/core';
import { DataTransferService} from '../services/message.service';
import { Subscription } from 'rxjs';
@Component({
selector: 'app-component-two',
templateUrl: './component-two.component.html',
styleUrls: ['./component-two.component.css']
})
export class CComponent implements OnInit, OnDestroy {
messageSubscription: Subscription;
message: string;
constructor(private DataService: DataTransferService) { }
ngOnInit() {
this.subscribeToMessageEvents();
}
ngOnDestroy(): void {
this.DataService.unsubscribe();
}
subscribeToMessageEvents() {
this.messageSubscription = this.DataService.Data$.subscribe(
(msg: string) => {
this.message = msg;
}
);
}
}
By following the code above, we can retrieve the `msg` value from AComponent using the `messageSubscription` in CComponent.