Angular 8 - CRUD Operations

This is the continuation of Angular 8 - CRUD Operations - Part One and Angular 8 - CRUD Operations - Part 2. In this article, we will learn how to implement CRUD operations using Angular and how to pass data through an Angular service to the database.

So far, we have covered Web API, Angular Routing, and Services. Now let’s implement CRUD operations in Angular components.

First install the given packages, because I am going to use these in my sample application.

Bootstrap

npm install bootstrap –-save

JQuery

npm install jquery --save

Material JS

npm install --save @angular/material

Font Awesome

npm install font-awesome –save

Some important angular cli commands,

To create new class

ng generate class Employee

To create new service

ng generate service employee

To create new component

ng generate component header

To run the application

ng serve

Once you've installed the above-given packages, you need to add q reference of Bootstrap in Angular.json like this:

"styles": [
"src/styles.scss",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]

Add stylesheets refrence in styles.scss file.

/* You can add global styles to this file, and also import other style files */
@import "~bootstrap/dist/css/bootstrap.css";
// @import '@angular/material/prebuilt-themes/indigo-pink.css';
@import '@angular/material/prebuilt-themes/deeppurple-amber.css';

Go to terminal and create a new class:

export class Employee {
EmployeeID: number;
LastName: string;
FirstName: string;
Title: string;
TitleOfCourtesy: string;
BirthDate: Date;
HireDate: Date;
Address: string;
City: string;
Region: string;
PostalCode: string;
Country: string;
HomePhone: string;
Extension: string;
Photo: string;
Notes: string;
}

Add a new component

Add the following code in component and add the service and class refrence and CRUD functions in component.

import { Component, OnInit } from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';
import { Observable } from 'rxjs';
import { EmployeeService } from '../employee.service';
import { Employee } from '../employee';
@Component({
selector: 'app-employee',
templateUrl: './employee.component.html',
styleUrls: ['./employee.component.scss']
})
export class EmployeeComponent implements OnInit {
dataSaved = false;
employeeForm: any;
allEmployees: Observable<Employee[]>;
employeeIdUpdate = null;
massage = null;
constructor(private formbulider: FormBuilder,
private employeeService: EmployeeService) { }
ngOnInit() {
this.employeeForm = this.formbulider.group({
LastName: ['', [Validators.required]],
FirstName: ['', [Validators.required]],
Title: ['', ''],
TitleOfCourtesy: ['', ''],
BirthDate: ['', [Validators.required]],
HireDate: ['', ''],
Address: ['', [Validators.required]],
City: ['', [Validators.required]],
Region: ['', [Validators.required]],
PostalCode: ['', [Validators.required]],
Country: ['', [Validators.required]],
HomePhone: ['', [Validators.required]],
Notes: ['', [Validators.required]],
});
this.loadEmployees();
}
loadEmployees() {
this.allEmployees = this.employeeService.getEmployees();
}
onFormSubmit() {
this.dataSaved = false;
const employee = this.employeeForm.value;
this.CreateEmployee(employee);
this.employeeForm.reset();
}
loadEmployee(employeeId: string) {
this.employeeService.getEmployee(employeeId).subscribe(employee => {
this.massage = null;
this.dataSaved = false;
this.employeeIdUpdate = employee.EmployeeID;
this.employeeForm.controls['LastName'].setValue(employee.LastName);
this.employeeForm.controls['FirstName'].setValue(employee.FirstName);
this.employeeForm.controls['Title'].setValue(employee.Title);
this.employeeForm.controls['TitleOfCourtesy'].setValue(employee.TitleOfCourtesy);
this.employeeForm.controls['BirthDate'].setValue(employee.BirthDate);
this.employeeForm.controls['HireDate'].setValue(employee.HireDate);
this.employeeForm.controls['Address'].setValue(employee.Address);
this.employeeForm.controls['City'].setValue(employee.City);
this.employeeForm.controls['Region'].setValue(employee.Region);
this.employeeForm.controls['PostalCode'].setValue(employee.PostalCode);
this.employeeForm.controls['Country'].setValue(employee.Country);
this.employeeForm.controls['HomePhone'].setValue(employee.HomePhone);
this.employeeForm.controls['Notes'].setValue(employee.Notes);
});
}
CreateEmployee(employee: Employee) {
if (this.employeeIdUpdate == null) {
this.employeeService.createEmployee(employee).subscribe(
() => {
this.dataSaved = true;
this.massage = 'Record saved Successfully';
this.loadEmployees();
this.employeeIdUpdate = null;
this.employeeForm.reset();
}
);
} else {
employee.EmployeeID = this.employeeIdUpdate;
this.employeeService.updateEmployee(employee).subscribe(() => {
this.dataSaved = true;
this.massage = 'Record Updated Successfully';
this.loadEmployees();
this.employeeIdUpdate = null;
this.employeeForm.reset();
});
}
}
deleteEmployee(employeeId: string) {
if (confirm("Are you sure you want to delete this ?")) {
this.employeeService.deleteEmployee(employeeId).subscribe(() => {
this.dataSaved = true;
this.massage = 'Record Deleted Succefully';
this.loadEmployees();
this.employeeIdUpdate = null;
this.employeeForm.reset();
});
}
}
resetForm() {
this.employeeForm.reset();
this.massage = null;
this.dataSaved = false;
}
}

