CRUD Operation Using Angular And Web API

Introduction

In this article, we will try to implement the basic operations ( Create, Read, Update, Delete ) using Angular and WebApi.

We will be using the complex object on which all the operations are going to be performed.

Pre-requisites

Before you go ahead you must know some basics of Angular and webapi. Below are some links that are helpful before you start with the article and application implementation.

1. Getting Started With Angular CLI
2. Overview Of Components In Angular
3. HTTP And Observables In Angular
4. Overview Of Route Parameters In Angular

Implementation

Open Visual Studio Code and create the application TestApp.

Note. We have used angular CLI commands for the generation of Applications, Components, and services. Also, this is a time-consuming and long article, go through this only if you have enough time.

Eg. for a component generation we have used “ng g c addStudent”

So you have to keep in mind to generate the components/services/applications properly. Or go to my previous angular articles to see the use of the angular CLI command.

Now create a new application “ng new TestApp”.

Modal creation

Create addressClass.ts

export class AddressClass {
    constructor(
        public street: string,
        public city: string,
        public state: string
    ){}
}
import { AddressClass } from "./addressClass";

Create studentClass.ts

import { AddressClass } from "./addressClass";
export class StudentClass {
    constructor(
        public id: number,
        public name: string,
        public email: string,
        public phone: number,
        public gender: string,
        public course: string,
        public sendUpdates: boolean,
        public bloodGroup: string,
        public address: AddressClass
    ){}
}

Components creation

Let us create some components.

Generate component home ( “ng g c home”)

Open home.component.html and edit with the below contents.

<h1>Home page!</h1>  
<p>  
    Students Records Management.  
</p>  

Generate component not found. ( “ng g c notFound”)

Open not-found.component.html and edit with the below contents.

<h2>Not found!</h2>  
<p>The page you are looking for is not available.</p>  

Generate component addStudent. ( “ng g c addStudent”)

Open add-student.component.html and edit with the below contents.

<div class="backgroundColor container-fluid" >  
  <h3>  
    Student Registration!  
  </h3>  
  <p>Enter the below fields for student details.</p>  
    <form #studentForm="ngForm" (ngSubmit)="SubmitDetails(studentForm.value)">  
      <div class="row">  
        <div class="col-sm-4">  
          <div class="form-group">  
            <label for="name">Name:</label>  
            <input type="text" #controlName='ngModel' required [class.is-invalid]="controlName.invalid && controlName.touched" class="form-control" [(ngModel)]="studentModel.name" name="name">  
            <small [class.d-none]="controlName.valid || controlName.untouched"  style="color:red">*Field is required</small>  
          </div>  
        </div>  
        <div class="col-sm-4">  
            <div class="form-group">  
                <label for="email">Email address:</label>  
                <input type="text" class="form-control" [(ngModel)]="studentModel.email" name="email">  
              </div>  
        </div>  
        <div class="col-sm-4">  
          <div class="form-group">    
            <label for="phone">Phone:</label>    
            <input type="tel" #controlPhone="ngModel" required pattern="^\d{10}$" [class.is-invalid]="controlPhone.invalid && controlPhone.touched" class="form-control" [(ngModel)]="studentModel.phone" name="phone" />    
            <div *ngIf="controlPhone.errors && (controlPhone.invalid && controlPhone.touched)">    
              <small *ngIf="controlPhone.errors.required" class="text-danger">*This field is required</small>    
              <small *ngIf="controlPhone.errors.pattern" class="text-danger">*Must be 10 digit</small>    
            </div>                  
          </div>   
        </div>  
      </div>  
      <div class="row">  
          <div class="col-sm-4">  
              <div class="form-group">  
                  <label for="gender">gender:</label>  
                  <input type="text" class="form-control" [(ngModel)]="studentModel.gender" name="gender">  
                </div>  
          </div>  
          <div class="col-sm-4">  
              <div class="form-group">  
                  <label for="bloodGroup">Blood Group:</label>  
                  <select required #bloodGroup="ngModel" value="Select" class="form-control" [class.is-invalid]="bloodGroup.invalid && bloodGroup.touched" [(ngModel)]="studentModel.bloodGroup" name="bloodGroup">  
                    <option value="">Select Blood Group</option>  
                    <option *ngFor="let group of groups" >{{group}}</option>  
                  </select>  
                <small class="text-danger" *ngIf="bloodGroup.invalid && bloodGroup.touched">*Please select Blood group</small>  
                </div>                
          </div>  
          <div class="col-sm-4">  
              <div class="form-group">  
                <label>Course </label><br>  
                <input type="radio" [(ngModel)]="studentModel.course" name="course" value="BCA">BCA     
                <input type="radio" [(ngModel)]="studentModel.course" name="course" value="B.Tech">B.Tech     
                <input type="radio" [(ngModel)]="studentModel.course" name="course" value="BE">BE     
                <input type="radio" [(ngModel)]="studentModel.course" name="course" value="B.Sc">B.Sc     
              </div>  
          </div>          
      </div>  
      <div class="row" ngModelGroup="address">  
          <div class="col-sm-4">  
              <div class="form-group">  
                  <label>Street</label>  
                  <input type="text" class="form-control" name="street" [(ngModel)]="studentModel.address.street">  
                </div>  
          </div>  
          <div class="col-sm-4">  
              <div class="form-group">  
                  <label>City</label>  
                  <input type="text" class="form-control" name="city" [(ngModel)]="studentModel.address.city">  
                </div>  
          </div>  
          <div class="col-sm-4">  
              <div class="form-group">  
                  <label>State</label>  
                  <input type="text" class="form-control" name="state" [(ngModel)]="studentModel.address.state">  
                </div>  
          </div>  
      </div>  
      <div class="checkbox">  
        <label><input type="checkbox" [(ngModel)]="studentModel.sendUpdates" name="sendUpdates"> send me updates</label>  
      </div>  
      <input type="hidden" [(ngModel)]="studentModel.id" name="id">  
      <button type="submit" class="btn btn-primary">Submit</button>  
    </form>   
  </div> 

