@angular/material/paginator#MatPaginator TypeScript Examples

The following examples show how to use @angular/material/paginator#MatPaginator. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.

Example #1

Source File: pagination.directive.ts From angular-custom-material-paginator with MIT License

6 votes

constructor(
    @Host() @Self() @Optional() private readonly matPag: MatPaginator,
    private readonly ViewContainer: ViewContainerRef,
    private readonly renderer: Renderer2
  ) {
    this.currentPage = 1;
    this.pageGapTxt = ['•••', '---'];
    this.showTotalPages = 3;
    this.checkPage = [0, 0, 0];
    // Display custom range label text
    this.matPag._intl.getRangeLabel = (page: number, pageSize: number, length: number): string => {
      const startIndex = page * pageSize;
      const endIndex = startIndex < length ?
        Math.min(startIndex + pageSize, length) :
        startIndex + pageSize;
      return length > 0 ? 'Showing ' + (startIndex + 1) + ' – ' + endIndex + ' of ' + length + ' records' : 'Showing 0 – 0 of 0 records';
    };
    // Subscribe to rerender buttons when next page and last page button is used
    this.matPag.page.subscribe((paginator: PageEvent) => {
      this.currentPage = paginator.pageIndex;
      this.matPag.pageIndex = paginator.pageIndex;
      this.initPageRange();
    });
  }

Example #2

Source File: table.component.ts From material-reusable-table with Apache License 2.0

6 votes

@ViewChild(MatPaginator, {static: false}) matPaginator: MatPaginator;

Example #3

Source File: employee-table.component.ts From angular-material-admin with MIT License

5 votes

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

Example #4

Source File: ranking.component.ts From oss-github-benchmark with GNU General Public License v3.0

5 votes

@ViewChild(MatPaginator) paginator: MatPaginator;

Example #5

Source File: repositories-ranking.component.ts From oss-github-benchmark with GNU General Public License v3.0

5 votes

@ViewChild(MatPaginator) paginator: MatPaginator;

Example #6

Source File: user-ranking.component.ts From oss-github-benchmark with GNU General Public License v3.0

5 votes

@ViewChild(MatPaginator) paginator: MatPaginator;

Example #7

Source File: block.component.ts From EXOS-Core with MIT License

5 votes

@ViewChild(MatPaginator) paginator: MatPaginator;

Example #8

Source File: history.component.ts From EXOS-Core with MIT License

5 votes

@ViewChild(MatPaginator) paginator: MatPaginator;

Example #9

Source File: history.component.ts From EXOS-Core with MIT License

5 votes

@ViewChild(MatPaginator) paginatorTransactions: MatPaginator;

Example #10

Source File: wallet.component.ts From EXOS-Core with MIT License

5 votes

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

Example #11

Source File: explore-item.component.ts From oss-github-benchmark with GNU General Public License v3.0

5 votes

@ViewChild(MatPaginator) paginator: MatPaginator;

Example #12

Source File: account-struct.component.ts From assetMG with Apache License 2.0

5 votes

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

Example #13

Source File: asset-gallery.component.ts From assetMG with Apache License 2.0

5 votes

@ViewChild(MatPaginator) paginator: MatPaginator;

Example #14

Source File: asset-grid.component.ts From assetMG with Apache License 2.0

5 votes

@ViewChild(MatPaginator) paginator: MatPaginator;

Example #15

Source File: todo1.component.ts From boot-angular-pagination-example-app with Apache License 2.0

5 votes

@ViewChild(MatPaginator) paginator: MatPaginator;

Example #16

Source File: log-module.component.ts From 6PG-Dashboard with MIT License

5 votes

@ViewChild(MatPaginator) paginator: MatPaginator;

Example #17

Source File: mat-table.component.ts From flingo with MIT License

5 votes

@ViewChild(MatPaginator) paginator: MatPaginator;

Example #18

Source File: material-table.component.ts From matx-angular with MIT License

5 votes

@ViewChild(MatPaginator) paginator: MatPaginator;

Example #19

Source File: pagination-table.component.ts From matx-angular with MIT License

5 votes

@ViewChild(MatPaginator) paginator: MatPaginator;

Example #20

Source File: room.component.ts From WiLearning with GNU Affero General Public License v3.0

5 votes

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

Example #21

Source File: history.component.ts From blockcore-hub with MIT License

5 votes

@ViewChild(MatPaginator) paginatorTransactions: MatPaginator;

Example #22

Source File: paginator.directive.spec.ts From angular-custom-material-paginator with MIT License

5 votes

@ViewChild(MatPaginator) paginator: MatPaginator;

Example #23

Source File: emote-list.component.ts From App with MIT License

5 votes

@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator | undefined;

Example #24

Source File: data-table-datasource.ts From worktez with MIT License

5 votes

paginator: MatPaginator | undefined;

Example #25

Source File: data-table.component.ts From worktez with MIT License

5 votes

@ViewChild(MatPaginator) paginator!: MatPaginator;

Example #26

Source File: app.component.ts From nghacks with MIT License

5 votes

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

Example #27

Source File: mat-table-query-reflector.component.ts From nghacks with MIT License

5 votes

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

Example #28

Source File: block.component.ts From blockcore-hub with MIT License

5 votes

@ViewChild(MatPaginator) paginator: MatPaginator;

Example #29

Source File: history.component.ts From blockcore-hub with MIT License

5 votes

@ViewChild(MatPaginator) paginator: MatPaginator;