Angular Templates Examples

angulat-templates.html

  <div class="product-expanded-details col-5 col-lg-6" *ngIf="(_mode === 'expanded')">
    <!-- Conditional template Outlet (see: https://stackoverflow.com/a/52448001/1116959) -->
    <ng-container *ngTemplateOutlet="_product?.highlighted ? highlightedDetails : normalDetails; context: { product: _product }">
    </ng-container>
  </div>
</div>

<!-- Product - Normal Details template -->
<ng-template #normalDetails let-product="product">
  <div class="variant-details" *ngIf="product?.type === 'single' || product?.type === 'multi'">
    <ng-container *ngTemplateOutlet="productVariant; context: { variant: product?.selectedVariant }"></ng-container>
  </div>
  <div class="bundle-details" *ngIf="product?.type === 'bundle'">
    <ng-container *ngTemplateOutlet="productBundle; context: { bundle: product }"></ng-container>
  </div>
</ng-template>

<!-- Product - Highlighted Details template -->
<ng-template #highlightedDetails let-product="product">
  <cc-background-pattern class="highlighted-details-background-pattern" pattern="non-repeatable-shapes">
    <ng-container *ngTemplateOutlet="normalDetails; context: { product: product }"></ng-container>
  </cc-background-pattern>
</ng-template>