Content projection with ngIf and asyncPipe: Observables still subscribed to even though they are not in the DOM

Bug Report

Affected Package

The issue is caused by package @angular/core

Is this a regression?

Not sure

Description

Using asyncPipe on an observable that is ngIf’d out of the DOM still seems to fire the observable when combined with content projection (ng-content). I expected the observable to only be subscribed to when the content in the expansion bar is expanded (and thus present in the DOM).

This is a simplified example, where in my application because of this we are seeing multiple network calls happening upfront where we only want them to happen upon expansion of the expansion bar.

Minimal Reproduction

https://stackblitz.com/edit/angular-observable-ngif-behaviour If you inspect the DOM you will note that the contents of the expansion bars are not present, but the console shows that the observables fired.

[ramanathan23]

Content projection will be resolved at first before projecting it. For these kind of scenarios we can use ng-templates which we can have better control over ng-content. Please have a look at the below link,

https://stackblitz.com/edit/angular-observable-ngif-behaviour-rlhwzm?file=src%2Fapp%2Fapp.component.ts

I modified your code with ng-template for the use case.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}