Angular : Understanding Subject in Angular for Managing Data Streams

Subject is a powerful class in Angular, part of RxJS, used to manage asynchronous data streams. It enables you to create an observable and observer simultaneously, simplifying data flow management in your application. Here's a step-by-step guide on how to use Subject in Angular:

Step 1: Import the necessary modules Ensure you import the required modules in the component or service where you intend to use Subject.

import { Subject } from 'rxjs';

Step 2: Create a Subject instance In your component or service, create a Subject instance by declaring a variable and assigning it a new Subject.

private dataSubject: Subject<any> = new Subject<any>();

Step 3: Emit data with the Subject To send data through the Subject, use the 'next()' method of the Subject. This method emits the data to all the subscribers listening to the Subject.

sendDataToSubject(data: any) {
  this.dataSubject.next(data);
}

Step 4: Subscribe to the Subject To receive the data emitted by the Subject, subscribe to it in your component or service using the 'subscribe()' method.

subscription: Subscription;

ngOnInit() {
  this.subscription = this.dataSubject.subscribe((data) => {
    // Process the received data
    console.log('Received data:', data);
  });
}

Step 5: Unsubscribe from the Subject To avoid memory leaks when the component or service is destroyed, remember to unsubscribe from the Subject. Do this in the 'ngOnDestroy()' method.

ngOnDestroy() {
  this.subscription.unsubscribe();
}

Now, whenever you call 'sendDataToSubject()' with some data, the subscribed component or service will receive and process the data accordingly.

Subject is particularly useful for sending data between components or services without a parent-child relationship. It provides a communication channel that is independent of the component hierarchy.

Keep in mind that Subject is not shared among multiple subscribers. Each subscriber will receive its copy of the emitted data. If you need to share data among multiple subscribers, consider using 'BehaviorSubject' or 'ReplaySubject', which are also part of RxJS and built on top of Subject.

Happy lerning!! 😊