Parallel Service

Parallel Service
-------------------

ng g s services/hello

ng g s services/customers

ng g c components/parallel


services/hello.service.ts

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import 'rxjs/Rx';
import { Observable } from "rxjs/observable";
@Injectable()
export class HelloService {

  constructor(private _http: Http) { }  public getThnikSterData() {

    return this._http.get("http://test-routes.herokuapp.com/test/hello")

      .map((res: Response) => {

        return res.json();

      }).catch(this._handleError);

  }

  public _handleError(err) {

    console.error("Error Raised...." + err);

    return Observable.throw(err || "Internal Server Error !");

  }

}

If you get error in Observable Please install  npm install --save rxjs-compat@6

List of Observable (or) rxjs fixed error :

1. npm install rxjs-compat
2. npm install --save rxjs-compat@6
3. npm install --save rxjs-compat@6.0.0 --save

note:- If you have error in rxjs & Observable once install above npm rxjs and Observable will fixed error. but not show Observable once will restart Visual Code it will fixed.

services/customers.service.ts

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

import {Observable } from "rxjs/observable";

@Injectable()

export class CustomersService {   constructor(private _http:Http) { }   public getCustomers(){     return this._http.get("https://www.w3schools.com/angular/customers.php")     .map((res:Response)=>{       return res.json();     }).catch(this._handleError);   }

  public _handleError(err){     console.error("Error Raised..."+err);     return Observable.throw(err || "Internal Error!");   }

}

components/parallel.component.ts

import { Component, OnInit } from '@angular/core';

import { HelloService } from "../../services/hello.service";
import { CustomersService } from "../../services/customers.service";
import { Observable } from "rxjs/Observable";
import { HttpErrorResponse } from "@angular/common/http";

@Component({

  selector: 'app-parallel',
  templateUrl: './parallel.component.html',
  styleUrls: ['./parallel.component.css']
})

export class ParallelComponent implements OnInit {
  private result_one: any;
  private result_two: any;

  constructor(private _service_one:HelloService,
              private _service_two:CustomersService) { }

  ngOnInit() {

    Observable.forkJoin([this._service_one.getThnikSterData(),
                         this._service_two.getCustomers()])

                         .subscribe(res=>{

                           this._service_one=res[0];
                           this._service_two=res[1]
                         },(err:HttpErrorResponse)=>{
                           if(err.error instanceof Error){
                            console.log("Client Side Error !");
                           }else{
                             console.log("Server side Error !");
                           }

                         });

  }
}

components/parallel.component.html

<h4 style="color: blueviolet">{{result_one | json}}</h4>
<h4>{{result_two | json}}</h4>

index.html

<app-parallel></app-parallel>

app.module.ts

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

import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { ParallelComponent } from './components/parallel/parallel.component';

import { HelloService } from "./services/hello.service";

import { CustomersService } from "./services/customers.service";

import { HttpModule } from "@angular/http";

@NgModule({

  declarations: [

    AppComponent,

    ParallelComponent

  ],

  imports: [

    BrowserModule,

    HttpModule

  ],

  providers: [HelloService, CustomersService],

  bootstrap: [ParallelComponent]

})

export class AppModule { }

OUTPUT