HTTP Use With Services In Angular 5

Fetch The Data From Server Using HTTP in Angular5

HTTP Stands for HyperText Transfer Protocol. This Protocol used by WWW(World Wide Web) and also define how Messages are responded to in which format and what action performed. In the Real world, we need to fetch the data from a Web Server. To fetch the data from the webserver firstly we have to understand the Mechanism of HTTP is as Follow:

My Application has two components 1- Recipe list and Recipe detail it contains hard-coded data and we need to use the same data in Recipe detail. Firstly We have To create a dummy Database and then HTTP Request will hit web service API to fetch the data from the database and send back a response from the server to HTTP call (observable).

It contains only two steps:-

1. Send the HTTP request from the Server-Side

2. HTTP respond to Client-Side.

Here are We discuss how to use HTTP With Services.

1. First, create a Dummy Data. and Import Path to the Service. 

2. Receive the observable and cast it into a Recipe array. Observables are Sequence of items that arrive asynchronously over time. 

3. Subscribe to the observable from the Recipe list and Recipe detail.

4. Assign the Recipe array to a local variable.

Ex- 

1. Create Dummy data in an application like a database.

[

    "recipes" : { id: 11, name: 'burger' },

      { id: 12, name: 'chips' },

      { id: 13, name: 'coke' },

      { id: 14, name: 'french fries' }

    ];

2. Service.ts

import { Injectable } from '@angular/core'

import {HttpClient} from '@angular/common/http'

import {Irecipe} from './recipe'

import { Observable } from 'rxjs'

 

@Injectable({

  providedIn: 'root'

})

export class RecipesservicesService {

 

  private _url: string = "/assets/data/recipe.json"

  constructor(private http:HttpClient) { }

 

  getRecipes():Observable<Irecipe[]>{

   return this.http.get<Irecipe[]>(this._url);

 

}

}

 

3. Interface recipe.ts

export interface Irecipe{

    "name": string,

    "ingredients": string,

    "steps": string,

    "timers": string

}

4. app.module.ts

/*1st step import service*/

import {RecipesservicesService} from './recipesservices.service'

/*import httpclient*/

import {HttpClientModule} from '@angular/common/http'

 

@NgModule({

  declarations: [

    AppComponent,

    RecipesComponent,

    RecipesListComponent

  ],

  imports: [

    BrowserModule,

    HttpClientModule

  ],

  providers: [RecipesservicesService],/*for metadata*/

  bootstrap: [AppComponent]

})

export class AppModule { }

5. Component.ts

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

import {RecipesservicesService} from '../recipesservices.service'

 

@Component({

  selector: 'app-recipes-list',

  templateUrl: './recipes-list.component.html',

  styleUrls: ['./recipes-list.component.css']

})

export class RecipesListComponent implements OnInit {

 

  public recipes = [];

  constructor(private _recipeservice : RecipesservicesService) { }

 

  ngOnInit() {

   this._recipeservice.getRecipes()

     .subscribe(data => this.recipes = data);

  }

}

6. Component.html

<div class="container">  

  <h3>Recipe List</h3>  

  

      <ul *ngFor="let e of recipes ">  

        <li>name:{{e.name}}</li> 

        <li>steps:{{e.steps}}</li> 

        <li>timers:{{e.timers}}</li>  

      </ul>  

     

</div>  

Note- In angular 5 for change to use service is the HTTP-client module and in angular 4 it uses HTTP module

HTTP client module provides a simplified API.