Top

Angular Documentation

Multikart offers stunning and one-of-a-kind website demos tailored to your grocery, bakery, and online store needs. With Multikart, you'll find everything you require to craft the ideal website for your business. Multikart - your all-in-one solution!

Multi-Language Support

Considering that there will be users from multiple different countries, you might need to add the support for multiple help you with that, we have made the template compatible with the multiple language functionality.

You can find the dropdown that changes the language in the header.

How does multi-language functionality works?

We have used the packages @ngx-translate/core and @ngx-translate/http-loader, you can install it by running the following commands in the terminal.

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

You will find language translator logic and design at below given path:

src ==> app ==> shared ==> components ==> header ==> widgets ==>language

Implementing Language Translate Feature

After you finished installing above mentioned packages in your project, follow the below given steps to add the multi-language support.

languages.components.html

Our Html component for language translate will look like this


<div (clickOutside)="hideDropdown()">
  <app-button [class]="'btn dropdown-toggle'" [type]="'button'" [id]="'open_dropdown_basic_btn'" [spinner]="false" (click)="openDropDown()">
    <span>
      <div class="iti-flag {{ selectedLanguage.icon }}"></div> {{ selectedLanguage.language }}
    </span>
  </app-button>
  <ul class="dropdown-menu dropdown-menu-end language-dropdown" [class.show]="active">
    @for(language of languages; track language){
      <li>
        <a href="javascript:void(0)" class="dropdown-item" (click)="selectLanguage(language)" [class.active]="language.code == selectedLanguage.code">
          <div class="iti-flag {{ language.icon }}"></div>
          {{ language.language }}
        </a>
      </li>
    }
  </ul>
</div>
languages.components.ts

Language change logic and configuration:


import { isPlatformBrowser } from '@angular/common';
import { Component, Inject, PLATFORM_ID } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { ClickOutsideDirective } from '../../../../directive/outside.directive';
import { languages } from '../../../../interface/theme-option.interface';
import { ButtonComponent } from '../../../widgets/button/button.component';

@Component({
  selector: 'app-language',
  standalone: true,
  imports: [ButtonComponent, ClickOutsideDirective],
  templateUrl: './language.component.html',
  styleUrl: './language.component.scss'
})
export class LanguageComponent {

  public active: boolean = false;
  public languages: languages[] = [
    {
      language: 'English',
      code: 'en',
      icon: 'us'
    },
    {
      language: 'Français',
      code: 'fr',
      icon: 'fr'
    }, // Add More Language
  ]

  public selectedLanguage: languages = {
    language: 'English',
    code: 'en',
    icon: 'us'
  }

  constructor(private translate: TranslateService, @Inject(PLATFORM_ID) private platformId: Object) { }

  ngOnInit() {
    if (isPlatformBrowser(this.platformId)) {
      let language = localStorage.getItem("language");

      if (language == null) {
        localStorage.setItem("language", JSON.stringify(this.selectedLanguage));
        this.translate.use(this.selectedLanguage.code);
      } else {
        this.selectedLanguage = JSON.parse(language);
        this.translate.use(this.selectedLanguage.code);
      }
    }
  }

  openDropDown() {
    this.active = !this.active;
  }

  hideDropdown() {
    this.active = false;
  }

  selectLanguage(language: languages) {
    this.active = false;
    this.translate.use(language.code);
    this.selectedLanguage = language;
    localStorage.setItem("language", JSON.stringify(this.selectedLanguage));
  }
}

JSON files for different languages

JSON files for different languages

To translate words we have to provide the translation for each word, that we will do in a json file.

languages JSON for english Language en.json 
{
  "loading": "Loading",
  "login": "Login",
  "email": "Email",
  "email_is_required": "Email Is Required",
  "invalid_email": "Invalid Email",
}
languages JSON for french Language fr.json 
{
  "loading": "Chargement",
  "login": "Se connecter",
  "email": "E-mail",
  "email_is_required": "L'e-mail est requis",
  "invalid_email": "Email invalide",
}

Now We just need to configure the settings for language change in our app.config.ts file. Add the following code in your app.config.ts file. 

{
import { ApplicationConfig, importProvidersFrom } from '@angular/core';
import { provideRouter } from '@angular/router';

import { HttpClient, HttpClientModule } from '@angular/common/http';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { routes } from './app.routes';

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

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    importProvidersFrom(
      BrowserModule,
      HttpClientModule,
      BrowserAnimationsModule,
      TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient],
      },
      defaultLanguage: 'en'
    }),
    )
  ]
};
}

For Example:

Use a variable as follows:

<h4>{{  some_variable | translate }}</h4>

Warning: Make sure that if you are using a variable then you have added the translation for every word possible in that variable in the json file.