Angular 8 App With Cosmos DB And Azure Functions

Introduction

 

Azure Functions is an efficient solution to run small pieces of code, or "functions," easily in the cloud. We can write just the code we need for the problem without worrying about a whole application or the infrastructure to run it. Functions can make development even more productive and we can use our development language of choice, such as C#, F#, Node.js, Java, or PHP.

 

We pay only for the time our code runs and trust Azure to scale as needed. Azure Functions lets you develop serverless applications on Microsoft Azure. We will create our Azure function in Visual Studio for testing purpose. We can publish this function to the Azure portal very easily. We will use Cosmos DB to store and retrieve the data. Cosmos DB is the most demanding No SQL database in current days. For testing purpose, we will use local Cosmos DB emulator. We will create an Angular 8 Employee application and consume these Azure functions as a REST API service.

 

Create Cosmos DB database and collection in local emulator.

 

You can download Cosmos DB free emulator from this URL. After downloading and installing the emulator you can run it. This will be opened in the browser.

 

 

We will later use the URI and Key in our Azure function app to connect with Cosmos DB.

 

We can click the “Explorer” tab and create a new Cosmos DB database and collection.

 

 

 

We must give a valid name for the database and collection. Please give partition key as well. Partition key is very important in Cosmos DB. We cannot change the partition key once we have created the collection. So, we must be very careful to choose the partition key. All the data is stored based on the partition key.

 

Create Azure Function in Visual Studio

 

We can open Visual Studio 2017 or later version and choose Azure function template. You must install Azure SDK to get this template. You can even install Azure function extension separately too. Choose “Azure Functions” template from the “Cloud” tab.

 

 

Various trigger types are supported in Azure Function. We can choose "Http trigger" for our purposes.

 

 

A static "Function1" class will be created automatically with our function. We can rename this file to "CosmosFunctions". We can remove the default code lines from this class file. We will add separate functions for CRUD actions inside this file later.

 

As I mentioned earlier, we are creating an Employee app. Hence, we can create “Employee” model class inside a new “Data” folder.

 

Employee.cs

using Newtonsoft.Json;

namespace AzureFunctionCosmos.Data
{
    public class Employee
    {
        [JsonProperty(PropertyName = "id")]
        public string Id { get; set; }
        public string Name { get; set; }
        public string Address { get; set; }
        public string Gender { get; set; }
        public string Company { get; set; }
        public string Designation { get; set; }
        public string Cityname { get; set; }
    }
}

I have added all the field names required for our Cosmos DB collection. Also, note that I have added a “JsonProperty” attribute for “Id” property. Because, Cosmos DB automatically creates an “id” field for each record.

 

We can install “Microsoft.Azure.DocumentDB.Core” NuGet package in our project. This will be used to connect with Cosmos DB. You can install the latest version.

 

 

We can create an “IDocumentDBRepository” interface inside it. This interface contains all the methods declaration for our Cosmos DB repository. We will implement this interface in the “DocumentDBRepository” class.

 

IDocumentDBRepository.cs

using Microsoft.Azure.Documents;
using System;
using System.Collections.Generic;
using System.Linq.Expressions;
using System.Threading.Tasks;

namespace AzureFunctionCosmos.Data
{
    public interface IDocumentDBRepository<T> where T : class
    {
        Task<Document> CreateItemAsync(T item, string collectionId);
        Task DeleteItemAsync(string id, string collectionId, string partitionKey);
        Task<IEnumerable<T>> GetItemsAsync(Expression<Func<T, bool>> predicate, string collectionId);
        Task<IEnumerable<T>> GetItemsAsync(string collectionId);
        Task<Document> UpdateItemAsync(string id, T item, string collectionId);
    }
}

I have added all the methods declaration for CRUD actions for Azure functions in the above interface.

 

We can implement this interface in the “DocumentDBRepository” class.

 

DocumentDBRepository.cs

using Microsoft.Azure.Documents;
using Microsoft.Azure.Documents.Client;
using Microsoft.Azure.Documents.Linq;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Linq.Expressions;
using System.Threading.Tasks;

namespace AzureFunctionCosmos.Data
{
    public class DocumentDBRepository<T> : IDocumentDBRepository<T> where T : class
    {

        private readonly string Endpoint = "https://localhost:8081/";
        private readonly string Key = "C2y6yDjf5/R+ob0N8A7Cgv30VRDJIWEHLM+4QDU5DE2nQ9nDuVTqobD4b8mGGyPMbIZnqyMsEcaGQy67XIw/Jw==";
        private readonly string DatabaseId = "SarathCosmosDB";
        private DocumentClient client;

