{"id":445,"date":"2017-11-05T13:21:04","date_gmt":"2017-11-05T11:21:04","guid":{"rendered":"https:\/\/html-online.com\/articles\/?p=445"},"modified":"2025-02-05T12:44:27","modified_gmt":"2025-02-05T10:44:27","slug":"income-tax-calculator-angularjs","status":"publish","type":"post","link":"https:\/\/html-online.com\/articles\/income-tax-calculator-angularjs\/","title":{"rendered":"Income Tax calculator with AngularJs"},"content":{"rendered":"<p>This post is a short tutorial about how easily you can build a\u00a0<a href=\"https:\/\/www.income-tax.co.uk\/\" target=\"_blank\" rel=\"noopener noreferrer\">tax calculator<\/a>\u00a0with the help of the old but powerful\u00a0<a href=\"https:\/\/angularjs.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">AngularJs<\/a>.\u00a0 (Please note:\u00a0AngularJs\u00a0is not the same as\u00a0<a href=\"https:\/\/angular.io\/\" target=\"_blank\" rel=\"noopener noreferrer\">Angular<\/a>) Yes I know, I\u2019m talking about\u00a0 Angular 1 (aka AngularJs), and Angular 5 has just been released, so who the heck is using AngularJs nowadays? Well, you\u2019d be surprised how many companies are still using it:\u00a0<a href=\"https:\/\/trends.builtwith.com\/javascript\/Angular-JS\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/trends.builtwith.com\/javascript\/Angular-JS<\/a>. This is the first article of the full tutorial, where we\u2019ll outline the structure of the functions that will perform the calculations, and then in the next section we\u2019ll take a more in-depth look at how these functions will perform the calculations in a nice harmony together and how they will render the results on the frontend.<\/p>\n<p><!--more--><a href=\"https:\/\/www.income-tax.co.uk\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-446\" src=\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2017\/11\/income-tax-calculator-uk.jpg\" alt=\"income tax calculator united kingdom angularjs\" width=\"700\" height=\"439\" srcset=\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2017\/11\/income-tax-calculator-uk.jpg 700w, https:\/\/html-online.com\/articles\/wp-content\/uploads\/2017\/11\/income-tax-calculator-uk-300x188.jpg 300w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\" \/><\/a>To calculate the income tax and final net pay\u00a0<a href=\"https:\/\/www.income-tax.co.uk\/after-tax\/\" target=\"_blank\" rel=\"noopener noreferrer\">after all deductions<\/a>, in the UK we\u2019ll need to do a few complex calculations because the way the taxes are calculated: you have a personal allowance, which means that up to that sum you won\u2019t pay any tax, and you\u2019ll only pay tax on the sum that is above that personal allowance. Hence, our calculator has to take this into consideration. Then there are multiple tax bands that we need to consider when conducting the operation: you\u2019ll pay 20% tax on the tax band one, 40% on earnings in the higher earnings tax band, and 45% in the highest earning tax band. To make things even more complicated, your personal allowance will drop by \u00a31 after every \u00a32 earned after a certain sum.<\/p>\n<p>The above operations are only for tax \u2013 but apart from tax, we\u2019ll need to calculate National Insurance as well. In the same way as with tax, you\u2019ll also have a personal allowance on National Insurance, and there are multiple bands to calculate in this case as well.<\/p>\n<p>Also, we don\u2019t want to disappoint our users and leave them with incomplete information \u2013 we\u2019ll also calculate their pension, student loan, and take-home pay, just to make sure they know how much money they\u2019ll be left with to spend.<\/p>\n<h3>Why Choose Angularjs To Build A Tax Calculator?<\/h3>\n<p>We choose AngularJs over jQuery or other frameworks for a plethora of reasons, and the most important ones are:<\/p>\n<ul>\n<li>Directives to extend HTML attributes.<\/li>\n<li>Expressions to bind data to HTML.<\/li>\n<li>Scope to control variables.<\/li>\n<li>Two-way data binding.<\/li>\n<li>Rendering of HTML.<\/li>\n<\/ul>\n<p>Another big deciding factor for choosing this framework for rendering our frontend HTML is because Google now crawls and indexes extremely well JavaScript based web applications. Why is this important? If you ever build an application with a JavaScript framework, the HTML that gets displayed to the user is not actually the HTML that sits on the server in the database. AngularJs re-compiles and replaces the initial HTML with it\u2019s own version after it conducted all the operations with JavaScript. A traditional web crawler (like older versions of Google) can\u2019t read this compiled and re-formatted HTML, they could only extract the actual HTML before it was manipulated by JavaScript. Nowadays, more and more search engines can render JavaScript driven web applications, therefore you can actually rank them on Google and build up an audience with your website.<\/p>\n<p>Now let\u2019s get down to planning, and see how we\u2019ll build up our functions for our calculator.<\/p>\n<p>First of all, we\u2019ll need to define some global variables that we\u2019ll be able to access across our applications. With these, we\u2019ll define the tax rates for different tax bands, yearly allowance, student loan thresholds, and many more.<\/p>\n<p>You\u2019ll probably notice the special variable $scope \u2013 this is a variable that you\u2019ll see very often in AngularJs. Scope is the glue between application controller and the view.<\/p>\n<pre style=\"background: #fff; color: #000;\">$scope.student_loan = {<span style=\"color: #d80800;\">'plan_1'<\/span><span style=\"color: #0100b6; font-weight: bold;\">: <\/span>{<span style=\"color: #d80800;\">'allowance'<\/span><span style=\"color: #0100b6; font-weight: bold;\">: <\/span><span style=\"color: #cd0000; font-style: italic;\">17775<\/span> , <span style=\"color: #d80800;\">'rate'<\/span><span style=\"color: #0100b6; font-weight: bold;\">: <\/span><span style=\"color: #cd0000; font-style: italic;\">9<\/span>}, <span style=\"color: #d80800;\">'plan_2'<\/span><span style=\"color: #0100b6; font-weight: bold;\">: <\/span>{<span style=\"color: #d80800;\">'allowance'<\/span><span style=\"color: #0100b6; font-weight: bold;\">: <\/span><span style=\"color: #cd0000; font-style: italic;\">21000<\/span>, <span style=\"color: #d80800;\">'rate'<\/span><span style=\"color: #0100b6; font-weight: bold;\">: <\/span><span style=\"color: #cd0000; font-style: italic;\">9<\/span>}, <span style=\"color: #d80800;\">'deductions'<\/span><span style=\"color: #0100b6; font-weight: bold;\"> : <\/span><span style=\"color: #cd0000; font-style: italic;\">0<\/span>};\n$scope.student_loan_plan = <span style=\"color: #d80800;\">'0'<\/span>;\n$scope.student_loan_plan_options = <span style=\"color: #d80800;\">'0'<\/span>;\n$scope.this_student_loan_settings = {allowance<span style=\"color: #0100b6; font-weight: bold;\">: <\/span>$scope.student_loan.plan_1.allowance, rate<span style=\"color: #0100b6; font-weight: bold;\">: <\/span>$scope.student_loan.plan_1.rate, sum_over_the_threshold<span style=\"color: #0100b6; font-weight: bold;\"> : <\/span><span style=\"color: #cd0000; font-style: italic;\">0<\/span>};\n$scope.student_loan_to_deduct = {yearly<span style=\"color: #0100b6; font-weight: bold;\">: <\/span><span style=\"color: #cd0000; font-style: italic;\">0<\/span>};\n$scope.scotland = <span style=\"color: #cd0000; font-style: italic;\">0<\/span>;\n$scope.no_national_insurance = <span style=\"color: #cd0000; font-style: italic;\">0<\/span>;\n$scope.is_blind = <span style=\"color: #d80800;\">'no'<\/span>;\n$scope.is_scotland = <span style=\"color: #cd0000; font-style: italic;\">0<\/span>;\n<span style=\"color: #0100b6; font-weight: bold;\">\/<\/span><span style=\"color: #0100b6; font-weight: bold;\">\/<\/span>\n<span style=\"color: #0100b6; font-weight: bold;\">\/<\/span><span style=\"color: #0100b6; font-weight: bold;\">\/<\/span>\n<span style=\"color: #0100b6; font-weight: bold;\">\/<\/span><span style=\"color: #0100b6; font-weight: bold;\">\/<\/span>\n<span style=\"color: #0100b6; font-weight: bold;\">var<\/span> pension_percentage_cookie = $cookies.get(<span style=\"color: #d80800;\">'pension_percentage'<\/span>);\n<span style=\"color: #0100b6; font-weight: bold;\">if<\/span> (pension_percentage_cookie) {\n}\n<span style=\"color: #0100b6; font-weight: bold;\">else<\/span> {\n    pension_percentage_cookie = <span style=\"color: #cd0000; font-style: italic;\">0<\/span>;\n}\n$scope.pension = {\n    <span style=\"color: #d80800;\">'value'<\/span><span style=\"color: #0100b6; font-weight: bold;\">: <\/span><span style=\"color: #cd0000; font-style: italic;\">0<\/span>,\n    <span style=\"color: #d80800;\">'percentage'<\/span><span style=\"color: #0100b6; font-weight: bold;\">: <\/span>pension_percentage_cookie,\n    <span style=\"color: #d80800;\">'deductable'<\/span><span style=\"color: #0100b6; font-weight: bold;\">: <\/span>{<span style=\"color: #d80800;\">'yearly'<\/span><span style=\"color: #0100b6; font-weight: bold;\">: <\/span><span style=\"color: #cd0000; font-style: italic;\">0<\/span>},\n    <span style=\"color: #d80800;\">'contribution_period'<\/span><span style=\"color: #0100b6; font-weight: bold;\">: <\/span><span style=\"color: #d80800;\">'monthly'\n};\n<\/span><\/pre>\n<h3>The variables<\/h3>\n<p>Here we\u2019ll define all the variable that we need later on in our application. Apart from this, we\u2019ll need the functions that we\u2019ll use in order to perform the calculations:<\/p>\n<pre>$scope.calculateIncomeTax = function () {}<\/pre>\n<pre>$scope.calculateNationalInsurance = function () {}<\/pre>\n<pre>$scope.calculateStudentLoan = function () {}<\/pre>\n<pre>$scope.calculatePension = function ()<\/pre>\n<pre>$scope.calculateTakeHome = function () {}<\/pre>\n<p>And then a final one that we\u2019ll call every time a value is updated on the frontend by the user, that will integrate all the above functions:<\/p>\n<pre>$scope.executeCalculations = function () {}<\/pre>\n<p>After all of our main calculator functions are defined, we\u2019ll need another set of functions that will be a key part of our application: the watcher functions. These are AngularJs specific functions that watch any changes in the models, and perform an action that we define when the change happens \u2013 in our case, we\u2019ll be calling a function.<\/p>\n<p>$scope.$watch(\u2018earningsSliders.yearly\u2019, function (newValues, oldValues, scope) {<\/p>\n<p>$scope.executeCalculations();<br \/>\n});<\/p>\n<p>The watcher above will \u201cwatch\u201d whenever the user will change the value of the yearly income, and it will instantly initiate the calculations, real time.<\/p>\n<p>The executeCalculations() function includes all the other functions that are needed to calculate our tax, national insurance, pension, student loan and take home pay.<\/p>\n<p>First, in the executeCalculations() function, we calculate the income tax by calling the calculateIncomeTax() function, and update a global variable\/model with the actual tax sum, so that we can have it available later on, when we\u2019ll deduct it from the total earnings. Then we do the same with the national insurance \u2013 we\u2019re calling the\u00a0calculateNationalInsurance() to calculate the National Insurance for us.\u00a0 Then we do the same for the pension and student loan. Finally, after we\u2019ve got the total tax, national insurance, pension, and student loan that we need to extract, we\u2019ll simply extract the values from the gross earnings value, in the calculateTakeHome() function.<\/p>\n<h2>The Benefits Of Using AngularJS For This Project<\/h2>\n<p>The great thing about using AngularJs is the fact that you can render the modes (which are in a sense JavaScript variables) in the front end. For example, if you want to display the yearly earnings value in your html, just simply use the model (variable) name\u00a0 wrapped in double brackets, for example:<br \/>\nIf you earn \u00a3{{earningsSliders.yearly}} a year, you\u2019ll pay \u00a3\u00a3{{totaTaxAmount}} in tax.<br \/>\nThis will be automatically rendered\/transformed by AngularJs as:<br \/>\nIf you earn \u00a336,500 a year, you\u2019ll pay \u00a35,000 in tax.<\/p>\n<p>This is really useful in our case as you can see it on our live income tax calculator\u00a0<a href=\"https:\/\/www.income-tax.co.uk\/\" target=\"_blank\" rel=\"noopener noreferrer\">income-tax.co.uk<\/a>, we can use any model\/variable in our description texts, and even in the title of the website, and it will be rendered with the correct value.<\/p>\n<p>In the next article from this set, we\u2019ll be speaking about more specific actions and about the formula that we\u2019ll be using to perform the calculations for tax, national insurance, pension and student loan. In the third section we\u2019ll introduce you to how you can integrate AngularJs with WordPress, and also, how you can use a secret plugin that can generate you thousands of unique wordpress posts based on a data set uploaded via a CSV file \u2013 in 2 seconds.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This post is a short tutorial about how easily you can build a\u00a0tax calculator\u00a0with the help of the old but powerful\u00a0AngularJs.\u00a0 (Please note:\u00a0AngularJs\u00a0is not the same as\u00a0Angular) Yes I know, I\u2019m talking about\u00a0 Angular 1 (aka AngularJs), and Angular 5 has just been released, so who the heck is using AngularJs nowadays? Well, you\u2019d be &hellip; <a href=\"https:\/\/html-online.com\/articles\/income-tax-calculator-angularjs\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Income Tax calculator with AngularJs&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,8],"tags":[],"class_list":["post-445","post","type-post","status-publish","format-standard","hentry","category-articles","category-tools"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Income Tax calculator with AngularJs - Case Study<\/title>\n<meta name=\"description\" content=\"This post is a short tutorial about how easily you can build a tax calculator with the help of the old but powerful AngularJs. (Please note: AngularJs is\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/html-online.com\/articles\/income-tax-calculator-angularjs\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Income Tax calculator with AngularJs - Case Study\" \/>\n<meta property=\"og:description\" content=\"This post is a short tutorial about how easily you can build a tax calculator with the help of the old but powerful AngularJs. (Please note: AngularJs is\" \/>\n<meta property=\"og:url\" content=\"https:\/\/html-online.com\/articles\/income-tax-calculator-angularjs\/\" \/>\n<meta property=\"og:site_name\" content=\"HTML Online\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/htmlcoding\/\" \/>\n<meta property=\"article:published_time\" content=\"2017-11-05T11:21:04+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-05T10:44:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2017\/11\/income-tax-calculator-uk.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"700\" \/>\n\t<meta property=\"og:image:height\" content=\"439\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"HTML Editor\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"HTML Editor\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/html-online.com\/articles\/income-tax-calculator-angularjs\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/html-online.com\/articles\/income-tax-calculator-angularjs\/\"},\"author\":{\"name\":\"HTML Editor\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d\"},\"headline\":\"Income Tax calculator with AngularJs\",\"datePublished\":\"2017-11-05T11:21:04+00:00\",\"dateModified\":\"2025-02-05T10:44:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/html-online.com\/articles\/income-tax-calculator-angularjs\/\"},\"wordCount\":1153,\"publisher\":{\"@id\":\"https:\/\/html-online.com\/articles\/#organization\"},\"image\":{\"@id\":\"https:\/\/html-online.com\/articles\/income-tax-calculator-angularjs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2017\/11\/income-tax-calculator-uk.jpg\",\"articleSection\":[\"Articles\",\"Tools\"],\"inLanguage\":\"en-GB\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/html-online.com\/articles\/income-tax-calculator-angularjs\/\",\"url\":\"https:\/\/html-online.com\/articles\/income-tax-calculator-angularjs\/\",\"name\":\"Income Tax calculator with AngularJs - Case Study\",\"isPartOf\":{\"@id\":\"https:\/\/html-online.com\/articles\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/html-online.com\/articles\/income-tax-calculator-angularjs\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/html-online.com\/articles\/income-tax-calculator-angularjs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2017\/11\/income-tax-calculator-uk.jpg\",\"datePublished\":\"2017-11-05T11:21:04+00:00\",\"dateModified\":\"2025-02-05T10:44:27+00:00\",\"description\":\"This post is a short tutorial about how easily you can build a tax calculator with the help of the old but powerful AngularJs. (Please note: AngularJs is\",\"breadcrumb\":{\"@id\":\"https:\/\/html-online.com\/articles\/income-tax-calculator-angularjs\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/html-online.com\/articles\/income-tax-calculator-angularjs\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/html-online.com\/articles\/income-tax-calculator-angularjs\/#primaryimage\",\"url\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2017\/11\/income-tax-calculator-uk.jpg\",\"contentUrl\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2017\/11\/income-tax-calculator-uk.jpg\",\"width\":700,\"height\":439,\"caption\":\"income tax calculator united kingdom\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/html-online.com\/articles\/income-tax-calculator-angularjs\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/html-online.com\/articles\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Income Tax calculator with AngularJs\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/html-online.com\/articles\/#website\",\"url\":\"https:\/\/html-online.com\/articles\/\",\"name\":\"HTML Online Articles\",\"description\":\"Tips, tricks, tutorials\u2026\",\"publisher\":{\"@id\":\"https:\/\/html-online.com\/articles\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/html-online.com\/articles\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/html-online.com\/articles\/#organization\",\"name\":\"HTML Online\",\"url\":\"https:\/\/html-online.com\/articles\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2022\/06\/logo.jpg\",\"contentUrl\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2022\/06\/logo.jpg\",\"width\":350,\"height\":350,\"caption\":\"HTML Online\"},\"image\":{\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/htmlcoding\/\",\"https:\/\/www.linkedin.com\/in\/ferencdenes\/\",\"https:\/\/www.youtube.com\/channel\/UCn38Jw1sJzbjVHO95Zp0Sww\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d\",\"name\":\"HTML Editor\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7c1d8f5e7f1dc3e261766a96ac50c6a907fa5c236e87ab73379c57c9114e92cd?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7c1d8f5e7f1dc3e261766a96ac50c6a907fa5c236e87ab73379c57c9114e92cd?s=96&d=mm&r=g\",\"caption\":\"HTML Editor\"},\"description\":\"In 2013, while wrestling with a mountain of client articles and an uncooperative CMS, I decided enough was enough. So, I created an online HTML editor purely out of necessity (and mild frustration). What began as a tool for my own sanity quickly evolved into a gift for the world\u2014or at least for anyone trying to avoid breaking their website's code. Since then, I've shared my tech notes on my blog, which serves as both a handy reference and a digital diary of the adventures and misadventures of a coder.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/ferencdenes\/\",\"https:\/\/www.youtube.com\/@htmlg\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Income Tax calculator with AngularJs - Case Study","description":"This post is a short tutorial about how easily you can build a tax calculator with the help of the old but powerful AngularJs. (Please note: AngularJs is","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/html-online.com\/articles\/income-tax-calculator-angularjs\/","og_locale":"en_GB","og_type":"article","og_title":"Income Tax calculator with AngularJs - Case Study","og_description":"This post is a short tutorial about how easily you can build a tax calculator with the help of the old but powerful AngularJs. (Please note: AngularJs is","og_url":"https:\/\/html-online.com\/articles\/income-tax-calculator-angularjs\/","og_site_name":"HTML Online","article_publisher":"https:\/\/www.facebook.com\/htmlcoding\/","article_published_time":"2017-11-05T11:21:04+00:00","article_modified_time":"2025-02-05T10:44:27+00:00","og_image":[{"width":700,"height":439,"url":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2017\/11\/income-tax-calculator-uk.jpg","type":"image\/jpeg"}],"author":"HTML Editor","twitter_card":"summary_large_image","twitter_misc":{"Written by":"HTML Editor","Estimated reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/html-online.com\/articles\/income-tax-calculator-angularjs\/#article","isPartOf":{"@id":"https:\/\/html-online.com\/articles\/income-tax-calculator-angularjs\/"},"author":{"name":"HTML Editor","@id":"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d"},"headline":"Income Tax calculator with AngularJs","datePublished":"2017-11-05T11:21:04+00:00","dateModified":"2025-02-05T10:44:27+00:00","mainEntityOfPage":{"@id":"https:\/\/html-online.com\/articles\/income-tax-calculator-angularjs\/"},"wordCount":1153,"publisher":{"@id":"https:\/\/html-online.com\/articles\/#organization"},"image":{"@id":"https:\/\/html-online.com\/articles\/income-tax-calculator-angularjs\/#primaryimage"},"thumbnailUrl":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2017\/11\/income-tax-calculator-uk.jpg","articleSection":["Articles","Tools"],"inLanguage":"en-GB"},{"@type":"WebPage","@id":"https:\/\/html-online.com\/articles\/income-tax-calculator-angularjs\/","url":"https:\/\/html-online.com\/articles\/income-tax-calculator-angularjs\/","name":"Income Tax calculator with AngularJs - Case Study","isPartOf":{"@id":"https:\/\/html-online.com\/articles\/#website"},"primaryImageOfPage":{"@id":"https:\/\/html-online.com\/articles\/income-tax-calculator-angularjs\/#primaryimage"},"image":{"@id":"https:\/\/html-online.com\/articles\/income-tax-calculator-angularjs\/#primaryimage"},"thumbnailUrl":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2017\/11\/income-tax-calculator-uk.jpg","datePublished":"2017-11-05T11:21:04+00:00","dateModified":"2025-02-05T10:44:27+00:00","description":"This post is a short tutorial about how easily you can build a tax calculator with the help of the old but powerful AngularJs. (Please note: AngularJs is","breadcrumb":{"@id":"https:\/\/html-online.com\/articles\/income-tax-calculator-angularjs\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/html-online.com\/articles\/income-tax-calculator-angularjs\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/html-online.com\/articles\/income-tax-calculator-angularjs\/#primaryimage","url":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2017\/11\/income-tax-calculator-uk.jpg","contentUrl":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2017\/11\/income-tax-calculator-uk.jpg","width":700,"height":439,"caption":"income tax calculator united kingdom"},{"@type":"BreadcrumbList","@id":"https:\/\/html-online.com\/articles\/income-tax-calculator-angularjs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/html-online.com\/articles\/"},{"@type":"ListItem","position":2,"name":"Income Tax calculator with AngularJs"}]},{"@type":"WebSite","@id":"https:\/\/html-online.com\/articles\/#website","url":"https:\/\/html-online.com\/articles\/","name":"HTML Online Articles","description":"Tips, tricks, tutorials\u2026","publisher":{"@id":"https:\/\/html-online.com\/articles\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/html-online.com\/articles\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Organization","@id":"https:\/\/html-online.com\/articles\/#organization","name":"HTML Online","url":"https:\/\/html-online.com\/articles\/","logo":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/html-online.com\/articles\/#\/schema\/logo\/image\/","url":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2022\/06\/logo.jpg","contentUrl":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2022\/06\/logo.jpg","width":350,"height":350,"caption":"HTML Online"},"image":{"@id":"https:\/\/html-online.com\/articles\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/htmlcoding\/","https:\/\/www.linkedin.com\/in\/ferencdenes\/","https:\/\/www.youtube.com\/channel\/UCn38Jw1sJzbjVHO95Zp0Sww"]},{"@type":"Person","@id":"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d","name":"HTML Editor","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/html-online.com\/articles\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7c1d8f5e7f1dc3e261766a96ac50c6a907fa5c236e87ab73379c57c9114e92cd?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7c1d8f5e7f1dc3e261766a96ac50c6a907fa5c236e87ab73379c57c9114e92cd?s=96&d=mm&r=g","caption":"HTML Editor"},"description":"In 2013, while wrestling with a mountain of client articles and an uncooperative CMS, I decided enough was enough. So, I created an online HTML editor purely out of necessity (and mild frustration). What began as a tool for my own sanity quickly evolved into a gift for the world\u2014or at least for anyone trying to avoid breaking their website's code. Since then, I've shared my tech notes on my blog, which serves as both a handy reference and a digital diary of the adventures and misadventures of a coder.","sameAs":["https:\/\/www.linkedin.com\/in\/ferencdenes\/","https:\/\/www.youtube.com\/@htmlg"]}]}},"_links":{"self":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts\/445","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/comments?post=445"}],"version-history":[{"count":3,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts\/445\/revisions"}],"predecessor-version":[{"id":2048,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts\/445\/revisions\/2048"}],"wp:attachment":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/media?parent=445"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/categories?post=445"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/tags?post=445"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}