Save Shopping Cart to Check Out Page

Question

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/