Angular Material Pagination Made Easy: Step-by-Step Guide for Navigation

in this video you will learn how to implement pagination from angular material [Music] and actually not so long ago I created a video regarding custom pagination inside angular and I still think that the custom way is the way to go because you are super flexible and pagination is not the most difficult component but some people wrote that they still prefer a library solution this is why in this video we will look how we can Implement pagination from angular material here I already prepared for us an empty angular project and what we need to do here first of all we must install angular material package this is why I am writing npm install at angular slash material but it is not all there is an additional dependency for angular material which is called angular cdk this is where here we must write and payment style angular cdk The Next Step will be to configure our scss from angular material because essentially here as you can see I opened by generator inside angular material and here you can see how it looks like we have here items per page here is our drop down where we can select something we see here that it is animated and when we're clicking here the page is changed and everything here has a nice CSS which we don't need to write ourselves but in order to use that we must took some theme from angular material and install it inside our project in order to do that we must jump inside our project in root in angularjson and here we have a part Styles where we have our Global Styles what we want to write here boob want to write an additional line with pre-built theme from angular material and actually this is coming from an old module angular material that we installed and it will be available first inside our project and the last thing that you might want to configure is fonts and icons from angular material this is why where Champion inside source index.html and here on the top I want to paste these two lines as you can see first of all this is the line for robot of font and secondly we're getting material icons and additionally to that on our body we must apply a class material typography so now we successfully set it up our angular material for the project and we can start on using our paginator in order to do that we must jump inside our app app module and import here all things that we need and typically you want to input here a module from angular material that you really want to use in our case it will be material paginator module and by importing this module from angular material paginator this is enough to be able to render this component inside our markup so we can jump inside app component HTML and render our material paginator here so here we want to close this tag and provide a lot of different attributes inside and the first thing that we are providing is length so what is length this is the total amount of the elements that you have in your backend for example we are talking about articles and you have like 500 articles inside your database if you are fetching a first page of Articles from your API you typically don't only want to get the first page of articles but also the total amount of Articles exactly for pagination this is by here we can provide 500 just as a test after this we're setting page size and here let's set it to 20. this is exactly the limit or per page the amount of items that we want to see on a single page also I want to render first and last buttons this is by here show first last buttons and we're setting it to True also here we can provide page size options and this is is an array and we can set here for example 5 10 and 20 and it means that user can select how many items he wants to see on the page also we need here page index what is Page Index this is exactly the current page which is active and we're starting here from zero this is why here inside of component I will create this variable for example current page equals zero and the last thing that we need here is change event and this is our page event and here we must create something like handle page event and we're provided inside an event and we must create this function so what I want to do here inside I want to create function handle page event and we're getting here page event and this is Page event and as you can see it is coming from angular material paginator which actually means we're getting inside lots of different properties and I want to console log here handle page event comma page event so we can see how it goals let's check if it's working now I'm reloading the page and we're getting here an error message inside our console and as you can see here we're getting an error that we have an unexpected transition messages and we must make sure that we are using browser animations module and actually we are not which means we must inject it so here inside our app module I want to add one more import and it is browser animations module and we must import it here on the top as you can see now in browser we don't have any errors and here on the right side of the page you can see that our pagination is render I can make it bigger so you can see it better we're getting items per page here is 20 5 and 10 and as you can see we have a nice Styles and animation when we'll open it and this is exactly what we changed inside our app component HTML this is this page size options after this we have a really strange stuff for me which is why 1 20 of 500 which actually means typically you want to see inside the opportunation pages like 1 2 3 and so on but here we see the range of our offset which means we see here 120 then we'll jump into the next page and we see 2140 and so on and so on essentially I would not expect Such Thing from the component because this is not what user typically wants to see but here our buttons are working we have a nice hover effect glowing systems animation and this is looking just fine and all styles are there additionally to that you can see inside console we are getting handle page event every single time when we're changing our page and here we're getting quite a lot of stuff like length page size page index which is the next activated index page and previous page index which actually means inside our app component we can safely say this current page equals page event Dot and here will be page index and the last thing that I want to fix is this text because it doesn't make any sense for me and they don't want to render such thing for the user but the main problem is here that this is not our custom component and we can't really tune it easily we're getting what we're getting and actually even angular material is not that easy to tune so the right way to fix this stuff is to create an additional service this is where here inside source app I want to create an additional service by generator intl.service.ts and here inside I want to create just a service so it is injectable and here I want to export a class which will be our paginator intl and here we're using extends and we want to use here material by generator intl and the only thing that we want to change here is this function which renders this stuff and this function is called get strange label so here I want to use overwrite gear trench label and here we're getting several arguments first of all it is a page it is a number secondly page size it is also a number and length it is a number and inside we simply want to return in your string and we want to render here page then space here we will have Page Plus one because it is not an index after this space off and here we want to calculate the amount of pages and typically we use here math sale and here we are dividing length by Page size which actually means this will return for us the amount of pages that we're getting from the back end and this whole function will operate correctly for us this label but as you can see this is not super trivial and not a lot of stuff inside angular material you can override how you want to this is why I always prepare a custom owned solution so our service is ready but we must use it inside our app component and here inside component we can create providers array and inside I want to provide an object and we want to provide here material by generator intl this is exactly what we extended from and here use class and we're using our own class it will be paginator intl that we just created so the main idea is that we're saying for angular material okay instead of your own service please use our own service let's check if it's working I'm reloading the page and voila here we are getting page 1 of 25 and actually if you are interested to know how to create your own custom pagination inside the angular without any libraries make sure to check this video also

Channel: Monsterlessons Academy

Views: 6,371

Keywords: angular material pagination

Id: pgVn7I6UEoY

Length: 9min 51sec (591 seconds)

Published: Thu May 11 2023