CRUD operation in Angular 4 : Angular 4 + Core 2.0 CRUD operation Part II

Angular-12Angular-4-CRUD-Example-Tutorial

Note – You can find the source code of my sample application here.

This post is the Part II post for Angular 4 + Core 2.0 CRUD operation.

In my previous post(Part I), I explained how to do Database first in .Net Core 2.0 and we created Employee Web API by Database first approach which you can find here.

In this Part II post, we will add different Angular component class to do the CRUD operation using the API we created in this post and will show the details on UI as shown below:

crud29

Let us start.

Set routes for API methods

Our first task is to change the routes in API methods so that it would be easier for us to give the path to Angular component pages(Whole class here), For example:

[Route("~/api/GetAllEmployees")] // Add routes in all the methods
[HttpGet]
public IEnumerable GetEmployees()
{
return _context.Employees;
}

Add Employee Folder

Add Employee folder on the ClientApp folder as shown below:

crud24

Get Employees

Let us first add the code to get all employees and later we will add the code for Add, Update, Delete.

For this we will follow below steps:

  • Add EmployeeService TypeScript file
  • Add Employee HTML file
  • Add Employee component class
  • Add EmployeeComponent in the ApModule
  • Add Employee Management in the Navigation Menu

Add EmployeeService TypeScript file

We will add EmployeeService typescript file under Employee folder.

Add below code in the EmployeeService.ts class:


// Importing the libraries
import { Injectable } from "@angular/core";
import { Http, Response, Headers } from "@angular/http";
import "rxjs/add/operator/map";
import 'rxjs/add/operator/do'; // debug
import { Observable } from "rxjs/Observable";
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
// To inject the dependancies in the service
@Injectable()
export class EmployeeService {
public employeeList: Observable<Employee[]>;
private _employeeList: BehaviorSubject<Employee[]>;
private baseUrl: string;
private dataStore: {
employeeList: Employee[];
};

//// Constructor to set the values
constructor(private http: Http) {
// Base URL for the API
this.baseUrl = '/api/';
this.dataStore = { employeeList: [] };
this._employeeList = <BehaviorSubject<Employee[]>>new BehaviorSubject([]);
this.employeeList = this._employeeList.asObservable();
}

// Method to get all employees by calling /api/GetAllEmployees
getAll() {
this.http.get(`${this.baseUrl}GetAllEmployees`)
.map(response => response.json())
.subscribe(data => {
this.dataStore.employeeList = data;
// Adding newly added Employee in the list
this._employeeList.next(Object.assign({}, this.dataStore).employeeList);
}, error => console.log('Could not load employee.'));
}
}

As you can see in above code, we are getting all the employees by calling /api/GetAllEmployees

Add Employee HTML file

Add below HTML code to the file:

<div id="summary" class="section panel panel-primary">
<div class="panel-heading"> Employee Summary</div>
<div class="container">
<!--{{employeeList | json}}-->
<table class="table table-striped table-condensed">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
<th>Country</th>
<th></th>
</tr>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody *ngFor="let item of employeeList | async">
<tr>
<td><input type="text" [(ngModel)]='item.empName' /></td>
<td><input type="text" [(ngModel)]='item.empAge' /></td>
<td><input type="text" [(ngModel)]='item.empCity' /></td>
<td><input type="text" [(ngModel)]='item.empCountry' /></td>
<td></td>
<td></tr>
</tbody>
</table>
</div>
</div>

Here we have used:

  • ngFor to use for loop into the Employee list
  • Bound the Employee model from the component

Add Employee component class

Add below code in the component class:

import { Component, OnInit } from '@angular/core';
import 'rxjs/add/operator/catch';
import { EmployeeService } from "./employeeService";
import { Observable } from "rxjs/Observable";
import { Employee } from "./employeeService"

//Here we specified the provider as EmployeeService and html path which we will add later

@Component({
selector: 'employee',
providers: [EmployeeService],
templateUrl: './employee.component.html'
})

//After that add below code which will be used to get the data from the service
export class EmployeeComponent implements OnInit {
public employeeList: Observable<Employee[]>;
showEditor = true;
myName: string;
employee: Employee;
constructor(private dataService: EmployeeService) {
this.employee = new Employee();
}
ngOnInit() {
// if you want to debug info just uncomment the console.log lines.
// console.log("You are in ngOnInit");
this.employeeList = this.dataService.employeeList;
this.dataService.getAll();
}}

As you can see in above code, we have specified that application should call GetAll method of the service on init.

Add EmployeeComponent in the ApModule

Add EmployeeComponent to the class app.shared.module.ts as shown below:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';

import { AppComponent } from './components/app/app.component';
import { NavMenuComponent } from './components/navmenu/navmenu.component';
import { HomeComponent } from './components/home/home.component';
import { FetchDataComponent } from './components/fetchdata/fetchdata.component';
import { CounterComponent } from './components/counter/counter.component';
import { EmployeeComponent } from './components/Employee/employee.component'; // Added EmployeeComponent here

@NgModule({
declarations: [
AppComponent,
NavMenuComponent,
CounterComponent,
FetchDataComponent,
HomeComponent,
EmployeeComponent  // Added EmployeeComponent here
],
imports: [
CommonModule,
HttpModule,
FormsModule,
RouterModule.forRoot([
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'employee', component: EmployeeComponent }, // Added EmployeeComponent here
{ path: 'home', component: HomeComponent },
{ path: 'counter', component: CounterComponent },
{ path: 'fetch-data', component: FetchDataComponent },
{ path: '**', redirectTo: 'home' }
])
]
})
export class AppModuleShared {
}

