Save Shopping Cart to Check Out Page

Sep 21 2020 1:30 PM
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
  1. <div *ngFor="let item of items">  
  2. <input type="hidden" class="" name="" value="{{item.quantity}}">  
  3. <input type="hidden" class="" name="" value="{{item.product_name }}">  
  4. <input type="hidden" class="" name="" value="{{item.product_price }}">  
  5.   
  6.   
  7. <form [formGroup]="submitForm" (ngSubmit)="checkOut(item.quantity, item.product_name, item.product_price)">  
  8. <input type="submit" value="Check Out">  
  9. </form>  
  10. </div>  
shopping-cart.component.ts:
  1. public checkOut(quantity, product_name, product_price) {  
  2.   
  3. let record = {};  
  4. record['quantity'] = quantity;  
  5. record['product_name'] = product_name;  
  6. record['product_price'] = product_price;  
  7.   
  8. this.crudService.create_NewCheckOut(record).then(resp => {  
  9. this.quantity = undefined;  
  10. this.product_name = "";  
  11. this.product_price = undefined;  
  12. console.log(resp);  
  13. })  
  14. .catch(error => {  
  15. console.log(error);  
  16. });  
  17. this.router.navigate(['check-out']);  
  18. }  
You can see the shopping cart as it looks now at https://cart-64d3f.firebaseapp.com/