RxJS Subscriptions Handling in Angular

Observer
An observer is a recipient of values. An observer is an entity that is interested in the values emitted by the observable. In RxJS, an Observer consists of a collection of callbacks: next, error, and complete.

An observer possesses three callbacks, corresponding to each form of notification that an Observable may produce. Each callback can respond based on the notification of the observable event. An observer may not define all three callbacks, as it might not choose to respond to all notifications. In such instances, you may establish an observer with solely the necessary callbacks.

Subscription
A RxJS subscription is an object formed with "subscribe" and has one major method, "unsubscribe" to stop listening to the observable event.

Handling Subscription?  
Let's Start with subscription management, by using following 6 different modes. 

1. By using async pipe
Async pipes should always be our first choice. Async pipe handles subscribe and unsubscribe for you. It stops following the observable when the component is destroyed. It also detects changes internally. Your.ts file will have less code using async pipe. Using less code reduces bugs.
This async pipe subscribes to an Observable and gets the most recent value that was sent out. The async pipe keeps looking for updates in the component, and when the component is destroyed, it instantly ends the subscription.  

The async pipe displays currentTime from the currentTime observable. The async pipe subscribes to currentTime and updates the display with the latest emission.

Disadvantage: each time the UI re-renders in Angular, any observable that is async piped will be triggered, resulting in the execution of any functions, operations, or side effects as frequently as the UI re-renders. So If an expensive operation is performed between the pipe, it will be resource-intensive. Please bear this in mind and transfer the costly operations to a distinct stream of observables.

2. Use RxJS first operator
Your observable subscription will be unsubscribed after one emission with first operator. We can pass in a function as our predicate or validator to ensure that this operator emits the desired value. If we're positive we'll only need one subscription emission, choose this operator.

When array emits a value, first() will pass the value to parseData and then unsubscribe!

3. Use take(n) operator
With the take operator, we can tell the Observable how many values to send us before we unsubscribe. The take operator, similar to the first operator, accepts a finite number of emissions; however, it is capable of accepting multiple emissions. Another distinction is that first will generate an error if the stream completes prior to emitting a value, whereas take will not. Employ this operator when it is known that only a finite number of emissions is required.

Consider incorporating a filter operator along with take to ensure that the nth emission received holds value for your analysis.

4. takeWhile(notifier) Operator
The takeWhile operator maintains the subscription as long as a specified condition is true. This operator will accept a predicate or validator function to ascertain whether the condition is true or false. The optimal scenario is to maintain subscription upon hovering over an element and to terminate it upon exiting.

5. takeUntil(notifier) Operator
The takeUntil operator will know when to terminate the subscription if it has accepted an observable as its notifier. 
After receiving the notifier as an argument to the takeUntil operator, it will internally subscribe to the specified observable; however, it will unsubscribe from both the source and the notifier observables once an emit is sent by the notifier. The notifier observable is unsubscribed by takeUntil internally, therefore it is unnecessary to unsubscribe or complete it if no one else is subscribed. The takeWhile operator is the best option if none of the others were applicable to your case. takeUntil copies the source observable and sends out the values that source sent out. TakeUntil also keeps an eye on the notifier observable that was given to it. As soon as the notifier observable starts to emit, the source observable stops releasing and finishes. This notifier observable is commonly implemented as a Subject.

This is how the operator works:
Subscribe to both a source and a notifier visible
Send the new value to the watcher when it comes in from a source observable.
If the notifier observable sends a value, unsubscribe from both of them and send the observer the full notice.
Send the complete notification to the observer when the source observable is done.
Send the error message to the observer if the source observable throws an error.

When to Use: If you have more than one subscription and need to manage them all by hand, the takeUntil method is a good way to do it.

The takeUntil operator enables you to subscribe to an observable and automatically unsubscribe when another observable emits a value. The second observable is typically a Subject that emits when a component or service is destroyed.

takeUntil(notifier) Vs Manual Unsubscription
Manual unsubscription is maintaining a reference to every subscription and specifically calling unsubscribed when it is no longer required. This approach allows you direct management over every single subscription.