        public DocumentDBRepository()
        {
            client = new DocumentClient(new Uri(Endpoint), Key);
        }

        public async Task<IEnumerable<T>> GetItemsAsync(Expression<Func<T, bool>> predicate, string collectionId)
        {
            IDocumentQuery<T> query = client.CreateDocumentQuery<T>(
                UriFactory.CreateDocumentCollectionUri(DatabaseId, collectionId),
                new FeedOptions { MaxItemCount = -1 })
                .Where(predicate)
                .AsDocumentQuery();

            List<T> results = new List<T>();
            while (query.HasMoreResults)
            {
                results.AddRange(await query.ExecuteNextAsync<T>());
            }

            return results;
        }

        public async Task<IEnumerable<T>> GetItemsAsync(string collectionId)
        {
            IDocumentQuery<T> query = client.CreateDocumentQuery<T>(
                UriFactory.CreateDocumentCollectionUri(DatabaseId, collectionId),
                new FeedOptions { MaxItemCount = -1 })
                .AsDocumentQuery();

            List<T> results = new List<T>();
            while (query.HasMoreResults)
            {
                results.AddRange(await query.ExecuteNextAsync<T>());
            }

            return results;
        }

        public async Task<Document> CreateItemAsync(T item, string collectionId)
        {
            return await client.CreateDocumentAsync(UriFactory.CreateDocumentCollectionUri(DatabaseId, collectionId), item);
        }

        public async Task<Document> UpdateItemAsync(string id, T item, string collectionId)
        {
            return await client.ReplaceDocumentAsync(UriFactory.CreateDocumentUri(DatabaseId, collectionId, id), item);
        }

        public async Task DeleteItemAsync(string id, string collectionId, string partitionKey)
        {
            await client.DeleteDocumentAsync(UriFactory.CreateDocumentUri(DatabaseId, collectionId, id),
            new RequestOptions() { PartitionKey = new PartitionKey(partitionKey) });
        }

        private async Task CreateDatabaseIfNotExistsAsync()
        {
            try
            {
                await client.ReadDatabaseAsync(UriFactory.CreateDatabaseUri(DatabaseId));
            }
            catch (DocumentClientException e)
            {
                if (e.StatusCode == System.Net.HttpStatusCode.NotFound)
                {
                    await client.CreateDatabaseAsync(new Database { Id = DatabaseId });
                }
                else
                {
                    throw;
                }
            }
        }

        private async Task CreateCollectionIfNotExistsAsync(string collectionId)
        {
            try
            {
                await client.ReadDocumentCollectionAsync(UriFactory.CreateDocumentCollectionUri(DatabaseId, collectionId));
            }
            catch (DocumentClientException e)
            {
                if (e.StatusCode == System.Net.HttpStatusCode.NotFound)
                {
                    await client.CreateDocumentCollectionAsync(
                        UriFactory.CreateDatabaseUri(DatabaseId),
                        new DocumentCollection { Id = collectionId },
                        new RequestOptions { OfferThroughput = 1000 });
                }
                else
                {
                    throw;
                }
            }
        }
    }
}

I have implemented all the CRUD actions inside the above class. We can use these methods inside our Azure functions.

 

Create a “GetAll” function to get all Cosmos DB employee collection data. We will create this function as HTTP Trigger.

public static class GetAll
{
    [FunctionName("GetAll")]
    public static async Task<IEnumerable<Employee>> Run([HttpTrigger(AuthorizationLevel.Function, "get", Route = "Get")]HttpRequest req, TraceWriter log)
    {
        log.Info("C# HTTP trigger function to get all data from Cosmos DB");

        IDocumentDBRepository<Employee> Respository = new DocumentDBRepository<Employee>();
        return await Respository.GetItemsAsync("Employee");
    }
}

Create remaining functions for other CRUD actions in the same file as Http trigger functions.

 

We have created the same function ”CreateOrUpdate” for POST and PUT HTTP methods.

 

CosmosFunctions.cs

using AzureFunctionCosmos.Data;
using Microsoft.AspNetCore.Http;
using Microsoft.Azure.WebJobs;
using Microsoft.Azure.WebJobs.Extensions.Http;
using Microsoft.Azure.WebJobs.Host;
using Newtonsoft.Json;
using System.Collections.Generic;
using System.IO;
using System.Threading.Tasks;

namespace AzureFunctionCosmos
{
    public static class GetAll
    {
        [FunctionName("GetAll")]
        public static async Task<IEnumerable<Employee>> Run([HttpTrigger(AuthorizationLevel.Function, "get", Route = "Get")]HttpRequest req, TraceWriter log)
        {
            log.Info("C# HTTP trigger function to get all data from Cosmos DB");

            IDocumentDBRepository<Employee> Respository = new DocumentDBRepository<Employee>();
            return await Respository.GetItemsAsync("Employee");
        }
    }

