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!