Your component calls this.productService.getProducts() and stores the result in products$. The template binds to it with async pipe AND you call .subscribe() in ngOnInit to log the results. How many HTTP requests fire?

typescript export class ProductListComponent implements OnInit { products$: Observable<Product[]>;

ngOnInit() { this.products$ = this.productService.getProducts(); this.products$.subscribe(p => console.log('Logging:', p)); // subscription 1 } }

html

<div *ngIf="products$ | async as products"> <!-- subscription 2 --> <div *ngFor="let p of products">{{ p.name }}</div> </div>