SQL Database with API in Angular CRUD Services

 

Create WebAPI project in Visual Studio to Project folder

Select File Name  à  OK à Web (Select in Left Side) à Select  ASP .Net Web Application (.Net Framework)  à OK

Select Web API à OK

 

Create Database Table

                Table  name is EmployeeDB

                Create new table in EmployeeDB

                                Create columns in a table

 

Save after choose name file (Employee) à OK

Come to Visual Studio right click on Models à Add New Item à

select left side Data à Select right side ADO.Net Entity Data Model -- > Enter DBModels à Add

Next

Click on New Connection…

 

Click on ADD button

Created controller

Completed Web API and Connected to DataBase

 

 

Create Angular NEW PROJECT

In terminal

Create ng g c employee-data

Create ng g c employee-data/employee

Create ng g c employee-data/employee-lists

Create folder ShareEmployee in employee-data

ShareEmployee open in Terminal  à ng g class Employee

                                                                   à ng g s employee

npm install --save  @angular/http

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { EmployeeDataComponent } from './employee-data/employee-data.component';
import { EmployeeComponent } from './employee-data/employee/employee.component';
import { EmployeeListsComponent } from './employee-data/employee-lists/employee-lists.component';
import { from } from 'rxjs';

@NgModule({
 declarations: [
    AppComponent,
    EmployeeDataComponent,
    EmployeeComponent,
    EmployeeListsComponent,

    ],
 imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    HttpModule

  ],
 providers: [],
 bootstrap: [AppComponent]
})

export class AppModule { }

 

employee-data.component.html

<div class="bg-dark text-white text-center" style="padding:20px; margin-bottom: 20px;">
<h3>Employee Details
<a [routerLink]="['/Students']" class="btn btn-primary pull-right">Students</a>
</h3>
</div>

<div class="row">
<div class="col-md-4" style="padding:0px">
    <app-employee></app-employee>
</div>
<div class="col-md-8">
    <app-employee-lists></app-employee-lists>
</div>
</div>

employee-data à employee à employee.component.html

<form class="emp-forms" #employeeForms="ngForm" (ngSubmit)="onSubmit(employeeForms)">
<input type="hidden" class="form-control" placeholder="Employee ID" name="EmployeeID" #EmployeeID="ngModel"
                     [(ngModel)]="employeeservice.SelectedEmployee.EmployeeID">
<div class="col-md-12 form-group">
   <input type="text" class="form-control" placeholder="Employee Name" name="EmployeeName" #EmployeeName="ngModel"                      [(ngModel)]="employeeservice.SelectedEmployee.EmployeeName">
</div>

<div class="col-md-12 form-group">
<input type="text" class="form-control" placeholder="Employee Code" name="EmployeeCode" #EmployeeCode="ngModel"
       [(ngModel)]="employeeservice.SelectedEmployee.EmployeeCode">
</div>
<div class="col-md-12 form-group">
<input type="text" class="form-control" placeholder="Employee TP" name="EmployeeTP" #EmployeeTP="ngModel"
       [(ngModel)]="employeeservice.SelectedEmployee.EmployeeTP">
</div>
<div class="col-md-12 form-group">
<input type="text" class="form-control" placeholder="Email ID" name="EmployeeEmail" #EmployeeEmail="ngModel"
       [(ngModel)]="employeeservice.SelectedEmployee.EmployeeEmail">
</div>
<div class="col-md-12 form-group">
<button type="submit" class="btn btn-primary">Submit</button> &nbsp;
<button type="button" class="btn btn-secondary" (click)="resetButton(employeeForms)">Reset</button>
</div>
</form>

employee-data à employee à employee.component.ts

import { Component, OnInit } from '@angular/core';
import { Employee } from '../ShareEmployee/employee';
import { EmployeeService } from '../ShareEmployee/employee.service';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-employee',
  templateUrl: './employee.component.html',
  styleUrls: ['./employee.component.css']
})

