Easy to Learn .NET 6.0 and Angular - Getting Started Multi Language – Part 4

• Download source code - 6 MB

Introduction

All this time, I planned to publish .NET 6.0 and Angular series of articles. In this series, I have planned to publish articles like:

• Easy to learn .NET 6.0 and Angular - Getting Started Angular Template – Part 1
• Easy to learn .NET 6.0 and Angular - Getting Started Angular Standalone Template – Part 2
• Easy to learn .NET 6.0 and Angular - Getting Started Admin LTE Design – Part 3
• Easy to learn .NET 6.0 and Angular - Getting Started Multi Language – Part 4
• Easy to learn .NET 6.0 and Angular - Getting Started Publish to IIS – Part 5
• Easy to learn .NET 6.0 and Angular - Getting Started WEB API – Part 6
• Easy to learn .NET 6.0 and Angular - Getting Started WEB API CRUD SQL SERVER – Part 7

In this article, we will see in detail how to getting started with .NET 6.0 and Standalone Angular Template for creating a Multi Language website using Angular NGX translate.

In this article, we will use our previous article .NET 6.0 and Standalone Angular Template source to create our Admin Multi Language website. Kindly read my previous article which explains in a very detailed step by step manner how to getting started .NET 6.0 and Standalone Angular for working with Admin LTE for creating our admin style website.

Internationalization and Localization

Internationalization (i18n -> is the abbreviation of Internationalization) is nothing but a process of making any product, service, brand or etch to international that is extending any business to establish in many countries. Localization (L10n -> is the abbreviation of Localization) is the process of making the international product, service, brand, etc. to their local market by reaching with their local language.

We can see as any global service, brand or product and their website success will be based on their Internationalization and localizations.

For any business, the company owner’s dream will be is to extend his/her business, brand, product, service, etc. to many countries. To achieve this, the company needs to think design, develop and market the brand, service, product, etc. To make it possible, strong Internationalization will be needed to make any good brand and make stable in the global market.

The first step is making internationalization brands, product, service, etc., so what is the next step. Yes, the next important step will be how to market this brand, product, service etc. to each country and to the local market. Here, localization will play a vital role as for any local people, it's good to reach any brand, service or product by their local language. Imagine a country where English is not well-spoken and we introduce our brand to that country in English - this means the reach will be minimal and the local people will not be interested in learning more about the product. For this, what we need is to make it build strong local language documents and website to reach the local markets of that country.

We can see as all the standard and global service, product, brand website as very good and standard multi language websites. The multi-language will also be useful and more user friendly for the local customers and users of that using country which makes it more understandable for them.

In this article, we will see how to add Localization and steps to creating multi language website using .NET 6 and Angular. Here, we will be using Angular ngx-translate to translate the language.

Background

Prerequisites

• Visual Studio 2022
• Node.js – If you don’t have Node.js, install Node.js (download link).
• Angular CLI (download link).

Using the Code

Note: We will be using our previous article source to create our multi language admin website .NET 6.0 and Angular Standalone Template Project.

Step 1: Installing ngx-translate

As the first step, we install the ngx-translate to our .NET 6 and Angular project.

Here, we can see as we need to install two packages as @ngx-translate/core and @ngx-translate/http-loader to our project as the translate/core packages will be used to convert our website contents to the selected language. @ngx-translate/http-loader this package installation will be useful to load our local language file for translation.

npm i @ngx-translate/core –save

npm i @ngx-translate/http-loader --save

Step 2: Creating our International Language Folder

We need to create a new folder named as i18n under our assets folder. For creating our local language translation file here, we need to add the json file inside the i18n folder.

Note that as for the json file, we create the file name with the country code as example if we create a English language json file, then we make the file as en.json and if we create the Korean language json file then we make the json file name as kr.json and if we add the Indian language file, then we make the json file as in.json.

Step 3: Language json File

Now we have three different kinds of ways to create our local language in the json file.The json file will be as key and value pairs format .

First Way

First way is very simple as in key, we give the name of the label and in value, we give the translation text. This is not a very good way as if we add more pages and the translation contents are more, it means it is very hard to maintain the json file.

Here, I have added the example for three different languages as Tamil, Korean and English.

in.json

{
  "Welcome": "வணக்கம்! ஷானு"
}

 kr.json

{
  "Welcome": "안녕하세요! 샤누"
}

en.json

{
  "Welcome": "Welcome! Shanu"
}

Second Way

The second way is very simple as in key, we give the name of the label along with some main unique id using the spearator as dot and in value, we give the translation text. This method is better than the first method as we can give our pagename and labelname.

Here, I have added the example for three different languages as Tamil, Korean and English.

in.json

{
  "navbar.Welcome": "வணக்கம்! ஷானு"
}

kr.json

