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.


<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">


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;
      .catch(error => {

You can see the shopping cart as it looks now at