    public static class GetSingle
    {
        [FunctionName("GetSingle")]
        public static async Task<Employee> Run([HttpTrigger(AuthorizationLevel.Function, "get", Route = "Get/{id}/{cityName}")]HttpRequest req, TraceWriter log, string id, string cityName)
        {
            log.Info("C# HTTP trigger function to get a single data from Cosmos DB");

            IDocumentDBRepository<Employee> Respository = new DocumentDBRepository<Employee>();
            var employees = await Respository.GetItemsAsync(d => d.Id == id && d.Cityname == cityName, "Employee");
            Employee employee = new Employee();
            foreach (var emp in employees)
            {
                employee = emp;
                break;
            }
            return employee;
        }
    }

    public static class CreateOrUpdate
    {
        [FunctionName("CreateOrUpdate")]
        public static async Task<bool> Run([HttpTrigger(AuthorizationLevel.Function, "post", "put", Route = "CreateOrUpdate")]HttpRequest req, TraceWriter log)
        {
            log.Info("C# HTTP trigger function to create a record into Cosmos DB");
            try
            {
                IDocumentDBRepository<Employee> Respository = new DocumentDBRepository<Employee>();
                string requestBody = await new StreamReader(req.Body).ReadToEndAsync();
                var employee = JsonConvert.DeserializeObject<Employee>(requestBody);
                if (req.Method == "POST")
                {
                    employee.Id = null;
                    await Respository.CreateItemAsync(employee, "Employee");
                }
                else
                {
                    await Respository.UpdateItemAsync(employee.Id, employee, "Employee");
                }
                return true;
            }
            catch
            {
                log.Info("Error occured while creating a record into Cosmos DB");
                return false;
            }

        }
    }

    public static class Delete
    {
        [FunctionName("Delete")]
        public static async Task<bool> Run([HttpTrigger(AuthorizationLevel.Function, "delete", Route = "Delete/{id}/{cityName}")]HttpRequest req, TraceWriter log, string id, string cityName)
        {
            log.Info("C# HTTP trigger function to delete a record from Cosmos DB");

            IDocumentDBRepository<Employee> Respository = new DocumentDBRepository<Employee>();
            try
            {
                await Respository.DeleteItemAsync(id, "Employee", cityName);
                return true;
            }
            catch
            {
                return false;
            }
        }
    }
}

We have completed all the functions for CRUD actions. We can run the function and test using Postman or any other tool.

 

When we start the Azure function app, Microsoft Azure Emulator will be loaded automatically.

 

 

You can also notice that a “func.exe” will be executed and showing below details.

 

 

We can see endpoints for all four functions in the console screen. We can test these functions in the same way we test Web APIs.

 

We are going to consume these functions inside our Angular 8 application. Hence, we must enable CORS (Cross-Origin Resource Sharing) in “local.settings.json” file.

 

local.settings.json

{
  "IsEncrypted": false,
  "Values": {
    "AzureWebJobsStorage": "UseDevelopmentStorage=true",
    "FUNCTIONS_WORKER_RUNTIME": "dotnet"
  },
  "Host": {
    "CORS": "*"
  }
}

We have successfully completed the Azure functions and connected with Cosmos DB. We can create an Angular 8 Employee application now.

 

Create Angular 8 Application using CLI

 

Please ensure that you have already installed Angular CLI version 8 and node.js version 12 or later in your machine before creating the Angular application.

ng new Angular8Cosmos

Above command will create a new Angular 8 application and create all node dependencies.

 

We are using some bootstrap classes and font awesome icons. Hence, we can install both packages for our project.

 

We can import these libraries inside the styles.css file.

 

styles.css

/* You can add global styles to this file, and also import other style files */
@import "~bootstrap/dist/css/bootstrap.css";
@import "~font-awesome/css/font-awesome.css";

Now, these classes and icons can be used anywhere in the project without further references.

 

We can create a header, footer, and layout components using below commands.

ng g component ui/header
ng g component ui/footer
ng g component ui/layout

Copy the below code and paste into corresponding files.

 

header.component.html

<nav class="navbar navbar-dark bg-dark mb-5">
  <a class="navbar-brand" href="/">Employee App</a>
  <div class="navbar-expand mr-auto">
    <div class="navbar-nav">
      <a class="nav-item nav-link active" routerLink="home" routerLinkActive="active">Home</a>
      <a class="nav-item nav-link" routerLink="employees">Employee</a>
    </div>
  </div>
  <div class="navbar-expand ml-auto navbar-nav">
    <div class="navbar-nav">
      <a class="nav-item nav-link" href="https://github.com/sarathlalsaseendran" target="_blank">
        <i class="fa fa-github"></i>
      </a>
      <a class="nav-item nav-link" href="https://twitter.com/sarathlalsasee1" target="_blank">
        <i class="fa fa-twitter"></i>
      </a>
      <a class="nav-item nav-link" href="https://codewithsarath.com" target="_blank">
        <i class="fa fa-wordpress"></i>
      </a>
    </div>
  </div>
