Click here to Skip to main content
13,251,556 members (88,005 online)
Click here to Skip to main content
Add your own
alternative version

Stats

6.8K views
11 bookmarked
Posted 19 Apr 2017

SPA Using Angular 2, ASP.NET Core 1.1 and Entity Framework Core (Part 2)

, 19 Apr 2017
Rate this:
Please Sign up or sign in to vote.
This is the second part of the series where we learn how setup an Angular 2 with .NET Core

Introduction

This is second part of this series, if you don’t read previous article then you can read that article using following link.

SPA Using Angular 2, ASP.NET Core 1.1 And Entity Framework Core - Part One

In first part of this series we covered the following topics.

  • Setup development environment for Angular 2
  • Understand the structure of application
  • Add Entity Framework in Project
  • Create new pages to see the Employee List.
  • Perform Angular 2 routing.
  • Add Service

In this second and final part of series we will cover following topics.

  • Add functionality to add a new employee.
  • Show the details of existing employee.
  • Edit details of existing employee.
  • Delete existing employee.
  • Add searching functionality to employee listing page.

Let’s cover all above points one by one.

Add New Employee

Home page of our application contains "New Employee" option in side menu, on click of this menu item a new screen will open where we can add a new employee entry. We will create following screen to add the details of a new employee.

You can see that in add employee page we have a dropdown for the projects list, so first of all we needs to create any API using that we can get the list of projects. For this right click on "Controller" folder and a new API controller and named this controller as "ProjectsController" and paste following code in this controller.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using EMS.Model;
using Microsoft.EntityFrameworkCore;

namespace EMS.Controllers
{
    [Produces("application/json")]
    [Route("api/Projects")]
    public class ProjectsController : Controller
    {
        private readonly EmployeeContext _context;

        public ProjectsController(EmployeeContext context)
        {
            _context = context;
        }
        // GET: api/Projects
        [HttpGet]
        public async Task<IActionResult> Get()
        {
            List<Project> project_ = new List<Project>();
            var Project = await (from data in _context.Project
                                 select new
                                 {
                                     ProjectId = data.ProjectId,
                                     ProjectName = data.ProjectName
                                 }).ToListAsync();
            Project.ForEach(x =>
            {
                Project pro = new Project();
                pro.ProjectId = x.ProjectId;
                pro.ProjectName = x.ProjectName;
                project_.Add(pro);
            });


            return Json(project_);
        }

       
       
    }
}

In the above code we create an asynchronous method Get of "GET" type, and in this method we are getting the list of all projects and return this list in JSON format.

 Now open your "services.ts" file and paset following code into this file.

getProjectList() {
        return this.http.get('http://localhost:54273/api/projects');
    }

In above code we create "getProjectList" method and in this method we execute the get method of "http" class to get the project list.

Now open "newEmployee.component.ts" file and paste the following code into this file.

import { Component } from '@angular/core';
import { EmployeeServcies } from '../../Services/services';
import { Response } from '@angular/http';
import { FormGroup, FormControl, Validators } from '@angular/forms';


@Component({
    selector: 'new-employee',
    templateUrl: './newEmployee.component.html',
   
})
export class newEmployeeComponent {
    public ProjectList = [];
    public formData: FormGroup;
    public constructor(private empService: EmployeeServcies) {
        this.empService.getProjectList()
            .subscribe(
            (data: Response) => (this.ProjectList = data.json())
            );

        this.formData = new FormGroup({
            'EmployeeName': new FormControl('', [Validators.required]),
            'Designation': new FormControl('',Validators.required),
            'Skills': new FormControl('', Validators.required),
            'Project': new FormControl(0, [Validators.required, this.customValidator])    
        });

    }

    customValidator(control: FormControl): { [s: string]: boolean } {
        if (control.value == "0") {
            return { data: true };
        }
        else {
            return null;
        }
    }

    submitData() {
        if (this.formData.valid) {
            var Obj = {
                Designation: this.formData.value.Designation,
                EmployeeName: this.formData.value.EmployeeName,
                ProjectId: this.formData.value.Project,
                Skills: this.formData.value.Skills,
            };
            this.empService.postData(Obj).subscribe();
            alert("Employee Inserted Successfully");
        }
        
    }


}

