Binding Array to a Table

In this article, we will learn how to bind an array to a HTML table.  This means that we want the elements in our array and their attributes to be displayed on the view.

For this, we will mainly use some hard-coded data and structure directives like *ngIf and *ngFor.

So, initially, if we have a  component.ts file in our project, it will look like this:

Now to display these items on the view, we would need to use *ngFor which is a structure directive.
So, inside the HTML file app.component.html,

This will give result like:


Now, we want to display the attributes of these elements, so for the sake of convenience let us hard-code the data.

And, inside the app.component.html, we display it like:

This will show up the table with all the elements and their attributes as follows:


This is how we bind our array to an HTML table. Your turn to try now!

Leave a comment

Your email address will not be published. Required fields are marked *