export class EmployeeComponent implements OnInit {
 constructor(public employeeservice: EmployeeService) {  }
 
 ngOnInit() {
   this.employeeservice.SelectedEmployee = {
      EmployeeID: null,
      EmployeeCode: '',
      EmployeeEmail: '',
      EmployeeName: '',
      EmployeeTP: ''
     }
 }

      resetButton(form: NgForm) {
      if (form != null) form.reset();
      }

 

  onSubmit(form: NgForm) {
    if (form.value.EmployeeID == null) {
      form.value.EmployeeID = 0;
      this.employeeservice.PostEmployees(form.value).subscribe(data => {
        this.resetButton(form);
    })
     }else{
      this.employeeservice.PutEmployees(form.value.EmployeeID, form.value).subscribe(data =>{
      this.resetButton(form);
       this.employeeservice.GetEmployee();
      })
    }

  }
}

employee-data à employee à employee-lists.component.html

<table class="table table-hover">
<thead>
<tr>
<th>Sno</th>
<th>ID</th>
<th>Name</th>
<th>TP</th>
<th>Email</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let employee of employeeservice.EmployeeLists">
<td>{{employee.EmployeeID}}</td>
<td>{{employee.EmployeeCode}}</td>
<td>{{employee.EmployeeName}}</td>
<td>{{employee.EmployeeTP}}</td>
<td>{{employee.EmployeeEmail}}</td>
<td>
<a routerLink="#" class="text-primary" (click)="editEmployee(employee)"><i class="fa fa-edit"></i></a> &nbsp;
 <a class="text-danger" (click)="onDelete(employee.EmployeeID)"><i class="fa fa-trash"></i></a>
</td>
</tr>
</tbody>
</table>

  

employee-data à employee à employee-lists.component.ts

import { Component, OnInit } from '@angular/core';
import { EmployeeService } from '../ShareEmployee/employee.service';
import { Employee } from '../ShareEmployee/employee';

@Component({
  selector: 'app-employee-lists',
  templateUrl: './employee-lists.component.html',
  styleUrls: ['./employee-lists.component.css']
})

export class EmployeeListsComponent implements OnInit {
  constructor(public employeeservice: EmployeeService) { }
  ngOnInit() {
    this.employeeservice.GetEmployee();
  }

editEmployee(emp: Employee) {
    this.employeeservice.SelectedEmployee = Object.assign({}, emp)
  }

onDelete(id: number) {
    if (confirm('Do you want to Delete this Employee Details ?') == true) {
      this.employeeservice.DeleteEmployee(id).subscribe(x => {
      this.employeeservice.GetEmployee();
    })
   }
  }
}

employee-data à share-employee à employee.ts

export class Employee {
    EmployeeID: number;
    EmployeeName: string;
    EmployeeCode: string;
    EmployeeTP: string;
    EmployeeEmail: string;
}

employee-data à share-employee à employee.service.ts

import { Injectable } from '@angular/core';
import { Employee } from '../ShareEmployee/employee';

import { Http, Response, Headers, RequestOptions, RequestMethod } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';

@Injectable({
  providedIn: 'root'
})

export class EmployeeService {

SelectedEmployee: Employee;
EmployeeLists: Employee[];

constructor(private http: Http) { }

PostEmployees(emplo: any) {
  return this.http.post('http://localhost:61917/api/Employees', emplo).map(x => x.json());
}

PutEmployees(id, emplo) {
   return this.http.put('http://localhost:61917/api/Employees/' + id, emplo).map(x => x.json());
}

GetEmployee(){
this.http.get('http://localhost:61917/api/Employees').map((data:Response) => {
return data.json() as Employee[];
}).toPromise().then(x => {
this.EmployeeLists = x;
})
}

DeleteEmployee(id : number){
return this.http.delete('http://localhost:61917/api/Employees/' + id).map(res => res.json());
}

}