How To Get Current Language With Ngx Translate In Angular2

One common requirement in web development projects is to provide multilingual support to cater to a diverse audience. Angular 2, a popular front-end framework, offers an easy way to implement multilingual features using ngx-translate. In this guide, we'll walk you through how to get the current language with ngx-translate in an Angular 2 application.

The ngx-translate library simplifies the process of adding internationalization (i18n) and localization (l10n) capabilities to your Angular application. It allows you to define translations for different languages and switch between them based on user preferences or system settings.

To get started, make sure you have ngx-translate installed in your Angular 2 project. You can add it to your project using npm or yarn by running the following command:

npm install @ngx-translate/core @ngx-translate/http-loader --save

Next, you need to configure the translation module in your Angular application. First, import the necessary modules in your app module (usually app.module.ts), as shown below:

import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { HttpClientModule, HttpClient } from '@angular/common/http';

export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

@NgModule({
  imports: [
    // Other imports
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: createTranslateLoader,
        deps: [HttpClient]
      }
    })
  ],
  // Other module configurations
})
export class AppModule { }

In the code snippet above, we define a translation loader that will load translation files from the specified directory ('./assets/i18n/') with a JSON extension. You can adjust the path and file format based on your project structure and requirements.

Now that ngx-translate is set up in your Angular project, you can easily access the current language in your components or services. The current language is stored in the TranslateService provided by ngx-translate.

To retrieve the current language in your component, you can inject the TranslateService and call the currentLang property. Here's an example:

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

@Component({
  selector: 'app-my-component',
  template: `
    <p>Current Language: {{ currentLanguage }}</p>
  `
})
export class MyComponent {
  currentLanguage: string;

  constructor(private translate: TranslateService) {
    this.currentLanguage = this.translate.currentLang;
  }
}

In the code snippet above, we inject the TranslateService into the component and assign the value of currentLang to the currentLanguage property, which can be used in the template to display the current language.

By following these steps, you can easily retrieve the current language with ngx-translate in your Angular 2 application, making it more accessible and user-friendly for a global audience. Feel free to explore further customization options offered by ngx-translate to enhance your multilingual web application.