AngularJS 2.0 From The Beginning - Observables With Form Modules - Day Twenty

I am here to continue the discussion around AngularJS 2.0. I already discussed about the basic concept of Reactive programming concept or observables in Angular 2.0. Now, in this article, we discuss about the observables concept with http module or form modules in Angular 2.0. In case, you did not have a look at the previous articles of this series, go through the links mentioned below.

• AngularJS 2.0 From Beginning Introduction of AngularJS 2.0 (Day 1)
  
• AngularJS 2.0 From Beginning Component (Day 2)
• AngularJS 2.0 From Beginning Data Binding (Day 3)
• AngularJS 2.0 From Beginning Input Data Binding (Day 4)
• AngularJS 2.0 From Beginning - Output Property Binding (Day 5)
• AngularJS 2.0 From Beginning - Attribute Directive (Day 6)
• AngularJS 2.0 From Beginning - Structural Directives (Day 7)
• AngularJs 2.0 From Beginning - Pipes (Day 8)
• AngularJS 2.0 From Beginning - Viewchild (Day 9)
• AngularJS 2.0 From Beginning - Dynamic Grid (Day 10)
• AngularJS 2.0 From Beginning - Service (Day 11)
• AngularJs 2.0 From Beginning - ngContent (Day 12)
• AngularJS 2.0 From Beginning - Route Part I (Day 13)
• AngularJs 2.0 From Beginning - Route Part 2 (Day 14)
• AngularJs 2.0 From Beginning - ngForm Part 1 (Day 15)
• AngularJs 2.0 From Beginning - ngForm Part 2 (Day 16)
• AngularJs 2.0 From Beginning - Http Module - Part 1 (Day 17)
• AngularJs 2.0 From Beginning - Http Module - Part 2 (Day 18)
  
• AngularJs 2.0 From Beginning - Observables - Part 1 (Day 19)
  

Observables vs Promises

Both Promises and Observables provide us with abstraction that helps us to deal with the asynchronous nature of our Applications. However, there are important differences between the two:

As seen in the example above, Observables can define both the setup and teardown aspects of asynchronous behavior.

Observables are cancellable.

Moreover, Observables can be retried, using one of the retry operators provided by the API, such as retry and retryWhen. On the other hand, Promises require the caller to have an access to the original function, which returned the Promise in order to have a retry capability.

Observable HTTP Events

A common operation in any Web Application is getting or posting the data to a Server. Angular Applications do this with Http library, which previously used Promises to operate in an asynchronous manner. The updated Http library now incorporates Observables to trigger the events and getting new data.  

Observables Array Operations

In addition to simply iterating over an asynchronous collection, we can perform other operations such as filter or map and many more as defined in the RxJS API. This is what bridges an Observable with the iterable pattern and lets us conceptualize them as collections.

Here are two really useful array operations - map and filter. What exactly do these do?

map will create a new array with the results of calling a provided function on every element in this array. In the example given below, we used it to create a new result set by iterating through each item and appending the word ‘Mr’ abbreviation in front of every employee's name.

filter will create a new array with all the elements that pass the test implemented by a provided function. Here, we have used it to create a new result set by excluding any user whose salary is below 20000. Now, when our subscribe callback gets invoked, the data it receives will be a list of JSON objects, whose id properties are greater than or equal to 20000 salary.

Note the chaining function style and the optional static typing, which comes with TypeScript, which we used in this example. Most importantly functions like filter return an Observable, as in Observables we get other Observables, which are similar to Promises. In order to use map and filter in a chaining sequence, we have flattened the results of our Observable, using flatMap. Since filter accepts an Observable and not an array, we have to convert our array of JSON objects from data.json() to an Observablestream. This is done with flatMap

To demonstrate the above concept, create the files given below with the code.

 

app.component.homepage.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { Http, Response } from '@angular/http';
import 'rxjs/Rx';

@Component({
    moduleId: module.id,
    selector: 'home-page',
    templateUrl: 'app.component.homepage.html'
})

export class HomePageComponent implements OnInit {

    private data: Array<any> = [];

    constructor(private http: Http) {
    }

    ngOnInit(): void {
    }

    private loadData(): void {
        this.data = [];
        let self = this;
        this.http.request('http://localhost:5201/employee/getemployee')
            .flatMap((result) => result.json())
            .subscribe((result) => {
                self.data.push(result);
            });
    }

    private loadDataMap(): void {
        this.data = [];
        let self = this;
        this.http.request('http://localhost:5201/employee/getemployee')
            .flatMap((result) => result.json())
            .map((emp) => {
                emp["Name"] = "Mr. " + emp["Name"];
                return emp;
            })
            .subscribe((result) => {
                self.data.push(result);
            });
    }

    private loadDataFilter(): void {
        this.data = [];
        let self = this;
        this.http.request('http://localhost:5201/employee/getemployee')
            .flatMap((result) => result.json())
            .filter((emp) => emp["Salary"] <= 20000)
            .subscribe((result) => {
                self.data.push(result);
            });
    }
}

app.component.homepage.html

