angular/angular issue 49929 reproduction markup

sheet-detail.html

<ng-container *ngIf="{
    status: status$ | async,
    sheetId: sheetId$ | async,
    currentUser: currentUser$ | async,
    isPurchased: isPurchased$ | async,
    isReviewed: isReviewed$ | async,
    reviewStatus: reviewStatus$ | async,
    sidebarIsSticky: sidebarSticky$ | async
  } as d">
  <scroll-to-top [trackBy]="d.sheetId"></scroll-to-top>
  <ng-container *ngIf="!d.status.rejected; else errorBlank">
    <div class="global-container">
      <seo-tagset
        *ngIf="!!_sheet?.seoInfo"
        [title]="_sheet.seoInfo.title"
        [description]="_sheet.seoInfo.description"
        [metaImage]="_sheet.seoInfo.imageUrl"
        [image]="seoImage"
        [path]="(_sheet | toSheetLink)[0]"
        [type]="_sheet.isFree ? 'article' : 'product.item'"
        [keywords]="_sheet.seoInfo.keywords"
      ></seo-tagset>
      <seo-json-ld *ngIf="_sheet" [sheet]="_sheet"></seo-json-ld>
      <div class="sheet-container">
        <div class="main-content">
          <sticky-purchase-sidebar
            *ngIf="(sidebarSticky$ | async) !== 'lg'"
            ngSkipHydration="non-target:responsive"
            [sheet]="_sheet"
            [currentUser]="d.currentUser"
            [loading]="d.status.pending" />
        </div>

        <sticky-purchase-sidebar
          class="sticky"
          [sheetId]="d.sheetId"
          [sheet]="_sheet"
          [currentUser]="d.currentUser"
          [loading]="d.status.pending"
        ></sticky-purchase-sidebar>
      </div>
    </div>

    <div class="related-section" *ngLet="{
      musician: musician$ | async,
      artistOtherSheetsStatus: artistOtherSheetsStatus$ | async,
      artistOtherSheets: artistOtherSheets$ | async,
      recommendSheetsStatus: recommendSheetsStatus$ | async,
      recommendSheets: recommendSheets$ | async
    } as related">
      <div class="global-container">
        <amp-context
          context="artist-other-sheets"
          *ngIf="(!related.artistOtherSheetsStatus.rejected && related.artistOtherSheets.list?.length) || (!related.recommendSheetsStatus.rejected && related.recommendSheets?.length)">
          <div class="sheet-recommends" *ngIf="!!_sheet && _sheet.sheetId === d.sheetId">
            <sheet-list
              size="m"
              [title]="'artist-other-sheets' | translateExt: {artist: _sheet.author?.name}"
              [sheets]="related.artistOtherSheets?.list"
              [loading]="related.artistOtherSheetsStatus?.pending"
            ></sheet-list>

            <sheet-list
              size="m"
              [title]="'core.common.sheet-recommend' | translate"
              [sheets]="related.recommendSheets"
              [showArtist]="true"
              [loading]="related.recommendSheetsStatus.pending"
            ></sheet-list>

          </div>
        </amp-context>

        <mp-divider *ngIf="related.musician && related.artistOtherSheets"
                    variant="solid" direction="horizontal"
                    height="64px"></mp-divider>

        <amp-context *ngIf="related.musician" context="musician-other-songs">
          <card-item-group
            itemType="tag"
            [items]="related.musician?.songs.list"
          >
            <mp-section-title-wrapper
              [label]="related.musician?.localized"
              fontSize="16px"
              color="grayDark"
              labelGap="0 7px 0 12px"
              padding="16px 4px 24px 14px"
              [link]="['/musician', related.musician?.aliasUrl]"
            >
              <a left [routerLink]="['/musician', related.musician?.aliasUrl]" [attr.alt]="related.musician?.localized">
                <mp-avatar
                  left
                  [image]="related.musician?.imageUrl"
                  [alt]="related.musician?.localized"
                  size="36px"
                  borderRadius="18px"
                  boxShadow="0px 0px 0px 1px rgba(0, 0, 0, 0.06)"
                ></mp-avatar>
              </a>
              <tag-like-button
                [target]="related.musician?.category"
                [targetId]="related.musician?.tagId"
                variant="void"
                size="s"
                iconSize="20px"
              ></tag-like-button>
              <mp-pagination
                top
                adornment
                [labelPlacement]="'middle'"
                [result]="related.musician?.songs"
                (changePage)="loader$.next($event)"
              ></mp-pagination>
            </mp-section-title-wrapper>
          </card-item-group>
        </amp-context>
      </div>
    </div>
  </ng-container>
  <ng-template #errorBlank>
    <mp-error-blank
      minHeight="400px"
      [showError]="true"
      (retry)="sheetLoader$.next(null)"
    ></mp-error-blank>
  </ng-template>
</ng-container>