Angular 16 Get JSON Data From Api and Display in HTML Table Tutorial

In this tutorial, you’ll learn how to get JSON data from an API and display it in an Angular 16 application. This tutorial will use a special tool called HttpClient to ask the API for the data you need and then show that data in our Angular app. It’s like asking the API for information and then telling your app to display that information to the user. Let’s get started!

How to Fetch JSON Data from API and Display in Angular 16

Stesp to get/fetch JSON data from APIs and display it in angular 16 projects:

• Step 1 – Create a new Angular Project
• Step 2 – Import Required Modules
• Step 3 – Display the Data
• Step 4 – Set Up Service and Get Json Data API
• Step 5 – Add the Component to the App
• Step 6 – Run the Application

Step 1 – Create a new Angular Project

Open your cmd or command prompt and execute the following command to install and create a new Angular project:

ng new my-new-app

Step 2 – Import Required Modules

Next, you need to visit src/app directory and open app.module.ts file. Then import modules into it; as follows:

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 – Display the Data

Next, you need to create simple HTML for displaying a list using API services in angular apps. So, visit src/app/app.component.html and update the following code into it:

<h1>Fetch Data From Api and Display in Angular 16 - Tutsmake.com</h1>

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

Step 4 – Set Up Service and Get Json Data API

Next, you need to execute the following command on cmd to create a service for HTTP client request; as follows:

ng g s services/post

Then visit the src/app/ directory and open post.service.ts. Then add the following code into post.service.ts file:

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 5 – Add the Component to the App

Now, you need to visit the src/app directory and open app.component.ts. Then add the following code into component.ts file:

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 the Application

Finally, execute the following commands on cmd to start the angular app:

ng serve

Visit http://localhost:4200/ in your web browser, and you should see the data fetched from the API displayed on the page.

Conclusion

That’s it! You have successfully fetched data from an API and displayed it in your Angular 16 application.

Recommended Angular Tutorials