Angular 14 Fetch/Get Data from API and Display in Table

Angular 14 fetch/get data from API and display in html; In this tutorial, you will learn how to get/fetch data from APIs and display it in the html table in angular 14 apps.

How to Fetch Data from API and Display HTML Table in Angular 14

Use the following steps to get/fetch data from APIs and display it in the table in angular 14 apps:

• Step 1 – Create New Angular App
• Step 2 – Import HTTP Modules
• Step 3 – Create List Html in View File
• Step 4 – Create Services For Api
• Step 5 – Use Api Services in Component
• Step 6 – Start Angular App

Step 1 – Create New Angular App

First of all, open your terminal and execute the following command on it to install angular app:

ng new my-new-app

Step 2 – Import Modules

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 – Create List Html in View File

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>Angular 14 HttpClient for Sending Http Request Example - Tutsmake.com</h1>
  
<ul class="list-group">
  <li 
      *ngFor="let post of posts"
      class="list-group-item">
      {{ post.title }}
  </li>
</ul>

Step 4 – Create Service for Api

Open a terminal and execute the following command into it to create 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 – Use Api Services in Component

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 – Start Angular App

In this step, execute the following commands on terminal to start angular app:

ng serve

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

http://localhost:4200

Conclusion

In this tutorial, you have learned how to get/fetch data from APIs and display it in the table in angular 14 apps.

Recommended Angular Tutorials