Angular how to communicate between two Components by using Observable & Subject

In Angular, you can facilitate communication between two components using the Observable and Subject classes from the RxJS library. This approach is commonly known as the Observer pattern or the Publish-Subscribe pattern. Here’s an overview of how you can use Observable and Subject for communication between components:

1. Observable: An Observable represents a stream of data or events that can be observed over time. In the context of Angular, Observables are often used to represent asynchronous data streams, such as HTTP requests, user input events, or data changes within the application.
2. Subject: A Subject is a special type of Observable that allows values to be multicasted to multiple Observers. It is both an Observable and an Observer. Subjects maintain a list of Observers, and when a new value is emitted, it is sent to all registered Observers.

Using Observable and Subject for communication between two components involves the following steps:

1. Create a Service: First, you need to create a shared service that will manage the communication between the components. This service will contain an instance of Subject (or BehaviorSubject if you need to provide an initial value), which will serve as the communication channel.
2. Publish Data: Within the service, you can define methods to publish data to the Subject. These methods will be called by the component that wants to send data.
3. Subscribe to Data: Each component that wants to receive the data will subscribe to the Subject within the service. When new data is published to the Subject, all subscribed components will receive the data.

Scenario: suppose if button clicked on other component you want to perform some action on another component.

In call.service.ts

import { Observable } from 'rxjs';
import { Subject } from 'rxjs/Subject';


@Injectable()
export class CallService {
&nbsp;&nbsp;&nbsp; private subject = new Subject<any>();

sendClickCall(message: string) {
    this.subject.next({ text: message });
}

getClickCall(): Observable<any> {
    return this.subject.asObservable();
}
}

Component from where you want to call observable to inform another component that button is clicked

import { CallService } from "../../../services/call.service";

export class MarketplaceComponent implements OnInit, OnDestroy {
  constructor(public Util: CallService) {

  }

buttonClickedToCallObservable() {
   this.Util.sendClickCall('Sending message to another comp that button is clicked');
}

Component where you want to perform action on button clicked on another component

import { Subscription } from 'rxjs/Subscription';

import { CallService } from "../../../services/call.service";


ngOnInit() {

this.subscription = this.Util.getClickCall().subscribe(message => {

this.message = message;

console.log('---button clicked at another component---');

//call you action which need to execute in this component on button clicked

});

}