Open add-student.component.css and edit with the below contents.

.backgroundColor {
    background-color: #d5f5f3 !important;
}

Open add-student.component.ts and edit with the below contents.

import { Component, OnInit } from '@angular/core';
import { AddressClass } from '../addressClass';
import { EnrollmentService } from '../enrollment-service.service';
import { StudentClass } from '../studentClass';
import { ActivatedRoute, Router } from '@angular/router';
@Component({
  selector: 'app-add-student',
  templateUrl: './add-student.component.html',
  styleUrls: ['./add-student.component.css']
})
export class AddStudentComponent implements OnInit {
  groups=['A+', 'A-', 'B+', 'B-', 'O+', 'O-'];
  addressModel = new AddressClass("", "", "");
  studentModel = new StudentClass(0,"", "", null, "", "", true, "", this.addressModel)
  constructor(private _enrollmentService: EnrollmentService, private route: ActivatedRoute, private router : Router) {   
    console.log("constructor calling..");       
  }
  SubmitDetails(studentData){
    console.log(studentData);
    if(studentData.id == 0){
        this._enrollmentService.addStudent(studentData)
      .subscribe(
        (data) => {
          console.log('success', data);
          this.router.navigate(['/studentList']);
        },
        error => console.log('Error', error)
      );
    }else 
    {
        this._enrollmentService.editStudent(studentData)
      .subscribe(
        (data) => {
          console.log('success', data);
          this.router.navigate(['/studentList']);
        },
        error => console.log('Error', error)
      );
    }
  }
  ngOnInit() {    
    console.log("ngOnInit method calling..");
    var id = parseInt(this.route.snapshot.paramMap.get('id'));
    this._enrollmentService.getStudent(id).subscribe(data => this.studentModel = data);   
  }
}

Generate component studentDetails

Open student-details.component.html and edit with the below contents.

<h2>Selected Student Details</h2>
<h5>This is the details for <b>{{studentModel.name}}</b></h5>
<div><b>Id: </b>{{studentModel.id}}</div>
<div><b>Email Address: </b>{{studentModel.email}}</div>
<div><b>Phone: </b>{{studentModel.phone}}</div>
<div><b>Gender: </b>{{studentModel.gender}}</div>
<div><b>Blood group: </b>{{studentModel.bloodGroup}}</div>
<div><b>Course: </b>{{studentModel.course}}</div>
<div><b>Street: </b>{{studentModel.address.street}}</div>
<div><b>City: </b>{{studentModel.address.city}}</div>
<div><b>State: </b>{{studentModel.address.state}}</div>
<div><a (click)="gotoStudentList()">Back</a></div>

Open student-details.component.ts and edit with the below contents.

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { StudentClass } from '../studentClass';
import { EnrollmentService } from '../enrollment-service.service';
@Component({
  selector: 'app-student-details',
  templateUrl: './student-details.component.html',
  styleUrls: ['./student-details.component.css']
})
export class StudentDetailsComponent implements OnInit {
  studentModel: StudentClass;
  constructor(private _enrollmentService: EnrollmentService, private route: ActivatedRoute, private router: Router) { }
  ngOnInit() {
    var id = parseInt(this.route.snapshot.paramMap.get('id'));
    this._enrollmentService.getStudent(id).subscribe(data => this.studentModel = data);
  }
  gotoStudentList() {
    this.router.navigate(['/studentList']);
  }
  showFees() {
    this.router.navigate(['fees'], { relativeTo: this.route });
  }
  showAddress() {
    this.router.navigate(['address'], { relativeTo: this.route });
  }
}

