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/