In constructor function we create an instance of the "EmployeeServcies" class and call the "getProjectList" method to get the list of all projects and in response section we insert the list of retrieved projects into "ProjectList" object of array type and later we will bind this list to dropdown that show the list of projects.

this.formData = new FormGroup({
            'EmployeeName': new FormControl('', [Validators.required]),
            'Designation': new FormControl('',Validators.required),
            'Skills': new FormControl('', Validators.required),
            'Project': new FormControl(0, [Validators.required, this.customValidator])    
        });

In above line of code we create a FormGroup and in this FormGroup we create four form control(EmployeeName, Designation, Skills and Project) and we will bind the formGroup to the form section that we will create in "html" section. The reason behind of using the "formGroup" is that we want to use the data(model) driven approach instead of template driven to create the form section, because using the data(model) driven approach we can create and apply custom validation easily. You can see that in "Project" FormControl we implement two validation first one is required that is inbuilt validation and second validation is "customValidator" that is a custom validation below is the code of this validation

customValidator(control: FormControl): { [s: string]: boolean } {
        if (control.value == "0") {
            return { data: true };
        }
        else {
            return null;
        }
    }

In "customValidator" custom validator we are confirm that selected value of a control should now be 0. If value of value of control is 0 then we return the "true" as return value and this return value indicate the validation has been spoiled.

Now open your "newEmployee.component.html" file and paste the following code into this file.

<style>
    .hidedata {
        padding-top:50px;
    }
</style>
<div class="row">

    <div class="col-md-12">
        <div class="col-md-8 col-lg-offset-4">
            <h3>Enter Employee Details</h3>
        </div>
        
                <div class="row hidedata" id="hidDiv">
                    <div class="col-md-6 ">
                        <form class="form-horizontal" [formGroup]="formData" (ngSubmit)="submitData()">
                            <div class="form-group">
                                <label for="EmployeeName" class="col-sm-4 control-label">Employee Name</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control"

                                     name="EmployeeName" placeholder="Employee Name"

                                          formControlName="EmployeeName" >
                                </div>
                                <div *ngIf="!formData.get('EmployeeName').valid && formData.get('EmployeeName').dirty"

                                     class="col-sm-8 col-sm-offset-4" style="color:red">
                                  Add Employee Name 
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="Designation" class="col-sm-4 control-label">Designation</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control"

                                           name="Designation" placeholder="Designation"

                                           formControlName="Designation">
                                </div>
                                <div *ngIf="!formData.get('Designation').valid && formData.get('Designation').dirty"

                                     class="col-sm-8 col-sm-offset-4" style="color:red">
                                    Add Employee Designation
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="Skills" class="col-sm-4 control-label">Skills</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control"

                                           name="Skills" placeholder="Employee Skills"

                                           formControlName="Skills">

                                </div>
                                <div *ngIf="!formData.get('Skills').valid && formData.get('Skills').dirty"

                                     class="col-sm-8 col-sm-offset-4" style="color:red">
                                    Add Skills of Employee 
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="ProjectId" class="col-sm-4 control-label">Project</label>
                                <div class="col-sm-8">
                                   <select class="form-control" name="Project"

                                          formControlName="Project" >
                                       <option value="0">---Select---</option>
                                       <option *ngFor="let data of ProjectList" value={{data.projectId}}>
                                           {{data.projectName}}
                                       </option>
                                   </select>

                                </div>
                                <div *ngIf="!formData.get('Project').valid && formData.get('Project').dirty"

                                     class="col-sm-8 col-sm-offset-4" style="color:red">
                                    Select a Project for Employee
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-sm-offset-4 col-sm-8">
                                    <button type="submit" [disabled]="!formData.valid" class="btn btn-info">Submit</button>
                                </div>
                            </div>
                        </form>

                    </div>
                </div>
                

    </div>
</div>

In above code we create a form section and add total four control (three textbox and one dropdown) into this form section.

<form class="form-horizontal" [formGroup]="formData" (ngSubmit)="submitData()">

When you examine above code you will get [formGroup]="formData" line in form tag. The "formGroup" attribute is used to bind a form with "formGroup" object that we created into component section. Benefits of this approach is that when we submit this form we get value of all the control in a single "formGroup" object in key value pair.

