How to populate an HTML table dynamically using ngFor in Angular 9

ZeroesAndOnes
3 min readJul 30, 2020

In this article I will walk you through an example demonstrating how to create an HTML table and populate it dynamically using the native ngFor directive in Angular 9.

1 — Create an empty Angular Project

First, let’s start off my creating an empty Angular 9 project. To do that open a Terminal in your VScode and type the following command:

> ng new LoadDataDynamically

and make sure to follow the command prompts. This might take a bit to complete because Angular is going to download its required packages. Below is a link to an article that I have created that will show you how to create an empty Angular 9 project along with all the necessary requirements.

2 — Create a mock dataset that will be bound to the HTML table

After the application has been successfully created, open the solution and locate the “app.component.ts” file. Inside the constructor let’s instantiate a new array of objects which will contain basic data that we will use to bind to an HTML table.

data: Array<any>;constructor(){
this.data = [
{ firstName: 'John', lastName: 'Doe', age: '35' },
{ firstName: 'Michael', lastName: 'Smith', age: '39' },
{ firstName: 'Michael', lastName: 'Jordan', age: '45' },
{ firstName: 'Tanya', lastName: 'Blake', age: '47' }
];
}

The code inside the “app.component.ts” file should look like the screen shot below:

At this point we have an object that contains information that we can use to populate our HTML table. This object is populated at the time this class is instantiated and the constructor is doing the population for us.

3 — Create the HTML table to dynamically bind the data from the component.ts

Open the “app.component.html” file and remove all of its content. By default Angular populates…

--

--