How to Add and Display Total amount in angular 2 or higher

Question

Hi All, How to Add and Display Total amount in angular 2 or higher versions.

archana devi · Answer

hi, typescript code import { Component } from '@angular/core' ; @Component({ selector: 'my-app' , templateUrl: './app.component.html' , styleUrls: [ './app.component.css' ] }) export class AppComponent { private sum=0; private value; public data=[ { "id" :1, "name" : "xxxx" , "amt" :100 }, { "id" :2, "name" : "yyyy" , "amt" :200 }, { "id" :3, "name" : "zzzz" , "amt" :300 } ]; constructor(){ this .add( this .data); } add(data){ this .value=data for (let j=0;j this .sum+= this .value[j].amt } } } html: html > table border = "1" > tr > th > Id th > th > Name th > th > Amt th > tr > tr * ngFor = "let emp of data" > td > {{emp.id}} td > td > {{emp.name}} td > td > {{emp.amt}} td > tr > tr > td > td > td > td > td > {{sum}} td > tr > table > html > br > br > hope the above code will be helpful

Rajanikant Hawaldar · Answer

http://www.authorcode.com/how-to-display-sum-of-two-textbox-in-third-textbox-in-angularjs/ body ng-controller = "MainCtrl" > p > Add the Numbers p > p > input type = "text" ng-model = "val1" ng-change = "updateSum()" > + input type = "text" ng-model = "val2" ng-change = "updateSum()" > = input type = "text" disabled ng-model = "sumVal" > p > body > var app = angular.module( 'plunker' , []); app.controller( 'MainCtrl' , function ($scope) { $scope.name = 'World' ; $scope.updateSum = function () { $scope.sumVal = ($scope.val1 * 1) + ($scope.val2 * 1); } });

Rajanikant Hawaldar · Answer

check this too https://www.codeproject.com/Questions/1204560/Sum-of-all-the-column-in-angularjs https://stackoverflow.com/questions/25646125/calculate-the-sum-of-values-in-ng-repeat-angularjs/25648308 https://jsfiddle.net/taditdash/726o7wpd/ HTML div ng-app = "prongbang" > div ng-controller = "calcPriceController" class = "container" > div class = "row" > div class = "col-md-12" > h2 > AngularJS Calculate Total Price h2 > br > form ng-submit = "add(product)" > table class = "table" > thead > tr > th > # th > th > Name th > th > Amount th > th > Price th > th > th > tr > thead > tbody > tr > td ng-bind = "products.length+1" > td > td > input ng-model = "product.name" type = "text" class = "form-control" required /> td > td > input ng-model = "product.amount" type = "text" class = "form-control" required /> td > td > input ng-model = "product.price" type = "text" class = "form-control" required /> td > td > button class = "btn" type = "submit" > Add button > td > tr > tr ng-repeat = "p in products" > td ng-bind = "$index+1" > td > td ng-bind = "p.name" > td > td ng-bind = "p.amount" > td > td ng-bind = "p.price" > td > td > span ng-click = "removeItem($index)" class = "pointer glyphicon glyphicon-remove" aria-hidden = "true" > span > td > tr > tr > th colspan = "4" > Total th > th id = "right" > span ng-bind = "total" > span > span > Baht. span > th > tr > tbody > table > form > div ng-bind = "products | json" > div > div > div > div > div > CSS . pointer { cursor : pointer ; } #right { float : right ; } JS var app = angular.module( 'prongbang' ,[]); app.controller( 'calcPriceController' , function ($scope){ $scope.products = []; $scope.total = 0; $scope.sumPrice = function (products) { var total = 0; angular.forEach(products, function (value,index){ total += parseFloat(value.price); }); return total.toFixed(2); }; $scope.removeItem = function (index){ /*$scope.products.slice(index,1);*/ $scope.products[index] = undefined; $scope.products = $scope.select2product($scope.products); $scope.total = $scope.sumPrice($scope.products); }; $scope.select2product = function (products){ var product = []; $scope.products = []; // clear data angular.forEach(products, function (value,index){ if (value != undefined) product.push(value); }); return product; }; $scope.add = function (product){ $scope.products.push(product); $scope.total = $scope.sumPrice($scope.products); $scope.clearInput(); }; $scope.clearInput = function (){ $scope.product = null ; }; });

Rajanikant Hawaldar · Answer

Hi Chittaranjan, go through below links and make code changes according to your requirements https://www.quora.com/How-do-I-add-two-values-in-angular-2 https://stackoverflow.com/questions/47293176/angular-4-in-ngfor-to-calculate-sum-of-total-value?rq=1 https://stackoverflow.com/questions/45467550/angular-2-how-to-sum-column-ngfor https://stackoverflow.com/questions/39828476/angular-2-calculate-sum-of-an-element-in-ngfor/39836610 Thanks

How to Add and Display Total amount in angular 2 or higher

Answers (4)