</nav>

footer.component.html

<nav class="navbar navbar-dark bg-dark mt-5 fixed-bottom">
  <div class="navbar-expand m-auto navbar-text">
    Developed with <i class="fa fa-heart"></i> by <a href="https://codewithsarath.com" target="_blank">Sarath Lal</a>
  </div>
</nav>

layout.component.html

<app-header></app-header>
<div class="container">
  <ng-content></ng-content>
</div>
<app-footer></app-footer>

Please copy below code and paste in the file.

 

app.component.html

<app-layout>
  <router-outlet></router-outlet>
</app-layout>

We can create a Home component using the below command.

ng g component home

We can modify the corresponding template file with the below code.

 

home.component.html

<div style="text-align:center">
  <h2>
    Angular 8 App with Azure Function and Cosmos DB
  </h2>
  <p>
    Welcome to our new single-page application build with below technologies.
  </p>
  <img width="700" alt="Angular Logo"
    src="../../assets/angular-function-cosmos.png">
</div>

We can create a GenericValidator class for validating Employee Name and City using the below command.

ng g class shared/genericvalidator

genericvalidator.ts

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

export class GenericValidator {

  constructor(private validationMessages: { [key: string]: { [key: string]: string } }) {
  }

  processMessages(container: FormGroup): { [key: string]: string } {
    const messages = {};
    for (const controlKey in container.controls) {
      if (container.controls.hasOwnProperty(controlKey)) {
        const c = container.controls[controlKey];
        // If it is a FormGroup, process its child controls.
        if (c instanceof FormGroup) {
          const childMessages = this.processMessages(c);
          Object.assign(messages, childMessages);
        } else {
          // Only validate if there are validation messages for the control
          if (this.validationMessages[controlKey]) {
            messages[controlKey] = '';
            if ((c.dirty || c.touched) && c.errors) {
              Object.keys(c.errors).map(messageKey => {
                if (this.validationMessages[controlKey][messageKey]) {
                  messages[controlKey] += this.validationMessages[controlKey][messageKey] + ' ';
                }
              });
            }
          }
        }
      }
    }
    return messages;
  }

  getErrorCount(container: FormGroup): number {
    let errorCount = 0;
    for (const controlKey in container.controls) {
      if (container.controls.hasOwnProperty(controlKey)) {
        if (container.controls[controlKey].errors) {
          errorCount += Object.keys(container.controls[controlKey].errors).length;
          console.log(errorCount);
        }
      }
    }
    return errorCount;
  }
}

We can create an Employee interface inside the Employee folder using the below command.

ng g interface employee/employee

employee.ts

export interface Employee {
    id: string,
    name: string,
    address: string,
    gender: string,
    company: string,
    designation: string,
    cityname: string
}

Let us create Employee service now. This is the very important service class in our project. We can add all the logic for calling Azure functions inside this service.

ng g service employee/employee

employee.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable, throwError, of } from 'rxjs';
import { catchError, map } from 'rxjs/operators';
import { Employee } from './employee';

@Injectable()
export class EmployeeService {
  private employeesUrl = 'http://localhost:7071/api/';

  constructor(private http: HttpClient) { }

  getEmployees(): Observable<Employee[]> {
    return this.http.get<Employee[]>(this.employeesUrl + 'Get')
      .pipe(
        catchError(this.handleError)
      );
  }

  getEmployee(id: string, cityName: string): Observable<Employee> {
    if (id === '') {
      return of(this.initializeEmployee());
    }
    const url = `${this.employeesUrl + 'Get'}/${id}/${cityName}`;
    return this.http.get<Employee>(url)
      .pipe(
        catchError(this.handleError)
      );
  }

  createEmployee(employee: Employee): Observable<Employee> {
    const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
    return this.http.post<Employee>(this.employeesUrl + 'CreateOrUpdate', employee, { headers: headers })
      .pipe(
        catchError(this.handleError)
      );
  }

  deleteEmployee(id: string, cityname: string): Observable<{}> {
    const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
    const url = `${this.employeesUrl + 'Delete'}/${id}/${cityname}`;
    return this.http.delete<Employee>(url, { headers: headers })
      .pipe(
        catchError(this.handleError)
      );
  }