Generate studentList component

Open student-list.component.html and edit with the below contents.

<h2>Student Details:</h2>    
<table class="table">  
    <thead>  
        <tr><th>Id</th><th>Name</th><th>Action</th></tr>  
    </thead>  
    <tbody>  
        <tr *ngFor="let stud of students, index as i">  
            <td>  
                <a routerLink="/student-list/{{stud.name}}/{{stud.phone}}/{{stud.email}}"> {{stud.name}}</a>  
            </td>  
            <td>  
                <a routerLink="/student-list/{{stud.name}}/{{stud.phone}}/{{stud.email}}"> {{stud.phone}} </a>  
            </td>  
            <td>  
                <a (click)=deleteStudent(stud.id,i)>| Delete |</a>  
                <a (click)=editStudent(stud)> Edit |</a>  
                <a (click)=studentDetails(stud)> View |</a>  
            </td>  
        </tr>  
    </tbody>     
</table>  

Open student-list.component.ts and edit with the below contents.

import { Component, OnInit } from '@angular/core';
import { EnrollmentService } from '../enrollment-service.service';
import { Router, Route } from '@angular/router';
@Component({
  selector: 'app-student-list',
  templateUrl: './student-list.component.html',
  styleUrls: ['./student-list.component.css']
})
export class StudentListComponent implements OnInit {
  public students: any[];
  constructor(private _enrollmentService: EnrollmentService, private router : Router) {
    console.log("constructor calling..");
  }
  getAllStudents() {
    this._enrollmentService.getAllStudents().subscribe(
      data => this.students = data,
      error => console.log('Error in getting stud list'),
      () => {console.log('success to update stud list...');
    });
  }
  public deleteStudent(id, index)
  {
    this._enrollmentService.deleteStudent(id)
    .subscribe(
      ()=> {
        data => console.log('success', data);
        this.students.splice(index,1);
      },
      error => console.log('Error', error)
    );
  }
  editStudent(student)
  {
    this.router.navigate(['/addStudent', student.id]);
  }
  studentDetails(id)
  {
    this.router.navigate(['/studentDetails', id]);
  }
  ngOnInit() {    
    console.log("ngOnInit method calling..");
    this.getAllStudents();
  }
}