<input type="text" class="form-control"
                                     name="EmployeeName" placeholder="Employee Name"
                                          formControlName="EmployeeName" >

The fromControlName directive Syncs a "FormControl" in an existing "FormGroup" to a form control element by name. In other words, this directive ensures that any values written to the FormControl instance programmatically will be written to the DOM element (model -> view). Conversely, any values written to the DOM element through user input will be reflected in the FormControl instance (view -> model). In above code we syncs the "EmployeeName" form control to the "EmployeeName" element. In same way we wind all three existing the elements to "form control" of "FormGroup".

<form class="form-horizontal" [formGroup]="formData" (ngSubmit)="submitData()">

In form tag we implement the "ngSubmit" form event when form will be submit it will call "submitData" method of component section. In "submitData" method we implement the following code.

submitData() {
        if (this.formData.valid) {
            var Obj = {
                Designation: this.formData.value.Designation,
                EmployeeName: this.formData.value.EmployeeName,
                ProjectId: this.formData.value.Project,
                Skills: this.formData.value.Skills,
            };
            this.empService.postData(Obj).subscribe();
            alert("Employee Inserted Successfully");
        }
        
    }

In above code first of all we heck that form is in valid state or not, if form is in valid state then we get the values from "formData" FormGroup and insert into JSON object and call the "postData" method of "EmloyeeService" and pass the create object(Obj) as parameter.

Now open your "Servcie"ts" file and paste the following code into this file.

postData(empObj: any) {
        let headers = new Headers({
            'Content-Type':
            'application/json; charset=utf-8'
        });
        let options = new RequestOptions({ headers: headers });
        return this.http.post('http://localhost:54273/api/employee', JSON.stringify(empObj), options);
    }

In this code we call the post method of http inbuilt service. We create a header and pass this header to post method of http service. We stringify the "empObj" and pass along with POST request. We are calling the POST method of "Employee" api controller. Now we need to add a "POST" method in our "Employee" API controller.

Add following code into "Employee" controller.

[HttpPost]
        public IActionResult AddEmployee([FromBody]Employee empObj)
        {
            _context.Employee.Add(empObj);
            _context.SaveChanges();
            return Json("OK");


        }

In above lines of code we create an http post method and this method takes a parameter of employee type. We fetching out the parameter value from the FormBody of the request and add this employee object to the employee dbcontext and save the changes.

Now all setup are ready to add the new entry of employee, let’s try to add a new employee.

Above screen showing the validation message, in case if we break any validation conditions then we get the corresponding error message.

If we don’t spoil any validation and press the submit button then we get the alert message of "Employee Inserted Successfully". Now if you go to the home screen you will find that entry of new employee into list.

Show Employee Details

In index view we are display the list of all employee and each employee entry also contains "Detail" button.

Using this button we can get all information of an employee. Actually this button is anchor tag in this anchor tag we use the "routerLink" directive and passing "details" and employee id in URL. For example if we click on "Details" button for the "Raj Kumar" employee whose EmployeeID is 4 then "http://localhost:54273/details/4" URL will generate.

<a [routerLink]="['/details/',empData.employeeId]"

                           class="btn btn-primary">
                            Detail
                        </a>

We can retrieve the Employee details and on the behalf of this Employee id . Now open "details.component.ts" file and add following code into this file.

import { Component } from '@angular/core';
import { EmployeeServcies } from '../../Services/services';
import { Response } from '@angular/http';
import { Router, ActivatedRoute, Params } from '@angular/router';

@Component({
    selector: 'employee-detail',
    templateUrl: './details.component.html'
})
export class DetailsComponent {
    private EmpId: number;
    public EmployeeDetails = {};
    public constructor(private empService: EmployeeServcies, private activatedRoute: ActivatedRoute) {
        this.activatedRoute.params.subscribe((params: Params) => {
            this.EmpId = params['id'];
        });

        this.empService.getEmployeeDetails(this.EmpId)
            .subscribe((data: Response) => (this.EmployeeDetails["employeeName"] = data.json().employeeName,
                this.EmployeeDetails["Designation"] = data.json().designation,
                this.EmployeeDetails["ProjectName"] = data.json().projectName,
                this.EmployeeDetails["Skills"] = data.json().skills,
                this.EmployeeDetails["StartDate"] = data.json().startDate,
                this.EmployeeDetails["EndDate"] = data.json().endDate
                ));
       
    }

 }

