Build Dynamic HTML Table in Angular 16 with ngFor

Last Updated on by in Angular Tutorial
In this tutorial, we are going to learn how to build a dynamic HTML Table with Angular 16 using ngFor directive.A dynamic HTML table is a table that can be modified or updated dynamically using JavaScript or other client-side scripting languages.

It helps you add, remove, or modify rows and columns in the HTML table dynamically based on user interactions or data changes with the help of ngFor directive.

The ngFor is a directive in Angular, a popular JavaScript framework, used to render a list of items in the HTML template.

It is used to iterate over an array or iterable object and generate HTML markup for each item in the collection.

This tutorial contains two steps:

  • Rendering Table Data with angular service.
  • Displaying Data in the Angular HTML data table.

We need to set up an Angular project using Angular CLI.

First, install a most recent version of Angular CLI, running the following command.

npm install -g @angular/cli@latest

Then, run the following command to install the Angular app.

ng new project-name
cd project-name

Create Table Component

Run the command to create a HTML data table component.

ng g c table

Rendering Table Data with Angular Service

Here, we are about to create an Angular service that can be created using the HttpClient service.

Before you get started, open the app.module.ts file and import HttpClientModule in your main angular app module.

import { HttpClientModule } from '@angular/common/http';
  imports: [

It will let you use HttpClient API to make the HTTP requests.

Next, Add the following code in your crud.service.ts file:

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
  providedIn: 'root',
export class CrudService {
  private api: string = '';
  httpOptions = {
    headers: new HttpHeaders({
      'Content-Type': 'application/json',
  constructor(private httpClient: HttpClient) {}
  getData(): Observable<any[]> {
    return this.httpClient.get<any[]>(this.api);

Next, open the table.component.ts file and replace the current code with the following code.

import { Component, OnInit } from '@angular/core';
import { CrudService } from '../crud.service';
  selector: 'table-root',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.scss'],
export class TableComponent implements OnInit {
  ItemsArray: any[] = [];
  constructor(private crudService: CrudService) {}
  ngOnInit() {
    this.crudService.getData().subscribe((res: any[]) => {
      this.ItemsArray = res;

We injected the RestAPIService in the TableComponent. In this file, we will be displaying the data.

Displaying Data in Angular HTML Table using *ngFor

A table is an arrangement of data in rows and columns, or possibly in a more complex structure.

HTML data table is pretty easy to create it is created using table tag.

Every single table row is defined with the tr tag. A table header is created with the th tag. By default, table headings are set to bold and centered and a table cell is created using td tag.

Next, open the app/table.component.html file and add the following code:

  <h1>Angular 13 HTML Table Example</h1>
      <tr *ngFor="let item of ItemsArray">
        <th>{{ }}</th>
        <td>{{ }}</td>
        <td>{{ }}</td>
        <td>{{ }}</td>
        <td>{{ item.address }}</td>
          <button type="button">Edit</button>
          <button type="button">Delete</button>

In the above HTML table, we assigned the ngFor directive to iterate over the data collection and display on the front-end using the HTML table component.

In the back-end, HttpClient is doing its job and fetching the data from the remote origin.

Open the app.component.html file and import the component selector’s name.


Run Angular App

ng serve --open

View your app on the following URL: localhost:4200.


Finally, we have completed the Angular HTML Table tutorial with example. In this tutorial we learned how to display data dynamically using the HTML Table in Angular using ngFor directive.

In this tutorial, we learn how to create an HTML table from scratch. However, there are other ways through which you can build a table in less time.

You can display data using the Angular Material mat-table component. The mat table directive contains the mat-cell, mat-header-cell directives to build a full scalable table to show the data to the users.

I wrote a detailed article on how to show the data with an angular material table with pagination and filtering.

You can also take the help of Bootstrap Table component to display the dynamic data in Angular.

Thanks for reading, Happy Coding!

❤️ Checkout Popular CSS Collection

Digamber - Author

Digamber, the founder of PositronX, is a certified web developer with over 10 years of experience. He possesses a curiosity for learning new things and enjoys playing cricket on his days off.