Angular CRUD Operation- Step by step ~ Dotnet Guru ~

Here in this tutorial, I am assuming that you have basic knowledge of Angular 2 or higher version. In this tutorial I am creating a simple demo with crud operation using Angular as frontend and Webapi as backend. In the previous tutorial I already created Api layer Click here. So here I'll create step by step Frontend part that includes Angular Components and Services.

1- First Install NodeJs https://nodejs.org/en/ , and Visual Studio Code for editor https://code.visualstudio.com/

2- Open VisualStudio Code. Open Terminal window and Install CLI. To install the Angular CLI globally, run the following command on your console npm install -g @angular/cli

3- Create a new project using below command.

E:\> cd E:\Projects\SOTI\AngularApp
E:\Projects\SOTI\AngularApp> ng new EmployeeApp

4- Open the project in Editor.

5- Add the Api Url in environment.ts file.

export const environment = {
  production: false,
  apiAddress: 'http://192.168.0.6:81/api'
};

6- Add the below folders in src/app

Employee
Models
Services

7- Add a new class in Models folder named "employee.ts" and add the below Fields.

export class Employee {
    costructor() { }
    EmpId: number;
    FirstName: string;
    LastName: string;
}

8- Now comes to Services folder. Create a new service that interacts with your Api.

ng generate service EmployeeService

Add the below codes in your Service class.

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { Http, Headers, Response } from '@angular/http';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import { environment as env } from '../../environments/environment';
import{Employee} from '../Models/employee';

@Injectable({
  providedIn: 'root'
})
export class EmployeeServiceService {
headers: Headers;
  constructor(private http: Http) {
    this.headers = new Headers({ 'content-type': 'application/json' });
   }

   getAll(): Observable<Employee[]> {
    return this.http.get(env.apiAddress + '/Employee')
        .map((res: Response) => res.json())
        .catch((error: any) => Observable.throw(error.json().error || 'Server error'));
}
  get(id: number): Observable<Employee> {
      return this.http
          .get(`${env.apiAddress}/Employee/${id}`)
          .map((res: Response) => {return res.json();})
          .catch((error: any) => Observable.throw('Server error'));
  }
  add(employee: Employee): Observable<Response> {

      return this.http
          .post(`${env.apiAddress}/Employee`, JSON.stringify(employee), { headers: this.headers })
          .catch((error: any) => Observable.throw('Server error'));
  }
  update(employee: Employee): Observable<Response> {
      return this.http
          .put(`${env.apiAddress}/Employee/${employee.EmpId}`, JSON.stringify(employee), { headers: this.headers })
          .catch((error: any) => Observable.throw('Server error'));
  }
  delete(id: number): Observable<Response> {
      return this.http
          .delete(`${env.apiAddress}/Employee/${id}`)
          .catch((error: any) => Observable.throw('Server error'));
  }
}

If map operator not found then execute the below command in terminal.
npm install --save rxjs-compat@6

9- Now I will create component for our UI things. comes to src/app/Employee folder. I will add three component for Employee List, Create and Edit. Below is the terminal command.

ng g c Employee --flat --spec false
ng g c CreateEmployee --flat --spec false
ng g c EditEmployee --flat --spec false

the above command will add the class files, html files and style files for each component. See the below Screenshot.

10- Now comes to Employee Listing component. open the employee.component.ts file and add the below code.

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { EmployeeServiceService } from '../Services/employee-service.service';

@Component({
  selector: 'app-employee',
  templateUrl: './employee.component.html',
  styleUrls: ['./employee.component.css']
})
export class EmployeeComponent implements OnInit {

  employees: any[];
  constructor(private empService: EmployeeServiceService,private router: Router) { }

  ngOnInit() {
    this.getAllEmployee();
  }

  getAllEmployee(){
    this.empService.getAll().subscribe((res) => {
      this.employees = res;
    });
  }
  deleteProduct(id: number){
    if(id != undefined && id > 0){
      if(confirm("Are you sure?")){
        this.empService.delete(id).subscribe((res: any) => {
          console.log(res);
          if (res !== undefined) {
            
            this.getAllEmployee();
            alert("Employee has been deleted successfully.")           
          }
        });
      }
     }
    else{alert("Invalid Employee Id")}
   }
}

In the above code I have called the service for fetching and deleting Employee data.
Now add the below html code in employee.component.html to render data.

<h2>Employee Listing</h2>
<a [routerLink]="['/create']" class="btn btn-info">Add new Employee</a>
<hr>
<table class="table table-bordered table-hover">
  <thead>
    <tr>
      <th>Employee ID</th>
      <th>First Name</th>
      <th>Last Name</th>    
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of employees">
      <!-- <td>{{i+1}}</td> -->
      <td>{{item.EmpId}}</td>
      <td>{{item.FirstName}}</td>
      <td>{{item.LastName}}</td>
      <td>      
          <a [routerLink]="['/Edit', item.EmpId]" class="btn btn-info">Edit</a> | 
          <button type="button" class="btn btn-danger" (click)="deleteProduct(item.EmpId)">Delete</button>  
      </td>
    </tr>
  </tbody>
</table>

11- Now comes to Create Employee component. open the create-employee.component.ts file and add the below code.

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { FormGroup, FormBuilder, Validators, NgForm } from '@angular/forms';
import { EmployeeServiceService } from '../Services/employee-service.service';
import {Employee} from '../Models/employee';