In above code we create an object of "EmployeeServcies" service in constructor function, we also create an instance of "ActivatedRoute" class, "ActivateRoute" is an observable of the URL segments matched by this route. Here we subscribe this observable and get the value of id parameter that we defined during the routing.

In next line of code we subscribe the "getEmployeeDetails" method of EmployeeService and pass the employee’s id as parameter whose details we want to get. Following is the code of getEmployeeDetails method and paste this code into your "service.ts" file.

getEmployeeDetails(empId: any) {
        return this.http.get('http://localhost:54273/api/employee/' + empId);
       
    }

In above code we call the get method of Employee API and pass the employee’s id parameter. In case of success we fetched out the employee details from Response object and insert these details into "EmployeeDetails" object and bind this object to html template.

Now open "details.component.html" file and paste the following code into this file.

<h2>This is Detail Component</h2>

<div class="row">
    <div class="col-md-3"><b>Employee Name</b></div><div class="col-md-3">{{EmployeeDetails.employeeName}}</div>
</div>
<div class="row">
    <div class="col-md-3"><b>Designation</b></div><div class="col-md-3">{{EmployeeDetails.Designation}}</div>
</div>

<div class="row">
    <div class="col-md-3"><b>Skills</b></div><div class="col-md-3">{{EmployeeDetails.Skills}}</div>
</div>
<div class="row">
    <div class="col-md-3"><b>ProjectName:</b></div><div class="col-md-3">{{EmployeeDetails.ProjectName}}</div>
</div>
<div class="row">
    <div class="col-md-3"><b>Start Date</b></div><div class="col-md-3">{{EmployeeDetails.StartDate|date: 'yMMMMd'}}</div>
</div>
<div class="row">
    <div class="col-md-3"><b>End Date</b></div><div class="col-md-3">{{EmployeeDetails.EndDate|date: 'yMMMMd'}}</div>
</div>

Add following code into "EmployeeController.cs" file.

[HttpGet("{Empid}")]
        public async Task<IActionResult> EmployeeDetails(int Empid)
        {
           
            var EmpDeatils = await(from emp in _context.Employee
                                   join pro in _context.Project on emp.ProjectId equals pro.ProjectId
                                   where emp.EmployeeId==Empid
                                   select new
                                   {
                                       emp.EmployeeId,
                                       emp.EmployeeName,
                                       emp.Designation,
                                       pro.ProjectName,
                                       emp.Skills,
                                       pro.ProjectId,
                                       pro.StartDate,
                                       pro.EndDate

                                   }
                          ).FirstAsync();


            return Json(EmpDeatils);
        }

Here we creates a "GET" type method that takes one parameter of integer type. This parameter hold the id of employee and using this employee id we get details of any employee and pass this details as JSON data. Following is the output of employee detail page.

Delete Employee Entry

In Employee listing page we have an option with each employee entry to delete that employee entry.  We add a "click" event listener on this anchor button and call the "DeleteEmployee" method on click event that take the employee’s Id as parameter.

<a 

                           class="btn btn-danger" (click)="deleteEmployee(empData.employeeId)">
                            Delete
                        </a>

Add following lines of code in your "home.components.ts" file.

deleteEmployee(empId: number) {
      

        var status = confirm("Are You want to delete this employee ?");
        if (status == true) {
            this.empService.removeEmployeeDetails(empId)
                .subscribe((data: Response) => (alert("Employee Deleted Successfully")));

            //Get new list of employee
            this.empService.getEmployeeList()
                .subscribe(
                (data: Response) => (this.EmployeeList = data.json())
                );
        }

    }

When we click on delete button a confirmation box will be open that confirm the deletion of the employee details and if status of confirmation box is "true" then we call the "removeEmployeeDetails" method of EmployeeService class and pass the employeeId as parameter. Paste following code into your "service.ts" file.

