Post
Ask Question

CRUD Operation Using Web API And Angular 7

Introduction

 
In this article, I will create a demo project for student information.
 
Prerequisite 

  • Angular 7
  • Web API
  • SQL Server
  • HTML/Bootstrap  

In this article, we will create a simple Angular 7 application in a step-by-step manner from scratch to perform the CRUD operations using Web API, Angular 7, and SQL Server. 

Steps required for CRUD Operations.
  1. Create Database and table in SQL Server.
  2. Create Web API using ASP.NET Web API.
  3. Create a new project in Angular 7
For this article, I have created a database and two tables. For creating the database, we follow the following steps.
 
Step 1 
 
Let's open SSMS (SQL Server Management Studio).
 
CRUD Operation Using Web API And Angular 7

Step 2 

Connect to the SSMS.
 
CRUD Operation Using Web API And Angular 7
 
Step 3 
 
I have created the database using the following query.
  1. create Database StudentCurd   

Step 4

I have created a StudentData table.
  1. CREATE TABLE [dbo].[StudentData](  
  2.     [Id] [int] NOT NULL,  
  3.     [StudentName] [varchar](50) NULL,  
  4.     [FName] [varchar](50) NULL,  
  5.     [MName] [varchar](50) NULL,  
  6.     [ContactNo] [varchar](50) NULL,  
  7.  CONSTRAINT [PK_StudentData] PRIMARY KEY CLUSTERED   
  8. (  
  9.     [Id] ASC  
  10. )WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]  
  11. ) ON [PRIMARY]  
  12.   
  13.    

Now, the database looks like below.

CRUD Operation Using Web API And Angular 7

I have created a Web API using ASP.Net Web API. For creating the Web API, we need to follow the following steps.

Step 1 

Open Visual Studio 2017 and go to File > New > Project.
 
CRUD Operation Using Web API And Angular 7
 
CRUD Operation Using Web API And Angular 7
 
Step 2 
 
Select Web >> ASP.NET Web Application.
 
CRUD Operation Using Web API And Angular 7

Step 3 

Then, select Web API and click OK.
 
CRUD Operation Using Web API And Angular 7
 
Step 4 
 
Now, create a new Controller named Student. 
 
CRUD Operation Using Web API And Angular 7
CRUD Operation Using Web API And Angular 7
 
Step 5 
 
Now, import the database using Entity Framework.
 
CRUD Operation Using Web API And Angular 7
 
Step 6 
 
Now, create a method (StudentInsert) for Insert and Update operation on student data in Student Controller.
  1. [Route("StudentInsert")]  
  2.         [HttpPost]  
  3.         public object StudentInsert(StudentVM objVM)  
  4.         {  
  5.             try  
  6.             {  
  7.                 if (objVM.Id == 0)  
  8.                 {  
  9.                     var objlm = new StudentData();  
  10.                     objlm.StudentName = objVM.StudentName;  
  11.                     objlm.FName = objVM.FName;  
  12.                     objlm.MName = objVM.MName;  
  13.                     objlm.ContactNo = objVM.ContactNo;  
  14.                     wmsEN.StudentDatas.Add(objlm);  
  15.                     wmsEN.SaveChanges();  
  16.                     return new ResultVM  
  17.                     { Status = "Success", Message = "SuccessFully Saved." };  
  18.                 }  
  19.                 else  
  20.                 {  
  21.                     var objlm = wmsEN.StudentDatas.Where(s => s.Id == objVM.Id).ToList<StudentData>().FirstOrDefault();  
  22.                     if (objlm.Id > 0)  
  23.                     {  
  24.                         objlm.StudentName = objVM.StudentName;  
  25.                         objlm.FName = objVM.FName;  
  26.                         objlm.MName = objVM.MName;  
  27.                         objlm.ContactNo = objVM.ContactNo;  
  28.                         wmsEN.SaveChanges();  
  29.                         return new ResultVM  
  30.                         { Status = "Success", Message = "SuccessFully Update." };  
  31.                     }  
  32.                     return new ResultVM  
  33.                     { Status = "Error", Message = "Invalid." };  
  34.                 }  
  35.             }  
  36.             catch (Exception ex)  
  37.             {  
  38.                 return new ResultVM  
  39.                 { Status = "Error", Message = ex.Message.ToString() };  
  40.             }  
  41.         }  
Step 7
 
