Skip to content

Instantly share code, notes, and snippets.

@fr20587
Last active March 25, 2024 20:41
Show Gist options
  • Select an option

  • Save fr20587/15b87b4f9611201e255ace1e8d72df5e to your computer and use it in GitHub Desktop.

Select an option

Save fr20587/15b87b4f9611201e255ace1e8d72df5e to your computer and use it in GitHub Desktop.
Estos archivos tienen una guia de como traducir el componente Mat-Paginator de Angular Material al español, pero pueden ser utilizados para traducir el componente a cualquier idioma. Solo piense un poco, no hace daño. 😎

Import on module

import { MatPaginatorIntl, MatPaginatorModule } from '@angular/material/paginator';
import { getSpanishPaginatorIntl } from '....../spanish-paginator-intl';

Set provider

providers: [
    { provide: MatPaginatorIntl, useValue: getSpanishPaginatorIntl() }
]

Create lenguage pagiginator file

Import mat paginator lenguage file

import { MatPaginatorIntl } from '@angular/material/paginator';

Create range

const spanishRangeLabel = (page: number, pageSize: number, length: number): string => {

    // Check data length
    if (length === 0 || pageSize === 0) {
        return `0 de ${length}`;
    }

    // Get max length
    length = Math.max(length, 0);

    // Set start index
    const startIndex = page * pageSize;

    // If the start index exceeds the list length, do not try and fix the end index to the end.
    const endIndex = startIndex < length ?
        Math.min(startIndex + pageSize, length) :
        startIndex + pageSize;

    // Return range
    return `${startIndex + 1} - ${endIndex} de ${length}`;
};

Create function to translate

/**
 * Get translated paginator text
 *
 * @export
 */
export function getSpanishPaginatorIntl(): MatPaginatorIntl {
    // Create a new instance of MatPaginator
    const paginatorIntl = new MatPaginatorIntl();

    // Text translation for each element in the paginator
    paginatorIntl.firstPageLabel = 'Primera página';
    paginatorIntl.itemsPerPageLabel = 'Elementos por página:';
    paginatorIntl.nextPageLabel = 'Página siguiente';
    paginatorIntl.previousPageLabel = 'Página anterior';
    paginatorIntl.lastPageLabel = 'Última página';
    paginatorIntl.getRangeLabel = spanishRangeLabel;

    // Return MatPaginator translated
    return paginatorIntl;
}
@fr20587
Copy link
Author

fr20587 commented Sep 20, 2021

Creating gist for translate mat-paginator

@xJhanx
Copy link

xJhanx commented Mar 25, 2024

Thanks my friend , its easy to implement , tooo easy .

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment