<ng-container *ngIf="cartItems$ | async as cartItems">
  <div class="dropdown" [ngClass]="{'mx-lg-3 mx-md-3 mx-sm-2 mx-2': cartItems && cartItems.length > 0}">
    <button class="btn btn-link dropdown-toggle mr-0" href="#cartMenu" data-toggle="dropdown" #btnDropdown
      [class.px-3]="cartItems?.length <=0" [class.pl-1]="cartItems?.length > 0">
      <i class="fa fa-shopping-cart fa-lg"></i>
    </button>
    <span class="badge badge-primary p-1 position-absolute" *ngIf="cartItems?.length > 0" href="#cartMenu"
      data-toggle="dropdown" #btnDropdown>{{cartItems?.length}}</span>
    <div class="dropdown-menu dropdown-menu-right m-0 p-0 pull-right" aria-labelledby="dropdownMenuButton"
      id="cartMenu">
      <ng-container *ngTemplateOutlet="listItems; context: {lineItems:cartItems}"></ng-container>
      <ng-template #listItems let-lineItems="lineItems">
        <ul class="list-group p-0" *ngIf="lineItems?.length > 0; else noData">
          <ng-container *ngFor="let item of lineItems; let i = index; trackBy: trackById">
            <li class="media list-group-item d-flex"
              [ngClass]="{'last-list-item': (lineItems?.length === (i+1)), 'border border-bottom-secondary' : (lineItems?.length === (i+1)), 'first-list-item': ((i === 0))}"
              *ngIf="item?.LineType === 'Product/Service' && item?.Product">
              <img class="align-self-center" [src]="sanitizer.bypassSecurityTrustUrl(item.Product?.IconId | image)"
                alt="{{ 'COMMON.ALT_TEXT_IMAGE' | translate }}">
              <div class="media-body ml-3">
                <h6 class="m-0 d-flex justify-content-between align-items-center">
                  <div>
                    <a href="javascript:void(0)" [routerLink]="[productLink, item.Product[identifier], item.Id]" 
                    *ngIf="item?.Product && item?.Id && enableProductLink(item)  ; else read">
                      {{item.Product?.Name}}
                      <b *ngIf="item?.AddedBy==='Constraint Rule'" class="badge badge-pill badge-primary"
                        title="Included">{{ 'COMMON.INCLUDED' | translate}}</b>
                    </a>
                    <ng-template #read>
                      {{item.Product?.Name}}
                      <b *ngIf="item?.LineStatus === 'Cancelled'" class="badge badge-pill badge-danger">
                        {{item?.LineStatus}}
                      </b>
                    </ng-template>
                  </div>
                  <button *ngIf="item?.IsPrimaryLine && !(disabled$ | async)" class="btn btn-link p-0 m-0"
                    (click)="removeCartItem(item, $event)" [ladda]="item?._metadata?.deleting" data-style="zoom-in"
                    data-spinner-color="black">
                    <span class="fa fa-trash"></span>
                  </button>
                </h6>
                <span class="d-block small">{{item.Product?.ProductCode}}</span>
                <div class="d-flex align-items-center">
                  <apt-input-field inline="true" [(ngModel)]="item.Quantity" [entity]="entity" field="Quantity"
                    (change)="changeItemQuantity(item)" [inputSize]="'small'" [inline]="true"
                    [readonly]="checkForReadOnly(item) || (disabled$ | async)" class="w-50 mt-2">
                  </apt-input-field>
                 
                  <strong class="d-flex ml-auto mx-1" *ngIf="item?.BaseExtendedPrice; else pricemask">
                    <span>{{item?.BaseExtendedPrice | localCurrency | async}}</span>
                  </strong>
                </div>
              </div>
            </li>
          </ng-container>
          <ng-container *ngTemplateOutlet="footersection; context: {lineItems: unsavedItems, isConfig: config?.isConfig,
                          relatedTo: config?.relatedTo, productId: config?.productId}">
          </ng-container>
        </ul>
      </ng-template>

      <ng-template #footersection let-lineItems="lineItems" let-relatedTo="relatedTo" let-productId="productId">
        <li class="list-group-item">
          <div class="d-flex justify-content-between">
            <label class="custom-label text-left" id="cartTotal">{{ 'MINI_CART.CART_TOTAL' | translate}}</label>
            <strong class="d-inline-flex">
              <span>{{cartTotal?.NetPrice | localCurrency | async}}</span>
            </strong>
          </div>
        </li>
        <li class="list-group-item d-block-flex viewCart">
          <button class="btn btn-primary btn-raised btn-block" id="viewCart" (click)="navigateToCart()">
            {{ 'MINI_CART.VIEW_CART' | translate}}
          </button>
        </li>
      </ng-template>

      <ng-template #noData>
        <ul class="list-group p-0">
          <li class="list-group-item bg-light">
            <label class="custom-label text-left" *ngIf="!isCartActive">{{ 'MINI_CART.INACTIVE_CART_MESSAGE' |
              translate}}</label>
            <label id="emptyCart" class="custom-label text-left" *ngIf="isCartActive">{{ 'MINI_CART.YOUR_CART_IS_EMPTY'
              |
              translate}}</label>
          </li>
        </ul>
      </ng-template>
    </div>
  </div>
</ng-container>

<ng-template #pricemask>
  <span class="d-flex ml-auto">
    <i class="fa fa-ellipsis-h" aria-hidden="true"></i>
    <sup class="m-1">
      <i class="fa fa-asterisk fa-xs" aria-hidden="true"></i>
    </sup>
  </span>
</ng-template>

./mini-cart.component.scss

:host {
  position: relative;
  display: block;
  z-index: 10000;

  img {
    max-width: 3rem;
  }

  .dropdown-menu {
    transform: translateX(15%) !important;
    min-width: 21rem;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.175);
  }

  span.badge {
    top: 15px;
    right: 5px;
    cursor: pointer;
  }

  .dropdown-menu {
    max-height: 80vh;
    overflow-y: auto;
  }

  button.dropdown-toggle::after {
    display: none;
  }
 

  .badge-pill.badge-primary {
    font-size: 0.5rem;
  }
}

.custom-label {
  line-height: 1.5;
  font-size: 0.875rem;
}

.viewCart{
  position:sticky;
  bottom: 0;
  right:0;
  left:0;
}