Angular Material CRUD With ASP.NET Web API

Overview

The following post is an example of an app where the create and edit forms are on the same page with a data table. In the list there is an option to delete.

Please download the source files at https://github.com/fullstacksoup/blog-ng-material-crud-app to follow along.

Angular 10

This example uses the following libraries.

• Angular Material – Style
• Moment – For Date Time
• XLSX – To Download Table Data to Excel

Inside the CRUD portion of the application, there are four components.

• Layout – Parent – Material Grid & Card
• Add Form – Material Input
• Edit Form – Material Input
• List of Records -Material Table
• Service for CRUD operations

The components communicate with the following decorators:
@Output – Used in crud-edit-form and crud-add-form to alert parent that a change has been recorded.

@Output() recordChanged = new EventEmitter<boolean>();
...
// Used to emit a boolean to the parent when a record is added or updated
  this.recordChanged.emit(true);

@ViewChild – Used by the Parent Layout to call a Load Data function in the Data Table Component when a record is added or updated

import { CrudListComponent } from './../crud-list/crud-list.component';
import { CrudEditFormComponent } from './../crud-edit-form/crud-edit-form.component';
...

@ViewChild(CrudListComponent) childListComponent: CrudListComponent;
@ViewChild(CrudEditFormComponent) childEditFormComponent: CrudEditFormComponent;

...
  public cancelUpdate(): void {
    this.showEditRecord = false;
    this.childListComponent.loadData();
  }

  public onReloadList($vent: any): void {
    this.showEditRecord = false;
    this.childListComponent.loadData();
  }

When a user clicks on a record to fill in the Edit Form with data, the component renders before you can use the @ViewChild method. To get around this a delay is added from the crud.layout.component.ts file, but there is a better way to do this and I will post the solution in the coming weeks.

  public onEditRecord($event): void {
    this.recordId = $event;
    if (this.showEditRecord) {
    } else {
      this.showEditRecord = true;
    }
    // Delay to Render Edit Form Component before calling loadRecord()
    setTimeout(() => {
      this.childEditFormComponent.loadRecord(this.recordId);
    }, 200);
  }

ASP.NET Web API

The API is an ASP.NET Web API application. The only NuGet package needed is Microsoft.AspNet.WebApi.Cors. It also uses a local MDF so MS SQL won’t be needed.

Warning! You may need to update the nuget packages in order for it to work,

From the top menu in Visual Studio Go to Tools -> NuGet Package Manager -> Manage NuGet Packages for Solution

The API has four actions

• getall
• getsinglerecord/{id}
• add
• update
• remove/{id}

In the App_Start\WebApiConfig.cs file add the following:

        public static void Register(HttpConfiguration config)
        {
            // Web API configuration and services
            // Enable CORS
            config.EnableCors();
          
            config.MapHttpAttributeRoutes();

            // Web API routes
            config.Routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/{controller}/{id}",
                defaults: new { id = RouteParameter.Optional }
            );
        }

The complete solution can be found here