Angular Material Tutorial - 31 - Data table Pagination

in this video let's take a look at pagination in data tables similarity sorting pagination can be implemented in three simple steps the first step is to import the material Pigeon ater module so in material module Diaz import map pigeon ater module and added to the material array second step we add the paginated component in the HTML so after Matt table map pigeon ater and we are going to specify two options to the page inator the first one is the page size we specify that using the page size options property let's go with 5 10 and 20 the second option is to show the first and last buttons of the page inator show first last buttons and we simply include it as an attribute the final step is to provide the map regginator directive to the data source so in the types of file import mat Pidgeon ater from angular slash material and then use the view child decorator to get hold of a reference to the map page inator component at view child mat progenitor the variable is going to be progenitor of type map page inator finally in the ng on init method we assign the mat paginated component to the paginated property of the datasource so this dot datasource dot originator is equal to this dot page inator and that is it let's save the files and take a look at the browser at first glance you can see that the styling is sort of broken so let's fix that in the HTML we are going to wrap the table as well as pigeon eater in a div tag and then we are going to move this elevation class from mat table to the div tag now if we go back to the browser you can see that it looks much better by default five items are displayed per page we can change it to 10 or even 20 you can also go back and forth between the pages using the icon buttons the first page and last page buttons might not be necessary for small data sets but if you have several hundreds of rows with a small page size you can definitely include the show first and last buttons attribute all right then that is about pagination in data tables thank you guys for watching you're free to subscribe and I'll see you guys in the next video

Channel: Codevolution

Views: 86,733

Keywords: Codevolution, Angular, Angular Material, Angular Material Tutorial, Angular Material Tutorial for Beginners, Angular Material for Beginners, Pagination, Data Table, Data Table in Angular MAterial, Data table Pagination

Id: sUpYvx-2zxI

Length: 3min 12sec (192 seconds)

Published: Mon Apr 29 2019