How to globally set Ionic components buttons translations

Hi all,
is there a way to globally configure ionic components buttons text?

I need to translate for example Input Properties like:

  • cancelText, okText from Select component
  • cancelText, doneText from DateTime component

Is there a similar way to set those strings in Config? Like backButtonText:

this.config.set('backButtonText', this.translate.instant("BACK"))

I would like to do something like:

this.config.set('cancelText', this.translate.instant("CANCEL"));
this.config.set('doneText',   this.translate.instant("DONE"));
this.config.set('okText',   this.translate.instant("OK"));

Instead of doing this FOR EACH component template:

<ion-select [cancelText]="translate.instant('CANCEL')" [okText]="translate.instant('OK')"></ion-select>
<ion-datetime [cancelText]="translate.instant('CANCEL')" [doneText]="translate.instant('DONE')"></ion-datetime>

Thanks in advance

1 Like

check documentation for using translates in application:

Just create .json file for each language and than use only key in template like: {{ 'translateKey' | translate }}

Thanks for the answer
I know how to use translate pipe but this is not the case, i want to translate those strings once for all the application.

If you use on all places the same translate key, the translation is for whole app.

Yes I know, but in my question I specified I’m looking for a global setting, not the input property for every component, thanks.

I also encountered the same problem. Did you solve it?

Sadly no… I had to move on so I placed the translation for each component in every HTML template…

1 Like


I only use Ionic 4 and found this solition using directives:

import { Directive, HostBinding } from '@angular/core';
import { IonDatetime } from '@ionic/angular';

    selector: "[i18nic-dt]"
export class I18nicDateTimeDirective {
    constructor() { }

    @HostBinding('attr.cancel-text') cancelText: string = "Cancelar";
    @HostBinding('attr.done-text') doneText: string = "Aceptar";
    @HostBinding('') dayNames: string[] = ['Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado', 'Domingo'];
    @HostBinding('') dayShortNames: string[] = ['Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb', 'Dom'];
    @HostBinding('attr.month-names') monthNames: string[] = ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'];
    @HostBinding('attr.month-short-names') monthShortNames: string[] = ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'];

Then you can use it like this:

<ion-datetime i18nic-dt></ion-datetime>