Post
Ask Question

How To Calculate The Sum Of A Table Column In Angular 10

Introduction

 
In this article, we will learn how to calculate the sum of a table column in an Angular 10 application. 
 
Prerequisites
  • Basic Knowledge of Angular 2 or higher
  • Visual Studio and SQL Server Management studio
  • Node and NPM installed
  • Bootstrap
Create an Angular project using the following command:
  1. ng new sdemo  
Open this project in Visual Studio Code and install Bootstrap using the following command:
  1. npm install bootstrap --save    
Now open styles.css file and add Bootstrap file reference. To add a reference in styles.css file, add this line:
  1. @import '~bootstrap/dist/css/bootstrap.min.css';  
Create a new service using the following command:
  1. ng g s userdata  
Now open userdata.service.ts file and add the following lines:
  1. import { Injectable } from '@angular/core';  
  2. import { HttpClient } from "@angular/common/http";   
  3. @Injectable({  
  4.   providedIn: 'root'  
  5. })  
  6. export class UserdataService {  
  7.   
  8.   constructor(private http:HttpClient) { }  
  9.   GetuserDetails()    
  10.   {    
  11.     return this.http.get('https://localhost:44345/Api/Users/Getuser');    
  12.   }    
  13. }  
Now create a new component by using the following command.
  1. ng g c userlist  
Now open userlist.component.html file and add the following code: 
  1. <div>      
  2.     <div class="row" style="margin-top:10px;margin-bottom: 10px;">      
  3.       <div class="col-sm-12 btn btn-success">      
  4.         How to find Sum of table column in Angular 10   
  5.       </div>      
  6.     </div>      
  7.     <div class="row" style="margin-top:10px;margin-bottom: 10px;">      
  8.     </div>      
  9.   </div>      
  10.   <hr style="background-color:black" />    
  11.   <div class="container">  
  12.     <table class="table">  
  13.       <thead class="thead-dark">  
  14.         <tr>  
  15.           <th>Name</th>  
  16.           <th>Age </th>  
  17.           <th>City </th>   
  18.            <th>Address </th>  
  19.           <th>Department </th>  
  20.           <th>Salary </th>  
  21.         </tr>  
  22.       </thead>  
  23.       <tbody>  
  24.         <tr *ngFor="let user of users">  
  25.           <td>{{user.Name}}</td>  
  26.           <td>{{user.Age}}</td>  
  27.           <td>{{user.City}}</td>  
  28.           <td>{{user.Address}}</td>  
  29.           <td>{{user.Department}}</td>  
  30.           <td>{{user.Salary}}</td>  
  31.         </tr>  
  32.         <tr>  
  33.             <td colspan="4"></td>  
  34.             <td colspan="1"><b>Total:</b> </td>  
  35.             <td colspan="1"><b>₹{{total}}</b> </td>  
  36.           </tr>  
  37.       </tbody>  
  38.     </table>  
  39.     </div>  
Open userlist.component.ts file and add the following lines.
  1. import { Component, OnInit } from '@angular/core';  
  2. import { UserdataService } from "../userdata.service";  
  3. @Component({  
  4.   selector: 'app-userlist',  
  5.   templateUrl: './userlist.component.html',  
  6.   styleUrls: ['./userlist.component.css']  
  7. })  
  8. export class UserlistComponent implements OnInit {  
  9.   
  10.   constructor(private userdataService :UserdataService) { }  
  11.   users:any  
  12.   private total=0;    
  13.   private value;     
  14.   ngOnInit(): void {  
  15.     this.getuser();  
  16.   }  
  17. getuser()  
  18. {  
  19.   this.userdataService.GetuserDetails().subscribe((rsult:any)=>{  
  20.     this.users=rsult  
  21.     this.findsum(this.users);  
  22.     console.log(rsult);  
  23.   })  
  24. }  
  25. findsum(data){    
  26.   debugger  
  27.   this.value=data    
  28.   console.log(this.value);  
  29.   for(let j=0;j<data.length;j++){   
  30.        this.total+= this.value[j].Salary  
  31.        console.log(this.total)  
  32.   }  
  33. }  
  34. }  
Now open app.component.html file and add the following code:
  1. <app-userlist></app-userlist>   
Now open app.module.ts file and add the following code:
  1. import { BrowserModule } from '@angular/platform-browser';    
  2. import { NgModule } from '@angular/core';    
  3. import { HttpClientModule } from "@angular/common/http";     
  4. import { AppComponent } from './app.component';    
  5. import { UserlistComponent } from './userlist/userlist.component';    
  6.     
  7. @NgModule({    
  8.   declarations: [    
  9.     AppComponent,    
  10.     UserlistComponent    
  11.   ],    
  12.   imports: [    
  13.     BrowserModule,    
  14.     HttpClientModule    
  15.   ],    
  16.   providers: [],    
  17.   bootstrap: [AppComponent]    
  18. })    
  19. export class AppModule { }     
Create a database and a table
 
Open SQL Server Management Studio, create a database and in this database, create a table. Give that table a name like "userdetails".
  1. CREATE TABLE [dbo].[Userdetails](    
  2.     [ID] [int] IDENTITY(1,1) NOT NULL,    
  3.     [Name] [varchar](50) NULL,    
  4.     [Age] [int] NULL,    
  5.     [Address] [varchar](50) NULL,    
  6.     [City] [varchar](50) NULL,    
  7.     [Salary] [int] NULL,    
  8.     [Department] [varchar](50) NULL,    
  9.  CONSTRAINT [PK_Userdetails] PRIMARY KEY CLUSTERED     
  10. (    
  11.     [ID] ASC    
  12. )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]    
  13. ) ON [PRIMARY]    
  14. GO     
Create a Web API Project
 
Open Visual Studio and click on create a new project:
 
 
Now select the project and click on the Next button.
 
 
Now select the project name and project location and click on the Create button.
 
 
Choose the template as Web API
 
 
Right-click the Models folder from Solution Explorer and go to Add >> New Item >> data.
 
 
Click on the "ADO.NET Entity Data Model" option and click "Add".
 
 
Select EF Designer from the database and click the "Next" button:
 
 
Add the connection properties, select the database name on the next page, and click OK: 
 
 
Check the "Table" checkbox. The internal options will be selected by default. Now, click the "Finish" button:
 

Right-click on the Controllers folder and add a new controller. Name it "User controller" and add the following code in the User controller:
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Net;  
  5. using System.Net.Http;  
  6. using System.Web.Http;  
  7. using Sdemo.Models;  
  8. namespace Sdemo.Controllers  
  9. {  
  10.     [RoutePrefix("Api/Users")]  
  11.     public class UserController : ApiController  
  12.     {  
  13.         RestaurantsEntities1 DB = new RestaurantsEntities1();  
  14.         [Route("Getuser")]  
  15.         [HttpGet]  
  16.         public object Getuser()  
  17.         {  
  18.             return DB.Userdetails.ToList();  
  19.         }  
  20.      
  21.     }  
  22. }  
Now, let's enable CORS. Go to Tools, open NuGet Package Manager, search for CORS, and install the "Microsoft.Asp.Net.WebApi.Cors" package. Open Webapiconfig.cs and add the following lines.
  1. EnableCorsAttribute cors = new EnableCorsAttribute("*", "*", "*");        
  2. config.EnableCors(cors);  
Now, run the application using the 'npm start' command and check the result.
 

Summary

 
In this article, we learned how to calculate sum of table column in an Angular 10 application


Similar Articles