Fetch Data from an API in Angular 17

To get data from backend to frontend in angular; Just create a service and use API with the help of HTTPClient in service, it will fetch or get data from API, and then create an HTML template to display data in it on angular 17 applications.

In this tutorial guide; We will get the data from a json API, for this, first, create a service, and in this service will consume the API with the help of HTTPClient, so that we can get the data and then will create a HTML template and render the data in it.

How to Fetch Data from API in Angular 17

Steps to get data from backend to frontend using API with service in angular applications:

Step 1 – Setup New Angular Application

Run the ng new my-new-app command on cmd or terminal window to create a new angular project:

ng new my-new-app --no-standalone

Step 2 – Create a Service to Handle HTTP Requests

Run the ng g s services/post to create a service for handling HTTP client requests:

ng g s services/post

Open the post.service.ts file from the src/app/ folder and call the API to get or fetch data in it as follows:

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 3 – Import Required Modules

To import the required modules in App.module.ts for the service to function as expected: Simply navigate to src/app directory, and open the app.module.ts file and import modules like 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 4 – Display Data in HTML Template

Open app.component.html from src/app folder and create html to display data into it like following:

<h1>how to fetch data from api in angular 17 - Tutsmake.com</h1>

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

Step 5 – Consume API in Component

Navigate to the src/app folder and open app.component.ts, and then use service to consume API for getting or fetching data like following:

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 6 – Run Angular Application

Run ng serve command on cmd or terminal to start angular application:

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 get or fetch data from API in Angular and display it in html template.

Recommended Angular Tutorials