Currently, I am in the process of developing a webshop for a pizzeria using Angular, and recently completed work on my cart component. One of the key features I wanted to incorporate was adding a 10% Value-Added Tax (VAT) for each item in the cart and including it in the overall total.
To achieve this functionality, I made modifications to my cart service by defining a new method called 'calcTotal'. This method performs all the necessary calculations to apply the VAT to each item within the cart.
calcTotal() {
let total: number = 0;
let vat: number = 0;
this.cart.forEach((item) => {
vat = item.price * 0.1;
total += item.price + vat;
})
return total;
}
In order to make use of these newly added properties, I updated my cart.component.ts file accordingly:
export class CartComponent implements OnInit {
cart: Imenu[] = [];
total: number = 0;
vat: number = 0;
constructor(private CS: CartService) { }
ngOnInit(): void {
this.cart = this.CS.getCart();
this.total = this.CS.calcTotal();
this.vat = this.CS.calcTotal();
}
}
By referencing these properties in my cart.component.html file, I can display the service charge and total value as follows:
<div class="col-md-5 col-lg-4 order-md-last">
<p>Service Charge: {{vat}}</p>
<p>Total Amount: {{total}}</p>
</div>
</div>
However, currently both the service charge and total amount are displaying identical values. To rectify this discrepancy, I need to outline how the service charge is declared in my cart.service.ts file so that it accurately represents 10% of the total price.