Angular 4 CRUD application using ASP.NET Web API

Share this

In this article, I will describe how to create an Angular 4 CRUD application using ASP.NET Web API. Database used is SQL Server. I will enhance the Visual Studio 2017 solution developed in the previous article – Upload multiple files using Angular 4, ASP.NET Web API, C#

Source Code : The complete source code for the article is available at GitHub repository : https://github.com/sudipta-chaudhari/Angular4_CRUD_WebAPI_EF

Technologies Used : Angular 4, Web API, C#, Entity Framework, SQL Server, HTML 5, Bootstrap

IDE Used :  Visual Studio 2017

External Components Used : PrimeNG

Key Learnings :

(1) CRUD Operations on SQL Server database using ASP.NET  Web API, LINQ, C#, Entity Framework

(2) Angular 4 Service – DataService, Validation Service

(3) Angular 4 – REST API call

(4) Angular 4 Reactive Forms Validation

(5) Angular 4 Grid component using PrimeNG DataTable

(6) Angular 4 modal popup using PrimeNG Dialog

Application Architecture :

Angular4_CRUD_Architecture

Application Screens :

(1) Display Products (CRUD)

Angular4_CRUD_DisplayProducts

(2) Add Product (CRUD)

Angular4_CRUD_AddProduct

(3) Update Product (CRUD)

Angular4_CRUD_EditProduct

(4) Delete Product (CRUD)

Angular4_CRUD_DeleteProduct

Let’s proceed to build the application’s code.

Step 1 : Create Database and Table

Create a new SQL Server database and a table named Product with schema as below.

Database ER Diagram :

Angular4_CRUD_DB_ERDiagram

Database Table Script :

Step 2 : Create ADO.NET Entity Data Model

Under application root path, add a folder named “DBModel” and add an ADO.NET Entity Data Model named InventoryModel.edmx which looks as shown below.

Angular4_CRUD_EntityDataModel

Step 3 : Create ViewModel Class

Under application root path, add a folder named “Models” and add a ViewModel class named ProductJSON.cs as shown below.

Step 4 : Create Web API Controller

Under ‘Controllers’ folder, add a new Web API controller named ProductController.cs with the code shown below.

The Web API Controller contains the below methods:

IEnumerable GetProducts()GET API method which returns entire list of products as an IEnumerable type.

This method will be used to bind data to the PrimeNG DataTable grid.

Product Post([FromBody]Product product) – this method accepts a object of type Product which corresponds to the database Product table and returns a Product object.

This method will be used to add a new product.

public bool Put(int id, [FromBody]Product p) – this method accepts a object of type Product which corresponds to the database Product table from JSON body and a second parameter as the product id and returns a boolean.

This method will be used to update an existing product by ProductId and returns a boolean value to indicate success or failure status of update operation.

public bool Delete(int id) – this method accepts a ProductId returns a boolean.

This method will be used to delete an existing product by ProductId and returns a boolean value to indicate success or failure status of delete operation.

Step 5 : Create Angular4 Data Service

Under application root path’s ‘app’ folder (created as a part of the solution in my previous post), add a folder ‘service’ and create a typescript file dataService.ts’. This will be used to call the Web API REST endpoints using rxjs package Angular HTTP components.

This service will be Dependency Injected into the typescript component in Step (7).

The complete code for dataService.ts is provided below.

Step 6 : Create Angular4 Validation Service

Under folder ‘service’ created in previous step, create a typescript file validationService.ts. This will be used to validate the Angular HTML view’s text boxes to check empty field, minimum and maximum field length.

This service will be Dependency Injected into the typescript component in Step (7).

The complete code for validationService.ts is provided below.

The validation service method uses regular expression to check for empty string.

Step 7 : Create Angular4 Component Typescript

Under ‘app’ folder, create a folder named ‘product’ and add a typescript file named product.component.ts with the following code.

@Component decorator marks this class as an Angular component. A component must belong to an NgModule in order for it to be usable by another component or application. To specify that a component is a member of an NgModule, it is added in the declarations field of that NgModule of app.module.ts file as follows :

The two services created in Step 5 and Step 6 are imported into the product component as follows:

In the above typescript code various other components required have been imported.

Dependency Injection in the form of Constructor Injection is used to inject the dependencies – Http, InventoryService, FormBuilder

In the rest of the typescript code, CRUD methods from dataService.ts are called and other methods to clear the HTML form variables, toggling the display of Loading Spinner and toggling the display of the modal popup dialog’s have been written.