@Component({
  selector: 'app-create-employee',
  templateUrl: './create-employee.component.html',
  styleUrls: ['./create-employee.component.css']
})
export class CreateEmployeeComponent implements OnInit {

  employee: Employee;
  constructor(private empService: EmployeeServiceService,private router: Router, private route: ActivatedRoute) {
   this.employee = new Employee();
   }

  ngOnInit() {}

  CreateEmployee(form: any)
  {
    if (form.valid) {
    this.empService.add(this.employee).subscribe((res: any) => {
      console.log(res);
      if (res !== undefined) {
        alert("Employee has been added successfully.")
        this.router.navigate(['List']);
      }
    });
  }
  else{alert("Form is invalid.");}
 }
}

In the above code I have called the service for creating new employee data.
Now add the below html code in create-employee.component.html to creating form.

<p>
  create-employee !
</p>
<a class="btn btn-default" href=".">Back to Employee list</a>

<form #form="ngForm" class="form-horizontal" (ngSubmit)="CreateEmployee(form)">
    <div class="form-group">
      <label class="col-sm-2">First name</label>
      <div class="col-sm-10">
        <input type="text" #FirstName="ngModel" name="FirstName" [(ngModel)]="employee.FirstName" required class="form-control">
        <div *ngIf="FirstName.errors && (form.submitted || FirstName.dirty)" class="text-danger">
            <span [hidden]="!FirstName.errors.required">Please Enter First Name</span>
        </div>
        
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-2">Last name</label>
      <div class="col-sm-10">
        <input type="text" #LastName="ngModel" name="LastName" [(ngModel)]="employee.LastName" required class="form-control">
        <div *ngIf="LastName.errors && (form.submitted || LastName.dirty)" class="text-danger">
            <span [hidden]="!LastName.errors.required">Please Enter Last Name</span>
        </div>
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-10 col-sm-offset-2">
        <button type="submit" class="btn btn-primary">Save</button>
      </div>
    </div>
  </form>

12- Now comes to Edit employee component. open the edit-employee.component.ts file and add the below code.

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { FormGroup, FormBuilder, Validators, NgForm } from '@angular/forms';
import { EmployeeServiceService } from '../Services/employee-service.service';
import {Employee} from '../Models/employee';

@Component({
  selector: 'app-edit-employee',
  templateUrl: './edit-employee.component.html',
  styleUrls: ['./edit-employee.component.css']
})
export class EditEmployeeComponent implements OnInit {
  employee: Employee;
  id: number;
  constructor(private empService: EmployeeServiceService,private router: Router, private route: ActivatedRoute) {
    this.employee = new Employee();
    this.route.params.subscribe((params) => {
    this.id = params.id;
   });
  }

  ngOnInit() {
    this.FillEmployee();
  }

  FillEmployee()
  {
    this.empService.get(this.id).subscribe((res) => {
      console.log(res);
      this.employee = res;
    });
  }

  UpdateEmployee(form: any)
  {
    if (form.valid) {
      this.empService.update(this.employee).subscribe((res: any) => {
        console.log(res);
        if (res !== undefined) {
          alert("Employee has been updated successfully.")
          this.router.navigate(['List']);
        }
      });
    }
    else{alert("Form is invalid.");}
  }
}

In the above code I have called the service for updating the existing employee data.
Now add the below html code in edit-employee.component.html for editing the data.

<p>
 Edit Employee
</p>
<a class="btn btn-default" href=".">Back to Employee list</a>

<form #form="ngForm" class="form-horizontal" (ngSubmit)="UpdateEmployee(form)">
    <div class="form-group">
      <label class="col-sm-2">First name</label>
      <div class="col-sm-10">
        <input type="text" #FirstName="ngModel" name="FirstName" [(ngModel)]="employee.FirstName" required class="form-control">
        <div *ngIf="FirstName.errors && (form.submitted || FirstName.dirty)" class="text-danger">
            <span [hidden]="!FirstName.errors.required">Please Enter First Name</span>
        </div>
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-2">Last name</label>
      <div class="col-sm-10">
        <input type="text" #LastName="ngModel" name="LastName" [(ngModel)]="employee.LastName" required class="form-control">
        <div *ngIf="LastName.errors && (form.submitted || LastName.dirty)" class="text-danger">
            <span [hidden]="!LastName.errors.required">Please Enter Last Name</span>
        </div>
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-10 col-sm-offset-2">
        <button type="submit" class="btn btn-primary">Update</button>
      </div>
    </div>
  </form>

13- Add the Routing module in src/app folder. use the below command.

ng generate module app-routing --flat --module=app

Add the below codes in the app-routing.module.ts file.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import{EmployeeComponent} from '../app/Employee/employee.component';
import {CreateEmployeeComponent} from '../app/Employee/create-employee.component';
import {EditEmployeeComponent} from '../app/Employee/edit-employee.component';

const routes: Routes = [
  { path: '', component: EmployeeComponent },
  { path: 'List', component: EmployeeComponent },
  { path: 'Edit/:id', component: EditEmployeeComponent },
  { path: 'create', component: CreateEmployeeComponent  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule],
})
export class AppRoutingModule { }