Build Crud Operation Using Angular 9

 formGroup And .Net Core 3.1 Code

 First  Web API 


Introduction


In this article, we are creating a CRUD Operation using Angular 9 in the front end and Dot Net Core 3.1 in the backend, and Entity framework core Using CodeFirst approach  let's start.

Prerequisites :- 
  • Visual studio 2019 Or Any
  • VS code
  • SQL Server

Now, we are creating a new dot net core web application. Open Visual Studio 2019 and select Asp.net core web application.


Server-Side Code


Now select Asp.net core Web API template then click on Next button.


Now enter our project name - let's say the name is Employee. You can enter any name as you want. See the below screenshot for the project name and location of our application. 






After that Click on Create Button.



                            Our application is created successfully, Our structure Look Like This-




EmployeeInfo.cs

 public class EmployeeInfo
    {
        [Key]
        public int? EmpId { get; set; }
        public string EmpName { get; set; }
        public string EmpContact { get; set; }
        public string EmpEmail { get; set; }
        public string EmpAddress { get; set; }
    }





Create a new folder Context for DB Context then create a new class with name as EmployeeContext. After creating the class we need to install packages for Entity framework core. 

  • Microsoft.EntityFrameworkCore.SqlServer
  • Microsoft.EntityFrameworkCore

Now we have installed  dependency for our application from manage NuGet packages. We are writing code as given below in the context class. Ex Data Layer.

EmployeeContext.cs 

  public class EmployeeContext:DbContext
    {
        public EmployeeContext(DbContextOptions<EmployeeContext>opt):base(opt)
        {
        }
        public DbSet<EmployeeInfo> employees { get; set; }
    }




Now open the appsetting.json and write code for our database connection string.

appsetting.json


{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft": "Warning",
      "Microsoft.Hosting.Lifetime": "Information"
    }
  },
  "AllowedHosts": "*",
  "ConnectionStrings": {
    "EmployeeDbConnection": "Data Source=;Initial Catalog=UserManagement;Integrated Security=True"
  }
  },



We are creating a new controller --  let's name it Employee controller and writing methods for performing create read update and delete operations.


EmployeeController.cs

using EmployeeServer.Dal;
using EmployeeServer.Models;
using Microsoft.AspNetCore.Mvc;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespace EmployeeServer.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class EmployeeController : ControllerBase
    {
        readonly EmployeeContext EmpDetails;
        public EmployeeController(EmployeeContext employeeContext)
        {
            EmpDetails = employeeContext;
        }
        // Our  Get Method  ../////
        [HttpGet]
        public IEnumerable<Employee> Get()
        {
            var data = EmpDetails.Employee.ToList();
            return data;
        }
        // Our  Post Method  ../////
        [HttpPost]
        public IActionResult Post([FromBody] Employee obj)
        {
            var data = EmpDetails.Employee.Add(obj);
            EmpDetails.SaveChanges();
            return Ok();
        }
        // Our  Update Method  ../////
        [HttpPut("{id}")]
        public IActionResult Put(int id, [FromBody] Employee obj)
        {
            var data = EmpDetails.Employee.Update(obj);
            EmpDetails.SaveChanges();
            return Ok();
        }
        // Our  Delete Method  ../////
        [HttpDelete("{id}")]
        public IActionResult Delete(int id)
        {
            var data = EmpDetails.Employee.Where(a => a.EmpId == id).FirstOrDefault();
            EmpDetails.Employee.Remove(data);
            EmpDetails.SaveChanges();
            return Ok();
        }
    }
}
Screenshot Look Like This->



Open the startup class and write the code as given below Here We Are Set database Connection on Run time.

  public void ConfigureServices(IServiceCollection services)
        {
            services.AddControllers();
            services.AddDbContextPool<EmployeeContext>(options => options.UseSqlServer(Configuration.GetConnectionString("EmployeeDbConnection")));
        }

Screenshot look like this.

Using Entity Framework Core Migrations

We have created entity models and DbContext object above so it is now time to generate our database with the help of migrations. Migrations allow us to easily create a new database and then incrementally update the database schema to keep it in sync with the application models. You can run migrations using .NET Core CLI tools which will work on all platforms but if you want to stay within Visual Studio then you can also use Package Manager Console tools. For this tutorial, I will use Package Manager Console tools so let open Package Manager Console and add our first migration using the following Add-Migration command.


1
Add-Migration InitialDatabaseCreate

EF Core will create a directory called Migrations in the project and will also generate some files in this folder. Every time you will add a new migration using the Add-Migration command, a new file will be created in the Migrations folder.




We are now ready to create our database and tables using the migration code generated for us. This can be done by running Update-Database command in Package Manager Console within Visual Studio.

1
Update-Database


