Angular6 如何在8中单击购物车图标后显示添加的产品详细信息

我试图在我点击购物车图标后显示添加的产品详细信息，或者如果我添加了任何一种类似的产品。最初不需要显示“您的购物车项目”添加的产品框。我不知道如何这样做。如果有人知道，请帮助找到解决方案

addtocart-dir.ts：

 <div class="card text-center">
  <div class="card-header">
    Your Cart Items
    <button type="button" class="btn btn-sm btn-warning float-right">
        Total items <span class="badge badge-light">{{cart.cartItemsList.length}}</span>        
    </button>
    <button type="button" class="btn btn-sm btn-danger mr-2 float-right" (click)="emptyCart()" *ngIf="cart.cartItemsList && cart.cartTotal">
       Empty Cart       
    </button>
  </div>
  <div class="card-body">  
    <table class="table">
      <thead>
        <tr>      
          <th scope="col">Product</th>
          <th scope="col">Price</th>
          <th scope="col">Qty</th>
          <th scope="col">Total</th>
        </tr>
      </thead>
      <tbody>
        <tr>

        </tr>
        <tr *ngFor="let itm of cart.cartItemsList ">      
          <td class="text-left">{{itm.name}}</td>
          <td>{{itm.price/itm.qty}} x</td>
          <td class="w30">
            <div class="input-group input-group-sm mb-3">
              <div class="input-group-prepend">
                <button class="btn btn-info" type="button" (click)="changeQty(itm.pid,1,'')">+</button>
              </div>
              <input type="text" class="form-control text-center" value="{{itm.qty}}" #qtyRef (keyup)="changeQty(itm.pid,qtyRef.value,'replace')" >
              <div class="input-group-append">
                <button class="btn btn-danger" type="button" (click)="changeQty(itm.pid,-1,'')">-</button>
              </div>
            </div>
          </td>
          <td>{{itm.price}}</td>
        </tr>
        </tbody>
    </table>
    <a routerLink = "/billing" class="btn btn-sm btn-primary" *ngIf="cart.cartItemsList && cart.cartTotal">Checkout</a>
  </div>
  <div class="card-footer text-muted font-weight-bold">
    Total : Rs. {{cart.cartTotal}}
  </div>  
</div>

您的购物车项目
项目总数{cart.cartItemsList.length}
空车
产品
价格
数量
全部的
{{itm.name}
{{itm.price/itm.qty}x
+
-
{{itm.price}

cart.service.ts中的更改

public cartItemsList: any  = [];


products.pages.ts中的更改

<div class="row">
   <div [ngClass]="cart.cartItemsList.length == 0 ? 'col-md-12' : 'col-md-7'">  
   <productslist-dir (refresh)="ref($event)" [allProductList]="products.data [searchedText]="searchText" [sortingBy]="sortOption"></productslist-dir>
   </div>
   <div class="col-md-5" *ngIf="cart.cartItemsList.length > 0">
     <cart></cart>
  </div>


请检查并让我知道..
谢谢..我想在下面显示购物车图标，如工具提示..单击cornar购物车图标后或添加任何一种产品..检查这些网站：单击cornar购物车图标..弹出窗口或工具提示将出现检查此示例：请参考此链接
ngOnInit(){
 this.sortByOption = 'product_name';    
 this.cart.allItems = this.__allprdts;
 this.cart.storeItems();
}

addToCart(productId,productQty){
  this.cart.addToCart(productId,productQty,'');
  this.refresh.emit(true);
}