From the course: Building Angular and ASP.NET Web API Apps

Unlock this course with a free trial

Join today to access over 24,900 courses taught by industry experts.

Design the list page

Design the list page

- [Instructor] In this part, we're going to design the transaction view and on this view, we have three cards here at the top for the total income, expenses, and balance, and then below we have a transactions header and then a table where we're going to show all the transactions. Now the first thing is that to just set up basically an empty array that we can use display data here on this view, and then we're going to load the data from the database. For that, let us go to this component, and then you'll just go to the left explorer, then go to components, and then go to the transaction list. I'm going to open both the HTML. I'm going to close the other ones, just right click, then close others, then I'm going to also open the component.ts file. The first thing to define in here is that we're going to define the data type and we are going to load from the API list of transactions or an array of the transaction model that we have created in this project as well. So for that…

Contents