removeEmployeeDetails(empId: any) {
        let headers = new Headers({
            'Content-Type':
            'application/json; charset=utf-8'
        });
        return this.http.delete('http://localhost:54273/api/employee', new RequestOptions({
            headers: headers,
            body: empId
        }));


    }

In above code we call the "delete" method of employee api, so we needs to add a "Delete" method into our api that takes the employee’s id as parameter. Now open your "EmployeeControler.cs" file and paste the below lines of code.

[HttpDelete]
        public IActionResult RemoveEmployeeDetails([FromBody]int empId)
        {
            Employee Emp;
            Emp = _context.Employee.Where(x => x.EmployeeId == empId).First();
            _context.Employee.Remove(Emp);
            _context.SaveChanges();
            return Json("OK");
        }

In above code we create an method of "http delete" types that takes an employee’s id as parameter that we are fetching from FormBody and using this employee id we delete the record of that particular employee and send the "OK" as confirmation message.

Let’s try to record of "Sandeep kumar Jangid" employee. when we click on delete button an confirmation box will open.

If you click on "Ok" button then, you will get "Employee Deleted Successfully" message.

After this confirmation message you will find that employee list has been refresh and deleted employee doesn’t exist into this list.

Update Employee Details

In employee listing page we added an edit button for each employee. When we clicks on this button it will redirect to "Edit Employee" page and we are passing the "EmployeeId" as parameter.

<a [routerLink]="['/edit/',empData.employeeId]"

                           class="btn btn-success">
                            Edit
                        </a>

Now open "editEmployee.component.ts" file and paste the following code into this file.

import { Component } from '@angular/core';
import { EmployeeServcies } from '../../Services/services';
import { Response } from '@angular/http';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
    selector: 'edit-employee',
    templateUrl: './editEmployee.component.html'
})
export class editEmployeeComponent {
    private EmpId: number;
    public EmployeeDetails = {};
    public employeeName: string;
    public ProjectList = [];
    public formData: FormGroup;

    public constructor(private empService: EmployeeServcies, private activatedRoute: ActivatedRoute) {
        this.activatedRoute.params.subscribe((params: Params) => {
            this.EmpId = params['id'];
        });

        this.empService.getProjectList()
            .subscribe(
            (data: Response) => (this.ProjectList = data.json())
            );

        


        
       
        this.formData = new FormGroup({
            'EmployeeId': new FormControl('', [Validators.required]),
            'EmployeeName': new FormControl('', [Validators.required]),
            'Designation': new FormControl('', Validators.required),
            'Skills': new FormControl('', Validators.required),
            'Project': new FormControl(0, [Validators.required, this.customValidator])
        });
this.empService.getEmployeeDetails(this.EmpId)
            .subscribe((data: Response) => (
                this.formData.patchValue({ EmployeeId: data.json().employeeId }),
                this.formData.patchValue({ EmployeeName: data.json().employeeName }),
                this.formData.patchValue({ Designation: data.json().designation }),
                this.formData.patchValue({ Skills: data.json().skills }),
                this.formData.patchValue({ Project: data.json().projectId })

            ));

    }

    customValidator(control: FormControl): { [s: string]: boolean } {
        if (control.value == "0") {
            return { data: true };
        }
        else {
            return null;
        }
    }

    submitData() {
        if (this.formData.valid) {
            var Obj = {
                EmployeeId: this.formData.value.EmployeeId,
                Designation: this.formData.value.Designation,
                EmployeeName: this.formData.value.EmployeeName,
                ProjectId: this.formData.value.Project,
                Skills: this.formData.value.Skills,
            };
            this.empService.editEmployeeData(Obj)
                .subscribe((data: Response) => (alert("Employee Updated Successfully")));;
            
        }

    }
}

In constructor function we create an instance of EmployeeServcies for accessing the HTTP method that we created. We also create an instance of ActivatedRoute to get the URL parameter values.

this.activatedRoute.params.subscribe((params: Params) => {
            this.EmpId = params['id'];
        });

In above line of code we fetched out the value of "id" parameter and save thid value to "EmpId" variable.

this.empService.getProjectList()
            .subscribe(
            (data: Response) => (this.ProjectList = data.json())
            );

We call the getProjectList method of EmployeeService class to get the project list and we use these values to bind the project dropdown list.

