3

I am trying to use ng2-translate to show userName in different languages.

My LoginComponent looks like the one below:

import { Component } from '@angular/core';
import {TranslateService, TranslatePipe} from 'ng2-translate/ng2-translate';

@Component({
    selector: 'login-app',
    templateUrl: './app/components/html/login.component.html',
    pipes: [TranslatePipe]
})

export class LoginComponent {
    userName: string;

    constructor(private _translate: TranslateService) {

        this.initializeTranslateServiceConfig();
    }

    initializeTranslateServiceConfig() {
        var userLang = navigator.language || navigator.userLanguage;
        this._translate.use(userLang);
    }
}

My template login.component.html has a label which displays the userName

    <label for="userName">{{"User Name" | translate}}</label>

I have different .json files to support the translations.

Now I am changing the language settings of Chrome, Firefox and IE11. It works perfectly for Chrome and Firefox but not for IE11. :(

Can anybody please tell me what could be the problem and the possible solution?

Thanks,

Debopam

Debopam Chanda
  • 161
  • 1
  • 7

2 Answers2

1

Based on the documentation on the MSDN navigator.userLanguage returns the operating system's natural language, not the preferred language set in your browser. (Link) Changing the browsers language setting will not effect this value.

Other browsers do support navigator.language, but also have some drawbacks, as stated on MDN, as not all will return the user's preferred language. (Link)

At work we are using a server-side API-call which returns the Accept-Language HTTP-Header, to identify the language(s).

Philipp
  • 1,784
  • 1
  • 15
  • 19
0

For angular2 to work on internet explorer you need to include shims package in your index.html

Download & Add the following script to your html:

<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>

Hope this helps.

Bhushan Gadekar
  • 13,485
  • 21
  • 82
  • 131