  updateEmployee(employee: Employee): Observable<Employee> {
    const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
    const url = this.employeesUrl + 'CreateOrUpdate';
    return this.http.put<Employee>(url, employee, { headers: headers })
      .pipe(
        map(() => employee),
        catchError(this.handleError)
      );
  }

  private handleError(err) {
    let errorMessage: string;
    if (err.error instanceof ErrorEvent) {
      errorMessage = `An error occurred: ${err.error.message}`;
    } else {
      errorMessage = `Backend returned code ${err.status}: ${err.body.error}`;
    }
    console.error(err);
    return throwError(errorMessage);
  }

  private initializeEmployee(): Employee {
    return {
      id: null,
      name: null,
      address: null,
      gender: null,
      company: null,
      designation: null,
      cityname: null
    };
  }
}

Create employee list component now.

ng g component employee/EmployeeList

employee-list.component.ts

import { Component, OnInit } from '@angular/core';
import { Employee } from '../employee';
import { EmployeeService } from '../employee.service';

@Component({
  selector: 'app-employee-list',
  templateUrl: './employee-list.component.html',
  styleUrls: ['./employee-list.component.css']
})
export class EmployeeListComponent implements OnInit {
  pageTitle = 'Employee List';
  filteredEmployees: Employee[] = [];
  employees: Employee[] = [];
  errorMessage = '';

  _listFilter = '';
  get listFilter(): string {
    return this._listFilter;
  }
  set listFilter(value: string) {
    this._listFilter = value;
    this.filteredEmployees = this.listFilter ? this.performFilter(this.listFilter) : this.employees;
  }

  constructor(private employeeService: EmployeeService) { }

  performFilter(filterBy: string): Employee[] {
    filterBy = filterBy.toLocaleLowerCase();
    return this.employees.filter((employee: Employee) =>
      employee.name.toLocaleLowerCase().indexOf(filterBy) !== -1);
  }

  ngOnInit(): void {
    this.employeeService.getEmployees().subscribe(
      employees => {
        this.employees = employees;
        this.filteredEmployees = this.employees;
      },
      error => this.errorMessage = <any>error
    );
  }

  deleteEmployee(id: string, name: string, cityname: string): void {
    if (id === '') {
      this.onSaveComplete();
    } else {
      if (confirm(`Are you sure want to delete this Employee: ${name}?`)) {
        this.employeeService.deleteEmployee(id, cityname)
          .subscribe(
            () => this.onSaveComplete(),
            (error: any) => this.errorMessage = <any>error
          );
      }
    }
  }

  onSaveComplete(): void {
    this.employeeService.getEmployees().subscribe(
      employees => {
        this.employees = employees;
        this.filteredEmployees = this.employees;
      },
      error => this.errorMessage = <any>error
    );
  }

}

employee-list.component.html

<div class="card">
  <div class="card-header">
    {{pageTitle}}
  </div>
  <div class="card-body">
    <div class="row" style="margin-bottom:15px;">
      <div class="col-md-2">Filter by:</div>
      <div class="col-md-4">
        <input type="text" [(ngModel)]="listFilter" />
      </div>
      <div class="col-md-3"></div>
      <div class="col-md-3">
        <button class="btn btn-primary mr-3" [routerLink]="['/employees/0/0/edit']">
          <i class="fa fa-plus"></i> New Employee
        </button>
      </div>
    </div>
    <div class="row" *ngIf="listFilter">
      <div class="col-md-6">
        <h4>Filtered by: {{listFilter}}</h4>
      </div>
    </div>
    <div class="table-responsive">
      <table class="table mb-0" *ngIf="employees && employees.length">
        <thead>
          <tr>
            <th>Name</th>
            <th>Address</th>
            <th>Gender</th>
            <th>Company</th>
            <th>Designation</th>
            <th></th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let employee of filteredEmployees">
            <td>
              <a [routerLink]="['/employees', employee.id,employee.cityname]">
                {{ employee.name }}
              </a>
            </td>
            <td>{{ employee.address }}</td>
            <td>{{ employee.gender }}</td>
            <td>{{ employee.company }}</td>
            <td>{{ employee.designation}} </td>
            <td>
              <button class="btn btn-outline-primary btn-sm"
                [routerLink]="['/employees', employee.id, employee.cityname, 'edit']">
                <i class="fa fa-edit"></i> Edit
              </button>
            </td>
            <td>
              <button class="btn btn-outline-warning btn-sm"
                (click)="deleteEmployee(employee.id,  employee.name,employee.cityname);">
                <i class="fa fa-trash"></i> Delete
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
<div *ngIf="errorMessage" class="alert alert-danger">
  Error: {{ errorMessage }}
