Connecting the Angular Paginator to the Backend in MEAN Stack
In our previous section, we successfully implemented the backend code for our angular paginator. Our backend code was working well, and now, in this section, we will learn how we can connect our angular paginator to the backend created previously. We will use the following steps to do that:
1) We will go to our getPosts() method in our service.ts file. Here, in the http request, we need to attach our query parameters to the URL. We get these query parameters in the getPosts() method as an argument like this:
3) Now, we will add the queryParams with the URL using the plus sign like this:
Now, we send an updated request.
4) Now, we need to send the right data from within our post-list component. So, we will go back to our post-list.component.ts file, and in the getPost() method calling, we will pass the postperpage as the first argument and one as the second argument because we want to start on page 1.
Now, if we save this and go back to our angular application, we will see only two posts there.
5) In the post-list.component.ts file, we will create the currentpage property and set 1 as default value. Now, we will use this current page in ngOnInit() like as:
6) Now, we need to re-fetch posts if we change pagination. So, if we go to page two, we need to call the getPosts() method again, but this time we need to replace the argument values with the values we get from our page data. To be precise, we store the page data in the properties of our component. So, we will override the currentpage value with the value got from the pageData like this:
In the above code, we will add 1 to the pageIndex because this index starts at zero, but on our backend, we are working with 1, 2, and so on.
7) We also need to override the postperpage value with the value get from the pageData in the following way:
Now, we will save this and go back to our application to check whether it is working properly or not:
It looks good, but if we try to delete a post, it will be deleted, but our pagination would not be updated correctly.
8) So, let’s continue implementing pagination on the frontend. We need to improve a couple of things, and one thing we want to improve first is we want to show a spinner whenever we are changing the page. We will simply set the Loading property to true because we already created this property before.
9) Now, we also want to make sure that the paginator is only shown if we show the accordion because if we got no posts, there is no reason to show the paginator. We also want to show it while we are loading, though, so we will copy the ngIf clause of mat-accordion to the mat-paginator. We will remove the “Loading” condition because we want to show it all the time.
Now, if we switch the page, we will see the spinner like this:
10) We also want to know how many posts we have in total. This is something we can find out on the backend. So, we will go back to our js file where we are fetching all the posts and find the number of posts we have. For that, we will combine multiple different queries. Thus far, we have one query, which we narrowed down. We don’t want to create a response yet. Instead, we will return another query, which will be executed. We will return the postmodel.count() like this:
The postmodel.count() will just count the posts and return that number. We don’t need to chain then block with the count if we return it in a then block too. It will basically create a new promise and listen to its result automatically.
11) We will chain then block with the postQuery and we can add multiple then block in the query. In this then block, we will get our count and then we will create our response like as:
So, first, we are fetching all the posts, and then we are issuing another query where we get the count.
12) We can’t use the documents in our response because the documents property is created in another then block. So, we will first store it into a variable and use it in the response. In the response, we will also return the count as JSON data like as
13) Now, we will go back to our service.ts file and use it here. In the getPosts() method, we will update our http get request. We will not only get the message and posts property but also maxPosts property too. So, we will add it in our get request like as:
15) Now, in the subscribe method, we therefore no longer get the transformedPost, but thransformedPostsData we could say, and that object will have a posts property that holds the posts.
18) We get some errors because we get other parts in our post-service, where we actually try to pass this updated array of posts back to our components. Now, we don’t need to use the few lines of code, which we have highlighted below.
Since we navigate to our post-list component from another component, we are guaranteed to reload that post-list component. Therefore, the ngOnInit() will execute and will fetch new posts anyways.
We will do the same thing in the updatePosts() method.
19) In the case of deleting a post, it is a little bit different. We do that from the list of posts, and therefore, we actually will delete a post which we just were able to see. Hence, we definitely need to re-fetch data here, and the most elegant way of doing this is to entirely remove the subscribe method here and simply return the HTTP call and then subscribe to the post list component.
Now, subscribe this in onDelete() method of post-list.component.ts file like as:
We also want to show the loading spinner once we start this deletion process. So, we will set Loading property to true.
For storing data, we will use postData like this.
21) Now, we will use the postCount, and for that, we have our totalposts property. We will set this property to 0 initially and then set it to postCount like as:
Now, everything is good; let’s go to our angular app and try to delete the post.
So, everything is working well. We will start a new module in the next section. We will add user authentication to our project.
Download Complete Project(Connecting angular to the backend.zip)