npm package: @ng-zi/extensions-paginator
Description: Angular Material Extensions for paginator
Latest version: 0.0.2

## 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`

```typescript
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

```html
<mtx-paginator
  [config]="paginatorConfig"
  (pageChange)="onPageChange($event)">
</mtx-paginator>
```

### Step 3: Define the Configuration in Your Component

```typescript
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`.

```typescript
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.

```scss
: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:

```typescript
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);
  }
}
```

```html
<!-- paginator-example.component.html -->
<mtx-paginator
  [config]="paginatorConfig"
  (pageChange)="onPageChange($event)">
</mtx-paginator>
```