Sample steps to create the API with Angular page

Code first DB: 

dotnet tool install --global dotnet-ef

dotnet ef migrations add "Initial" -o "Data/Migrations"

dotnet ef database update

ng g c employee --module app --skipTests=true

External libraries:          

@angular/material (Angular npm package)      

Doing this will trigger the Angular Material command-line setup wizard, which will install the following npm packages: --> npm install xxxxx

• @angular/material
• @angular/cdk (prerequisite)

System.Linq.Dynamic.Core (.NET Core NuGet package)

Microsoft.EntityFrameworkCore NuGet package      Microsoft.EntityFrameworkCore.Tools NuGet package      Microsoft.EntityFrameworkCore.SqlServer NuGet package

If we prefer to do this using the NuGet package manager command line, we can input the following:    PM> Install-Package Microsoft.EntityFrameworkCore -Version 5.0.0

PM> Install-Package Microsoft.EntityFrameworkCore.Tools -Version 5.0.0

PM> Install-Package Microsoft.EntityFrameworkCore.SqlServer -Version 5.0.0

1) Create the Entity class

    public class Employee

    {

        public Employee()

        {

        }

        public int Id { get; set; }

        public string Name { get; set; }

        public string Address { get; set; }

    }

2) Create the ApplicationDBContext

public class ApplicationDBContext : DbContext

    {

        public ApplicationDBContext(): base()

        {

        }

        public ApplicationDBContext(DbContextOptions options) : base(options)

        { 

        }

        public DbSet<Employee> Employees { get; set; }

    }

3) Add config DB in Memory

public void ConfigureServices(IServiceCollection services)

        {

            services.AddDbContext<ApplicationDBContext>(opt => opt.UseInMemoryDatabase("HREmp"));

        }

4) Create Controller & Seed data for sample with DB in Memory

[Route("api/[controller]")]

    [ApiController]

    public class EmployeesController : ControllerBase

    { 

private readonly ApplicationDBContext _context;

        public EmployeesController(ApplicationDBContext context)

        {

            _context = context;

            SeedData();

        }

        private void SeedData()

        {

            if (!_context.Employees.Any())

            {

                _context.Employees.Add(new Employee() { Id = 1, Name = "Jessica Smith", Address = "20 Elm St." });

                _context.Employees.Add(new Employee() { Id = 2, Name = "John Smith", Address = "30 Main St." });

                _context.Employees.Add(new Employee() { Id = 3, Name = "William Johnson", Address = "100 10th St." });

                _context.SaveChanges();

            }

        }

        // GET: api/<ValuesController>

        [HttpGet]

        public async Task<ActionResult<IEnumerable<Employee>>> GetEmployees() { return await _context.Employees.ToListAsync(); }

}

test API --> localhost .../api/employees

Add format JSON:

Open the Startup.cs file, locate the ConfigureServices method, and add the following code

services.AddControllersWithViews() .AddJsonOptions(options => { // set this option to TRUE to indent the JSON output options.JsonSerializerOptions.WriteIndented = true; // set this option to NULL to use PascalCase instead of // camelCase (default) // options.JsonSerializerOptions.PropertyNamingPolicy = // null; });

5) Fetching and Displaying Data

Create Angular page

ng g c employee --module app --skipTests=true

CREATE src/app/employee/employee.component.html (23 bytes)

CREATE src/app/employee/employee.component.ts (277 bytes)

CREATE src/app/employee/employee.component.css (0 bytes)

UPDATE src/app/app.module.ts (1412 bytes)

EMPLOYEE.TS

Open the /ClientApp/src/app/employees/employee.ts file and add the following:

export interface Employee {
    id: number;
    name: string;
    address: string;

}

employee.component.ts

import { Component, Inject, OnInit } from '@angular/core';

import { HttpClient } from '@angular/common/http';

import { Employee } from './employee';

@Component({

  selector: 'app-employees',

  templateUrl: './employees.component.html',

  styleUrls: ['./employees.component.css']

})

export class EmployeesComponent implements OnInit {

  public employees: Employee[];//

  constructor(

    private http: HttpClient, @Inject('BASE_URL') private baseUrl: string //

  ) { }

  ngOnInit() {

    this.http.get<Employee[]>(this.baseUrl + 'api/Employees')

      .subscribe(result => {

        this.employees = result;

      }, error => console.error(error));

  }

}

employee.component.html

<h1>employees works!</h1>

<p>Here's a list of employees: feel free to play with it.</p>

<p *ngIf="!employees"><em>Loading...</em></p>

<table class='table table-striped' aria-labelledby="tableLabel" [hidden]="!employees">

  <thead>

    <tr>

      <th>ID</th>

      <th>Name</th>

      <th>Address</th>

    </tr>

  </thead>

  <tbody>

    <tr *ngFor="let employee of employees">

      <td>{{ employee.id }}</td>

      <td>{{ employee.name }}</td>

      <td>{{ employee.address }}</td>

    </tr>

  </tbody>

</table>

employees.component.css

table {

  width: 100%;

}

APP.MODULE.TS

Now that we've created the component, we need to add it to the app.module.ts file (new lines are highlighted):

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { FormsModule } from '@angular/forms';

import { HttpClientModule } from '@angular/common/http';

import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';

import { NavMenuComponent } from './nav-menu/nav-menu.component';

import { HomeComponent } from './home/home.component';

import { UploadComponent } from './upload/upload.component';

import { UploadsComponent } from './uploads/uploads.component';

import { EmployeesComponent } from './employees/employees.component';

@NgModule({

  declarations: [

    AppComponent,

    NavMenuComponent,

    HomeComponent,

    UploadComponent,

    UploadsComponent,

    EmployeesComponent

  ],

  imports: [

    BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),

    HttpClientModule,

    FormsModule,

    RouterModule.forRoot([

      { path: '', component: HomeComponent, pathMatch: 'full' },

      { path: 'employees', component: EmployeesComponent },

      

    ])

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

Menu add:

<li class="nav-item" [routerLinkActive]="['link-active']"> <a class="nav-link text-dark" [routerLink]="['/cities']" >Cities</a > </li>

Serving data with Angular Material

For additional information about Angular Material, check out the following URLs: https://material.angular.io/          

https://github.com/angular/components

To install Angular Material, do the following:

1. Open Command Prompt.
2. Navigate to our project's /ClientApp/ folder.
3. Type the following command:

   > ng add @angular/material

ReactiveFormsModule

From Solution Explorer, open the /ClientApp/src/app/app.module.ts file and add the following code (the updated source code is highlighted):

.......
import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
  declarations: [
...
  ],
  imports: [
  ......
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Now that we've added a reference to the ReactiveFormsModule in our app's AppModule file, we can implement the Angular component that will host the actual form.