.buy-btn {
    width: 100%;
}

.btn-mimicry {
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 5px;
    box-shadow: 0 0 0 0 rgba(0,0,0,.2), 0 0 0 0 rgba(0,0,0,.14), 0   
    0 0 0 rgba(0,0,0,.12);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

button[mat-icon-button] {
    width: 34px!important;
    height: 34px!important;
}

mat-icon {
    height: 32px;
    width: 25px;
}

Now, let's add our component to app.component.html within the mat-card-actions component:

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
    providedIn: 'root'
})
export class CartService {
    cart: any = {};
    cart$;

    constructor() {
        this.cart.cartTotal = 0;
        this.cart$ = new BehaviorSubject(this.cart);
    }

    addToCart(count, product) {
        if (count === 0) {
            delete this.cart[product._id];
        } else {
            this.cart = {
                ...this.cart,
                [product._id]: {
                    ...product,
                    count,
                }
            };
        }
        this.cart.cartTotal = 0;
        Object.values(this.cart)
            .filter(x => typeof x === 'object')
            .forEach((p: any) => this.cart.cartTotal = this.cart.cartTotal 
            + p.count);
        this.cart$.next(this.cart);
    }
}

Let's add our CartService to our AppComponent:

import { Component } from '@angular/core';
import { Observable } from 'rxjs';
import { ProductsService } from './products.service';
import { CartService } from './cart.service';

@Component({
    selector: 'es-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent {
    products$: Observable<any>;
    cart$: Observable<any>;
    cart;
    
    constructor(
        private productsService: ProductsService,
        private cartService: CartService
    ) {
        this.products$ = this.productsService.getProducts();
        this.cart$ = this.cartService.cart$.subscribe(cart => this.cart  
        = cart);
    }
    
    onAddProduct(count, product) {
        this.cartService.addToCart(count, product);
    }
}

Let's display the cartTotal on the shopping_cart badge and display the product count from the cart. We will also pass the count to the es-add-to-cart component, as well as an event to updateCount, as follows:

<es-nav>
    <div right>
        <button aria-label="Cart" mat-icon-button>
            <mat-icon [matBadge]="cart.cartTotal"  
             matBadgeColor="accent" 
             matBadgePosition="before">shopping_cart</mat-icon>
        </button>
    </div>
    <div class="products">
        <mat-card class="product-card" *ngFor="let product of products$    
         | async; let i = index">
            ...
            <mat-card-actions>
                <es-add-to-cart [count]="cart[product._id]?.count || 0"  
                (updateCount)="onAddProduct($event, product)"></es-add-to-
                cart>
            </mat-card-actions>
        </mat-card>
    </div>
</es-nav>

Now, when you add a product, you should see the count of products in the cart in the header as the cart's badge, as shown in the following screenshot:

Let's end this application by showing the cart in a dialog box. Let's add a cart component via Angular CLI by using the following command:

> ng g c cart

We're adding the CartComponent to the entryComponents of the AppModule since it will be added dynamically by the MatDialog service provided by Angular Material:

...
import { CartComponent } from './cart/cart.component';
...
@NgModule({
    ...
    entryComponents: [CartComponent]
})
export class AppModule { }

<button aria-label="Cart" mat-icon-button (click)="openCart()">
    <mat-icon [matBadge]="cart.cartTotal" matBadgeColor="accent" 
     matBadgePosition="before">shopping_cart</mat-icon>
</button>

Now, we'll use the MatDialog service to show the Cart component. This can be done with the following code:

...
import { MatDialog } from '@angular/material';
import { CartComponent } from './cart/cart.component';
...
export class AppComponent {
    ...
    constructor(
        ...
        private dialog: MatDialog
    ) {
        ...
    }
    
    openCart() {
        this.dialog.open(CartComponent, {
            width: '500px',
        });
    }
}

Now, when we click on the cart in the header, we should see the CartComponent displayed in the dialog:

Now, let's use CartService in our CartComponent to get all the items in the cart and also create the getValues method to convert the cart object into an array of objects. We will use the onSelectionChange method whenever the selected drop-down value changes (we will use mat-select to change the number of items in the cart for the product):

import { Component, OnInit } from '@angular/core';
import { CartService } from './../cart.service';

@Component({
    selector: 'es-cart',
    templateUrl: './cart.component.html',
    styleUrls: ['./cart.component.css']
})
export class CartComponent implements OnInit {
    cart$;
    constructor(private cartService: CartService) {
        this.cart$ = this.cartService.cart$;
    }

    ngOnInit() {
    }

    getValues(obj) {
        return Object.values(obj)
            .filter(x => typeof x === 'object');
    }

    onSelectionChange($event, product) {
        this.cartService.addToCart($event.value, product);
    }
}

<ng-container *ngIf="(cart$ | async) as cart">
    <h1 mat-dialog-title>Cart</h1>
    <div mat-dialog-content>
        <mat-list>
            <mat-list-item *ngFor="let product of getValues(cart)">
                <h4 mat-line>{{ product.name }}</h4>
                <p mat-line>{{ product.salePrice | currency }}</p>
                <mat-form-field class="count">
                    <mat-select
                        [value]="product.count"
                        (selectionChange)="onSelectionChange($event,   
                        product)"
                        >
                        <mat-option
                            *ngFor="let count of [1, 2, 3, 4, 5, 6, 7, 8, 
                            9, 10]" [value]="count"
                            >
                            {{ count }}
                        </mat-option>
                    </mat-select>
                </mat-form-field>
                {{ product.count * product.salePrice | currency }}
            </mat-list-item>
            <mat-divider></mat-divider>
            <h3 mat-subheader>
                Sub Total:&nbsp;&nbsp;&nbsp; <b><!-- Sub Total Placeholder-
                -></b>
            </h3>
        </mat-list>
    </div>
</ng-container>

> ng g p sub-total

import { Pipe, PipeTransform, Injector } from '@angular/core';

@Pipe({
    name: 'subTotal'
})
export class SubTotalPipe implements PipeTransform {
    currencyPipe;

    constructor() {
    }

    transform(cart): any {
        let total = 0;
        Object.values(cart).forEach((product: any) => {
            if (product.count) {
                total += product.count * product.salePrice;
            }
        });
        return total;
    }
}

<h3 mat-subheader>
    Sub Total:&nbsp;&nbsp;&nbsp; <b>{{ cart | subTotal | currency }}</b>
</h3>