Angular 17 HttpClient Get Example

To make an HTTP GET request in Angular using HttpClient; Simply import the HttpClient module in your TypeScript file and use the GET method to call or consume the API by making an HTTP GET request in Angular.

In Angular, HttpClient is a mechanism that helps in sending HTTP requests to the server and receiving the response on the client side, HttpClient provides some methods like GET, POST, PUT, and DELETE, which you can use to send HTTP requests or call the API in angular application.

Angular HttpClient Get Example

Steps to use HttpClient.get() to perform HTTP GET request in Angular application:

Step 1: Set up New Angular Project

Start the terminal or cmd and run the ng new myApp --no-standalone command into it to create new angular project; as follows:

ng new myApp --no-standalone

Step 2: Import HttpClientModule

To import HttpClientModule in app.module.ts file, which is in src/app directory; like the following:

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

import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 3: Create a Service to Make HTTP requests

Run ng g s services/post command on cmd or terminal to create service to make http get requests on server; as follows:

ng g s services/post

Navigate to src/app/services/ folder and make http get requests on the server from the client side using httpClient.get() method in post.service.ts file; like following:

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

@Injectable({
  providedIn: 'root'
})
export class PostService {
  private url = 'http://jsonplaceholder.typicode.com/posts';

  constructor(private httpClient: HttpClient) { }

  getPosts(){
    return this.httpClient.get(this.url);
  }

}

Step 4: Use Service in Component

Open app.component.ts from the src/app folder and use a service like following into it to use the HTTPClient.get() method to fetch data from a server via client requests:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  posts:any;

  constructor(private service:PostService) {}

  ngOnInit() {
      this.service.getPosts()
        .subscribe(response => {
          this.posts = response;
        });
  }
}

Step 5: Show HttpClient Get Requests Response

To show httpClient get request response, simply navigate to the src/app/ folder and open app.component.html and show it like following:

<h1>Angular httpclient Get Request Example - Tutsmake.com</h1>

<ul class="list-group">
  <li
      *ngFor="let post of posts"
      class="list-group-item">
      {{ post.title }}
  </li>
</ul>

Step 6: Run Angular App

Run ng serve on cmd or terminal window to start angular app:

ng serve

Open your web browser, and type the given URL into it: as follows:

http://localhost:4200

Conclusion

We hope this tutorial guide taught you how to use HttpClient.get() method to call/consume API in Angular and display its response in html template.

Recommended Angular Tutorials