<ion-header>
  <ion-toolbar color="primary">
    <ion-title>Streaming Providers</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list>    
    <div class="card m-3" style="width: 20rem;" *ngFor="let prod of products"> 
      <ion-card>
        <ion-card-header>
          <ion-card-title> {{prod.name}} </ion-card-title>
        </ion-card-header>

        <ion-card-content> {{prod.description}} </ion-card-content>            
                  
        <ion-button (click)="addSubscriptionToCart(prod)">Add to cart</ion-button>
        
      </ion-card>      
    </div>      
  </ion-list>
</ion-content>


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

import { Subscription } from '../Model/subscriptionModel';
import { FakeSubscriptionDataService } from '../../services/FakeSubscriptionDataService';
import { SubscriptionCartOrganiserService } from '../../services/SubscriptionCartOrganiserService';
import { InfiniteScrollCustomEvent } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: './home.page.html',
  styleUrls: ['./home.page.scss'],
})
export class HomePage implements OnInit {
  products : Subscription[] | undefined;
  items = [];
  constructor(private fakeDataProvider : FakeSubscriptionDataService, private cartSubscriptionService : SubscriptionCartOrganiserService) {
    this.products = fakeDataProvider.getOfferedSubscriptions();
  }
  ngOnInit() {}

addSubscriptionToCart(product : Subscription) {
  this.cartSubscriptionService.addProdFromCart(product);
}
}