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