Angular ngFor: Build an HTML Table with Angular 10 Example

Angular 10 is in beta version at the time of writing this post.

You can install Angular CLI 10 using the npm install --global @angular/cli@next command.

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;
    })  
  }
}

Step 2 — Displaying the Table Using Angular 10 ngFor

Next, open the src/app/app.component.html file and update it as follows:

<div>
                <h1>NgFor Table Example</h1>
                <table>
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Customer Name</th>
                            <th>Email</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let item of data">
                            <th>{{ item.id }}</th>
                            <td>{{ item.name }}</td>
                            <td>{{ item.email }}</td>
                            <td>
                                <button type="button" >Delete</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

We use the Angular ngFor directive to iterate over the customer's data fetched from the server using the ApiService and we build the HTML table dynamically by displaying each row of the table in each ngFor iteration.

Keep in mind that Angular 10 is still in the beta version at this time.