Skip to content

Instantly share code, notes, and snippets.

@leo6104
Created April 19, 2023 17:25
Show Gist options
  • Save leo6104/dc65a3ced62f9366c4d53ef085519ccc to your computer and use it in GitHub Desktop.
Save leo6104/dc65a3ced62f9366c4d53ef085519ccc to your computer and use it in GitHub Desktop.
angular/angular issue 49929 reproduction markup
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment