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:

ng new sdemo

Open this project in Visual Studio Code and install Bootstrap using the following command:

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:

@import '~bootstrap/dist/css/bootstrap.min.css';

Create a new service using the following command:

ng g s userdata

Now open userdata.service.ts file and add the following lines:

import { Injectable } from '@angular/core';
import { HttpClient } from "@angular/common/http";
@Injectable({
providedIn: 'root'
})
export class UserdataService {
constructor(private http:HttpClient) { }
GetuserDetails()
{
return this.http.get('https://localhost:44345/Api/Users/Getuser');
}
}

Now create a new component by using the following command.

ng g c userlist

Now open userlist.component.html file and add the following code:

<div>
<div class="row" style="margin-top:10px;margin-bottom: 10px;">
<div class="col-sm-12 btn btn-success">
How to find Sum of table column in Angular 10
</div>
</div>
<div class="row" style="margin-top:10px;margin-bottom: 10px;">
</div>
</div>
<hr style="background-color:black" />
<div class="container">
<table class="table">
<thead class="thead-dark">
<tr>
<th>Name</th>
<th>Age </th>
<th>City </th>
<th>Address </th>
<th>Department </th>
<th>Salary </th>
</tr>
</thead>
<tbody>
<tr *ngFor="let user of users">
<td>{{user.Name}}</td>
<td>{{user.Age}}</td>
<td>{{user.City}}</td>
<td>{{user.Address}}</td>
<td>{{user.Department}}</td>
<td>{{user.Salary}}</td>
</tr>
<tr>
<td colspan="4"></td>
<td colspan="1"><b>Total:</b> </td>
<td colspan="1"><b>₹{{total}}</b> </td>
</tr>
</tbody>
</table>
</div>

Open userlist.component.ts file and add the following lines.

import { Component, OnInit } from '@angular/core';
import { UserdataService } from "../userdata.service";
@Component({
selector: 'app-userlist',
templateUrl: './userlist.component.html',
styleUrls: ['./userlist.component.css']
})
export class UserlistComponent implements OnInit {
constructor(private userdataService :UserdataService) { }
users:any
private total=0;
private value;
ngOnInit(): void {
this.getuser();
}
getuser()
{
this.userdataService.GetuserDetails().subscribe((rsult:any)=>{
this.users=rsult
this.findsum(this.users);
console.log(rsult);
})
}
findsum(data){
debugger
this.value=data
console.log(this.value);
for(let j=0;j<data.length;j++){
this.total+= this.value[j].Salary
console.log(this.total)
}
}
}

Now open app.component.html file and add the following code:

<app-userlist></app-userlist>

Now open app.module.ts file and add the following code:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from "@angular/common/http";
import { AppComponent } from './app.component';
import { UserlistComponent } from './userlist/userlist.component';
@NgModule({
declarations: [
AppComponent,
UserlistComponent
],
imports: [
BrowserModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
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".

CREATE TABLE [dbo].[Userdetails](
[ID] [int] IDENTITY(1,1) NOT NULL,
[Name] [varchar](50) NULL,
[Age] [int] NULL,
[Address] [varchar](50) NULL,
[City] [varchar](50) NULL,
[Salary] [int] NULL,
[Department] [varchar](50) NULL,
CONSTRAINT [PK_Userdetails] PRIMARY KEY CLUSTERED
(
[ID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
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:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using Sdemo.Models;
namespace Sdemo.Controllers
{
[RoutePrefix("Api/Users")]
public class UserController : ApiController
{
RestaurantsEntities1 DB = new RestaurantsEntities1();
[Route("Getuser")]
[HttpGet]
public object Getuser()
{
return DB.Userdetails.ToList();
}
}
}

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.

EnableCorsAttribute cors = new EnableCorsAttribute("*", "*", "*");
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