RxJS subscription in Angular

It is common practice to subscribe to Observables while working with RxJS. This establishes a Subscription. We can manage these subscriptions more easily with the help of the methods provided by this object.

What is the significance of subscription management?

Until an observable is subscribed to in your code, no action occurs; however, once a subscription is established, the process initiates. Now whenever an Observable emits a new value, its Observers execute the code that was configured during the subscription.

Created with the "subscribe" method, a Subscription in RxJs has one major function: "unsubscribed"; this lets you stop observing the observable event. Calling the "unsubscribed" when you no longer need the subscription is crucial in your code to stop memory leaks. If we fail to consider the management and cleanup of the subscriptions we generate, we may introduce a variety of issues into our applications.

How Subscription works?
An agreement to receive this data is typically referred to as a subscription.
A subscription includes notifications for the management of error and completion events, as well as information regarding whether or not it has been unsubscribed.
Observables/Publishers will be connected to subscribers/obeservers/consumers. If they detect a new value or change in data, they will execute code using Subscription, and all subscribed components will receive the updated result.   
The updated results can only be accessed by components that have subscribed to an observable. 

Why We Need to Handle Subscription?
A lack of subscription handling can cause a variety of issues in your software, the most serious of which is memory leak.

Above, we are subscribing to external service with .subscribe() function.
Right now, we didn't handle the subscription that we are using above.

Problem - Memory Leak
Even if the user navigates to another page (for example, the post-detail page), the Observable continues to refer to this component, which is no longer required.
So subscriptions remain active even after the components (after listing) are removed, implying that any subscription that remains active after the component is eliminated continues to consume unnecessary RAM.
Because subscriptions are not packed with the component, they must be disposed of alongside the components/observers/consumers.

The user will undoubtedly visit this component frequently over time and subsequently move on. Consequently, if the subscription is not correctly cleaned up over time, it will accumulate. Consider a situation in which a significant number of your components are subscription-based and not a single component is being managed appropriately. As a consequence, your application's memory usage will radically increase without necessity, potentially leading to a crash or bad performance.

Subscription LIfe Cycle

Creation
When you use the subscribe() function on an Observable, a subscription is created; at this point, the subscription is active and ready to listen for data emission from the Observable.

Data emission
Once the subscription is activated above, it is ready to listen for any data emission from the Observable.
The callback function associated with the subscription is triggered based on the type of data emitted by the Observable (next, error, complete).

Disposal
If you don't destroy the subscription after you've finished with the data released by the observable or the component that holds the subscription (observer), you'll run into problems memory leak. To unsubscribe from the subscription we created above, utilise the unsubscribe() method on the ngOnDestroy() function.

Collection of subscriptions
Add method enables the collection of additional subscriptions within a single Subscription instance, and subsequently, the unsubscription of all subscriptions at once.