Welcome Guest! (App Version 3.1)

websitnero logo name

Rest API Hit

Making Rest API hits in Angular

Rest API Hits are made from the client browser to the web-servers to get the various data stored in the data-base from the server.

All this data is later used for various functional processes in the app.

For example you may take input from a user getting his details in some html form. Later you may make Rest API hit of POST nature to submit this data on server (in the database). Later you may most likely need the data of all such users as a 'list view' or edit that data or may even delete from database if requried.

All these functionalities requre client computer or system to make Rest API calls and do the respectives tasks or functionalities.

Practical Example of "Getting data via Services"

Please follow the mentioned steps:

  1. Create a compennt named 'home'
  2. Add the home component in the app.component.html file removing all boilerplate code there.
  3. Create a service named 'people' - from where we will make a Rest API call to the service link at the jsonPlaceHolder server.
  4. Add the HttpClientModule in the app.module.ts file and also add its reference in the imports array.
  5. Now add a button in the home.component.html file and in the logic file (home.component.ts) write a function which will be called on click of button in view and will call the people service -- which will itself make a third party Rest API call to the jsonPlaceHolder server.

home.component.html

<button (click)="alpha()">Click Me!</button>

<ul>
  <li *ngFor="let x of people">
    {{x.id}}, {{x.name}}, {{x.username}}, {{x.email}}
  </li>
</ul>

<hr/>

<table>
  <thead>
    <tr>
    <th>Id</th>
    <th>Name</th>
    <th>UserName</th>
    <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let x of people">
    <td>{{x.id}}</td>
    <td>{{x.name}}</td>
    <td>{{x.username}}</td>
    <td>{{x.email}}</td></tr>
  </tbody>
</table>

home.component.ts

import { Component, OnInit } from '@angular/core';
import { PeopleService } from './../../services/people.service';

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

  people:any = [];

  constructor(private peopleService: PeopleService) { }

  ngOnInit() {
  }

  alpha(){
    this.peopleService.getPeopleData()
    .subscribe((response) => this.people = response);
  }

}

people.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class PeopleService {

  constructor(private http: HttpClient) { }

  getPeopleData() {
    return (this.http.get('https://jsonplaceholder.typicode.com/users'));
  }
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';
import { HomeComponent } from './components/home/home.component';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
  1. You'll get the following result.

WebsiteNero is highly optimized for learning various website developing technlogies. We try our best to add maximum modules and examples to help learn the concepts clearly and vividly. We try to present all content and examples as simple as we can removing any complexity to hurdle easy understanding. We try best provide you with worthful content, but we cannot guarantee full correctness of all the content on this site. While using this website, you agree to have read and accepted all our terms of use and conditions, cookie, and privacy policy. Copyright, 2013-2018 by websitenero.com. All Rights Reserved.