Now, create a method (GetStudentData) for fetching the student data in Student controller.
  1. [Route("GetStudentData")]  
  2.        [HttpGet]  
  3.        public object GetStudentData()  
  4.        {  
  5.            var obj = from u in wmsEN.StudentDatas  
  6.                      select u;  
  7.            return obj;  
  8.        }  

Step 8 

Now, create a method (GetStudentById) for fetching the particluar student data in Student Controller.
  1. [Route("GetStudentById")]  
  2.         [HttpGet]  
  3.         public object GetStudentById(int Id)  
  4.         {  
  5.             return wmsEN.StudentDatas.Where(s => s.Id == Id).ToList<StudentData>().FirstOrDefault();  
  6.         }  

Step 9 

Now, create a method (GetStudentById) for deleting the data in Student Controller.
  1. [Route("DeleteStudent")]  
  2.         [HttpGet]  
  3.         public object  DeleteStudent(int Id)  
  4.         {  
  5.             try  
  6.             {  
  7.                 var objlm = wmsEN.StudentDatas.Where(s => s.Id == Id).ToList<StudentData>().FirstOrDefault();  
  8.                 wmsEN.StudentDatas.Remove(objlm);  
  9.                 wmsEN.SaveChanges();  
  10.                 return new ResultVM  
  11.                 { Status = "Success", Message = "SuccessFully Delete." };  
  12.             }  
  13.             catch (Exception ex)  
  14.             {  
  15.                 return new ResultVM  
  16.                 { Status = "Error", Message = ex.Message.ToString() };  
  17.             }  
  18.         }   
Here is the complete code for StudentController.cs.
  1. using StudentCurdService.Models;  
  2. using StudentCurdService.Models.VM;  
  3. using System;  
  4. using System.Collections.Generic;  
  5. using System.Linq;  
  6. using System.Net;  
  7. using System.Net.Http;  
  8. using System.Threading.Tasks;  
  9. using System.Web.Http;  
  10.   
  11. namespace StudentCurdService.Controllers  
  12. {  
  13.     [RoutePrefix("api/student")]  
  14.     public class StudentController : ApiController  
  15.     {  
  16.   
  17.         StudentCurdEntities1 wmsEN = new StudentCurdEntities1();  
  18.         [Route("StudentInsert")]  
  19.         [HttpPost]  
  20.         public object StudentInsert(StudentVM objVM)  
  21.         {  
  22.             try  
  23.             {  
  24.                 if (objVM.Id == 0)  
  25.                 {  
  26.                     var objlm = new StudentData();  
  27.                     objlm.StudentName = objVM.StudentName;  
  28.                     objlm.FName = objVM.FName;  
  29.                     objlm.MName = objVM.MName;  
  30.                     objlm.ContactNo = objVM.ContactNo;  
  31.                     wmsEN.StudentDatas.Add(objlm);  
  32.                     wmsEN.SaveChanges();  
  33.                     return new ResultVM  
  34.                     { Status = "Success", Message = "SuccessFully Saved." };  
  35.                 }  
  36.                 else  
  37.                 {  
  38.                     var objlm = wmsEN.StudentDatas.Where(s => s.Id == objVM.Id).ToList<StudentData>().FirstOrDefault();  
  39.                     if (objlm.Id > 0)  
  40.                     {  
  41.                         objlm.StudentName = objVM.StudentName;  
  42.                         objlm.FName = objVM.FName;  
  43.                         objlm.MName = objVM.MName;  
  44.                         objlm.ContactNo = objVM.ContactNo;  
  45.                         wmsEN.SaveChanges();  
  46.                         return new ResultVM  
  47.                         { Status = "Success", Message = "SuccessFully Update." };  
  48.                     }  
  49.                     return new ResultVM  
  50.                     { Status = "Error", Message = "Invalid." };  
  51.                 }  
  52.             }  
  53.             catch (Exception ex)  
  54.             {  
  55.                 return new ResultVM  
  56.                 { Status = "Error", Message = ex.Message.ToString() };  
  57.             }  
  58.         }  
  59.         [Route("GetStudentData")]  
  60.         [HttpGet]  
  61.         public object GetStudentData()  
  62.         {  
  63.             var obj = from u in wmsEN.StudentDatas  
  64.                       select u;  
  65.             return obj;  
  66.         }  
  67.         [Route("GetStudentById")]  
  68.         [HttpGet]  
  69.         public object GetStudentById(int Id)  
  70.         {  
  71.             return wmsEN.StudentDatas.Where(s => s.Id == Id).ToList<StudentData>().FirstOrDefault();  
  72.         }  
  73.         [Route("DeleteStudent")]  
  74.         [HttpGet]  
  75.         public object  DeleteStudent(int Id)  
  76.         {  
  77.             try  
  78.             {  
  79.                 var objlm = wmsEN.StudentDatas.Where(s => s.Id == Id).ToList<StudentData>().FirstOrDefault();  
  80.                 wmsEN.StudentDatas.Remove(objlm);  
  81.                 wmsEN.SaveChanges();  
  82.                 return new ResultVM  
  83.                 { Status = "Success", Message = "SuccessFully Delete." };  
  84.             }  
  85.             catch (Exception ex)  
  86.             {  
  87.                 return new ResultVM  
  88.                 { Status = "Error", Message = ex.Message.ToString() };  
  89.             }  
  90.         }  
  91.     }  
  92. }  
