How To Create Dynamic Table In Bootstrap

Table is a fine way of organizing data. Organised view of data is considered to be very effective for various reasons such as comparison of data and more.

This article is about creating dynamic table in angular 9.

GET THE GITHUB LINK AT THE END.

I have used a dummy RESTful api from www.jsonplaceholder.com for filling the table data for our example. Following is the format of JSON data that we will be fetching :-

JSON format showing array of objects with properties and values

JSON format represents an array o f objects with multiple fields such as "id", "name" and nested properties like "address". In our example we will be displaying various fields as column and values as respective data rows.

Let's start,

Open your Text Editor , I have used Visual Studio Code. Go to the folder in which you want to create your angular app.

First you need to create a work-space using command "ng new my-app" , feel free to give any name you want to your work-space.

CREATING A MODEL :- Next you need to create a model for defining the data-model. A model is a simple class file with name "dynamic-table.model.ts". You can create it by right-click and then select new file. Enter the name of file with the extension .ts as it is a simple class/interface file shown below.

CREATING A SERVICE :- Create a service with command "ng g s dynamic-table" . This service class will enable you to fetch the data from api and use it anywhere in the application using dependency injection. Write the code to fetch the data from api as shown below.

CREATING A COMPONENT :- Next you need to create a component "ng g c dynamic-table" and use the dependency injection in the component.ts file. The important thing to note is that our service returns an observable (a stream of data) in order to access that stream of data we need to subscribe to it as shown below.

HTML template :- Here we will create the view of our table, we can create a simple table as per the need using some basic bootstrap classes and html tags.

FINAL RESULT :- And now you can run the command "ng serve -o" in order to start the application. Below is the table that will be shown after successful completion of app building.

CONCLUSION :- We have created a simple angular application in which we are using service to get the data from api and displaying the fetched data into a table. This is a basic retrieval operation with proper implementation.