Add cart view

src/app/cart/cart.component.css

@@ -0,0 +1,50 @@
+.cart {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 400px;
+    background-color: #1c1c1c;
+    border-radius: 8px;
+    transform: translateY(-8px);
+    color: #fff;
+}
+
+.cart ul {
+    list-style: none;
+    margin: 0;
+    padding: 20px;
+    overflow-y: auto;
+    height: 359px;
+}
+
+.cart ul li {
+    display: grid;
+    padding: 1rem;
+    grid-template-columns: 64px 1fr auto;
+    grid-column-gap: 1rem;
+    border-radius: 12px;
+}
+
+.cart ul li:nth-child(even) {
+    background-color: #292929;
+}
+
+.image {
+    height: 64px;
+    width: 64px;
+    padding: 0;
+    margin: 0;
+    border-radius: 8px;
+}
+
+.name {
+    font-size: 11pt;
+    width: 80%;
+    margin: auto 0;
+    line-break: loose;
+}
+
+.price {
+    text-align: right;
+    margin: auto;
+}

src/app/cart/cart.component.html

@@ -0,0 +1,10 @@
+<div class="cart" xyz="stagger-0.5 fade-100% down-1 ease-ease" >
+    <ul>
+        <li *ngFor="let item of this.backend.invoice.cart;let indexOfelement=index;" [ngClass]="{'xyz-in': this.state.showCart.value, 'xyz-out': !this.state.showCart.value}">
+            <img [src]="item.image" class="image">
+            <h5 class="name">{{ item.name }}</h5>
+            <span class="price"><b>{{ item.price.toFixed(2) }} {{ this.backend.currencyPrefix() }}</b><br>
+            {{ this.backend.calculateCryptoPrice(indexOfelement).toFixed(8) }} {{ this.backend.invoice.paymentMethod }}</span>
+        </li>
+    </ul>
+</div>

src/app/cart/cart.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CartComponent } from './cart.component';
+
+describe('CartComponent', () => {
+  let component: CartComponent;
+  let fixture: ComponentFixture<CartComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ CartComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CartComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/cart/cart.component.ts

@@ -0,0 +1,20 @@
+import { Component, OnInit } from '@angular/core';
+import { BackendService } from '../backend.service';
+import { StateService } from '../state.service';
+
+@Component({
+  selector: 'app-cart',
+  templateUrl: './cart.component.html',
+  styleUrls: ['./cart.component.css']
+})
+export class CartComponent implements OnInit {
+
+  constructor(
+    public backend: BackendService,
+    public state: StateService
+  ) { }
+
+  ngOnInit(): void {
+  }
+
+}