Good day all. This time I have planned to publish .NET 6.0 and Angular series of articles. In this series, I have planned to publish articles like
Introduction
In this article, we will see in detail how to get started with the .NET 6.0 and Standalone Angular Template for creating the Multi-Language website using the Angular NGX translate.
In this article, we will use our previous article .NET 6.0 and the Standalone Angular Template source to create our Admin Multi-Language website. Kindly read my previous article which explains very detailed step-by-step method 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 process of making the international product, service, brand and etc. to their local market by reaching with their local language.
We can see as any global service, brand or product and website success will be based on their Internationalization and localization.
For any business all the company owner’s dream will be is to extend their business, brand, product, service and etc. to many countries. To achieve this the company, need 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.
First step is making internationalization brands, product, service and 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 the localization will play the vital role as for any local people it's good to reach any brand, service or product by their local language. Think of a country who don’t speak English well and we introduce our brand to that country with English means the reach will be very less and the local people will not be interested to learn more about the product. For this what we need to make is to build strong local language documents and website to reach the local markets of that country.
We can see 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 more understandable to them.
In this article, we will see how to add the 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.
Prerequisites
- Visual Studio 2022
- Node.js – If you don’t have Node.js install Node.js (Download link).
- Angular CLI (Download link).
Visual Studio 2022
If you have not yet installed Visual Studio 2022 then you can download Visual studio 2022 from this link and install it on your computer.
Download and install Visual Studio 2022.
Note: The Community version is free for all and you can download the community version as if you don’t have the Installation Key, if you have the Installation key or have the MSDN subscription then you can download the Professional or Enterprise version.
As a Microsoft MVP, I have the MSDN subscription and I have installed the Professional version.
Code Part
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 that 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 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 an 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 3 different kind of ways to create our local language in the JSON file. The JSON file will be in 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 means very hard to maintain the JSON file.
Here I have added the example for 3 different language as Tamil, Korean and English
in.json {
"Welcome": "வணக்கம்! ஷானு"
}
kr.json {
"Welcome": "안녕하세요! 샤누"
}
en.json {
"Welcome": "Welcome! Shanu"
} // This is just a sample script. Paste your real code (javascript or HTML) here.
if ('this_is' == /an_example/) {
of_beautifier();
} else {
var a = b ? (c % d) : e[f];
}
Second way
The second way is very simple as in the key we give the name of the label along with some main unique id using the spearatoor 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 lablename
Here I have added the example for 3 different language 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 the 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 languages file for any easy changes. On our website we will follow this method of JSON file.
Here I have added the example for 3 different language 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-tranlater 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 TranslateServide 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 same as our JSON file name. Here we set the default language as the India 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 translations for both in Tamil and in Korean language after translating and added in the JSON files I have bind the translation to each component HTML pages.
Conclusion
Hope this article helps you to understand about getting 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 the Tamil and Korean language as this is only for demo purposes. When you make the website, cross check translated text with a good translator who is familiar with that local language.
Join the conversation! Your thoughts help the community grow.