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>
<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>
<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());
}
}
