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

Add the following code into “EmployeeController.cs” file.

Here, we create a “GET” type method that takes one parameter of integer type. This parameter holds 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.

Add the following lines of code in your “home.components.ts” file.

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 EmployeeServcie class and pass the employeeId as parameter. Paste following code into your “service.ts” file.

In above code we call the “delete” method of employee api, so we need 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.

In above code we create a method of “http delete” type 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 get the record of the“Sandeep kumar Jangid” employee when we click on delete button a 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 refreshed and the 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 click on this button it will redirect to “Edit Employee” page and we are passing the “EmployeeId” as parameter.

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

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.

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

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

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.

In the 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 patch the value of FormControl of a formGroup; in other words pathValue 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.

In the above line of code we create a 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.

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.

In the 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.

In the 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 a method of “PUT” type in our API class that can get this update information and save this information into database, so open “EmployeeController.cs” file and paste the following code.

In the 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 the database as permanent. Let’s try to edit the information of “Dhramveer” employee, when you click on edit button the following screen will be open.

Now make some changes into the existing information as follows.

When you click on Submit button you will get an alert box of “Employee Updated Successfully” that means details of employee have 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 tat least the field of employee detail. In Angular 1.x we have the filter for this type of task but in Angular 2 and 4 we don’t have any such type of filter. For this Angular 2 comes with a new concept that is Pipe . Using the pipe we can create our custom filter and implement it whereever we want. Let’s create our custom filter using the Pipe.

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

In the above lines of code we define the “@Pipe” meta data that converts this class into a pipe object. The “filterSearch” class inherits the “PipeTransform” interface and we implement the “transform” method of interface into our “filterSearch” class. This method actually takes two parameters. 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 need 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 registered 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.

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

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. During this series, we learned how to start Angular 2 with .NET Core. We implemented the Code-First approach of the Entity Framework and setup the database connection. We performed the CRUD operations that are basic learning steps of any technology. We learned how to create and implement the services in Angular 2. We also learned about the Pipe and created 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, go to this github repository.

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