For this article, I have created an Angular project using Angular 7. For creating an Angular project, we need to follow the following steps. 

Step 1 

I have created a project using the following command in the Command Prompt.
  1. ng new studentcurd   

Step 2 

Open project in Visual Studio Code using the following commands.
  1. cd studentcurd   
  1. code .  
Open the project in Visual Studio Code.
 
CRUD Operation Using Web API And Angular 7
 
Step 3
 
Now, we install bootstrap in our project using the following command in the terminal.
  1. npm install --save bootstrap   
Step 4
 
After installing bootstrap, we should import bootstrap in style.css.
  1. @import '~bootstrap/dist/css/bootstrap.min.css';

Step 5

I have created a folder named Student/Class/Service in the App Folder .

Step 6 

Now, open a new terminal in VS Code using Ctrl+` or View > Terminal menu.
 
Step 7
 
I have created the StudentVM Class in the Class folder using the following command.
  1. ng g class studentVM  

Step 8

I have added the following fields in StudentVM Class.
  1. export class StudentVM {  
  2.     Id:string;  
  3.     StudentName:string;  
  4.     FName:string;  
  5.     MName:string;  
  6.     ContactNo:string;  
  7. }  
Step 9
 
Create Student Service in Service folder using the following command.
  1. ng g service student    

Step 10

In this class, we use HttpClient to call API Services and all kinds of HTTP Methods - GET and POST. And, I have imported the following references.
  1. import { Injectable } from '@angular/core';    
  2. import {HttpClient} from '@angular/common/http';    
  3. import {HttpHeaders} from '@angular/common/http';    
  4. import { Observable } from 'rxjs';    
  5. import { StudentVM } from '../Class/student-vm';  

Step 11

Declare the API URL in student service using the following code.
  1. Url = 'http://localhost:54996/Api';  

Step 12

I have declared methods for Add, Update, Delete, and Fetch operations in student service using the following code.
  1. getStudent():Observable<StudentVM[]>    
  2.   {    
  3.     return this.http.get<StudentVM[]>(this.Url + '/student/GetStudentData');    
  4.   }    
  5.   CreateStudent(OutletVM:StudentVM):Observable<StudentVM[]>    
  6.   {    
  7.    const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json' }) };    
  8.     return this.http.post<StudentVM[]>(this.Url + '/student/StudentInsert/', OutletVM, httpOptions)    
  9.   }    
  10.   DeleteStudent(StudentId:string):Observable<number>    
  11.   {    
  12.     return this.http.get<number>(this.Url + '/student/DeleteStudent?Id='+StudentId);    
  13.   }    
  14.   getStudentById(StudentId: string): Observable<StudentVM> {    
  15.     return this.http.get<StudentVM>(this.Url + '/student/GetStudentById?Id=' + StudentId);    
  16.   }   

 The complete code for student.service.ts is given below.

  1. import { Injectable } from '@angular/core';    
  2. import {HttpClient} from '@angular/common/http';    
  3. import {HttpHeaders} from '@angular/common/http';    
  4. import { Observable } from 'rxjs';    
  5. import { StudentVM } from '../Class/student-vm';    
  6.     
  7. @Injectable({    
  8.   providedIn: 'root'    
  9. })    
  10. export class StudentService {    
  11.     
  12.   Url = 'http://localhost:54996/Api';    
  13.   constructor(private http:HttpClient) { }    
  14.   getStudent():Observable<StudentVM[]>    
  15.   {    
  16.     return this.http.get<StudentVM[]>(this.Url + '/student/GetStudentData');    
  17.   }    
  18.   CreateStudent(OutletVM:StudentVM):Observable<StudentVM[]>    
  19.   {    
  20.    const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json' }) };    
  21.     return this.http.post<StudentVM[]>(this.Url + '/student/StudentInsert/', OutletVM, httpOptions)    
  22.   }    
  23.   DeleteStudent(StudentId:string):Observable<number>    
  24.   {    
  25.     return this.http.get<number>(this.Url + '/student/DeleteStudent?Id='+StudentId);    
  26.   }    
  27.   getStudentById(StudentId: string): Observable<StudentVM> {    
  28.     return this.http.get<StudentVM>(this.Url + '/student/GetStudentById?Id=' + StudentId);    
  29.   }    
  30. }  
Step 13
 
I have created a Student Component in the Student folder using the following command.
  1. ng g c student   
Step 14
 
I have Imported StudentVM Classs and Student Service and @angular/form and rxjs in Student Component as code as below:
  1. import { StudentVM } from '../../Class/student-vm';    
  2. import { StudentService } from '../../Service/student.service';   
  3. import { NgForm, FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
  4. import { Observable } from 'rxjs';
Step 15
 
I have declared the following field in student Component using the below code,
  1. dataSaved = false;    
  2. massage:string;    
  3. FromStudent: any;    
  4. StudentId:string="0";    
  5. allStudent:Observable<StudentVM[]>;    
  6. constructor(private formbulider: FormBuilder,private StudentService:StudentService) { }    
Step 16 
 
I have created a form builder using the below code,
  1. ngOnInit(): void {  
  2.      this.FromStudent = this.formbulider.group({  
  3.       Id: ['', [Validators.required]],  
  4.       StudentName: ['', [Validators.required]],  
  5.       FName: ['', [Validators.required]],  
  6.       MName: ['', [Validators.required]],  
  7.       ContactNo: ['', [Validators.required]],  
  8.  });  
  9.    this.GetStudent();  
  10. }  

Step 17

I have create a method for getting student data using the below code,
  1. GetStudent( )    
  2. {      
  3.      this.allStudent=this.StudentService.getStudent();    
  4. }    
Step 18
 
I have created a method for adding Student Data using the below code,
  1. AddStudent(StudentVM: StudentVM) {  
  2.         StudentVM.Id = this.StudentId;  
  3.         this.StudentService.CreateStudent(StudentVM).subscribe(  
  4.             () => {  
  5.                 this.dataSaved = true;  
  6.                 this.massage = 'Record saved Successfully';  
  7.                 this.GetStudent();  
  8.                 this.Reset();  
  9.                 this.StudentId = "0";  
  10.             });  

Step 19

I have created a method for editing Student Data using the below code,
  1. StudentEdit(StudentId: string) {  
  2.     debugger;  
  3.     this.StudentService.getStudentById(StudentId).subscribe(Response => {  
  4.         this.massage = null;  
  5.         this.dataSaved = false;  
  6.         debugger;  
  7.         this.StudentId = Response.Id;  
  8.         this.FromStudent.controls['StudentName'].setValue(Response.StudentName);  
  9.         this.FromStudent.controls['FName'].setValue(Response.FName);  
  10.         this.FromStudent.controls['MName'].setValue(Response.MName);  
  11.         this.FromStudent.controls['ContactNo'].setValue(Response.ContactNo);  
  12.     });  
  13. }  
Step 20 
 
I have created a method for deleting Student Data using the below code,
  1. DeleteStudent(StudentId: string) {  
  2.     if (confirm("Are You Sure To Delete this Informations")) {  
  3.         this.StudentService.DeleteStudent(StudentId).subscribe(  
  4.             () => {  
  5.                 this.dataSaved = true;  
  6.                 this.massage = "Deleted Successfully";  
  7.                 this.GetStudent();  
  8.             });  
  9.     }  
  10. }   
Step 21
 
I have created a method for resetting all controls using the below code,
  1. Reset()    
  2. {    
  3.    this.FromStudent.reset();    
  4. }   

Complete code for student-componant.ts,

  1. import {  
  2.  Component,  
  3.  OnInit  
  4. } from '@angular/core';  
  5. import {  
  6.  StudentVM  
  7. } from '../../Class/student-vm';  
  8. import {  
  9.  StudentService  
  10. } from '../../Service/student.service';  
  11. import {  
  12.  Observable  
  13. } from 'rxjs';  
  14. import {  
  15.  NgForm,  
  16.  FormBuilder,  
  17.  FormGroup,  
  18.  Validators,  
  19.  FormControl  
  20. } from '@angular/forms';  
  21. @Component({  
  22.  selector: 'app-student',  
  23.  templateUrl: './student.component.html',  
  24.  styleUrls: ['./student.component.css']  
  25. })  
  26. export class StudentComponent implements OnInit {  
  27.  dataSaved = false;  
  28.  massage: string;  
  29.  FromStudent: any;  
  30.  StudentId: string = "0";  
  31.  allStudent: Observable < StudentVM[] > ;  
  32.  constructor(private formbulider: FormBuilder, private StudentService: StudentService) {}  
  33.  GetStudent() {  
  34.   debugger;  
  35.   this.allStudent = this.StudentService.getStudent();  
  36.  }  
  37.  Reset() {  
  38.   this.FromStudent.reset();  
  39.  }  
  40.  AddStudent(StudentVM: StudentVM) {  
  41.   debugger;  
  42.   StudentVM.Id = this.StudentId;  
  43.   this.StudentService.CreateStudent(StudentVM).subscribe(  
  44.    () => {  
  45.     this.dataSaved = true;  
  46.     this.massage = 'Record saved Successfully';  
  47.     this.GetStudent();  
  48.     this.Reset();  
  49.     this.StudentId = "0";  
  50.    });  
  51.  }  
  52.  DeleteStudent(StudentId: string) {  
  53.   if (confirm("Are You Sure To Delete this Informations")) {  
  54.    this.StudentService.DeleteStudent(StudentId).subscribe(  
  55.     () => {  
  56.      this.dataSaved = true;  
  57.      this.massage = "Deleted Successfully";  
  58.      this.GetStudent();  
  59.     }  
  60.    );  
  61.   }  
  62.  }  
  63.  StudentEdit(StudentId: string) {  
  64.   debugger;  
  65.   this.StudentService.getStudentById(StudentId).subscribe(Response => {  
  66.    this.massage = null;  
  67.    this.dataSaved = false;  
  68.    debugger;  
  69.    this.StudentId = Response.Id;  
  70.    this.FromStudent.controls['StudentName'].setValue(Response.StudentName);  
  71.    this.FromStudent.controls['FName'].setValue(Response.FName);  
  72.    this.FromStudent.controls['MName'].setValue(Response.MName);  
  73.    this.FromStudent.controls['ContactNo'].setValue(Response.ContactNo);  
  74.   });  
  75.  }  
  76.  ngOnInit(): void {  
  77.   this.FromStudent = this.formbulider.group({  
  78.    Id: ['', [Validators.required]],  
  79.    StudentName: ['', [Validators.required]],  
  80.    FName: ['', [Validators.required]],  
  81.    MName: ['', [Validators.required]],  
  82.    ContactNo: ['', [Validators.required]],  
  83.   });  
  84.   this.GetStudent();  
  85.  }  
  86. }  
Step 22 
 
I have added a table displaying student data in student.componant.html using the below code, 
  1. <div class="card-footer">  
  2.     <div class="col-lg-12 table-responsive">  
  3.         <table class="table table-striped">  
  4.             <thead>  
  5.                 <tr>  
  6.                     <th>Id</th>  
  7.                     <th>Student Name</th>  
  8.                     <th>Father Name</th>  
  9.                     <th>Mother Name</th>  
  10.                     <th>ContactNo</th>  
  11.                     <th></th>  
  12.                 </tr>  
  13.             </thead>  
  14.             <tbody>  
  15.                 <tr *ngFor="let Student of allStudent|async">  
  16.                     <td>{{Student.Id}}</td>  
  17.                     <td>{{Student.StudentName}}</td>  
  18.                     <td>{{Student.FName}}</td>  
  19.                     <td>{{Student.MName}}</td>  
  20.                     <td>{{Student.ContactNo}}</td>  
  21.                     <td>  
  22.                         <button type="button" class="btn btn-primary mr-1" (click)="StudentEdit(Student.Id)">Edit</button>  
  23.                         <button type="button" class="btn btn-danger mr-1" (click)="DeleteStudent(Student.Id)">Delete</button>  
  24.                     </td>  
  25.                 </tr>  
  26.             </tbody>  
  27.         </table>  
  28.     </div>  
  29. </div>   

Step 23

I have added controls for CRUD operations in student.component.html using below code,
  1. <div class="form-group col-sm-3">  
  2.     <label for="company">Student Name</label>  
  3.     <input type="text" class="form-control" formControlName="StudentName" id="company" placeholder="Enter Student Name" >  
  4.     </div>  
  5.     <div class="form-group col-sm-3">  
  6.         <label for="company">ContactNo</label>  
  7.         <input type="text" class="form-control" formControlName="ContactNo" id="ContactNo" placeholder="Enter ContactNo" >  
  8.         </div>  
  9.         <div class="form-group col-sm-3">  
  10.             <label for="company">Father Name</label>  
  11.             <input type="text" class="form-control" formControlName="FName" id="FatherName" placeholder="Enter Father Name" >  
  12.             </div>  
  13.             <div class="form-group col-sm-3">  
  14.                 <label for="company">Mother Name</label>  
  15.                 <input type="text" class="form-control" formControlName="MName" id="MotherName" placeholder="Enter Mother Name" >  
  16.                 </div>  
  17.             </div>  
  18.             <div class="row">  
  19.                 <div class="form-group col-sm-3">  
  20.                     <button type="submit" class="btn btn-primary" >Add Student</button>  
  21.                 </div>  
  22.             </div>  
  23.         </form>  
  24.     </div>     

Complete code for Student.Component.html  

  1. <div class="card">  
  2.     <div class="card-header" style="text-align:center">  
  3.         <b>WEL COME TO STUDENT CURD OPERATION</b>  
  4.     </div>  
  5.     <div class="card-body">  
  6.         <form [formGroup]="FromStudent" (ngSubmit)="AddStudent(FromStudent.value)">  
  7.             <div class="row">  
  8.                 <div class="form-group col-sm-3">  
  9.                     <label for="company">Student Name</label>  
  10.                     <input type="text" class="form-control" formControlName="StudentName" id="company" placeholder="Enter Student Name" >  
  11.                     </div>  
  12.                     <div class="form-group col-sm-3">  
  13.                         <label for="company">ContactNo</label>  
  14.                         <input type="text" class="form-control" formControlName="ContactNo" id="ContactNo" placeholder="Enter ContactNo" >  
  15.                         </div>  
  16.                         <div class="form-group col-sm-3">  
  17.                             <label for="company">Father Name</label>  
  18.                             <input type="text" class="form-control" formControlName="FName" id="FatherName" placeholder="Enter Father Name" >  
  19.                             </div>  
  20.                             <div class="form-group col-sm-3">  
  21.                                 <label for="company">Mother Name</label>  
  22.                                 <input type="text" class="form-control" formControlName="MName" id="MotherName" placeholder="Enter Mother Name" >  
  23.                                 </div>  
  24.                             </div>  
  25.                             <div class="row">  
  26.                                 <div class="form-group col-sm-3">  
  27.                                     <button type="submit" class="btn btn-primary" >Add Student</button>  
  28.                                 </div>  
  29.                             </div>  
  30.                         </form>  
  31.                     </div>  
  32.                     <div class="card-footer">  
  33.                         <div class="col-lg-12 table-responsive">  
  34.                             <table class="table table-striped">  
  35.                                 <thead>  
  36.                                     <tr>  
  37.                                         <th>Id</th>  
  38.                                         <th>Student Name</th>  
  39.                                         <th>Father Name</th>  
  40.                                         <th>Mother Name</th>  
  41.                                         <th>ContactNo</th>  
  42.                                         <th></th>  
  43.                                     </tr>  
  44.                                 </thead>  
  45.                                 <tbody>  
  46.                                     <tr *ngFor="let Student of allStudent|async">  
  47.                                         <td>{{Student.Id}}</td>  
  48.                                         <td>{{Student.StudentName}}</td>  
  49.                                         <td>{{Student.FName}}</td>  
  50.                                         <td>{{Student.MName}}</td>  
  51.                                         <td>{{Student.ContactNo}}</td>  
  52.                                         <td>  
  53.                                             <button type="button" class="btn btn-primary mr-1" (click)="StudentEdit(Student.Id)">Edit</button>  
  54.                                             <button type="button" class="btn btn-danger mr-1" (click)="DeleteStudent(Student.Id)">Delete</button>  
  55.                                         </td>  
  56.                                     </tr>  
  57.                                 </tbody>  
  58.                             </table>  
  59.                         </div>  
  60.                     </div>  
  61.                 </div>    
Step 24
 
Let's start the project using the following command:
  1. npm start  

Add Student 

CRUD Operation Using Web API And Angular 7
 
Student List
 
CRUD Operation Using Web API And Angular 7
 

Summary

 
In this article I have discussed CRUD operations using Web API and Angular 7. In my next article I am going to discuss cascading dropdowns using Angular 7.


Similar Articles