this.formData = new FormGroup({
            'EmployeeId': new FormControl('', [Validators.required]),
            'EmployeeName': new FormControl('', [Validators.required]),
            'Designation': new FormControl('', Validators.required),
            'Skills': new FormControl('', Validators.required),
            'Project': new FormControl(0, [Validators.required, this.customValidator])
        });

In above code we create an FormGroup and create total five FormControl into FormGroup. Here we are going to perform the data(model) binding approach to bind a HTML form as similar as add new employee section.

this.empService.getEmployeeDetails(this.EmpId)
            .subscribe((data: Response) => (
                this.formData.patchValue({ EmployeeId: data.json().employeeId }),
                this.formData.patchValue({ EmployeeName: data.json().employeeName }),
                this.formData.patchValue({ Designation: data.json().designation }),
                this.formData.patchValue({ Skills: data.json().skills }),
                this.formData.patchValue({ Project: data.json().projectId })

            ));

In above lines of code we call the getEmployeeDetails method of EmployeeService class to get the inserted details of an employee and insert these details into formControl of formData. The patchValue method of formGroup is used to patches the value of FormControl of a formGroup in other words patheValue method is used to match the value of FormControl. Here we get the data from "getEmployeeDetails" method and insert these data into FormControl of the formGroup using patchValue method.

customValidator(control: FormControl): { [s: string]: boolean } {
        if (control.value == "0") {
            return { data: true };
        }
        else {
            return null;
        }
    }

In above line of code we create an custom validator to validate the value of any control. It will set the invalid state of formGroup an formControl if the value of control is 0. Now open "editEmployee.component.html" file and paste the following code.

<style>
    .hidedata {
        padding-top: 50px;
    }
</style>
<div class="row">

    <div class="col-md-12">
        <div class="col-md-8 col-lg-offset-4">
            <h3>Edit Employee Details</h3>
        </div>

        <div class="row hidedata" id="hidDiv">
            <div class="col-md-6 ">
                <form class="form-horizontal" [formGroup]="formData" (ngSubmit)="submitData()">
                    <div class="form-group">
                        <label for="EmployeeName" class="col-sm-4 control-label">Employee Name</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control"

                                   name="EmployeeName" placeholder="Employee Name"

                                   formControlName="EmployeeName">
                        </div>
                        <div *ngIf="!formData.get('EmployeeName').valid && formData.get('EmployeeName').dirty"

                             class="col-sm-8 col-sm-offset-4" style="color:red">
                            Add Employee Name
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="Designation" class="col-sm-4 control-label">Designation</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control"

                                   name="Designation" placeholder="Designation"

                                   formControlName="Designation">
                        </div>
                        <div *ngIf="!formData.get('Designation').valid && formData.get('Designation').dirty"

                             class="col-sm-8 col-sm-offset-4" style="color:red">
                            Add Employee Designation
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="Skills" class="col-sm-4 control-label">Skills</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control"

                                   name="Skills" placeholder="Employee Skills"

                                   formControlName="Skills">

                        </div>
                        <div *ngIf="!formData.get('Skills').valid && formData.get('Skills').dirty"

                             class="col-sm-8 col-sm-offset-4" style="color:red">
                            Add Skills of Employee
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="ProjectId" class="col-sm-4 control-label">Project</label>
                        <div class="col-sm-8">
                            <select class="form-control" name="Project"

                                    formControlName="Project">
                                <option value="0">---Select---</option>
                                <option *ngFor="let data of ProjectList" value={{data.projectId}}>
                                    {{data.projectName}}
                                </option>
                            </select>

                        </div>
                        <div *ngIf="!formData.get('Project').valid && formData.get('Project').dirty"

                             class="col-sm-8 col-sm-offset-4" style="color:red">
                            Select a Project for Employee
                        </div>
                    </div>
                    <div>
                        <input type="hidden" id="empId" name="empId" formControlName="EmployeeId" />
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-4 col-sm-8">
                            <button type="submit" [disabled]="!formData.valid" class="btn btn-info">Submit</button>
                        </div>
                    </div>
                </form>

            </div>
        </div>


    </div>
</div>

