find and solve || findandsolve.com
Please wait.....

Globalization and Localization using angular | angular i18n | angular i18n dynamic | localization in angular 9

Download source code from here
Globalization and Localization using angular |  angular i18n | angular i18n dynamic | localization in angular 9

What is Internationalization (i18n) and how to use it?


Application internationalization is a many-faceted area of development, focused on making applications available and user-friendly to a worldwide audience. This page describes Angular's internationalization (i18n) tools, which can help you make your app available in multiple languages.

Angular and i18n

Internationalization is the process of designing and preparing your app to be usable in different languages. Localization is the process of translating your internationalized app into specific languages for particular locales.

Angular simplifies the following aspects of internationalization:

  • Displaying dates, number, percentages, and currencies in a local format.
  • Preparing text in component templates for translation.
  • Handling plural forms of words.
  • Handling alternative text.

We are going to implementh multi language example step by step using angular and i18n

Step 1.
Create a new Angular project "LocalizationExampleInAngular" with the Angular CLI to establish a common base:
When create new angular project LocalizationExampleInAngular will be display as given below




Step 2.
First install i18n from command line.For more details https://angular.io/guide/i18n 

How to install i18n from command line?Let's see how to install i18n in our project

Right click your project LocalizationExampleInAngular> Open Folder in File Explorer and Click this menu.After that you can see your project path. After that Click on "File" menu from the right top menu , then select “Open Windows PowerShell” from Menu List under File Menu and Press OK. 

Now, Windows PowerShell will be Opened. You can see the Windows PowerShell as shown in the given below image.
 

How to add angular-editor in asp.net core application step by step
 


 Type  "npm install @ngx-translate/core" Windows PawerShell and Enter.
 After that also intall "@ngx-translate/http-loader".This is use for loding

Step 3.

Open your "app.module.ts" file and past this code.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

@NgModule({
  declarations: [
    AppComponent,
    NavMenuComponent,
    HomeComponent,
    CounterComponent,
    FetchDataComponent
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
    HttpClientModule,
    FormsModule,
    RouterModule.forRoot([
      { path: '', component: HomeComponent, pathMatch: 'full' },
      { path: 'counter', component: CounterComponent },
      { path: 'fetch-data', component: FetchDataComponent },
    ]),
  TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}


Step 4.
I have Added 3 language for this artical 

1.Englis-  denoted by "en" this is default language
2.Hindi - denoted by "hi"
3.Nepali -denoted by "ne"

You can add many more language like that.we are trying display 3 language in this artical

1.Add New Folder "i18n" under "assets" folder  which is collected  multiple language list by json formate.
2.Right click on "i18n" and add  new json file,replace file name as "en.json". This is default language.
3.Open  "en.json" and past this code

{
  "HomeWork": "Home Work",
  "Man": "Man",
  "You": "You"
}

4.Right click on "i18n" and add  new json file,replace file name as "ne.json". This is nepali language library list.
Open "ne.json" and past this code


 {
  "HomeWork": "गृहकार्य",
  "Man": "मानिस",
  "You": "तपाईं"
}


5.Right click on "i18n" and add  new json file,replace file name as "hi.json". This is Hindi language library list.


 {
  "HomeWork": "घर का पाठ",
  "Man": "आदमी",
  "You": "आप"
}




Step 5.

Call this multi language list from view page.So open  "app.component.html" under app folder and past this code as given below

<body>
  <app-nav-menu></app-nav-menu>
  <div class="container">
    <!--The content below is only a placeholder and can be replaced.-->
    <div class="bg-dark" style="text-align:center;color: #fff">
      <h2 class="navbar-brand ">
        Welcome to {{ title }}!
      </h2>
      <select #langSelect (change)="changeLang(langSelect.value)">
        <option *ngFor="let lang of translate.getLangs()" [value]="lang" [selected]="lang === translate.currentLang">{{ lang }}</option>
      </select>
    </div>
    <div class="row">
      <div class="col-md-12">
       
        <ul class="list-group">
          <li class="list-group-item"><a [routerLink]="['/']">{{ 'HomeWork' | translate }}</a></li>
          <li class="list-group-item"><a [routerLink]="['/']">{{ 'Man' | translate }}</a></li>
          <li class="list-group-item"><a [routerLink]="['/']">{{ 'You' | translate }}</a></li>
        </ul>
      </div>
      <div class="col-md-8">
        <router-outlet></router-outlet>
      </div>
    </div>

    <router-outlet></router-outlet>
  </div>
</body>


Step 6.

Open "app.component.ts" under app  file and past this code


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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'MultilanguageApp';
  constructor(
    public translate: TranslateService) {
    translate.addLangs(['en', 'ne', 'hi']);
    if (localStorage.getItem('locale')) {
      const browserLang = localStorage.getItem('locale');
      translate.use(browserLang.match(/en|ne|hi/) ? browserLang : 'en');
    } else {
      localStorage.setItem('locale', 'en');
      translate.setDefaultLang('en');
    }
  }
  changeLang(language: string) {
    localStorage.setItem('locale', language);
    this.translate.use(language);
  }
}


Sundar  Neupane

Sundar Neupane

I like working on projects with a team that cares about creating beautiful and usable interfaces.

If findandsolve.com felt valuable to you, feel free to share it.

Comments



Report Response