</div>

employee-list.component.css

thead {
    color: #337AB7;
  }

We can create the employee edit component using the below command.

ng g component employee/EmployeeEdit

employee-edit.component.ts

import { Component, OnInit, OnDestroy } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { Subscription } from 'rxjs';
import { ActivatedRoute, Router } from '@angular/router';
import { Employee } from '../employee';
import { EmployeeService } from '../employee.service';
import { GenericValidator } from 'src/app/shared/genericvalidator';

@Component({
  selector: 'app-employee-edit',
  templateUrl: './employee-edit.component.html',
  styleUrls: ['./employee-edit.component.css']
})
export class EmployeeEditComponent implements OnInit, OnDestroy {
  pageTitle = 'Employee Edit';
  errorMessage: string;
  employeeForm: FormGroup;
  tranMode: string;
  employee: Employee;
  private sub: Subscription;

  displayMessage: { [key: string]: string } = {};
  private validationMessages: { [key: string]: { [key: string]: string } };
  genericValidator: GenericValidator;


  constructor(private fb: FormBuilder,
    private route: ActivatedRoute,
    private router: Router,
    private employeeService: EmployeeService) {

    this.validationMessages = {
      name: {
        required: 'Employee name is required.',
        minlength: 'Employee name must be at least three characters.',
        maxlength: 'Employee name cannot exceed 50 characters.'
      },
      cityname: {
        required: 'Employee city name is required.',
      }
    };
    this.genericValidator = new GenericValidator(this.validationMessages);
  }

  ngOnInit() {
    this.tranMode = "new";
    this.employeeForm = this.fb.group({
      name: ['', [Validators.required,
      Validators.minLength(3),
      Validators.maxLength(50)
      ]],
      address: '',
      cityname: ['', [Validators.required]],
      gender: '',
      company: '',
      designation: '',
    });

    this.sub = this.route.paramMap.subscribe(
      params => {
        const id = params.get('id');
        const cityname = params.get('cityname');
        if (id == '0') {
          const employee: Employee = { id: "0", name: "", address: "", gender: "", company: "", designation: "", cityname: "" };
          this.displayEmployee(employee);
        }
        else {
          this.getEmployee(id, cityname);
        }
      }
    );
  }

  ngOnDestroy(): void {
    this.sub.unsubscribe();
  }

  getEmployee(id: string, cityname: string): void {
    this.employeeService.getEmployee(id, cityname)
      .subscribe(
        (employee: Employee) => this.displayEmployee(employee),
        (error: any) => this.errorMessage = <any>error
      );
  }

  displayEmployee(employee: Employee): void {
    if (this.employeeForm) {
      this.employeeForm.reset();
    }
    this.employee = employee;
    if (this.employee.id == '0') {
      this.pageTitle = 'Add Employee';
    } else {
      this.pageTitle = `Edit Employee: ${this.employee.name}`;
    }
    this.employeeForm.patchValue({
      name: this.employee.name,
      address: this.employee.address,
      gender: this.employee.gender,
      company: this.employee.company,
      designation: this.employee.designation,
      cityname: this.employee.cityname
    });
  }

  deleteEmployee(): void {
    if (this.employee.id == '0') {
      this.onSaveComplete();
    } else {
      if (confirm(`Are you sure want to delete this Employee: ${this.employee.name}?`)) {
        this.employeeService.deleteEmployee(this.employee.id, this.employee.cityname)
          .subscribe(
            () => this.onSaveComplete(),
            (error: any) => this.errorMessage = <any>error
          );
      }
    }
  }

  saveEmployee(): void {
    if (this.employeeForm.valid) {
      if (this.employeeForm.dirty) {
        const p = { ...this.employee, ...this.employeeForm.value };
        if (p.id === '0') {
          this.employeeService.createEmployee(p)
            .subscribe(
              () => this.onSaveComplete(),
              (error: any) => this.errorMessage = <any>error
            );
        } else {
          this.employeeService.updateEmployee(p)
            .subscribe(
              () => this.onSaveComplete(),
              (error: any) => this.errorMessage = <any>error
            );
        }
      } else {
        this.onSaveComplete();
      }
    } else {
      this.errorMessage = 'Please correct the validation errors.';
    }
  }

  onSaveComplete(): void {
    this.employeeForm.reset();
    this.router.navigate(['/employees']);
  }
}

employee-edit.component.html

