Home » Connecting the Angular Paginator to the Backend in MEAN Stack

Connecting the Angular Paginator to the Backend in MEAN Stack

by Online Tutorials Library

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:

Connecting the Angular Paginator to the Backend in MEAN Stack

2) We will now create a new constant queryParams and turn this into a template expression with two backticks(“). This is a special JavaScript feature that allows to dynamically adding values into a normal string. So, in between these two backticks, we create our queryParams by first adding the question mark, which separates the other URL from our query parameter and then the query parameter we want to pass onto the backend. We will use these parameters using a dollar sign($) with two curly braces like this:

Connecting the Angular Paginator to the Backend in MEAN Stack

3) Now, we will add the queryParams with the URL using the plus sign like this:

Connecting the Angular Paginator to the Backend in MEAN Stack

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.

Connecting the Angular Paginator to the Backend in MEAN Stack

Now, if we save this and go back to our angular application, we will see only two posts there.

Connecting the Angular Paginator to the Backend in MEAN Stack

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:

Connecting the Angular Paginator to the Backend in MEAN Stack

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:

Connecting the Angular Paginator to the Backend in MEAN Stack

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:

Connecting the Angular Paginator to the Backend in MEAN Stack

Now, we will save this and go back to our application to check whether it is working properly or not:

Connecting the Angular Paginator to the Backend in MEAN Stack

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.

Connecting the Angular Paginator to the Backend in MEAN Stack

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.

Connecting the Angular Paginator to the Backend in MEAN Stack

Now, if we switch the page, we will see the spinner like this:

Connecting the Angular Paginator to the Backend in MEAN Stack

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:

Connecting the Angular Paginator to the Backend in MEAN Stack

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:

Connecting the Angular Paginator to the Backend in MEAN Stack

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

Connecting the Angular Paginator to the Backend in MEAN Stack

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:

Connecting the Angular Paginator to the Backend in MEAN Stack

14) Now, we have to adjust our logic where we transform the posts. We don’t just want to pass on the transformed post array. Instead, we want to pass on an object which contains both the updated post array where all the posts have an ID without an underscore and the maximum amount of posts. So, in the map, we will return a JavaScript object which has a post property, but besides that post property, it also has a maxPosts property, which simply takes the data from postData.maxPosts like as:

Connecting the Angular Paginator to the Backend in MEAN Stack

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.

Connecting the Angular Paginator to the Backend in MEAN Stack

16) That object will also hold some information about our maximum amount of posts, and we want to use that too. Where we emit the data, we no longer just want to pass on an array of posts, so we will change the generic type of our subject because it should now be a JavaScript object which has a posts property, which is an array of posts. But we also want to have a second property, i.e., a count, which is a number.

Connecting the Angular Paginator to the Backend in MEAN Stack

17) For our subject to yield that updated data, we will go down there where we call next, and instead of just passing a copy of the array, we will pass a JavaScript object which holds this copy of posts, and it will have a postCount property which holds our transformedPostsData.maxPosts value.

Connecting the Angular Paginator to the Backend in MEAN Stack

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.

Connecting the Angular Paginator to the Backend in MEAN Stack

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.

Connecting the Angular Paginator to the Backend in MEAN Stack

We will do the same thing in the updatePosts() method.

Connecting the Angular Paginator to the Backend in MEAN Stack

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.

Connecting the Angular Paginator to the Backend in MEAN Stack

Connecting the Angular Paginator to the Backend in MEAN Stack

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.

Connecting the Angular Paginator to the Backend in MEAN Stack

20) We also get an error in ngOnInit() where we do subscribe to our subject, and here, we are still waiting for data, which is an array of posts. But since we just updated our subject. We are getting back a JavaScript object now which has a post property and a postCount property. Therefore, in the post-list component, we will rename the argument to postData because this now seems to be more appropriate, and the type will be a JavaScript object which has the posts property and the postCount property like this :

For storing data, we will use postData like this.

Connecting the Angular Paginator to the Backend in MEAN Stack

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:

Connecting the Angular Paginator to the Backend in MEAN Stack

Now, everything is good; let’s go to our angular app and try to delete the post.

Connecting the Angular Paginator to the Backend in MEAN Stack
Connecting the Angular Paginator to the Backend in MEAN Stack

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)


You may also like