Step 8 : Create Angular4 Typescript Component HTML

In the HTML code, the first div is displayed based on isLoadingData variable’s value from TypeScript component product.component.ts using an *ngIf structural directive.This div is used to display a loading spinner/busy indicator which blocks the page and displays a rotating spinner while some action is being performed like fetching the product list from the database.

Next div creates a PrimeNG DataTable for displaying the Products. DataTable has Paging, Sorting, Searching functionalities.

Next p-dialog tag creates a PrimeNG modal Dialog popup for adding a new Product. form tag has been used to create a new form. Data has been binded to the input fields using [(ngModel)]. Validation of the form has been performed using Reactive Form Validation to check for empty fields.

[formGroup]="addProductFG" has been defined in form tag. [formGroup]It is a class that tracks the value and validity state of a group of FormControl.

FormControlis a class that tracks the value and validation state of a form control.

The FormControl instance will track the value, user interaction, and validation status of the control and keep the view synced with the model.

When FormBuilder, i.e. fb is injected in product.component.ts using Constructor Injection FormBuilder instantiates new groups through this.fb.group(), each of those is a new FormGroup

product.component.ts defines addProductFG as below:

Next a html button is used to open the Add Product modal dialog popup.

Next p-dialog tag creates a PrimeNG modal Dialog popup for editing an existing Product. As explained above for the Add Product dialog, form tag has been used to create a new form for editing Product data. The Edit Product dialog is displayed based on displayEditDialog varialble’s value in the typescript component product.component.ts.

As explained above for Add Product, editProductFG is created as below:

FormGroup elements are fetched by name and checked for hasError, dirty and touched as shown below.

As form is validated by the Reactive Forms, below CSS classes display the styling for the valid and error states of the form’s input elements.

Using ngModel in a form gives you more than just two-way data binding. It also tells you if the user touched the control, if the value changed, or if the value became invalid.

The NgModel directive doesn’t just track state, it updates the control with special Angular CSS classes that reflect the state. You can leverage those class names to change the appearance of the control.

StateClass if trueClass if flase
The control has been visited.ng-touchedng-untouched
The control’s value has changed.ng-dirtyng-pristine
The control’s value is valid.ng-validng-invalid

Hope you followed the article. If you have any comments, questions or suggestions, leave a message and I will try to respond at my earliest.


Share this

6 thoughts on “Angular 4 CRUD application using ASP.NET Web API”

  1. I have one of questions
    1) If you don’t make your productname a required field then your save button is still disabled. The save button still thinks the productname is required. How do we fix if one of the fields in our form is not required.

  2. I am getting this error
    Please help

    Server Error in ‘/’ Application.
    The view ‘Index’ or its master was not found or no view engine supports the searched locations. The following locations were searched:
    ~/Views/Home/Index.aspx
    ~/Views/Home/Index.ascx
    ~/Views/Shared/Index.aspx
    ~/Views/Shared/Index.ascx
    ~/Views/Home/Index.cshtml
    ~/Views/Home/Index.vbhtml
    ~/Views/Shared/Index.cshtml
    ~/Views/Shared/Index.vbhtml

    1. There is a specific index.html file, run that one. It will work(No need to look into home controller, i think its bypassing routing). Also ensure you have a database created first, to add and update the products ? all the best

  3. Hi Sudipta,

    I followed this article and its really helpful. Just wanted to request if possible you could create a fresh article on publishing angular 4/webapi project. (using VSTS and azure CI/CD pipeline)

    I didnt find any good article on this and its a bit cumbersome process with less documentation online.

    Best Regards
    Varun Maggo

    1. Dear Varun,

      Thanks for appreciating my article!

      On your request, I will surely try to write a new article on publishing Angular 4/WebApi project (using VSTS and Azure CI/CD pipeline) as I get time.

      Earlier there was option of creating CI or non CI deployment builds only. As you must be aware, VSTS now also provides Release Management pipeline so that you can feed your build definition in the Release management and use the release to deploy to various different environments like DEV, TEST, PRE-PROD, PROD etc.

      Thanks and regards,
      Sudipta Chaudhari

    2. Hi Varun,

      As requested by you, I have created a new article “Azure CI/CD Pipeline using DevOps for Visual Studio Team Services” which you can read at – /azure-ci-cd-pipeline-devops-vsts/

      I hope you will find it helpful. Please feel free to share your feedback, comments or queries.

      Thanks and regards,
      Sudipta Chaudhari

Leave a Reply