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