Add email field to Client

src/app/shared/language-selector/language-selector.component.html

@@ -1,6 +1,6 @@
 <mat-form-field id="language-selector">
   <mat-label>Language</mat-label>
-  <mat-select [formControl]="languageSelector">
+  <mat-select [formControl]="languageSelector" (selectionChange)="setLanguage()" class="languageselector">
     <mat-option *ngFor="let language of languages" [value]="language">
       {{ language }}
     </mat-option>

src/app/shared/language-selector/language-selector.component.scss

@@ -1,3 +1,4 @@
-#language-selector {
-  max-width: 4rem;
+#language-selector,
+.languageselector {
+  max-width: 6rem;
 }

src/app/shared/language-selector/language-selector.component.ts

@@ -3,7 +3,8 @@ import { Component, OnInit } from '@angular/core';
 import { FormControl } from '@angular/forms';
 
 /** Custom Services */
-import { I18nService } from '../../core/i18n/i18n.service';
+import { TranslateService } from '@ngx-translate/core';
+import { SettingsService } from 'app/settings/settings.service';
 
 /**
  * Language selector component.
@@ -25,9 +26,9 @@ export class LanguageSelectorComponent implements OnInit {
    * Sets the language of the application in the selector on initial setup.
    * @param {I18nService} i18nService Internationalization Service.
    */
-  constructor(private i18nService: I18nService) {
+   constructor(private translate: TranslateService,
+    private settingsService: SettingsService) {
     this.languageSelector.setValue(this.currentLanguage);
-    this.languageSelector.valueChanges.subscribe( language => this.setLanguage(language) );
   }
 
   ngOnInit() {
@@ -37,8 +38,9 @@ export class LanguageSelectorComponent implements OnInit {
    * Sets a new language to be used by the application.
    * @param {string} language New language.
    */
-  setLanguage(language: string) {
-    this.i18nService.language = language;
+   setLanguage() {
+    this.translate.use(this.languageSelector.value);
+    this.settingsService.setLanguage({ name: '', code: this.languageSelector.value.substring(0, 2) });
   }
 
   /**
@@ -46,7 +48,7 @@ export class LanguageSelectorComponent implements OnInit {
    * @returns {string} Current language.
    */
   get currentLanguage(): string {
-    return this.i18nService.language;
+    return this.translate.currentLang;
   }
 
   /**
@@ -54,7 +56,7 @@ export class LanguageSelectorComponent implements OnInit {
    * @return {string[]} Supported languages.
    */
   get languages(): string[] {
-    return this.i18nService.supportedLanguages;
+    return this.translate.getLangs();
   }
 
 }