(Toolbar) Set the selected the language from the translation service

This commit is contained in:
Sercan Yemen 2018-05-15 13:52:01 +03:00
parent 7580176042
commit 832a08208a
2 changed files with 20 additions and 16 deletions

View File

@ -73,11 +73,11 @@
<mat-menu #languageMenu="matMenu" [overlapTrigger]="false">
<button mat-menu-item *ngFor="let lang of languages" (click)="setLanguage(lang)">
<div fxLayout="row" fxLayoutAlign="start center">
<button mat-menu-item *ngFor="let lang of languages" (click)="setLanguage(lang.id)">
<span fxLayout="row" fxLayoutAlign="start center">
<img class="flag mr-16" [src]="'assets/images/flags/'+lang.flag+'.png'">
<span class="iso">{{lang.title}}</span>
</div>
</span>
</button>
<button mat-menu-item [routerLink]="'/components/multi-language'">

View File

@ -1,6 +1,7 @@
import { Component } from '@angular/core';
import { Component, OnInit } from '@angular/core';
import { NavigationEnd, NavigationStart, Router } from '@angular/router';
import { TranslateService } from '@ngx-translate/core';
import * as _ from 'lodash';
import { FuseConfigService } from '@fuse/services/config.service';
import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
@ -13,7 +14,7 @@ import { navigation } from 'app/navigation/navigation';
styleUrls : ['./toolbar.component.scss']
})
export class FuseToolbarComponent
export class FuseToolbarComponent implements OnInit
{
userStatusOptions: any[];
languages: any;
@ -60,19 +61,17 @@ export class FuseToolbarComponent
this.languages = [
{
'id' : 'en',
'title': 'English',
'flag' : 'us'
id : 'en',
title: 'English',
flag : 'us'
},
{
'id' : 'tr',
'title': 'Turkish',
'flag' : 'tr'
id : 'tr',
title: 'Turkish',
flag : 'tr'
}
];
this.selectedLanguage = this.languages[0];
router.events.subscribe(
(event) => {
if ( event instanceof NavigationStart )
@ -93,6 +92,11 @@ export class FuseToolbarComponent
this.navigation = navigation;
}
ngOnInit()
{
this.selectedLanguage = _.find(this.languages, {'id': this.translate.currentLang});
}
toggleSidebarOpened(key)
{
this.sidebarService.getSidebar(key).toggleOpen();
@ -104,12 +108,12 @@ export class FuseToolbarComponent
console.log(value);
}
setLanguage(lang)
setLanguage(langId)
{
// Set the selected language for toolbar
this.selectedLanguage = lang;
this.selectedLanguage = _.find(this.languages, {'id': langId});
// Use the selected language for translations
this.translate.use(lang.id);
this.translate.use(langId);
}
}