Open the startup class and write the code as given below. You also need to install dependencies for running our Angular static folder.
  •  Microsoft.AspNetCore.SpaServices.Extensions
Now we have installed Spa dependency for our application from manage NuGet packages. Create a new folder for front end files -- name it FrontEnd. After that run our application and confirm it is working fine.

Startup.cs

using EmployeeServer.Dal;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.HttpsPolicy;
using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using Microsoft.Extensions.Logging;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace EmployeeServer
{
    public class Startup
    {
        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
           
        }

        public IConfiguration Configuration { get; }

        // This method gets called by the runtime. Use this method to add services to the container.
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddControllers();
            services.AddDbContextPool<EmployeeContext>(options => options.UseSqlServer(Configuration.GetConnectionString("EmployeeDbConnection")));
            services.AddSpaStaticFiles(configuration => {
                configuration.RootPath = "FrontEnd/dist";
            });

        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }

            app.UseCors(builder => builder
              .AllowAnyHeader()
              .AllowAnyMethod()
              .SetIsOriginAllowed((host) => true)
              .AllowCredentials()
              );
            app.UseHttpsRedirection();
            app.UseRouting();
            app.UseAuthorization();

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllers();
            });

            app.UseSpaStaticFiles();
            app.UseSpa(spa =>
            {
                spa.Options.SourcePath = "FrontEnd";
            });
        }
    }
}

Front-End Code



Now we are creating a new Angular application using the  below command. Let's say the  application name is EmployeeFrontEnd as we mentioned above.

  • ng new EmployeeFrontEnd



Now ng serve --o 
Run The Project It's look like-

Once our Angular project is created successfully, open project in vs code. Create one service for HTTP service using the below command:
  • ng g s service
After creating service write the below code.

service.service.ts 


  1. import { Injectable } from '@angular/core';  
  2. import { HttpClient,HttpHeaders }    from '@angular/common/http';  
  3. @Injectable({  
  4.   providedIn: 'root'  
  5. })  
  6.   
  7. export class ServiceService {  
  8.   
  9. constructor(private http: HttpClient) { }  
  10.   httpOptions = {  
  11.     headers: new HttpHeaders({  
  12.       'Content-Type': 'application/json'  
  13.     })  
  14.   }    
  15.   getData(){  
  16.        
  17.     return this.http.get('/api/Employee');  //https://localhost:44352/ webapi host url  
  18.   }  
  19.   
  20.   postData(formData){  
  21.     return this.http.post('/api/Employee',formData);  
  22.   }  
  23.   
  24.   putData(id,formData){  
  25.     return this.http.put('/api/Employee/'+id,formData);  
  26.   }  
  27.   deleteData(id){  
  28.     return this.http.delete('/api/Employee/'+id);  
  29.   }  
  30. }  


Open app.module file and import some package for form builder and import service and install bootstrap using this command npm install bootstrap.

app.module.ts 

  1. import { BrowserModule } from '@angular/platform-browser';  
    import { NgModule } from '@angular/core';  
      
    import { AppComponent } from './app.component';  
    import { FormsModule, ReactiveFormsModule } from '@angular/forms';  
    import { HttpClientModule }    from '@angular/common/http';  
    import {ServiceService} from './service.service';  
    @NgModule({  
      declarations: [  
        AppComponent  
      ],  
      imports: [  
        BrowserModule,  
        FormsModule,  
        ReactiveFormsModule,  
        HttpClientModule  
      
      ],  
      providers: [ServiceService],  
      bootstrap: [AppComponent]  
    })  
    export class AppModule { }  


Open app.component ts file and writethe  below code for the call methods of service.

app.component.ts 

import { Component } from '@angular/core';  
import {ServiceService} from './service.service';  
import { FormGroup, FormControl,Validators } from '@angular/forms';   
@Component({  
  selector: 'app-root',  
  templateUrl: './app.component.html',  
  styleUrls: ['./app.component.css']  
})  
export class AppComponent {  
  title = 'EmployeeFrontEnd';  
     
  constructor(private ServiceService: ServiceService) { }  
  data: any;  
  EmpForm!: FormGroup;  
  submitted = false;   
  EventValue: any = "Save";  
  