<div>
    <h3>HTTP Module Sample - Get Data</h3>
    <div class="panel panel-default">
        <div class="panel-body">
            <table class="table table-striped table-bordered">
                <thead>
                    <tr>
                        <th>Srl No</th>
                        <th>Alias</th>
                        <th>Employee Name</th>
                        <th>Date of Birth</th>
                        <th>Join Date</th>
                        <th>Department</th>
                        <th>Designation</th>
                        <th>Salary</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let item of data">
                        <td>{{item.Id}}</td>
                        <td>{{item.Code}}</td>
                        <td>{{item.Name}}</td>
                        <td>{{item.DOB | date :'shortDate'}}</td>
                        <td>{{item.DOJ | date :'mediumDate'}}</td>
                        <td>{{item.Department}}</td>
                        <td>{{item.Designation}}</td>
                        <td>{{item.Salary |currency:'INR':true}}</td>
                    </tr>
                </tbody>
            </table>
            <p>
                <button class="btn btn-primary" (click)="loadData()">
                    Load All Data
                </button>
                <button class="btn btn-primary" (click)="loadDataMap()">
                   Load Data With Map
                </button>
                <button class="btn btn-primary" (click)="loadDataFilter()">
                    Load Data With Filter
                </button>
            </p>
        </div>
    </div>
</div>

app.module.ts

import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from "@angular/forms";
import { HttpModule } from '@angular/http';

import { HomePageComponent } from './src/app.component.homepage';

@NgModule({
    imports: [BrowserModule, ReactiveFormsModule, HttpModule],
    declarations: [HomePageComponent],
    bootstrap: [HomePageComponent]
})
export class AppModule { }

main.ts

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

import { AppModule } from './app.module';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

index.html 

<!DOCTYPE html>
<html>
<head>
    <title>Angular2 - HTTP Module (GET) </title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="../resources/style/bootstrap.css" rel="stylesheet" />
    <link href="../resources/style/style1.css" rel="stylesheet" />
    <!-- Polyfill(s) for older browsers -->
    <script src="../resources/js/jquery-2.1.1.js"></script>
    <script src="../resources/js/bootstrap.js"></script>

    <script src="../node_modules/core-js/client/shim.min.js"></script>
    <script src="../node_modules/zone.js/dist/zone.js"></script>
    <script src="../node_modules/reflect-metadata/Reflect.js"></script>
    <script src="../node_modules/systemjs/dist/system.src.js"></script>
    <script src="../systemjs.config.js"></script>
    <script>
        System.import('app').catch(function (err) { console.error(err); });
    </script>
    <!-- Set the base href, demo only! In your app: <base href="/"> -->
    <script>document.write('<base href="' + document.location + '" />');</script>
</head>
<body>
    <home-page>Loading</home-page>
</body>
</html>

Employee.cs (model class) 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace SampleAPI.Models.Sample
{
    public class Employee
    {
        public int Id { get; set; }
        public string Code { get; set; }
        public string Name { get; set; }
        public DateTime DOB { get; set; }
        public DateTime DOJ { get; set; }
        public string Department { get; set; }
        public string Designation { get; set; }
        public double Salary { get; set; }
    }
}

EmployeeController.cs 

using SampleAPI.Models.Sample;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using System.Web.Http.Description;

namespace SampleAPI.Controllers.Sample
{
    public class EmployeeController : ApiController
    {
        static List<Employee> lstData = new List<Employee>();

        public EmployeeController()
        {
        }

        [ResponseType(typeof(Employee))]
        [HttpGet]
        [Route("Employee/GetEmployee")]
        public IHttpActionResult GetEmployee()
        {
            if (lstData.Count == 0)
                this.FetchEmployee();
            return Ok(lstData);
        }

        [ResponseType(typeof(Employee))]
        [HttpPost]
        [Route("Employee/AddEmployee")]
        public IHttpActionResult AddEmployee(Employee objEmp)
        {
            return Ok(this.SaveEmployee(objEmp));
        }

        private List<Employee> FetchEmployee()
        {
            Employee objEmp = new Employee() { };
            objEmp.Id = 1;
            objEmp.Code = "A001";
            objEmp.Name = "RABIN";
            objEmp.DOB = Convert.ToDateTime("10-06-1980");
            objEmp.DOJ = Convert.ToDateTime("01-09-2006");
            objEmp.Department = "ACCOUNTS";
            objEmp.Designation = "CLERK";
            objEmp.Salary = 15000.00;
            lstData.Add(objEmp);

            objEmp = new Employee() { };
            objEmp.Id = 2;
            objEmp.Code = "A002";
            objEmp.Name = "SUJIT";
            objEmp.DOB = Convert.ToDateTime("12-22-1986");
            objEmp.DOJ = Convert.ToDateTime("04-15-2010");
            objEmp.Department = "SALES";
            objEmp.Designation = "MANAGER";
            objEmp.Salary = 35000.00;
            lstData.Add(objEmp);

            objEmp = new Employee() { };
            objEmp.Id = 3;
            objEmp.Code = "A003";
            objEmp.Name = "KAMALESH";
            objEmp.DOB = Convert.ToDateTime("03-22-1982");
            objEmp.DOJ = Convert.ToDateTime("07-15-2006");
            objEmp.Department = "ACCOUNTS";
            objEmp.Designation = "CLERK";
            objEmp.Salary = 16000.00;
            lstData.Add(objEmp);

            return lstData;
        }

        private bool SaveEmployee(Employee objEmp)
        {
            objEmp.Id = (lstData.OrderByDescending(s => s.Id).FirstOrDefault()).Id + 1;
            lstData.Add(objEmp);
            return true;
        }
    }
}

Now, run the code and check the output.