<div class="card">
  <div class="card-header">
    {{pageTitle}}
  </div>

  <div class="card-body">
    <form novalidate
          (ngSubmit)="saveEmployee()"
          [formGroup]="employeeForm">

      <div class="form-group row mb-2">
        <label class="col-md-2 col-form-label"
               for="employeeNameId">Employee Name</label>
        <div class="col-md-8">
          <input class="form-control"
                 id="employeeNameId"
                 type="text"
                 placeholder="Name (required)"
                 formControlName="name"
                 [ngClass]="{'is-invalid': displayMessage.name }" />
          <span class="invalid-feedback">
            {{displayMessage.name}}
          </span>
        </div>
      </div>

      <div class="form-group row mb-2">
        <label class="col-md-2 col-form-label"
               for="citynameId">City</label>
        <div class="col-md-8">
          <input class="form-control"
                 id="citynameid"
                 type="text"
                 placeholder="Cityname (required)"
                 formControlName="cityname"
                 [ngClass]="{'is-invalid': displayMessage.cityname}" />
          <span class="invalid-feedback">
            {{displayMessage.cityname}}
          </span>
        </div>
      </div>

      <div class="form-group row mb-2">
        <label class="col-md-2 col-form-label"
               for="addressId">Address</label>
        <div class="col-md-8">
          <input class="form-control"
                 id="addressId"
                 type="text"
                 placeholder="Address"
                 formControlName="address" />
        </div>
      </div>

      <div class="form-group row mb-2">
        <label class="col-md-2 col-form-label"
               for="genderId">Gender</label>
        <div class="col-md-3">
          <select id="genderId" formControlName="gender" class="form-control">
            <option value="" disabled selected>Select an Option</option>
            <option value="Male">Male</option>
            <option value="Female">Female</option>
          </select>

        </div>
      </div>

      <div class="form-group row mb-2">
        <label class="col-md-2 col-form-label"
               for="companyId">Company</label>
        <div class="col-md-8">
          <input class="form-control"
                 id="companyId"
                 type="text"
                 placeholder="Company"
                 formControlName="company" />
        </div>
      </div>

      <div class="form-group row mb-2">
        <label class="col-md-2 col-form-label"
               for="designationId">Designation</label>
        <div class="col-md-8">
          <input class="form-control"
                 id="designationId"
                 type="text"
                 placeholder="Designation"
                 formControlName="designation" />
        </div>
      </div>

      <div class="form-group row mb-2">
        <div class="offset-md-2 col-md-4">
          <button class="btn btn-primary mr-3"
                  style="width:80px;"
                  type="submit"
                  [title]="employeeForm.valid ? 'Save your entered data' : 'Disabled until the form data is valid'"
                  [disabled]="!employeeForm.valid">
            Save
          </button>
          <button class="btn btn-outline-secondary mr-3"
                  style="width:80px;"
                  type="button"
                  title="Cancel your edits"
                  [routerLink]="['/employees']">
            Cancel
          </button>
          <button class="btn btn-outline-warning" *ngIf="pageTitle != 'Add Employee'"
                  style="width:80px"
                  type="button"
                  title="Delete this product"
                  (click)="deleteEmployee()">
            Delete
          </button>
        </div>
      </div>
    </form>
  </div>

  <div class="alert alert-danger"
       *ngIf="errorMessage">{{errorMessage}}
  </div>
</div>

We can create an employee edit guard class using the below command.

ng g class employee/employee-edit/EmployeeEditGuard

This class will be used to prevent employee edit screen from accidental closure. This will ask for a confirmation if the user leaves the screen before saving the data.

 

employee-edit-guard.ts

import { Injectable } from '@angular/core';
import { CanDeactivate } from '@angular/router';
import { Observable } from 'rxjs';
import { EmployeeEditComponent } from './employee-edit.component';


@Injectable({
  providedIn: 'root'
})
export class EmployeeEditGuard implements CanDeactivate<EmployeeEditComponent> {
  canDeactivate(component: EmployeeEditComponent): Observable<boolean> | Promise<boolean> | boolean {
    if (component.employeeForm.dirty) {
      const name = component.employeeForm.get('name').value || 'New Employee';
      return confirm(`Navigate away and lose all changes to ${name}?`);
    }
    return true;
  }
}

We can create employee detail component now.

ng g component employee/EmployeeDetail

employee-detail.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { Employee } from '../employee';
import { EmployeeService } from '../employee.service';

@Component({
  selector: 'app-employee-detail',
  templateUrl: './employee-detail.component.html',
  styleUrls: ['./employee-detail.component.css']
})
export class EmployeeDetailComponent implements OnInit {
  pageTitle = 'Employee Detail';
  errorMessage = '';
  employee: Employee | undefined;

  constructor(private route: ActivatedRoute,
    private router: Router,
    private employeeService: EmployeeService) { }