  ngOnInit(): void {  
    this.getdata();  
  
    this.EmpForm = new FormGroup({  
      empId: new FormControl(null),  
      empName: new FormControl("",[Validators.required]),        
      empContact: new FormControl("",[Validators.required]),  
      empEmail:new FormControl("",[Validators.required]),  
      empAddress: new FormControl("",[Validators.required]),  
    })    
  }  
  getdata() {  
    this.ServiceService.getData().subscribe(data=> {  
      this.data = data;  
    })  
  }  
  deleteData(id:any) {  
    this.ServiceService.deleteData(id).subscribe(data => {  
      this.data = data;  
      this.getdata();  
    })  
  }  
  Save() {   
    this.submitted = true;  
    
     if (this.EmpForm.invalid) {  
            return;  
     }  
    this.ServiceService.postData(this.EmpForm.value).subscribe(data => {  
      this.data = data;  
      this.resetFrom();  
  
    })  
  }  
  Update() {   
    this.submitted = true;  
    
    if (this.EmpForm.invalid) {  
     return;  
    }        
    this.ServiceService.putData(this.EmpForm.value.empId,this.EmpForm.value).subscribe(data=> {  
      this.data = data;  
      this.resetFrom();  
    })  
  }  
  
  EditData(Data:any) {  
    this.EmpForm.controls["empId"].setValue(Data.empId);  
    this.EmpForm.controls["empName"].setValue(Data.empName);      
    this.EmpForm.controls["empContact"].setValue(Data.empContact);  
    this.EmpForm.controls["empEmail"].setValue(Data.empEmail);  
    this.EmpForm.controls["empAddress"].setValue(Data.empAddress);  
    this.EventValue = "Update";  
  }  
  
  resetFrom()  
  {     
    this.getdata();  
    this.EmpForm.reset();  
    this.EventValue = "Save";  
    this.submitted = false;   
  }  
}  


Open app.component Html file and write the below code.

  1. <div class="container">  
  2.     
  3. <form [formGroup]="EmpForm" (ngSubmit)="this[EventValue]()">  
  4.     
  5.     <h3>Employee Table CRUD Operation</h3>  
  6.     <div class="row">  
  7.          
  8.     <table class="table">  
  9.     <tr>  
  10.       <td>Name</td>  
  11.       <td>  
  12.         <input type="hidden" formControlName="empId">  
  13.         <input type="text" formControlName="empName">  
  14.         <div *ngIf="submitted && EmpForm.controls.empName.errors" class="text-danger">  
  15.           <div *ngIf="EmpForm.controls.empName.errors.required">Name is required</div>  
  16.         </div>   
  17.       </td>  
  18.     </tr>  
  19.       
  20.     <tr>  
  21.       <td>Contact</td>  
  22.       <td><input type="text" formControlName="empContact">  
  23.         <div *ngIf="submitted && EmpForm.controls.empContact.errors" class="text-danger">  
  24.           <div *ngIf="EmpForm.controls.empContact.errors.required">Contact is required</div>  
  25.         </div>   
  26.       </td>  
  27.     </tr>  
  28.     <tr>  
  29.       <td>Email</td>  
  30.       <td>  
  31.         <input type="text" formControlName="empEmail">  
  32.         <div *ngIf="submitted && EmpForm.controls.empEmail.errors" class="text-danger">  
  33.           <div *ngIf="EmpForm.controls.empEmail.errors.required">Email is required</div>  
  34.         </div>  
  35.       </td>  
  36.     </tr>  
  37.     <tr>  
  38.       <td>Address</td>  
  39.       <td>  
  40.         <input type="text" formControlName="empAddress">  
  41.         <div *ngIf="submitted && EmpForm.controls.empAddress.errors" class="text-danger">  
  42.           <div *ngIf="EmpForm.controls.empAddress.errors.required">Address is required</div>  
  43.         </div>  
  44.           
  45.       </td>  
  46.     </tr>  
  47.     <tr>  
  48.   
  49.       <td colspan="2">  
  50.         <button type="submit" class="btn btn-primary">{{EventValue}}</button>  
  51.       </td>  
  52.     </tr>  
  53.       
  54.   </table>  
  55.   </div>  
  56.      
  57.  <div class="row">  
  58.   <table class="table table-striped">  
  59.     <tr>  
  60.       <td>Id</td>  
  61.       <td>Name</td>  
  62.         
  63.       <td>Contact</td>  
  64.       <td>Email</td>  
  65.       <td>Address</td>  
  66.       <td>Edit</td>  
  67.       <td>Delete</td>  
  68.     </tr>  
  69.   
  70.     <tr *ngFor="let d of data">  
  71.       <td>{{d.empId}}</td>  
  72.       <td>{{d.empName}}</td>  
  73.        
  74.       <td>{{d.empContact}}</td>  
  75.       <td>{{d.empEmail}}</td>  
  76.       <td>{{d.empAddress}}</td>  
  77.       <td><a (click)="EditData(d)" class="btn btn-warning">Edit</a></td>  
  78.       <td><a (click)="deleteData(d.empId)" class="btn btn-danger">Delete</a></td>    
  79.     </tr>  
  80.   </table>  
  81. </div>  
  82. </form>  
  83.   
  84. </div>  

Now run our front end application and confirm it is working fine using ng serve command and ng build command for creating dist folder.
  • ng serve
  • ng build --prod