Add the following html in employee.compnent.html:

<div class="container">
<mat-card>
<mat-toolbar color="accent">
<div align="center" style="color:white;text-align: right;">
CRUD operation in Angular 8
</div>
</mat-toolbar>
<br><br>
<mat-card-content>
<form [formGroup]="employeeForm" (ngSubmit)="onFormSubmit(employeeForm.value)">
<table>
<tr>
<td class="tbl1">
<mat-form-field class="demo-full-width">
<input formControlName="LastName" matTooltip="Enter Last Name" matInput placeholder="Last Name">
</mat-form-field>
<mat-error>
<span *ngIf="!employeeForm.get('LastName').value && employeeForm.get('LastName').touched"></span>
</mat-error>
</td>
<td class="tbl1">
<mat-form-field class="demo-full-width">
<input formControlName="FirstName" matTooltip="Enter First Name" matInput placeholder="First Name">
</mat-form-field>
<mat-error>
<span *ngIf="!employeeForm.get('FirstName').value && employeeForm.get('FirstName').touched"></span>
</mat-error>
</td>
<td class="tbl1">
<mat-form-field class="demo-full-width">
<input formControlName="Title" matTooltip="Enter Title" matInput placeholder="Title">
</mat-form-field>
<mat-error>
<span *ngIf="!employeeForm.get('Title').value && employeeForm.get('Title').touched"></span>
</mat-error>
</td>
</tr>
<tr>
<td class="tbl1">
<!-- <mat-form-field class="demo-full-width">
<input formControlName="TitleOfCourtesy" matTooltip="Enter Title Of Courtesy" matInput placeholder="Title Of Courtesy">
</mat-form-field> -->
<mat-form-field>
<select matNativeControl formControlName="TitleOfCourtesy" matTooltip="Enter Title Of Courtesy" matInput placeholder="Title Of Courtesy">
<option value="Ms.">Ms.</option>
<option value="Dr.">Dr.</option>
<option value="Mrs.">Mrs.</option>
<option value="Mr.">Mr.</option>
</select>
</mat-form-field>
<mat-error>
<span *ngIf="!employeeForm.get('TitleOfCourtesy').value && employeeForm.get('TitleOfCourtesy').touched"></span>
</mat-error>
</td>
<td class="tbl1" colspan="2">
<mat-form-field class="demo-full-width">
<input matInput [matDatepicker]="picker" matTooltip="Enter Date Of Birth" formControlName="BirthDate" placeholder="Date Of Birth">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
<mat-error>
<span *ngIf="!employeeForm.get('BirthDate').value && employeeForm.get('BirthDate').touched"></span>
</mat-error>
</td>
<td class="tbl1">
</td>
</tr>
<tr>
<td class="tbl1">
<mat-form-field class="demo-full-width">
<input matTooltip="Enter Address" formControlName="Address" matInput placeholder="Address">
</mat-form-field>
<mat-error>
<span *ngIf="!employeeForm.get('Address').value && employeeForm.get('Address').touched"></span>
</mat-error>
</td>
<td class="tbl1">
<mat-form-field class="demo-full-width">
<input formControlName="City" matTooltip="Enter City" matInput placeholder="City">
</mat-form-field>
<mat-error>
<span *ngIf="!employeeForm.get('City').value && employeeForm.get('City').touched"></span>
</mat-error>
</td>
<td class="tbl1">
<mat-form-field class="demo-full-width">
<input formControlName="Region" matTooltip="Enter Region" matInput placeholder="Region">
</mat-form-field>
<mat-error>
<span *ngIf="!employeeForm.get('Region').value && employeeForm.get('Region').touched"></span>
</mat-error>
</td>
</tr>
<tr>
<td class="tbl1">
<mat-form-field class="demo-full-width">
<input formControlName="PostalCode" matTooltip="Enter Postal Code" matInput placeholder="Postal Code">
</mat-form-field>
<mat-error>
<span *ngIf="!employeeForm.get('PostalCode').value && employeeForm.get('PostalCode').touched"></span>
</mat-error>
</td>
<td class="tbl1">
<mat-form-field class="demo-full-width">
<input formControlName="Country" matTooltip="Enter Country" matInput placeholder="Country">
</mat-form-field>
<mat-error>
<span *ngIf="!employeeForm.get('Country').value && employeeForm.get('Country').touched"></span>
</mat-error>
</td>
<td class="tbl1">
<mat-form-field class="demo-full-width">
<input formControlName="HomePhone" matTooltip="Enter Home Phone" matInput placeholder="Home Phone">
</mat-form-field>
<mat-error>
<span *ngIf="!employeeForm.get('HomePhone').value && employeeForm.get('HomePhone').touched"></span>
</mat-error>
</td>
</tr>
<tr>
<td class="tbl1" colspan="3">
<mat-form-field class="demo-full-width">
<input formControlName="Notes" matTooltip="Enter Notes" matInput placeholder="Notes">
</mat-form-field>
<mat-error>
<span *ngIf="!employeeForm.get('Notes').value && employeeForm.get('Notes').touched"></span>
</mat-error>
</td>
</tr>
<tr>
<td></td>
<td class="content-center">
<button type="submit" mat-raised-button color="accent" matTooltip="Click Submit Button" [disabled]="!employeeForm.valid">Submit</button>
<button type="reset" mat-raised-button color="accent" matTooltip="Click Reset Button" (click)="resetForm()">Reset</button>
</td>
<td>
<p *ngIf="dataSaved" style="color:rgb(0, 128, 0);font-size:20px;font-weight:bold" Class="success" align="left">
{{massage}}
</p>
</td>
</tr>
</table>
<br><br>
<table class="table" >
<tr ngclass="btn-primary">
<th class="tbl2">Last Name</th>
<th class="tbl2">First Name</th>
<th class="tbl2">Date Of Birth</th>
<th class="tbl2">Hire Date</th>
<th class="tbl2">City</th>
<th class="tbl2">Region</th>
<th class="tbl2">Postal Code</th>
<th class="tbl2">Country</th>
<th class="tbl2">Edit</th>
<th class="tbl2">Delete</th>
</tr>
<tr *ngFor="let employee of allEmployees | async">
<td class="tbl2">{{employee.LastName}}</td>
<td class="tbl2">{{employee.FirstName}}</td>
<td class="tbl2">{{employee.BirthDate | date }}</td>
<td class="tbl2">{{employee.HireDate | date }}</td>
<td class="tbl2">{{employee.City}}</td>
<td class="tbl2">{{employee.Region}}</td>
<td class="tbl2">{{employee.PostalCode}}</td>
<td class="tbl2">{{employee.Country}}</td>
<td class="tbl2">
<button type="button" class="btn btn-info" matTooltip="Click Edit Button" (click)="loadEmployee(employee.EmployeeID)">Edit</button>
</td>
<td class="tbl2">
<button type="button" class="btn btn-danger" matTooltip="Click Delete Button" (click)="deleteEmployee(employee.EmployeeID)">Delete</button>
</td>
</tr>
</table>
</form>
</mat-card-content>
</mat-card>
</div>

