@pega/dx-component-builder-sdk/tests/assets/sdk-a/components/create/override-sdk/template/field-value-list/field-value-list.component.html

Utility for building custom UI components

<div *ngIf="displayMode$ === 'DISPLAY_ONLY'; else STACKED_LARGE_VAL" [ngClass]="label$ ? 'psdk-container-labels-left' : 'psdk-container-nolabels'">
  <div *ngIf="label$" class="psdk-grid-label">{{ label$ }}</div>
  <div class="psdk-val-labels-left">
    <ng-container *ngTemplateOutlet="valueTemplate"></ng-container>
  </div>
</div>

<ng-template #STACKED_LARGE_VAL>
  <div *ngIf="displayMode$ === 'STACKED_LARGE_VAL'" class="psdk-container-stacked-large-val">
    <div class="psdk-grid-label">{{ label$ }}</div>
    <div class="psdk-val-stacked">
      <ng-container *ngTemplateOutlet="valueTemplate"></ng-container>
    </div>
  </div>
</ng-template>

<ng-template #valueTemplate>
  <div *ngIf="isHtml$; else valueOnly" id="instruction-text" [innerHTML]="value$ || '---'"></div>
  <ng-template #valueOnly>{{ value$ || '---' }}</ng-template>
</ng-template>