  ngOnInit() {
    const id = this.route.snapshot.paramMap.get('id');
    const cityname = this.route.snapshot.paramMap.get('cityname');
    if (id && cityname) {
      this.getEmployee(id, cityname);
    }
  }

  getEmployee(id: string, cityName: string) {
    this.employeeService.getEmployee(id, cityName).subscribe(
      employee => this.employee = employee,
      error => this.errorMessage = <any>error);
  }

  onBack(): void {
    this.router.navigate(['/employees']);
  }
}

employee-detail.component.html

<div class="card">
  <div class="card-header"
       *ngIf="employee">
    {{pageTitle + ": " + employee.name}}
  </div>
  <div class="card-body"
       *ngIf="employee">
    <div class="row">
      <div class="col-md-8">
        <div class="row">
          <div class="col-md-3">Name:</div>
          <div class="col-md-6">{{employee.name}}</div>
        </div>
        <div class="row">
          <div class="col-md-3">City:</div>
          <div class="col-md-6">{{employee.cityname}}</div>
        </div>
        <div class="row">
          <div class="col-md-3">Address:</div>
          <div class="col-md-6">{{employee.address}}</div>
        </div>
        <div class="row">
          <div class="col-md-3">Gender:</div>
          <div class="col-md-6">{{employee.gender}}</div>
        </div>
        <div class="row">
          <div class="col-md-3">Company:</div>
          <div class="col-md-6">{{employee.company}}</div>
        </div>
        <div class="row">
          <div class="col-md-3">Designation:</div>
          <div class="col-md-6">{{employee.designation}}</div>
        </div>
      </div>
    </div>
    <div class="row mt-4">
      <div class="col-md-4">
        <button class="btn btn-outline-secondary mr-3"
                style="width:80px"
                (click)="onBack()">
          <i class="fa fa-chevron-left"></i> Back
        </button>
        <button class="btn btn-outline-primary"
                style="width:80px"
                [routerLink]="['/employees', employee.id, employee.cityname, 'edit']">
          Edit
        </button>
      </div>
    </div>
  </div>
  <div class="alert alert-danger"
       *ngIf="errorMessage">
    {{errorMessage}}
  </div>
</div>

We can add reference to HttpClientModule and other routing details to app.module.ts file.

 

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './ui/header/header.component';
import { FooterComponent } from './ui/footer/footer.component';
import { LayoutComponent } from './ui/layout/layout.component';
import { HomeComponent } from './home/home.component';
import { EmployeeListComponent } from './employee/employee-list/employee-list.component';
import { EmployeeEditComponent } from './employee/employee-edit/employee-edit.component';
import { EmployeeDetailComponent } from './employee/employee-detail/employee-detail.component';
import { EmployeeEditGuard } from './employee/employee-edit/employee-edit-guard';
import { EmployeeService } from './employee/employee.service';


@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent,
    LayoutComponent,
    HomeComponent,
    EmployeeListComponent,
    EmployeeEditComponent,
    EmployeeDetailComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    ReactiveFormsModule,
    FormsModule,
    RouterModule.forRoot([
      {
        path: 'home',
        component: HomeComponent
      },
      {
        path: 'employees',
        component: EmployeeListComponent
      },
      {
        path: 'employees/:id/:cityname',
        component: EmployeeDetailComponent
      },
      {
        path: 'employees/:id/:cityname/edit',
        canDeactivate: [EmployeeEditGuard],
        component: EmployeeEditComponent
      },
      {
        path: '',
        redirectTo: 'home',
        pathMatch: 'full'
      },
      {
        path: '**',
        redirectTo: 'home',
        pathMatch: 'full'
      }
    ])
  ],
  providers: [
    EmployeeService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

We have completed the coding part. We can run the application now. Please ensure that the Azure Functions app and Cosmos DB emulator is running properly before running the Angular application.

ng serve

 

Choose “Employee” menu and add a new employee.

 

 

We can add one more employee and show the details in a grid.

 

 

We can choose any employee and click the “Edit” button to modify the data.

 

 

We can click any employee name and show the employee details in read-only mode.

 

 

Conclusion

 

In this post, we have seen how to create an Azure function in Visual Studio 2017 and connected it with Cosmos DB. We have created separate functions for each CRUD action for Cosmos DB in the Azure function app. Later, we have created an Angular 8 application using CLI and consumed all Azure functions as REST API. It is easy to deploy these Azure functions to the Azure portal and use them globally. For that, we must create a Cosmos DB account in the Azure portal and change the connection string in our application. Please note that there is a default Cosmos DB trigger available with Azure function, but I have used Cosmos DB connection differently with this application. In this approach, we will get full freedom to populate code according to our requirement. Please give your valuable comments on this article, so that I can improve my upcoming articles.