How to show added product details after clicked shopping cart icon in angular 8 - angular6

Question

I tried to show added product details after i clicked shopping cart icon or if i added any one product same like https://designmodo.com/shopping-cart-ui/. Initially no need to show the" Your Cart Items" added product box.I do not know how to do like that.If any one know please help to find the solutions.
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>
Demo: https://stackblitz.com/edit/angular-selvam-ecommerce-task-btjqde?file=src%2Fapp%2Fdirectives%2Faddtocart.dir.ts

Answer 1

Change in cart.service.ts
public cartItemsList: any = [];
change in 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>
change in productslist.dir.ts
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);
}
please check and let me know..