How to Create Table in Angular 7 using ngFor

5 min readJun 18, 2019

This tutorial is first published on CodezUp.

In this tutorial, we are going to Create a Static Table in Angular using ngFor. The video is provided at the beginning of this tutorial. So without wasting more time, let’s start the tutorial.

Table in Angular 7 using ngFor

Creating New Project

First we have to create a new angular project. Let’s create a new Project named CustomTable using command "ng new CustomTable" in command prompt. Select routing either Yes/No anything which you want because in this tutorial we do not deal with routing part and choose CSS(Cascading Style Sheets ) and then wait for few minutes so that it build the project successfully.

For Angular Projects, I recommend Visual Code Editor and we can open our project by typing “code .” in command prompt.

Creating Table in Angular

Now, first go to the src folder under which go to app folder. Open the app.component.html file and delete all the contents from it.

Now let’s create a header of our App named “My Custom Table“. Then next create a basic layout for table and define header and rows section for table.

Creating Rows of Table

Now, let’s move to file app.component.ts file and define headers and rows data in .ts file.

Intialize headers variable holding array of Table columns. The columns in headers variable are ID, Name, Age, Gender and Country.

headers = ["ID", "Name", "Age", "Gender", "Country"];

Now, Intialize rows variable holding array of Table rows. Each row consists of Object of column Names. Let’s create some rows for table.

rows = [
    {
      "ID" : "1",
      "Name" : "Rahul",
      "Age" : "21",
      "Gender" : "Male",
      "Country" : "India"
    },
    {
      "ID" : "2",
      "Name" : "Ajay",
      "Age" : "25",
      "Gender" : "Male",
      "Country" : "India"
    },
.........
.........
.........
  ]

Yeah, so we have created 8 rows for our table. Here you can see the Object of each row is defined in form of headers columns. Now let’s attach these rows to our .html file so that we can visualize them in form of table.

Using ngFor in Table

So for that part, we have to use *ngFor that is built in method in Angular to iterate through arrays. Let’s first create headers column of Table using *ngFor. So, if you are from Computer background, then it is easy for you to capture how For Loop works. So, go to <th> tag and write *ngFor statement in it.

<th *ngFor = "let column of headers">
      {{column}}
    </th>

Here “let” keyword is used to intialize a variable named column. The “of” keyword is used to iterate through each element or object from headers array that is declared in .ts file.

So for displaying that header column, we have to use data binding in Angular that is using double curly braces(“{{column}}”).

Also Check ==> Display Table in Angular using JSON Server Rest API

Now, We have defined the header section of our table. So, let’s move to rows section.

For displaying we have to iterate through our rows array. Since rows array contains Objects of headers column. So, to extract each column from that object, we have to define one more *ngFor in <td> section to iterate through each header column for each row entry based on that column field.

<tr *ngFor = "let row of rows">
    <td *ngFor = "let column of headers">
      {{row[column]}}
    </td>
  </tr>

So, for adding row entry, we have to bind the data to out table using curly braces (“{{ row[column] }}”)

Why ” row[column] ” because for each iteration of row variable returns object in form like this below.

{
      "ID" : "1",
      "Name" : "Rahul",
      "Age" : "21",
      "Gender" : "Male",
      "Country" : "India"
    }

So, for that accessing each individual field from this object, we have to access each field using particular name by column field. That’s why we need to iterate through headers array for each column field name.

Now, we are done with creating table using *ngFor in Angular.

Start the Server

Let’s start the server using “ng serve” command or with “npm start” command and see what we have created.

Let’s wait for the project to compile successfully. Once it successfully compiled, go to your web browser and type http://localhost:4200.

As we can see the table is successfully created but it doesn’t seems to good in visualization. Let’s add some css to our table so it looks little better.

Adding CSS to File

For that go to app.component.css file and style your table. For styling table first create an id property of table as “users“, and add css properties using this id.

Now we have successfully added CSS and saved all files, it automatically compiles the project in the background.

Let’s check the browser again and now our table seems to be little better.