How to populate an HTML table dynamically using ngFor in Angular 9
Tags: Angular, JavaScript, Vscode, Typescript, HTML

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 information/html in the file. For now let’s get rid of everything and let’s create our HTML table.

Below is the HTML code that you need to add in the “app.component.html” file.

<table>

<thead>

<tr>

<th>First Name</th>

<th>Last Name</th>

<th>Age</th>

</tr>

</thead>

<tbody>

<tr *ngFor="let people of data">

<td>{{people.firstName}}</td>

<td>{{people.lastName}}</td>

<td>{{people.age}}</td>

</tr>

</tbody>

</table>

You will notice that inside the <tbody> I only have one <tr> with three sets of <td> tags. That is because we are not going to manually create the elements of the table we are going to rely on the *ngFor directive to populate the data in the array for us.

*ngFor directive will loops through the array of objects that we have provided it and it automatically bind the elements for each object to the corresponding <td> based on how we have defined it in the template.

In essence the *ngFor acts similar to how a for loop behaves and in this case we are leveraging it to loop through each element in the array and do something with the information. In this care we will create a new row with three cells for each object in the list.

4 — Build and run the application

Now that we have completed the implementation of our code let’s build the application and run it in the browser to see how it is going to behave.

To build the application run the following command in VScode terminal:

> ng serve -o

Once the application has completed the build process it will automatically launch in a browser.

You will notice that our table has loaded successfully and that all of the data in the array that we have created on the “app.component.ts” have properly been bound to the table.