puddlejumper26 / blogs

Personal Tech Blogs
4 stars 1 forks source link

MatPaginatorModule Application Angular Material Pagination #161

Open puddlejumper26 opened 3 years ago

puddlejumper26 commented 3 years ago

.module.ts

Notice here, after Angular 8 should import from '@angular/material/paginator'

import {  MatPaginatorModule } from '@angular/material';

imports: [
          ...
         MatPaginatorModule,
          ...
   ],

.component.ts

import { MatPaginator} from '@angular/material';

 @ViewChild(MatPaginator, { static: true}) private readonly paginator!: MatPaginator;

public ngOnInit(): void {
        this.dataSource.paginator = this.paginator;
    }

.component.html

<mat-paginator 
        #paginator           ---> this to combine with @ViewChild
        [hidePageSize]="true"            ---> this to hide page size
        [pageSizeOptions]="[20]"          ---> this to set how many items could be displayed on one sigle page, is an Array
        showFirstLastButtons>            --->
    </mat-paginator>

paginator

this to combine with @ViewChild

hidePageSize

this to hide page size when it is true

[hidePageSize = false ] or just without this attribute image

[hidePageSize = true ] image

pageSizeOptions

this to set how many items could be displayed on one sigle page, is an Array

[pageSizeOptions]="[5,10,15]" image

showFirstLastButtons

with showFirstLastButtons image

without showFirstLastButtons image