Split The Bill Restaurant Calculator Coded in Angular

October 9, 2017 by Ray Sanchez

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.

About Me


A self-taught front end web developer who loves to travel, create things, solve problems, and grill! I enjoy the challenge of taking things apart, learning how they work, and improving them. I created this site to document and share what I've learned.

Quick Links

  1. Food Inventory
  2. Split The Bill Calculator
  3. Breakeven Point Calculator
  4. Distance To Horizon Calculator

Creations By Type

  • Categories

    • Creations By Month

    1. October 2020 (3)
    2. September 2020 (1)
    3. August 2020 (1)
    4. June 2020 (2)
    5. October 2017 (1)
    6. September 2017 (3)

    My Website Creations

    1. Ray-Sanchez.com
    2. Zip Mailer Inc.