To put it plainly, the async pipe comes in handy when dealing with an observable array like Products$. If you prefer using it in a TypeScript file, you can simply subscribe to it and access the data as illustrated below:

Products$.subscribe((products) => {
   console.log(Products);
});

To begin, establish a new variable named 'products' in your TypeScript file. When you declare 'Products$', assign an expression to the right side. Include the following pipe within that expression:

.pipe(tap(someproducts => this.products = someproducts))

This will create a side effect, ensuring that when the template asynchronously subscribes, the 'products' variable will be properly initialized.

Be cautious not to subscribe to 'products$' again in the TypeScript file, as this may result in duplicate subscriptions or repeated backend calls.

After conducting thorough research, I have successfully identified the solution that should address all of your inquiries.

While there is no succinct answer to your question, I will make every effort to provide a comprehensive explanation. If you encounter any difficulties in comprehension, feel free to conduct further research and then consult with me for assistance.

Let's visualize this scenario as a `product.service` file, which may contain an array of either an `Observable<T>`, `Subscribable<T>`, or `Promise<T>` obtained from an API Endpoint. Our aim is to resolve it and retrieve its value in our '.ts' file using an async pipe, thereby eliminating the need for manual unsubscriptions.

To ensure clarity, I am providing type annotations for the values as well.

Below is the content of our `product.service.ts` file, serving as a component of Angular's Dependency Injection system, making them accessible for utilization throughout the application.

import { Injectable } from '@angular/core';
import { Observable, shareReplay } from 'rxjs';

import { ProductsList } from '../products.interface';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root',
})
export class ProductsService {

  constructor(private http: HttpClient) {}

  // You can also use this.
  // getProducts$: Observable<ProductsList[]> = this.http.get<ProductsList[]>('/api/rooms'). 
  getRooms$: Observable<ProductsList[]> = this.http.get<ProductsList[]>('/api/products').pipe(shareReplay(1));
}

I made an attempt to implement some logic using the `AsyncPipe but encountered a null value return. This approach is not advisable, and I will explain the reasons shortly; starting from

import { AsyncPipe } from '@angular/common';

Now, let's consider the implementation within our `app.component.ts` Component.

import {
  OnInit,
  OnDestroy,
  AfterViewInit,
} from '@angular/core';
import { Observable, Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

import { ProductsList } from './products/products.interface';
import { ProductsService } from './products/services/products.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
  products$!: ProductsList[] | null;

  private destroy$: Subject<void> = new Subject<void>();

  constructor(
    private productsService: ProductsService,
  ) {
    this.productsService.getProducts$
      .pipe(takeUntil(this.destroy$))
      .subscribe((products: productsList[]) => {
        this.products$ = products;

        console.log(this.products$); // Correct Value
      });

    // console.log(this.products$); // Undefined Value
  }

  anyOtherFunction(): void {
    // console.log(this.products$); // Correct Value
  }

  ngOnInit(): void {
    // console.log(this.products$); // Undefined Value
  }

  ngAfterViewInit(): void {
    // console.log(this.products$); // Undefined Value
  } 

  ngOnDestroy(): void {
    // Automatically unsubscribe when the component is destroyed
    this.destroy$.next();
    this.destroy$.complete();
  }
}

In each lifecycle hook mentioned above (ngOnInit, ngAfterViewInit, ngOnDestroy), we notice that this.products$ remains undefined. To access the value of this.products$ during any lifecycle event, re-subscription is necessary; like so:

this.productsService.getProducts$
  .pipe(takeUntil(this.destroy$))
   .subscribe((products: productsList[]) => {
      this.products$ = products;

      console.log(this.products$); // Correct Value
});

In this specific case, we are opting out of utilizing Angular's AsyncPipe and instead managing subscriptions manually. While this introduces the obligation for manual unsubscription, it serves a purpose explained shortly;

Nonetheless, a critical distinction exists – manual unsubscription is no longer mandatory, as it now automatically occurs upon destruction of the component. Multiple subscribers can be added as needed, and they will all be unsubscribed automatically.

Don't forget to incorporate ngOnDestroy, as illustrated in the app.component.ts file

ngOnDestroy(): void {
  // Automatically unsubscribe when the component is destroyed
  this.destroy$.next();
  this.destroy$.complete();
}

• This methodology employs a destroy$ subject to manage the component's lifecycle, ensuring automatic handling of subscription cleanup upon component destruction.

• During the ngOnInit lifecycle stage, we subscribe to the getProducts$ observable utilizing takeUntil. This subscription is configured to automatically unsubscribe once the destroy$ subject emits.

• As data arrives, it gets stored in the products property, consequently becoming readily usable within the component's logic and templates, albeit not within lifecycle hooks.

• The ngOnDestroy hook finalizes the destroy$ subject upon component destruction, guaranteeing proper management of any pending subscriptions.

This method offers an equivalent level of subscription management as the asynchronous approach, although it requires some manual configuration. Nevertheless, it effectively mitigates memory leaks and ensures appropriate subscription cleanup upon component termination.

It is possible to have multiple observables for subscription

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Observable, Subject, merge } from 'rxjs';
import { ProductsList } from './products/products.interface';
import { ProductsService } from './products/services/products.service';
import { takeUntil } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit, OnDestroy {
  products: ProductsList[] | null = null;
  otherData: any; // Additional data properties can be included

  private destroy$: Subject<void> = new Subject<void>();

  constructor(private productsService: ProductsService, private otherService: OtherService) {}

  ngOnInit(): void {
    // Combine multiple observables using merge
    const products$ = this.productsService.getProducts$.pipe(takeUntil(this.destroy$));
    const otherData$ = this.otherService.getOtherData$.pipe(takeUntil(this.destroy$));

    // Merge the observables into a single subscription
    const combined$ = merge(products$, otherData$);

    // Subscribe to the combined observable
    combined$.subscribe((data) => {
      if (data instanceof ProductsList) {
        this.products = data;
      } else {
        this.otherData = data;
      }
    });
  }

  ngOnDestroy(): void {
    // Automatically unsubscribe when the component is destroyed
    this.destroy$.next();
    this.destroy$.complete();
  }
}

The usage of the merge operator combines several observables (products$ and otherData$) into a singular observable (combined$). Consequently, by subscribing to combined$ and appropriately handling various data types, efficient processing is ensured.

OR alternatively, adhere to the recommended practice provided by Angular - employ the Async Pipe in your HTML file for seamless handling of asynchronous data binding.

<ng-container *ngIf="products$ | async as products"> {...} </ng-container>

If you're inclined towards experimentation, similar to my own preferences, you may choose to explore alternative methods by initially engaging with the first approach.