Here we create an html form and bind this form to formGroup(formData) that we created in out component section. Functionality of this page is similar as the "newEmployee.component.html" page, so I think I don’t need to explain the code of this page. On submit action of the form we call "submitData" method, below is the code of this method.

submitData() {
        if (this.formData.valid) {
            var Obj = {
                EmployeeId: this.formData.value.EmployeeId,
                Designation: this.formData.value.Designation,
                EmployeeName: this.formData.value.EmployeeName,
                ProjectId: this.formData.value.Project,
                Skills: this.formData.value.Skills,
            };
            this.empService.editEmployeeData(Obj)
                .subscribe((data: Response) => (alert("Employee Updated Successfully")));;
            
        }

    }

In above lines of code we get the value from formData that is FormGroup object and insert into new object(Obj). After that we call the editEmployeeDatamethod of EmployeeServcie class and passed the previously created object as parameter.

Now open your "service.ts" file and paste tge following code into this file.

editEmployeeData(empObj: any) {
        let headers = new Headers({
            'Content-Type':
            'application/json; charset=utf-8'
        });
        let options = new RequestOptions({ headers: headers });
        return this.http.put('http://localhost:54273/api/employee', JSON.stringify(empObj), options);
    }

In above method we call the "put" method of "Employee" API to update the details of an employee and pass the update information of the employee. Now we need to create an method of "PUT" type in our API class that can get this update information and save these information into database, so open "EmployeeController.cs" file and paste the following code.

[HttpPut]
        public IActionResult EditEmployee([FromBody]Employee empData)
        {
            _context.Entry(empData).State = EntityState.Modified;
            _context.SaveChanges();
            return Json("ok");
        }

In above code we create a method of HTTP PUT type, in this method we fetchout the data from the body of the request and save these changes to database for the permanent. Let’s try to edit the information of "Dhramveer" employee, when you click on edit button following screen will be open.

Now make some changes into existing information as following.

When you click on Submit button you will get an alert box of "Employee Updated Successfully" that means details of employee has been updated.

When you move to home page, you will find that details of employee has been updated.

Add Search Box

Now we add search functionality in our project, for this we will add a textbox. Actually we are going to add the filtering on Employee list. When we type any value in textbox it will match that text to EmployeeName, Designation and Project field of an employee and return the employee details for whom entered text data matched the at least on field of employee detail. In Angular 1.x we have the filter for this type of the task but in Angular 2 and 4 we don’t have any such type of the filter. For this Angular 2 comes with a new concept that is Pipe . Using the pipe we can create our custom filter and implement where ever we want. Let’s create our custom filter using the Pipe.

For this go to "App" directory and create a new folder and named this folder as "pipes". Now add a new type script file in this folder and named this file as "search.ts" and paste the following code into this file.

import {  Pipe,PipeTransform } from '@angular/core';

@Pipe({
    name: 'searchFilter'
})

export class filterSearch implements PipeTransform {
    transform(value: any, args: string): any {
        if (args == null || args == undefined) {
            return value;
        }
        else {
            let filter = args.toLocaleLowerCase();
            return filter ? value.filter(employee => (employee.employeeName.toLocaleLowerCase().indexOf(filter) != -1)
                || (employee.designation.toLocaleLowerCase().indexOf(filter) != -1)
                || (employee.project.toLocaleLowerCase().indexOf(filter) != -1)
                ) : value; 
        }
    }
}

In above lines of code we define the "@Pipe" meta data that convert this class into a pipe object. The "filterSearch" class inherit the "PipeTransform" interface and we implement the "transform" method of interface into our "filterSearch" class. This method actually takes two parameter. First parameter contains the list data on which we will perform the filtering and second parameter contains the filter criteria. In above code we return the Employee details if any field(emloyeeName, designation and project) of employee contains the text of filter criteria.

After creating the Pipe now we needs to register this pipe in "App.modules.ts" file so register this pipe in app.modules.ts .

Now our pipe is ready and we have been register this pipe in "app.modules.ts", last step is remaining to use this pipe in our code. Open your "home.component.html" file and replace the content of this page with following content.

