How to multi language in angular using ngx-translate

Hiện nay chúng ta sử dụng đa ngôn ngữ để xây dụng những trang web chứa thông tin bằng nhiều thứ tiếng khác nhau, vì thế để phát triển được một website đa ngôn ngữ trong anguar chúng ta phải cài đặt và phát triển libary ngx-translate in angular.
Chúng ta có thể làm một ví dụ nhỏ về multi language in angular sau đó có thể áp dụng vào dự án thực tế, để làm được các bạn hãy tham khảo bài viết dưới đây.

Nội dung

1.  Cài đặt Angular CLI 
2.  Tạo một Projiect 
3.  Add thư viện trong project
4.  Thiết lập chương trình
5.  Test project
6.  Ví dụ

 I. Cài đặt Angular CLI

 Để code được những chương trình bằng ngôn ngữ angular, bước đầu tiên chúng ta cần làm là việc thiết lập môi trường làm việc và cài đặt công cụ. Sử dụng câu lệnh dưới đây để thực hiện việc đó.

  npm install -g @angular/cli

II. Tạo project multi language

  Bước tiếp theo là chúng ta tạo một project để làm việc, sau đây là câu lệnh để thực hiện nó, các bạn hãy mở cmd lên và chuyển đến thư mực các bạn cần lưu project.

  ng new demoMulti

III. Import libary ngx-translate

  Bước tiếp theo này khá quan trọng, trong việc bạn muốn trang web của bạn có thể sử dụng multi language, thì các bạn phải import thư việc mà nguồn mở này vào trong project của bạn đang làm bằng câu lệnh sau đây.

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

IV. Thiết lập chương trình.

   1. Thiết lập trong file app.module.ts

   Trong file này chúng ta phải import TranslateModule và thực hiện function translateHttpLoaderFactory
 

import { HttpClientModule, HttpClient } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
export function translateHttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: translateHttpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})

2. Tạo ra các file json

Giờ đây các bạn hãy thiết lập ngôn ngữ tại các file json, để làm được điều này các bạn hãy thực hiện bằng tay, các bạn hãy vào thư mực assets tạo ra một folder i18n sau đó các bạn ta ra những file json.
Sau đây là những kí tự để hiểu các ngôn ngữ mỗi nước.
   en.json   =  English
   cn.json =  China
   vn.json = Việt name
   .....
Mình sẽ giới thiệu sơ qua những ngôn ngữ này thôi,còn có rất nhiều ngôn ngữ khác các bạn có thể tham khảo trên mạng.
Để tạo được ngôn ngữ tiếng anh (English) src/assets/i18n/en.json

{
  "Title": "Translation demo",
  "WelcomeMessage": "Welcome to the international demo application"
}

Ngôn ngữ tiếng trung( china) src/assets/i18n/cn.json

{
  "Title": "翻译演示",
  "WelcomeMessage": "欢迎来到国际演示应用程序"
}

Ngôn ngữ tiếng việt src/assets/i18n/vn.json

{
  "Title": "Trình bày bản dịch",
  "WelcomeMessage": "Chào mừng bạn đến với ứng dụng demo quốc tế"
}

3. Thiết lập trong file app.component.html

<h1 translate>Title</h1>
<div translate>WelcomeMessage</div>
<div style="text-align:center">
  <h1 translate>Title</h1>
  <h6 translate>WelcomeMessage</h6>
  <button (click)="switchLanguage('en')">English</button>
  <button (click)="switchLanguage('es')">Spanish</button>
</div>

4. Thiết lập select language in file app.component.ts

import { TranslateService } from '@ngx-translate/core'
constructor(private translateService: TranslateService) {
  translateService.setDefaultLang('en');
}
switchLanguage(language: string) {
  this.translateService.use(language);
}

V. Test project

VI. Ví dụ