Angular Content Localization Using ngx-translate

Step 3. Now let’s configure the TranslateModule for loading the assets. Switch to the directory of assets/i18n/.json files and then we can initialize the LanguageTranslationModule. The main point is we have to set the default language. Open the app.module.ts file and add the following code inside of it.

import { 
    NgModule 
} from '@angular/core';

import { 
    HttpClient 
} from '@angular/common/http';

// import ngx-translate and the http loader
import { 
    TranslateLoader, 
    TranslateModule, 
    TranslateService 
} from '@ngx-translate/core';

import { 
    TranslateHttpLoader 
} from '@ngx-translate/http-loader';

import { 
    CookieService 
} from 'ngx-cookie-service';

// ngx-translate - required for AOT compilation
export function HttpLoaderFactory(http: HttpClient) {
    return new TranslateHttpLoader(http);
}

@NgModule({
    declarations: [],
    imports: [
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: HttpLoaderFactory,
                deps: [HttpClient]
            }
        })
    ],
    exports: [
        TranslateModule
    ],
})
export class LanguageTranslationModule {
    constructor(private _cookieService: CookieService, private translate: TranslateService) {
        // Gets Default language from browser if available, otherwise set English as default
        let lang = "en";
        if (this._cookieService.get('languages') !== null && this._cookieService.get('languages') !== undefined) {
            if (this._cookieService.get('languages') === 'es') {
                lang = "es";
            }
        }
        this.translate.addLangs(['en', 'es']);
        this.translate.setDefaultLang(lang);
        // const browserLang = this.translate.getBrowserLang();
        this.translate.use(lang);
    }
}

We can see that we have used the CookieService to set the default language, thus it will be stored in the cookie and there is one more step to proceed. We can also set up ngx-translate for working with AOT and for that open app.component.ts and place the following code inside of it.

import { 
    Component, 
    OnInit 
} from '@angular/core';

import { 
    CookieService 
} from 'ngx-cookie-service';

import { 
    TranslateService 
} from '@ngx-translate/core';

@Component({
    selector: 'app-component',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
    constructor(private _cookieService: CookieService, private translate: TranslateService) {}

    ngOnInit() {}

    changeLang(language: string) {
        this.translate.use(language);
        this._cookieService.set('languages', language, 1000000);
    }
}

In addition to that we can use TranslationService if we need to localize the content in the component page. ChangeLang function is used to store the language and change the language in JSON files like en.json to es.json.

It means the language will be changed from English to Spanish at the language switching and it is stored in cookies.

We can also use TranslatePipe in HTML files for translating the content, we can use TranslatePipe like the following.

<h6>{{ 'lbl-country-name1' | translate }}</h6>

Here we are in the last stage of the process, open the app.component.html file and replace the following code inside of it.

<h4 class="text-center">Language Selection</h4>

<div class="row cursorpoint">
    <div class="col-xs-12 col-lg-6 text-center">
        <div class="input-effect">
            <div (click)="changeLang('en')">{{ 'English' | translate }}</div>
        </div>
    </div>
    <div class="col-xs-12 col-lg-6 text-center">
        <div class="input-effect">
            <div (click)="changeLang('es')">{{ 'Spanish' | translate }}</div>
        </div>
    </div>
</div>

<div class="text-center">
    <h6>{{ 'lbl-country-name1' | translate }}</h6>
    <h6>{{ 'lbl-country-name2' | translate }}</h6>
    <h6>{{ 'lbl-country-name3' | translate }}</h6>
    <h6>{{ 'lbl-country-name4' | translate }}</h6>
    <h6>{{ 'lbl-country-name5' | translate }}</h6>
    <h6>{{ 'lbl-country-name6' | translate }}</h6>
    <h6>{{ 'lbl-country-name7' | translate }}</h6>
    <h6>{{ 'lbl-country-name8' | translate }}</h6>
    <h6>{{ 'lbl-country-name9' | translate }}</h6>
    <h6>{{ 'lbl-country-name10' | translate }}</h6>
</div>

Now it’s time to wrap all the things up. Yay! We can run our Angular application now and we can see the following output. Use the following code for compiling the application and view the output in the browser.

ng serve --open

I hope this article will be useful for you and do comment below if you have any queries so that I can share my knowledge with you and improve my article's word flow. Thanks for reading.