employee.component.html
<form class="emp-form" #employeeForm="ngForm" (ngSubmit)="onSubmit(employeeForm)">
<input type="hidden" name="EmployeeID" #EmployeeID="ngModel" [(ngModel)]="employeeService.selectedEmployee.EmployeeID">
<div class="form-row">
<div class="form-group col-md-6">
<input class="form-control" name="FirstName" #FirstName="ngModel" [(ngModel)]="employeeService.selectedEmployee.FirstName"
placeholder="First Name" required>
<div class="validation-error" *ngIf="FirstName.invalid && FirstName.touched">This Field is Required.</div>
</div>
<div class="form-group col-md-6">
<input class="form-control" name="LastName" #LastName="ngModel" [(ngModel)]="employeeService.selectedEmployee.LastName" placeholder="Last Name"
required>
<div class="validation-error" *ngIf="LastName.invalid && LastName.touched">This Field is Required.</div>
</div>
</div>
<div class="form-group">
<input class="form-control" name="Position" #Position="ngModel" [(ngModel)]="employeeService.selectedEmployee.Position" placeholder="Position">
</div>
<div class="form-row">
<div class="form-group col-md-6">
<input class="form-control" name="EmpCode" #EmpCode="ngModel" [(ngModel)]="employeeService.selectedEmployee.EmpCode" placeholder="Emp Code">
</div>
<div class="form-group col-md-6">
<input class="form-control" name="Office" #Office="ngModel" [(ngModel)]="employeeService.selectedEmployee.Office" placeholder="Office">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-8">
<button [disabled]="!employeeForm.valid" type="submit" class="btn btn-lg btn-block btn-info">
<i class="fa fa-floppy-o"></i> Submit</button>
</div>
<div class="form-group col-md-4">
<button type="button" class="btn btn-lg btn-block btn-secondary" (click)="resetForm(employeeForm)">
<i class="fa fa-repeat"></i> Reset</button>
</div>
</div>
</form>
employee.component.ts
import { Component, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms'
import { EmployeeService } from '../shared/employee.service'
import { ToastrService } from 'ngx-toastr'
@Component({
selector: 'app-employee',
templateUrl: './employee.component.html',
styleUrls: ['./employee.component.css']
})
export class EmployeeComponent implements OnInit {
constructor(private employeeService: EmployeeService, private toastr: ToastrService) { }
ngOnInit() {
this.resetForm();
}
resetForm(form?: NgForm) {
if (form != null)
form.reset();
this.employeeService.selectedEmployee = {
EmployeeID: null,
FirstName: '',
LastName: '',
EmpCode: '',
Position: '',
Office: ''
}
}
onSubmit(form: NgForm) {
if (form.value.EmployeeID == null) {
this.employeeService.postEmployee(form.value)
.subscribe(data => {
this.resetForm(form);
this.employeeService.getEmployeeList();
this.toastr.success('New Record Added Succcessfully', 'Employee Register');
})
}
else {
this.employeeService.putEmployee(form.value.EmployeeID, form.value)
.subscribe(data => {
this.resetForm(form);
this.employeeService.getEmployeeList();
this.toastr.info('Record Updated Successfully!', 'Employee Register');
});
}
}
}
employee.model.ts
export class Employee {
EmployeeID : number;
FirstName:string;
LastName:string;
EmpCode:string;
Position:string;
Office:string;
}
employee.service.ts
import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions, RequestMethod } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';
import {Employee} from'./employee.model'
@Injectable()
export class EmployeeService {
selectedEmployee : Employee;
employeeList : Employee[];
constructor(private http : Http) { }
postEmployee(emp : Employee){
var body = JSON.stringify(emp);
var headerOptions = new Headers({'Content-Type':'application/json'});
var requestOptions = new RequestOptions({method : RequestMethod.Post,headers : headerOptions});
return this.http.post('http://localhost:28750/api/Employee',body,requestOptions).map(x => x.json());
}
putEmployee(id, emp) {
var body = JSON.stringify(emp);
var headerOptions = new Headers({ 'Content-Type': 'application/json' });
var requestOptions = new RequestOptions({ method: RequestMethod.Put, headers: headerOptions });
return this.http.put('http://localhost:28750/api/Employee/' + id,
body,
requestOptions).map(res => res.json());
}
getEmployeeList(){
this.http.get('http://localhost:28750/api/Employee')
.map((data : Response) =>{
return data.json() as Employee[];
}).toPromise().then(x => {
this.employeeList = x;
})
}
deleteEmployee(id: number) {
return this.http.delete('http://localhost:28750/api/Employee/' + id).map(res => res.json());
}
}