<div class="row">
    <div class="col-md-12">
        <h3>Employee List</h3>
        <br />
       
    </div>
    <div class="col-md-12">
        
            <div class="form-actions no-color">
                
                <div>
                    <span style="font-weight:bold;font-size:20px">Search:</span>
                    <input type="text" name="searchdata"  #search (keyup)="0"/>
                   
                    
                </div>
            </div>
       <br />
    </div>
</div>
<div class="row">
    <div class="table-responsive">
        <table class="table">
            <thead>
                <tr>
                    <th>
                        
                        S.No.
                    </th>
                    <th>
                        EmployeeName
                    </th>
                    <th>
                        Designation
                    </th>
                    <th>
                        Project
                    </th>
                    <th>
                        Action
                    </th>
                </tr>
            </thead>
            <tbody>
                
                <tr *ngFor="let empData of EmployeeList | searchFilter:search.value  ; let i = index; trackBy: employeeId">
                    <td>
                        {{i+1}}
                    </td>
                    <td>
                        {{empData.employeeName}}
                    </td>
                    <td>
                       {{empData.designation}}
                    </td>
                    <td>
                       {{empData.project}}
                    </td>
                    <td>

                        <a [routerLink]="['/details/',empData.employeeId]"

                           class="btn btn-primary">
                            Detail
                        </a>
                        <a [routerLink]="['/edit/',empData.employeeId]"

                           class="btn btn-success">
                            Edit
                        </a>
                        <a 

                           class="btn btn-danger" (click)="deleteEmployee(empData.employeeId)">
                            Delete
                        </a>
                    </td>
                </tr>
                
        </table>
    </div>
</div>

In above code me make only to changes first one is add a text box and bind local template variable with this textbox (#search).

<div class="col-md-12">
        
            <div class="form-actions no-color">
                
                <div>
                    <span style="font-weight:bold;font-size:20px">Search:</span>
                    <input type="text" name="searchdata"  #search (keyup)="0"/>
                   
                    
                </div>
            </div>
       <br />
    </div>

The second change in that we implement the pipe that we created on employee list and pass the value of local template variable (search) as filtering criteria.

<tr *ngFor="let empData of EmployeeList | searchFilter:search.value  ; let i = index; trackBy: employeeId">

After making all the changes now our screen will look like below.

Now if we enter any text into textbox it will filter the employee list and only show the employee details who match the filtering criteria.

Summary

This is the second and last part of this series, I hope you liked this series. During this series we learn how setup an Angular 2 with .NET Core. We implement the Code first approach of the Entity Framework and setup the database connection. We perform the CRUD operations that are basic learning step of any technology. We learn how to create and implement the services in Angular2, we also learn about the Pipe and create our custom pipe to implement the filter functionality in our project. If you have any query regarding this series or Angular 2 and .Net core then write in comment section. If you want to download this project then you can go to this github repository.

Download SPA-using-Angular2-and-.Net-Core

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Pankaj Kumar Choudhary
Student
India India
Pankaj Kumar Choudhary loves Microsoft and Database technologies. He has experience on several database technology like SQL Server, MySQL, Oracle, MongoDB, PostgreSQL . He has knowledge of several technology like Asp.Net MVC, Entity Framework , Android, Php, AngularJS, Node.js, Angular2, React, Ionic and Android.

You may also be interested in...

Pro
Pro

Comments and Discussions

 
QuestionInternal server error Pin
gerard chimbganda9-May-17 13:20
membergerard chimbganda9-May-17 13:20 
AnswerRe: Internal server error Pin
Pankaj Kumar Choudhary10-May-17 7:59
memberPankaj Kumar Choudhary10-May-17 7:59 
QuestionCan not run example? Pin
Member 1303946026-Apr-17 1:50
memberMember 1303946026-Apr-17 1:50 
Suggestionlink to Part1 Pin
sairfan124-Apr-17 8:12
membersairfan124-Apr-17 8:12 
GeneralRe: link to Part1 Pin
Pankaj Kumar Choudhary24-Apr-17 23:42
memberPankaj Kumar Choudhary24-Apr-17 23:42 
GeneralMy vote of 5 Pin
LaurentFructus21-Apr-17 2:05
memberLaurentFructus21-Apr-17 2:05 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.171114.1 | Last Updated 19 Apr 2017
Article Copyright 2017 by Pankaj Kumar Choudhary
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid