Expandable Table Rows in Angular

Photo by Bharat Patil on Unsplash

Over the past week, I have been working on creating a dashboard that will help me keep track of certain items in a queue. Essentially, this dashboard would connect to an API (Application Programming Interface) and load a table with the contents of the GET request. Thinking about the layout of the table, each row would be an item in the queue. However, clicking on that item would expand the row and allow the user to see more information about that queued item. Since I was feeling adventurous, Angular seemed like a good choice to accomplish this task.

The First Attempt

After getting the project created, the first thing I did was load in Bootstrap and get two separate components built.

ng g c dasbhoard
ng g c dashboard/expansion

The “dashboard” component would be for the table. While the “expansion” component would be for the expandable part of the table row. After several hours, I came up with something that looked like this:

As you can see, it’s a very Bootstrap looking table. When the “View” button is clicked, the row will expand to show more content. Let’s take a look at the code.