How to change label of "No Fillter" option in PrimeNG Column Filter?

How to change label of "No Fillter" option in PrimeNG Column Filter?

Problem Description:

I want to change the label of the "No Filter" option to "Sin Filtro" like an spanish translation. I only know about the FilterMatchMode from FilterService to change the label of the filter match modes, like that:

export const FilterMatch = [
    { label: "Empieza con", value: FilterMatchMode.STARTS_WITH },
    { label: "Termina en", value: FilterMatchMode.ENDS_WITH },
];

And by using the [matchModeOptions] property in a p-columnFilter, I can make the next column filter options with the changes from the code above:

enter image description here

But I also want to change the "No Filter" option label to "Sin Filtro" marked in the red rectangle, I don’t know how. Any help is welcome.

Solution – 1

Try this i18n transalation for primeng:
locale

this.config.setTranslation({ noFilter: 'No Filter', });

Solution – 2

I had the same problem while working in a spanish project. What I did was the following:

First, import PrimeNG Config like this:

import { PrimeNGConfig } from 'primeng/api';

Then, inject on constructor:

constructor(
    private config: PrimeNGConfig
  ) {}

And finally, inside ngOnInit you can set any translation you want, like this:

this.config.setTranslation({
      startsWith: 'Empieza con',
      contains: 'Contiene',
      notContains: 'No contiene',
      endsWith: 'Acaba en',
      equals: 'Igual',
      notEquals: 'No igual',
      noFilter: 'Sin filtro',
      lt: 'Menor que',
});

You have all the docs here.
You can do that on general app.component.ts in order to affect the whole app.

Rate this post
We use cookies in order to give you the best possible experience on our website. By continuing to use this site, you agree to our use of cookies.
Accept
Reject