Save Shopping Cart to Check Out Page

I have a shopping cart that displays the product name, price, and quantity. I want to submit that information to the database and render the shopping cart on the check out page when I click on the check out button. Right now I don’t know how to send the product information to the check out page because I would have to loop through all of the products in order to save them to the database and when I use ngFor to loop, the check out button shows up for every product.
I know that the following code is terrible but it shows what I am trying to do.

shopping-cart.component.html

<div *ngFor="let item of items">
<input type="hidden" class="" name="" value="{{item.quantity}}">
<input type="hidden" class="" name="" value="{{item.product_name }}">
<input type="hidden" class="" name="" value="{{item.product_price }}">


<form [formGroup]="submitForm" (ngSubmit)="checkOut(item.quantity, item.product_name, item.product_price)">
<input type="submit" value="Check Out">
</form>
</div>

shopping-cart.component.ts:


public checkOut(quantity, product_name, product_price)  {

    let record = {};
    record['quantity'] = quantity;
    record['product_name'] = product_name;
    record['product_price'] = product_price;

	
    this.crudService.create_NewCheckOut(record).then(resp => {
     this.quantity = undefined;
	 this.product_name = "";
	 this.product_price = undefined;
      console.log(resp);
    })
      .catch(error => {
        console.log(error);
      });
	  
	  this.router.navigate(['check-out']);
  }

You can see the shopping cart as it looks now at https://cart-64d3f.firebaseapp.com/