{
  "navbar.Welcome": "안녕하세요! 샤누"
}

en.json

{
  "navbar.Welcome": "Welcome! Shanu"
}

Third Way

This third way is the very best one as in key, we give the name of the label and in value, we give the translation text and we can group the language translation with the menu or page name for easy access and maintaining the language file for any easy changes. On our web site, we will follow this method of json file.

Here, I have added the example for three different languages as Tamil, Korean and English.

in.json

"navbar": {
    "Welcome": " வணக்கம்! ஷானு "
}
}

kr.json

"navbar": {
{
  "Welcome": "안녕하세요! 샤누"
}
}

en.json

"navbar": {
{
  "Welcome": "Welcome! Shanu"
}
}

Step 4: app.module

Next, we need to import the recently installed ngx-translater for loading the json file and for using the translation pipe, service and directives in our Angular application. Also, here we use the HttpLoaderFactory to load our language json file dynamically from the folder.

import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    }),

// AoT requires an exported function for factories
export function HttpLoaderFactory(httpClienst: HttpClient) {
  /*return new TranslateHttpLoader(httpClient);*/
  return new TranslateHttpLoader(httpClienst , './assets/i18n/', '.json');
}

Step 4: app.component

Next in the app.component, here we import the TranslateService and then in the class in constructor using the translateService, we add all the languages used in our website and also we set the default language which we used for our website. Note as here the addLangs, we add the language which is the same as our json file name. Here, we set the default language as the Indian Tamil Language.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'AngularStandAlone';
  constructor(public translateService: TranslateService) {
    translateService.addLangs(['in', 'kr', 'en']);
    translateService.setDefaultLang('in');
    this.translateService.use('in');
  }
}

Step 5: Binding Translation in Component

Now let’s bind our translation to our Angular components. Here, we are using the angular pipe method to bind the translation text to our components. For this, open our navbar component and in the welcome message, replace the below code:

{{'navbar.Welcome' | translate}}   

Step 6: Changing Language

For changing language in the same navbar component html page, we call the translateSite method and pass each country code as in for Indian Tamil language, kr for Korean language and en for the English language:

<div class="dropdown-menu dropdown-menu-lg-right dropdown-menu-right" 
     style="max-width: 20px;width:20px">
        <a href="#" class="dropdown-item">
          <!-- Message Start -->
          <div class="media" (click)="translateSite('in')" >
            <img src="../../../../assets/Content/SiteImg/IND.png" 
             alt="Korean" class="img-size-32 mr-lg-4 img-circle" 
             style="height:24px;width:24px;">
            <div class="media-body">
              <h3 class="dropdown-item-title">
                India - Tamil
              </h3>
            </div>
          </div>
          <!-- Message End -->
        </a>
        <div class="dropdown-divider"></div>
        <a href="#" class="dropdown-item">
          <!-- Message Start -->
          <div class="media" (click)="translateSite('kr')">
            <img src="../../../../assets/Content/SiteImg/KOR.png" alt="Korean" 
            class="img-size-32 mr-lg-4 img-circle" style="height:24px;width:24px;">
            <div class="media-body">
              <h3 class="dropdown-item-title">
                KOREA
              </h3>
            </div>
          </div>
          <!-- Message End -->
        </a>
        <div class="dropdown-divider"></div>
        <a href="#" class="dropdown-item ">
          <!-- Message Start -->
          <div class="media" (click)="translateSite('en')">
            <img src="../../../../assets/Content/SiteImg/ENG.png" 
            alt="English" class="img-size-32 mr-lg-4 img-circle" 
            style="height:24px;width:24px;">
            <div class="media-body">
              <h3 class="dropdown-item-title ">
                ENGLISH
              </h3>
            </div>

          </div>
          <!-- Message End -->
        </a>
      </div>

In the navbar component, first, we import the TranslateService and in the class constructor. Next, we create the translateSite method which we used in our html page to send the country code and using the translateService method we set the language.

import { Component, Inject } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html'
})
export class NavBarComponent {
  constructor(public translateService: TranslateService) { 
  }

  translateSite(langauge: string) {
    this.translateService.use(langauge);
  }
} 

Step 8: Build and Run

Now it’s time to see our multi language functionality in our Admin website. When we run the application, we can see as the translated language has been shown in our admin website.

Here for our admin website, I have made all the translation for both in Tamil and in Korean language after translating and added in the json files, I have binded the translation to each component HTML pages.

Points of Interest

Hope this article helps you to understand how to get started with ASP.NET Core and Angular Standalone project using Visual Studio 2022 for designing multi language web application. Note here I just used the Google translation to translate both Tamil and Korean language as this is only for demo purposes, when you make the website cross check translated text with some good translators who are familiar with that local language.

History

• 27^th June, 2022: Initial version