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

Time:11-21

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.

CodePudding user response:

Try this i18n transalation for primeng: locale

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

CodePudding user response:

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.

  • Related