Angular 7| How to multi language in angular

Multi language in angular 7 là một phương pháp sử dụng đa ngôn ngữ cho lập trình web hiện nay, để một giao diện web phù hợp với người dùng,thì tính năng này không thể bỏ qua, với hiện nay mỗi trang web được phát hành không thể thiếu lựa chọn ngôn ngữ cho giao diện web.

Bước 1) Cài đặt thư viện @ngx-translate/core

npm i @ngx-translate/core

Bước 2) Thêm dữ liệu trong file component.module.ts

Đoạn code này load các file json trong assets.

export function translateHttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}

Thêm đoạn code dưới vào trong imports:

TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: translateHttpLoaderFactory,
        deps: [HttpClient]
      }
    })

Bước 3) Tạo một service LanguagService.ts

import { Injectable } from '@angular/core';
import { TranslateService, LangChangeEvent } from '@ngx-translate/core';
import { ReplaySubject } from 'rxjs';
import { take } from 'rxjs/operators';
@Injectable({ providedIn: 'root' })
export class LanguageService {
    language$ = new ReplaySubject<LangChangeEvent>(1);
    translate = this.translateService;
    // 國旗對照;

    constructor(private translateService: TranslateService) {}

    setInitState() {
      this.translateService.addLangs(['en', 'cn','vi']);
      console.log( 'Browser Lang', this.translate.getBrowserLang());
      const browserLang = (this.translate.getBrowserLang().includes('vi')) ? 'vi' : 'cn'  ;
      console.log("anhtt "," anguage  = " +browserLang);
 
      this.setLang(browserLang);
    }

    setLang(lang: string) {
      this.translateService.onLangChange.pipe(take(1)).subscribe(result => {
        this.language$.next(result);
      });
      this.translateService.use(lang);
 
    }
  }

Bước 4) Thực hiện các lựa chọn ngôn ngữ trong file app.component.html

<button (click)="selectLanguageEN()">English</button>
<button (click)="selectLanguageCN()">中國</button>
<button (click)="selectLanguageVI()">Viet Nam</button>

Bước 5) Chuyển đổi ngôn ngữ.

<h1>How to multi language in angular 7</h1>
<p >{{'content' |translate}}</p>
<h4 translate>
  {{'message' |translate}}
</h4>

Bạn có thể xem example multi language in angular online.