Angular ngFor: Build an HTML Table with Angular 10 Example

Angular ngFor: Build an HTML Table with Angular 10 Example

Build an HTML Table Example Dynamically with Angular 10/9 and ngFor. Step 1 - Getting Table Data with Angular 10 Service and HttpClient. This is better done using an Angular 10 service and the HttpClient API, so let's suppose we have the following service: Step 2 - Displaying the Table Using Angular 10/9 ngFor.

Angular 10 Example: Build a Table with ngFor

In this quick example with Angular 10, let’s see how to build an HTML table with Angular and the ngFor directive.

Let’s assume you already have Angular CLI 10 installed on your machine and an Angular 10 project ready.

You can do this example in two steps:

  • Step 1 — Getting Table Data
  • Step 2 — Displaying the Table Using ngFor

Before we can use Angular ngFor for displaying data in a table, we need the data. In a real-world example, we’ll need to get data from a server database.

Step 1 — Getting Table Data Using an Angular 10 Service

This is better done using an Angular 10 service and the HttpClient API, so let’s suppose we have the following service:

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

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  private apiServer = "http://server.com";
  httpOptions = {
    headers: new HttpHeaders({
      'Content-Type': 'application/json'
    })
  }
  constructor(private httpClient: HttpClient) { }
  get(): Observable<any[]> {
    return this.httpClient.get<any[]>(this.apiServer + '/customers/');
  }
}

Pleate note that you need to import HttpClientModule in your application module before you can use HttpClient.

Next, you need to inject the ApiService in the Angular 10 component where you want to display your data.

Let’s keep it simple and use the App component.

Open the src/app/app.component.ts file and update it as follows:

import { Component, OnInit } from '@angular/core';
import { ApiService } from '../api.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class App implements OnInit {
  data = [];
  constructor(private apiService: ApiService) { }
  ngOnInit() {
    this.apiService.get().subscribe((data: any[])=>{
      this.data = data;
    })  
  }
}

angular angular-10 angular-9

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Angular NgModel Example | ngmodel Directive In Angular 9/10

Angular NgModel is an inbuilt directive that creates a FormControl instance from a domain model and binds it to form control element.

Angular 10/9 CSS Flex Layout By Example

In this tutorial, we’ll learn how to use the CSS Flex-Layout by example in Angular 10/9.

How to embed and display PDF files in Angular 10/9

In this tutorial, we’ll learn how to embed and display PDF files in Angular by creating a simple example application using the latest Angular 10 version.

Actualizar app de Angular 9 a Angular 10

Actualizar app de Angular 9 a Angular 10. In this tutorial we convert an Angular 10 application to a PWA.

Angular Sass: How To Use Sass In Angular 9 Tutorial

Sass in Angular is an extension of CSS that allows you to use things like variables, nested rules, inline imports. Angular supports Sass, CSS, and Less.