Using translate pipe (ng2-translate) in Loading message

I have successfully implemented ng2-translate in the HTML of my project. How do I translate the message content in a Loading?

I have tried the following syntax for the message content:

presentLoading() {
    let loading = Loading.create({
    content: "{{'LOADING' | translate}}"
    });
    this.nav.present(loading);
   }

Using this above syntax the message {{'LOADING' | translate}} appears as written in the loader (i.e. the translate pipe does not work). The translate pipe is working in the associated HTML page.

Is this a bug in Ionic2? Or is it not possible to implement the translate pipe in JS/TS, only the HTML?

you can use the instant method of the translateservice.

constructor(private nav: NavController, private translate: TranslateService) {
}

presentLoading() {
    let loading = Loading.create({
      content: this.translate.instant('LOADING')
    });
    this.nav.present(loading);
}
1 Like

Hi,
is it possible to use translation in own HTML loading?
E.g.:

      spinner: 'hide',
        content: `
            <div class="custom-spinner-container">
                <div class="custom-spinner-box">
                    <span class="icon icon-present"></span>
                    <div class="custom-spinner-spinner"></div>
                    <div class="custom-spinner-title">
                        Loading..
                        <span>Please wait</span>
                    </div>
                </div>
            </div>
        `
    });

Not sure if it works, but my bet would be to try the pipe.
{{ 'loading' | translate }}

Already tryed. Not working :-/

Try using a local variable that you are translating in the constructor using instant function of ng2-translate. Then use that variable in your code like {{ translated_variable }}

Not working. Always show “{{ loaderText }}” not translated string :-/

import { TranslateService } from "ng2-translate";


  langs = ['en', 'fr', 'es'];
 in constructor public translate: TranslateService

{{‘g+’|translate}}

it should working . as i am using

@vks_gautam1 I have it exactly like you, but in loading I have still text

{{ ‘Loading…’| translate }}

except his translate. :-/