i18n is working

projects/ucap-webmessenger-app/src/assets/i18n/en.json

@@ -407,6 +407,10 @@
       "simpleView": "Simple View",
       "preview": "Preview"
     },
+    "languages": {
+      "ko": "Korean",
+      "en": "English"
+    },
     "timezone": {
       "Africa/Abidjan": "Africa/Abidjan",
       "Africa/Accra": "Africa/Accra",

projects/ucap-webmessenger-app/src/assets/i18n/ko.json

@@ -407,6 +407,10 @@
       "simpleView": "간략 보기",
       "preview": "미리 보기"
     },
+    "languages": {
+      "ko": "한국어",
+      "en": "영어"
+    },
     "timezone": {
       "Africa/Abidjan": "아프리카/아비 장",
       "Africa/Accra": "아프리카/아크라",

projects/ucap-webmessenger-ui-settings/src/lib/components/general.component.html

@@ -80,11 +80,11 @@
           [value]="setting.locale"
           (selectionChange)="onSelectionChangeLocale($event)"
         >
-          <mat-option value="ko">
+          <mat-option
-            한국어 (대한민국)
+            *ngFor="let language of languageList"
-          </mat-option>
+            [value]="language.name"
-          <mat-option value="en">
+          >
-            영어 (미국)
+            {{ language.displayName }}
           </mat-option>
         </mat-select>
       </mat-form-field>
@@ -99,11 +99,11 @@
           [value]="setting.hrInfoLocale"
           (selectionChange)="onSelectionChangeHrInfoLocale($event)"
         >
-          <mat-option value="ko">
+          <mat-option
-            한국어 (대한민국)
+            *ngFor="let language of languageList"
-          </mat-option>
+            [value]="language.name"
-          <mat-option value="en">
+          >
-            영어 (미국)
+            {{ language.displayName }}
           </mat-option>
         </mat-select>
       </mat-form-field>
@@ -111,7 +111,7 @@
 
     <mat-divider></mat-divider>
 
-    <h1 mat-subheader>시간대</h1>
+    <h1 mat-subheader>{{ 'settings.genernal.timezone' | translate }}</h1>
     <mat-list-item>
       <mat-form-field fxFlexFill>
         <mat-select

projects/ucap-webmessenger-ui-settings/src/lib/components/general.component.ts

@@ -29,6 +29,11 @@ export interface TimezoneData {
   name: string;
 }
 
+export interface LanguageData {
+  displayName: string;
+  name: string;
+}
+
 @Component({
   selector: 'ucap-settings-general',
   templateUrl: './general.component.html',
@@ -53,6 +58,15 @@ export class GeneralComponent implements OnInit, OnDestroy {
   // tslint:disable-next-line: variable-name
   _timezoneList: TimezoneData[];
 
+  get languageList(): LanguageData[] {
+    return this._languageList;
+  }
+  set languageList(languageList: LanguageData[]) {
+    this._languageList = languageList;
+  }
+  // tslint:disable-next-line: variable-name
+  _languageList: LanguageData[];
+
   langChangeSubscription: Subscription;
 
   constructor(
@@ -79,6 +93,7 @@ export class GeneralComponent implements OnInit, OnDestroy {
     this.themeTabGroup.selectedIndex = themeIndex;
 
     this.setTimezoneData();
+    this.setLanguageData();
 
     this.langChangeSubscription = merge(
       this.translateService.onLangChange,
@@ -86,6 +101,7 @@ export class GeneralComponent implements OnInit, OnDestroy {
       this.translateService.onTranslationChange
     ).subscribe(() => {
       this.setTimezoneData();
+      this.setLanguageData();
     });
   }
 
@@ -145,10 +161,8 @@ export class GeneralComponent implements OnInit, OnDestroy {
   }
 
   private setTimezoneData() {
-    this.translateService
+    const timezoneData = this.translateService.instant('common.timezone');
-      .get('common.timezone')
+
-      .pipe(take(1))
-      .subscribe(timezoneData => {
     let timezoneList: TimezoneData[] = [];
     for (const name of moment.tz.names()) {
       const displayName = `(UTC${moment.tz(name).format('Z')}) ${
@@ -164,6 +178,18 @@ export class GeneralComponent implements OnInit, OnDestroy {
     });
 
     this.timezoneList = timezoneList;
-      });
+  }
+
+  private setLanguageData() {
+    const languageData = this.translateService.instant('common.languages');
+
+    const languageList: LanguageData[] = [];
+    for (const key in languageData) {
+      if (languageData.hasOwnProperty(key)) {
+        languageList.push({ displayName: languageData[key], name: key });
+      }
+    }
+
+    this.languageList = languageList;
   }
 }