Add Employee Management in the Navigation Menu

Update Navigation menu and add the Employee link as below:

<div class='main-nav'>
<div class='navbar navbar-inverse'>
<div class='navbar-header'>
<button type='button' class='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse'>
<span class='sr-only'>Toggle navigation</span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
</button>
<a class='navbar-brand' [routerLink]="['/home']">NeelAngular4CRUD</a></div>
<div class='clearfix'></div>
<div class='navbar-collapse collapse'>
<ul class='nav navbar-nav'>
	<li [routerLinkActive]="['link-active']">
<a [routerLink]="['/employee']">
<span class='glyphicon glyphicon-employee'></span> Employee Management
</a></li>
	<li [routerLinkActive]="['link-active']">
<a [routerLink]="['/home']">
<span class='glyphicon glyphicon-home'></span> Home
</a></li>
	<li [routerLinkActive]="['link-active']">
<a [routerLink]="['/counter']">
<span class='glyphicon glyphicon-education'></span> Counter
</a></li>
	<li [routerLinkActive]="['link-active']">
<a [routerLink]="['/fetch-data']">
<span class='glyphicon glyphicon-th-list'></span> Fetch data
</a></li>
</ul>
</div>
</div>
</div>

Let us test our changes

Run the application and click on Employee Management: crud25 As you can see all the data, which are there in the database, are displayed here.

Add, Update and Delete Employees

As we can see the list of Employees, it is time to add and update them. First of all, we will update the HTML and will add below lines:

<button class="btn btn-xs btn-primary">Update</button>

<button class="btn btn-xs btn-primary">Remove</button>

as shown below:

crud26

Changes in Employee Service for Add, Update, Delete

For adding:

public addEmployee(employee: Employee) {
console.log("add Employee");
var headers = new Headers();
headers.append('Content-Type', 'application/json; charset=utf-8');
console.log('add Employee : ' + JSON.stringify(employee));

this.http.post(`${this.baseUrl}AddEmployee/`, JSON.stringify(employee), { headers: headers })
.map(response => response.json()).subscribe(data => {
this.dataStore.employeeList.push(data);
this._employeeList.next(Object.assign({}, this.dataStore).employeeList);
}, error => console.log('Could not create todo.'));
};

For Updating:

public updateEmployee(newEmployee: Employee) {
console.log("update Employee");
var headers = new Headers();
headers.append('Content-Type', 'application/json; charset=utf-8');
console.log('Update Employee : ' + JSON.stringify(newEmployee));

this.http.put(`${this.baseUrl}UpdateEmployee/`, JSON.stringify(newEmployee), { headers: headers })
.map(response => response.json()).subscribe(data => {
alert("hi");
this.dataStore.employeeList.forEach((t, i) => {
if (t.studentId === data.id) { this.dataStore.employeeList[i] = data; }
});
}, error => console.log('Could not update todo.'));
};

For Deleting:

removeItem(employeeId: number) {
var headers = new Headers();
headers.append('Content-Type', 'application/json; charset=utf-8');
console.log("removeItem:" + employeeId);
this.http.delete(`${this.baseUrl}DeleteEmployee/${employeeId}`, { headers: headers }).subscribe(response => {
this.dataStore.employeeList.forEach((t, i) => {
if (t.studentId === employeeId) { this.dataStore.employeeList.splice(i, 1); }
});

this._employeeList.next(Object.assign({}, this.dataStore).employeeList);
}, error => console.log('Could not delete Employee.'));
}

Changes in Employee Component for Add, Update, Delete

For Adding:

public addEmployee(item: Employee) {
let todoId = this.dataService.addEmployee(this.employee);
}

For Updating:

public updateEmployee(item: Employee) {
this.dataService.updateEmployee(item);
}

For Deleting:

public deleteEmployee(employeeId: number) {
this.dataService.removeItem(employeeId);
}

This is it!

Let us first test Add methods:

Add the details as shown below and click on Add:

crud27

The value will be added at the end and also will be added to the database once you click on Add:

crud28

Same with Update, once you update something Inline and click on Update, the row would be updated along with the Database:

crud29

The database would also be reflected as shown below:

crud29

And to remove, just click on Remove button of the row which you want to delete:

crud29

The row would be removed from UI and the database would also get reflected:

crud29

Note – You can find the source code of my sample application here.

Hope it helps.

10 thoughts on “CRUD operation in Angular 4 : Angular 4 + Core 2.0 CRUD operation Part II

  1. Hi, it’s a very nice article, congratulations! In my code I receive a error in employeeService.ts “<BehaviorSubject>new BehaviorSubject([]);”. The error is (TS) Type ‘BehaviorSubject’ cannot be converted to type ‘BehaviorSubject’. Types of property ‘observers’ are incompatible. Do you have a idea?
    Thanks.

    Like

    1. Hi Jose, This line of code will not give any build error but in VS2017 displays it as error line when you view the code. This can be resolved by replacing that line with “this._employeeList = new BehaviorSubject([]);”

      Note: employeeService.ts – line 21

      Regards,
      Jay

      Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s