Add the component and class and other references in app.module.ts file.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import {
MatButtonModule, MatMenuModule, MatDatepickerModule, MatNativeDateModule , MatIconModule, MatCardModule, MatSidenavModule, MatFormFieldModule,
MatInputModule, MatTooltipModule, MatToolbarModule
} from '@angular/material';
import { MatRadioModule } from '@angular/material/radio';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NavbarComponent } from './navbar/navbar.component';
import { EmployeeComponent } from './employee/employee.component';
import { AboutComponent } from './about/about.component';
import { FooterComponent } from './footer/footer.component';
import { HeaderComponent } from './header/header.component';
import { EmployeeService } from './employee.service';
@NgModule({
declarations: [
AppComponent,
NavbarComponent,
EmployeeComponent,
AboutComponent,
FooterComponent,
HeaderComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FontAwesomeModule,
HttpClientModule,
FormsModule,
ReactiveFormsModule,
HttpClientModule,
BrowserAnimationsModule,
MatButtonModule,
MatMenuModule,
MatDatepickerModule,
MatNativeDateModule,
MatIconModule,
MatRadioModule,
MatCardModule,
MatSidenavModule,
MatFormFieldModule,
MatInputModule,
MatTooltipModule,
MatToolbarModule,
],
providers: [EmployeeService, HttpClientModule, MatDatepickerModule],
bootstrap: [AppComponent]
})
export class AppModule { }

Run the application.

Open http://localhost:4200/ in browser.

On the page, you have a list of employees and options to create a new employee and edit an existing employee and delete an employee. As you can see, we have used Bootstrap and material.js for layout styling. For example, when you click on a last name then then you will see tooltip and validation color.

Click on the little calendar icon to see the calendar.

Conclusion

In this article, we have learned the CRUD operations using Angular with Web API and Entity Framework with SQL Server data. I have attached sample application source code and Web API code separately.