MtxPaginator Component Overview

The Angular Material paginator component (MtxPaginator) Component provides navigation for paginated data sets. It offers a rich feature set for configuring and customizing the pagination behavior and appearance.

Features

• Page Size Options: Allows the user to select the number of items per page.
• First and Last Buttons: Includes buttons to navigate to the first and last page.
• Event Handling: Emits events when the user changes the page or the page size.
• Custom Labels: Allows customization of the labels for pagination controls.
• Hide Page Size Selector: Option to hide the page size selector.
• Styling: Flexible styling options to match your application’s theme.

Usage

To use the MtxPaginator Component, you need to import the MtxPaginatorModule into your application module.

Step 1: Import the MtxPaginatorModule

import { MtxPaginatorModule } from './path-to-your-paginator-module';

@NgModule({
  declarations: [
    // other declarations
  ],
  imports: [
    // other imports
    MtxPaginatorModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 2: Use the MtxPaginator Component in Your Template

<mtx-paginator
  [config]="paginatorConfig"
  (pageChange)="onPageChange($event)">
</mtx-paginator>

Step 3: Define the Configuration in Your Component

import { Component } from '@angular/core';
import { MtxPaginatorConfig } from './path-to-your-paginator-config';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.html',
  styleUrls: ['./your-component.scss']
})
export class YourComponent {
  paginatorConfig: MtxPaginatorConfig = {
    length: 200,
    pageSize: 10,
    pageSizeOptions: [5, 10, 25, 50],
    showFirstLastButtons: true,
    hidePageSize: false,
    customLabels: {
      itemsPerPageLabel: 'Items per page',
      nextPageLabel: 'Next',
      previousPageLabel: 'Previous',
      firstPageLabel: 'First',
      lastPageLabel: 'Last'
    }
  };

  onPageChange(event: PageEvent) {
    console.log('Page change event:', event);
  }
}

Customizing Labels

You can customize the labels of the paginator controls using the customLabels property in the MtxPaginatorConfig.

customLabels: {
  itemsPerPageLabel: 'Rows per page',
  nextPageLabel: 'Next',
  previousPageLabel: 'Prev',
  firstPageLabel: 'First',
  lastPageLabel: 'Last'
}

Styling

You can apply custom styles to the paginator component using CSS. The following example demonstrates how to change the background color and text color.

:host {
  display: block;

  .mat-paginator {
    background: #f0f0f0;
    color: #333;

    &.hide-page-size {
      .mat-paginator-page-size {
        display: none;
      }
    }
  }
}

Example

Here is a complete example of a component using the MtxPaginator Component:

import { Component } from '@angular/core';
import { PageEvent } from '@angular/material/paginator';
import { MtxPaginatorConfig } from './path-to-your-paginator-config';

@Component({
  selector: 'app-paginator-example',
  templateUrl: './paginator-example.component.html',
  styleUrls: ['./paginator-example.component.scss']
})
export class PaginatorExampleComponent {
  paginatorConfig: MtxPaginatorConfig = {
    length: 200,
    pageSize: 10,
    pageSizeOptions: [5, 10, 25, 50],
    showFirstLastButtons: true,
    hidePageSize: false,
    customLabels: {
      itemsPerPageLabel: 'Items per page',
      nextPageLabel: 'Next',
      previousPageLabel: 'Previous',
      firstPageLabel: 'First',
      lastPageLabel: 'Last'
    }
  };

  onPageChange(event: PageEvent) {
    console.log('Page change event:', event);
  }
}

<!-- paginator-example.component.html -->
<mtx-paginator
  [config]="paginatorConfig"
  (pageChange)="onPageChange($event)">
</mtx-paginator>