<ion-header>
  <ion-toolbar color="primary">
    <ion-title>Items in Cart</ion-title>
    <ion-buttons slot="end">
      <ion-button fill="clear">
        <ion-icon name="power-outline" color="white" slot="icon-only"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-margin">
  <ion-grid class="ion-margin">
    <ion-row>
      <ion-col><b>Subscription</b></ion-col>
      <ion-col><b>Price</b></ion-col>
      <ion-col><b>Quantity</b></ion-col>
      <ion-col><b>Total Cost</b></ion-col>
    </ion-row>

    <ion-row *ngFor="let cartSub of subscriptionsInCart">
      <ion-col>{{cartSub.subscription.name}}</ion-col>
      <ion-col>R{{cartSub.subscription.price}}</ion-col>
      <ion-col>{{cartSub.quantity}}</ion-col>
      
      <ion-icon name="caret-back-outline" (click)="reduceProdCount(cartSub.subscription)"></ion-icon>
      <ion-icon name="caret-forward-outline" (click)="increaseProdCount(cartSub.subscription)"></ion-icon>
      <ion-col>{{cartSub.totalCost}}</ion-col>

    </ion-row>
  </ion-grid>

  <ion-col size="6">
    <ion-button fill="outline" expand="block" color="primary"><b>Total: R{{totalCostOfSubcriptionsInCart}}</b></ion-button>    
  </ion-col>

  <ion-col size="6">
    <ion-button expand="block" (click)="setOpen(true)">Checkout</ion-button>
    <ion-modal [isOpen]="isModalOpen">
      <ng-template>
        <ion-header>
          <ion-toolbar>
            <ion-title></ion-title>
            <ion-buttons slot="end">
              <ion-button (click)="setOpen(false)">Close</ion-button>
            </ion-buttons>
          </ion-toolbar>
        </ion-header>
        
        <ion-content class="ion-padding">
          <p>
            Payment Successful
          </p>
        </ion-content>
      </ng-template>
    </ion-modal> 
  </ion-col>
</ion-content>

//Additional code
//TS
import { Component, OnInit } from '@angular/core';

import { CartSubScription } from '../Model/cartSubscription';
import { Subscription } from '../Model/subscriptionModel';
import { SubscriptionCartOrganiserService } from '../../services/SubscriptionCartOrganiserService';

@Component({
  selector: 'app-cart',
  templateUrl: './cart.page.html',
  styleUrls: ['./cart.page.scss'],
})
export class CartPage implements OnInit {
  subscriptionsInCart : CartSubScription [] = [];
  totalCostOfSubcriptionsInCart :number = 0;
  isModalOpen = false;
  constructor(private cartManager : SubscriptionCartOrganiserService) {
    this.loadSubscriptions();
    cartManager.cartProductsNumberDS.subscribe(num => {
        this.loadSubscriptions();
    });
  }
  
  ngOnInit(): void {
  }
  setOpen(isOpen: boolean) {
    this.isModalOpen = isOpen;
  }

  loadSubscriptions() {
    this.subscriptionsInCart = this.cartManager.getSubscriptionsInCart();
    this.totalCostOfSubcriptionsInCart = this.cartManager.getTotalCostOfSubcriptionsInCart();
  }

  increaseProdCount (sub : Subscription) {
    for (var idx = 0; idx < this.subscriptionsInCart.length; idx++) {
      if (this.subscriptionsInCart[idx].subscription.id == sub.id) {
        this.cartManager.addProdFromCart(this.subscriptionsInCart[idx].subscription);
      }
    }
  }

  reduceProdCount (sub : Subscription) {
    for (var idx = 0; idx < this.subscriptionsInCart.length; idx++) {
      if (this.subscriptionsInCart[idx].subscription.id == sub.id) {
         this.cartManager.removeProdFromCart(this.subscriptionsInCart[idx].subscription);
      }
    }
  }
}