Hi, welcome back
In our last video, we talked about how to design the table
Now, now let's continue the video. Right now, what you're going to do is first you have to run your backend application
which is a Spring Boot application. After that, here you can see get all method, how the get all method works
This API, we already done this one, all the things are in our Spring Boot application
So here I want to get all the data from the database
So we have a, this is our API, student, get all student, we already done
So if you type the URL on the postman, the respective result will be displayed here
Now this result, I want to display on the table. This is how I want to display on the table
So let me see how to do this. So back to my project, what you're going to do is, here you can see there is a TS file here
Now you can see, go to the material design, you can see, you have to do the coding part
look like this. Here I just copy the things, all this I just copied
Okay here, this is HTML part, this is TS part. The TS part, I'm going to copy this
I'm going to copy these all things, display columns, it's all this column, headings, what
are the headings we need? Pagination, you have to implement the pagination, all the things you just copied
Back to my, here you can see the student component, our logic, this is a coding part
So here I'm going to paste it. That's the thing you have to paste it
Now here, after you have pasted, this is not an error
This is not an error. This is not an error. What you're going to do is here, you have to click on here, you have to add the class
Just click it. Here there is a bulb symbol, you click on it, you have to add the class
This class will be added. As you can see, the class has been added successfully
That's the thing you have to do. Now here, first line, we explain display the columns
We have to display the columns. What are the columns you have to display to the table
You can see, if you go to your backend, student ID, student name, address, mobile, and active
So the same column we have to give here. So first one should be the student ID. Right
Student ID, like this way. You can see, if you go to the example, you can see, I already showed the example here
Student ID, student name, this is the ID. We have to write it here
You see, student ID, second one is a student name, student name
After that, what are the other columns? address, after that mobile, after that active, this is an active state, we just called as active
So we have a 1, 2, 3, 4, 5, 5, 8, that's it
After that, what you're going to do is, here, this one, we have to do it as, we have any
you have to call it as any. You have to load any data
We call it as any here. That's it. Right? So we have, we have loading from the API here
We are loading the API request to, we have given the data source
The data that was passing to, we are here to load the data. Right
We have to load the data. That's the thing it will be. We are, we are going to do it. Right
So here, this one also, you have to select this one, you have to implement the class
page in enter. After that, the view child, we have to call it here, comma component
So how to call it here? Here you can see here. If you go to the TS file, they are telling view child here, component, you have to call
it here, view child. So that is a view child. Okay. The, based on the documentation I have to make here, based on documentation, view child. Right
That's the thing we have to do it here. The page in enter, you have to write this, hold down the shift key down, shift key plus one. Right
So that's the thing you have to do it. Right? Now these are the columns. You have to write a list of like this, simply
Go to arrange it. So make the arrangement. Right. Perfect. So these are the columns
So the ID, student name, address, mobile and active. So, the ID, student name, address, mobile and active. So, the ID, student name, address, mobile and active
So, the ID, student name, address, mobile and active. So, the ID, student name, address, mobile and active. So, the ID, student name, address, mobile and active
So, the ID, student name, address, mobile and active. So, the ID, student name, address, mobile and active
So, the ID, student name, address, mobile and active. So, the ID, student name, address, mobile and active. So, the ID, student name, address, mobile and active