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
mcihak
2
Hi,
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.
mcihak
4
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.
Hi
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
Hello,
I only use Ionic 4 and found this solition using directives:
import { Directive, HostBinding } from '@angular/core';
import { IonDatetime } from '@ionic/angular';
@Directive({
selector: "[i18nic-dt]"
})
export class I18nicDateTimeDirective {
constructor() { }
@HostBinding('attr.cancel-text') cancelText: string = "Cancelar";
@HostBinding('attr.done-text') doneText: string = "Aceptar";
@HostBinding('attr.day-names') dayNames: string[] = ['Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado', 'Domingo'];
@HostBinding('attr.day-short-names') 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>
3 Likes