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

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.

How to start a new Angular 9 Project in few easy steps

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 = [
        {…