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

Chittaranjan Swain

7y19.9k.NET

Hi All,

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

4 Replies

Know the answer? Post it — somebody with the same question will find it here.

archana devi7y ago
Accepted 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>Idth>
    <th>Nameth>
    <th>Amtth>
  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 Hawaldar7y ago
http://www.authorcode.com/how-to-display-sum-of-two-textbox-in-third-textbox-in-angularjs/
<body ng-controller="MainCtrl">
  <p> Add the Numbersp>
  <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 Hawaldar7y ago
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 Priceh2>
        <br>
        <form ng-submit="add(product)">
          <table class="table">
            <thead>
              <tr>
                <th>#th>
                <th>Nameth>
                <th>Amountth>
                <th>Priceth>
                <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">Addbutton>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">Totalth>
                <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 Hawaldar7y ago
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