Create a Routing file app-routing.module.ts and edit with the below contents.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { StudentDetailsComponent } from './student-details/student-details.component';
import { StudentMarksComponent } from './student-marks/student-marks.component';
import { NotFoundComponent } from './not-found/not-found.component';
import { StudentListComponent } from './student-list/student-list.component';
import { StudentFeesComponent } from './student-fees/student-fees.component';
import { StudentAddressComponent } from './student-address/student-address.component';
import { AddStudentComponent } from './add-student/add-student.component';
import { HomeComponent } from './home/home.component';
const routes: Routes = [
    {path: 'home', component: HomeComponent},
    {path: 'addStudent', component : AddStudentComponent},    
    {path: 'addStudent/:id', component : AddStudentComponent},    
    {path: 'studentList', component : StudentListComponent},
    {path: '', redirectTo : '/student-list', pathMatch : 'full'},
    {path: 'student-list', component : StudentListComponent},
    {path: 'student-list/:id/:name/:marks', component : StudentDetailsComponent,
        children : [
            {path: 'fees', component : StudentFeesComponent},
            {path: 'address', component : StudentAddressComponent}
        ]},
    {path: 'studentMarks', component : StudentMarksComponent},
    {path: 'studentDetails', component : StudentDetailsComponent},
    {"**", component : NotFoundComponent}
];
@NgModule({
    imports : [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule{}

Generate service enrollmentService and edit with the below contents.

import { Injectable } from '@angular/core';  
import { HttpClient } from '@angular/common/http';    
import { Observable } from 'rxjs';  
import { StudentClass } from './studentClass';  
@Injectable({  
  providedIn: 'root'  
})  
export class EnrollmentService {  
  _url = 'https://localhost:44302/Api/Student/';// may be different in your system, so change accorringly  
  constructor(private _http: HttpClient) { }  
  addStudent(student: StudentClass){  
    return this._http.post<any>(this._url + 'AddStudent', student)  
  }  
  editStudent(student: StudentClass){  
    return this._http.put<any>(this._url + 'EditStudent', student)  
  }  
  deleteStudent(id: number){  
    return this._http.delete<any>(this._url + 'DeleteStudent?id=' + id);  
  }  
  getAllStudents(): Observable<any[]> {    
    return this._http.get<any[]>(this._url+'AllStudentsDetails');    
  }  
  getStudent(id: number): Observable<any> {    
    return this._http.get<any[]>(this._url+'GetStudent?id=' + id);    
  }  
}  

Open app.component.html and edit with the below contents.

<nav class="navbar navbar-default" style="background-color: #323b38;">  
  <div class="container-fluid">  
    <div class="navbar-header">  
      <a class="navbar-brand text-color-white" href="#">Student Record Management.</a>  
    </div>  
    <ul class="nav navbar-nav">  
      <li><a routerLink="/home" class="text-color-white">Home</a></li>  
      <li>  
        <a routerLink="/addStudent" class="text-color-white">Add Student</a>  
      </li>  
      <li>  
        <a routerLink="/studentList" class="text-color-white">List Student</a>  
      </li>  
    </ul>  
  </div>  
</nav>  
<div style="margin-left:2%; margin-top:1.5%; margin-right: 5%;">  
  <router-outlet></router-outlet>  
</div>  

Open app.compnent.css and edit with the below contents.

.text-color-white  
{  
 color: #f7faf9 !important;  
}  

Open app.module.ts and make sure to add the dependencies.

import { BrowserModule } from '@angular/platform-browser';  
import { NgModule } from '@angular/core';  
import { FormsModule } from '@angular/forms';  
import { AppComponent } from './app.component';  
import { StudentDetailsComponent } from './student-details/student-details.component';  
import { StudentMarksComponent } from './student-marks/student-marks.component';  
import { AppRoutingModule } from './app-routing.module';  
import { NotFoundComponent } from './not-found/not-found.component';  
import { StudentComponent } from './student/student.component';  
import { StudentListComponent } from './student-list/student-list.component';  
import { StudentAddressComponent } from './student-address/student-address.component';  
import { StudentFeesComponent } from './student-fees/student-fees.component';  
import { AddStudentComponent } from './add-student/add-student.component';  
import { EnrollmentService } from './enrollment-service.service';  
import { HttpClientModule,HttpClient } from '@angular/common/http';  
import { HomeComponent } from './home/home.component';    
@NgModule({  
  declarations: [  
    AppComponent,  
    StudentDetailsComponent,  
    StudentMarksComponent,  
    NotFoundComponent,  
    StudentComponent,  
    StudentListComponent,  
    StudentAddressComponent,  
    StudentFeesComponent,  
    AddStudentComponent,  
    HomeComponent  
  ],  
  imports: [  
    BrowserModule,  
    FormsModule,  
    AppRoutingModule,  
    HttpClientModule      
  ],  
  providers: [HttpClientModule,EnrollmentService],  
  bootstrap: [AppComponent]  
})  
export class AppModule { }  

Open Microsoft SQL Server Management Studio and create a database StudentDB and create a table student.

USE [StudentDB]
GO
/****** Object:  Table [dbo].[student]    Script Date: 12-10-2019 12:12:31 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[student](
    [id] [int] IDENTITY(1,1) NOT NULL,
      NULL,
      NULL,
      NULL,
      NULL,
      NULL,
    [sendUpdates] [bit] NULL,
      NULL,
      NULL,
      NULL
) ON [PRIMARY]
GO

Open Visual Studio and create a web Api project and give it the name StudentApi.

Create a folder Model and add models as below.

namespace StudentApi.Models
{
    public class AddressClass
    {
        public string street { get; set; }
        public string city { get; set; }
        public string state { get; set; }
    }
}
namespace StudentApi.Models
{
    public class StudentClass
    {
        public int id { get; set; }
        public string name { get; set; }
        public string email { get; set; }
        public string phone { get; set; }
        public string gender { get; set; }
        public string course { get; set; }
        public bool sendUpdates { get; set; }
        public string bloodGroup { get; set; }
        public AddressClass address { get; set; }
    }
}

Create a controller Student and edit with the below contents.

using StudentApi.Models;
using System;
using System.Collections.Generic;
using System.Data.SqlClient;
using System.Web.Http;
using System.Web.Http.Results;
namespace StudentApi.Controllers
{
    [RoutePrefix("Api/Student")]
    public class StudentController : ApiController
    {
        // configure connection string according to your system
        SqlConnection con = new SqlConnection(@"Data Source=DESKTOP-M3EM8R3\MSSQLSERVER01;Initial Catalog=StudentDB;Integrated Security=True");
        SqlCommand cmd;
        SqlDataAdapter adapt;
        [HttpGet]
        [Route("AllStudentsDetails")]
        public JsonResult<List<Models.StudentClass>> GetAllStudents()
        {
            SqlCommand cmd = new SqlCommand();
            var studList = new List<StudentClass>();
            cmd.Connection = con;
            cmd.Connection.Open();
            cmd.CommandText = "Select * from student";
            SqlDataReader dr = cmd.ExecuteReader();
            while (dr.Read())
            {
                studList.Add(new StudentClass
                {
                    id = Convert.ToInt32(dr.GetValue(0)),
                    name = dr.GetValue(1).ToString(),
                    email = dr.GetValue(2).ToString(),
                    phone = dr.GetValue(3).ToString(),
                    gender = dr.GetValue(4).ToString(),
                    course = dr.GetValue(5).ToString(),
                    sendUpdates = Convert.ToBoolean(dr.GetValue(6).ToString()),
                    address = new AddressClass
                    {
                        street = dr.GetValue(7).ToString(),
                        city = dr.GetValue(8).ToString(),
                        state = dr.GetValue(9).ToString()
                    }
                });
            }
            return Json<List<Models.StudentClass>>(studList);
        }
        [HttpGet]
        [Route("GetStudent")]
        public JsonResult<Models.StudentClass> GetStudent(int id)
        {
            SqlCommand cmd = new SqlCommand();
            cmd.Connection = con;
            cmd.Connection.Open();
            cmd.CommandText = "Select * from student where id=" + id;
            SqlDataReader dr = cmd.ExecuteReader();
            if (dr.HasRows)
            {
                dr.Read();
                var stud = new StudentClass
                {
                    id = Convert.ToInt32(dr.GetValue(0)),
                    name = dr.GetValue(1).ToString(),
                    email = dr.GetValue(2).ToString(),
                    phone = dr.GetValue(3).ToString(),
                    gender = dr.GetValue(4).ToString(),
                    course = dr.GetValue(5).ToString(),
                    sendUpdates = Convert.ToBoolean(dr.GetValue(6).ToString()),
                    address = new AddressClass
                    {
                        street = dr.GetValue(7).ToString(),
                        city = dr.GetValue(8).ToString(),
                        state = dr.GetValue(9).ToString()
                    }
                };
                return Json(stud);
            }
            return null;
        }

        [HttpPost]
        [Route("AddStudent")]
        public bool InsertStudent(Models.StudentClass student)
        {
            con.Open();
            cmd = new SqlCommand("insert into student(name, email, phone, gender, course, sendUpdates, street, city, state) values('" + student.name + "', '" + student.email + "', '" + student.phone + "', '" + student.gender + "', '" + student.course + "', " + Convert.ToInt16(student.sendUpdates) + ", '" + student.address.street + "', '" + student.address.city + "', '" + student.address.state + "')", con);
            int x = cmd.ExecuteNonQuery();
            con.Close();
            bool status = x == 1 ? true : false;
            return status;
        }

        [HttpPut]
        [Route("EditStudent")]
        public bool UpdateStudent(Models.StudentClass student)
        {
            con.Open();
            cmd = new SqlCommand("update student set " +
                "name = '" + student.name + "'," +
                " email = '" + student.email + "'," +
                " phone = '" + student.phone + "'," +
                " gender = '" + student.gender + "'," +
                " course = '" + student.course + "'," +
                " sendUpdates = " + Convert.ToInt16(student.sendUpdates) + "," +
                " street = '" + student.address.street + "'," +
                " city = '" + student.address.city + "'," +
                " state = '" + student.address.state + "'" +
                " where id = " + student.id, con);
            int x = cmd.ExecuteNonQuery();
            con.Close();
            bool status = x == 1 ? true : false;
            return status;
        }

        [HttpDelete]
        [Route("DeleteStudent")]
        public bool DeleteStudent(int id)
        {
            con.Open();
            cmd = new SqlCommand("delete from student where id=" + id, con);
            int x = cmd.ExecuteNonQuery();
            con.Close();
            bool status = x == 1 ? true : false;
            return status;
        }
    }
}

Run the application.

Click on Add Student.

Click on List Student.

Clicking on Delete will delete the record and Clicking on Edit will open the Add Student page with filled details.

Click on View of any record.

Thank you so much for going through this article. I hope you enjoyed it and found this article good enough for your learning. Keep continuing your learning and sharing.