(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"> <mat-menu #languageMenu="matMenu" [overlapTrigger]="false">
<button mat-menu-item *ngFor="let lang of languages" (click)="setLanguage(lang)"> <button mat-menu-item *ngFor="let lang of languages" (click)="setLanguage(lang.id)">
<div fxLayout="row" fxLayoutAlign="start center"> <span fxLayout="row" fxLayoutAlign="start center">
<img class="flag mr-16" [src]="'assets/images/flags/'+lang.flag+'.png'"> <img class="flag mr-16" [src]="'assets/images/flags/'+lang.flag+'.png'">
<span class="iso">{{lang.title}}</span> <span class="iso">{{lang.title}}</span>
</div> </span>
</button> </button>
<button mat-menu-item [routerLink]="'/components/multi-language'"> <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 { NavigationEnd, NavigationStart, Router } from '@angular/router';
import { TranslateService } from '@ngx-translate/core'; import { TranslateService } from '@ngx-translate/core';
import * as _ from 'lodash';
import { FuseConfigService } from '@fuse/services/config.service'; import { FuseConfigService } from '@fuse/services/config.service';
import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service'; import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
@ -13,7 +14,7 @@ import { navigation } from 'app/navigation/navigation';
styleUrls : ['./toolbar.component.scss'] styleUrls : ['./toolbar.component.scss']
}) })
export class FuseToolbarComponent export class FuseToolbarComponent implements OnInit
{ {
userStatusOptions: any[]; userStatusOptions: any[];
languages: any; languages: any;
@ -60,19 +61,17 @@ export class FuseToolbarComponent
this.languages = [ this.languages = [
{ {
'id' : 'en', id : 'en',
'title': 'English', title: 'English',
'flag' : 'us' flag : 'us'
}, },
{ {
'id' : 'tr', id : 'tr',
'title': 'Turkish', title: 'Turkish',
'flag' : 'tr' flag : 'tr'
} }
]; ];
this.selectedLanguage = this.languages[0];
router.events.subscribe( router.events.subscribe(
(event) => { (event) => {
if ( event instanceof NavigationStart ) if ( event instanceof NavigationStart )
@ -93,6 +92,11 @@ export class FuseToolbarComponent
this.navigation = navigation; this.navigation = navigation;
} }
ngOnInit()
{
this.selectedLanguage = _.find(this.languages, {'id': this.translate.currentLang});
}
toggleSidebarOpened(key) toggleSidebarOpened(key)
{ {
this.sidebarService.getSidebar(key).toggleOpen(); this.sidebarService.getSidebar(key).toggleOpen();
@ -104,12 +108,12 @@ export class FuseToolbarComponent
console.log(value); console.log(value);
} }
setLanguage(lang) setLanguage(langId)
{ {
// Set the selected language for toolbar // Set the selected language for toolbar
this.selectedLanguage = lang; this.selectedLanguage = _.find(this.languages, {'id': langId});
// Use the selected language for translations // Use the selected language for translations
this.translate.use(lang.id); this.translate.use(langId);
} }
} }