Split The Bill Restaurant Calculator Coded in Angular

Choose How To Split:

‚Äč

This calculator will split the amount due evenly. It doesn’t allocate per person. If someone ordered multiple items, add them up and input total in corresponding person.

1st Person
2nd Person
3rd Person
4th Person
{{ firstItem + secondItem + thirdItem + fourthItem | currency }} = Subtotal (Tip based on this amount!)
Tip %
{{ (firstItem + secondItem + thirdItem + fourthItem)*(tipPercent/100) | currency }} Tip

% Tax Rate (8% in Philly)

{{ (firstItem + secondItem + thirdItem + fourthItem)*((taxRate/100)) | currency }} = Tax
{{ (firstItem + secondItem + thirdItem + fourthItem)*(1+(taxRate/100)) + ((firstItem + secondItem + thirdItem + fourthItem)*(tipPercent/100)) | currency }} = Total (SubTotal + Tip + Tax)
Paying

{{ (((firstItem + secondItem + thirdItem + fourthItem)*(1 + (taxRate/100))) + ((firstItem + secondItem + thirdItem + fourthItem)*(tipPercent/100))) / (peoplePaying) | currency }} Owed by Each Person

This calculator will allocate per person. This is great when orders differ greatly. If someone ordered multiple items, add them up and input total in corresponding person.

1st Person
2nd Person
3rd Person
4th Person

Tip %
% Tax Rate (8% in Philly)

1st Person: {{ (firstItem + (firstItem)*(tipPercent/100) + (firstItem)*(tipPercent/100)) | currency }} owed ({{ firstItem | currency }} + {{ (firstItem)*(tipPercent/100) | currency }} Tip + {{ (firstItem)*((taxRate/100)) | currency }} Tax)

2nd Person: {{ (secondItem + (secondItem)*(tipPercent/100) + (secondItem)*(tipPercent/100)) | currency }} owed ({{ secondItem | currency }} + {{ (secondItem)*(tipPercent/100) | currency }} Tip + {{ (secondItem)*((taxRate/100)) | currency }} Tax)

3rd Person: {{ (thirdItem + (thirdItem)*(tipPercent/100) + (thirdItem)*(tipPercent/100)) | currency }} owed ({{ thirdItem | currency }} + {{ (thirdItem)*(tipPercent/100) | currency }} Tip + {{ (thirdItem)*((taxRate/100)) | currency }} Tax)

4th Person: {{ (fourthItem + (fourthItem)*(tipPercent/100) + (fourthItem)*(tipPercent/100)) | currency }} owed ({{ fourthItem | currency }} + {{ (fourthItem)*(tipPercent/100) | currency }} Tip + {{ (fourthItem)*((taxRate/100)) | currency }} Tax)

A split the bill restaurant calculator coded in Angular. Two way binding in Angular makes it possible for the webapp to auto update the view when data in the model changes and vice versa. In other words, when user input in the view changes, so do the variables in the model. This allows all the data to change instantly without clicking on a submit button.