#17 Added ng2-translate plugin

demo-shell-ng2/app/app.component.html

@@ -61,6 +61,17 @@
                 <a class="mdl-navigation__link" href="" [routerLink]="['Login']">Login</a>
             </nav>
             <!-- Right aligned menu below button -->
+            <button id="demo-menu-language-right"
+                    class="mdl-button mdl-js-button mdl-button--icon">
+                <i class="material-icons">Language</i>
+            </button>
+
+            <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
+                for="demo-menu-language-right">
+                <li class="mdl-menu__item" (click)="changeLanguage('en')">En</li>
+                <li class="mdl-menu__item" (click)="changeLanguage('it')">Ita</li>
+            </ul>
+            <!-- Right aligned menu below button -->
             <button id="demo-menu-lower-right"
                     class="mdl-button mdl-js-button mdl-button--icon">
                 <i class="material-icons">more_vert</i>

demo-shell-ng2/app/app.component.ts

@@ -23,13 +23,15 @@ import {Login} from 'ng2-alfresco-login/ng2-alfresco-login';
 import {AuthRouterOutlet} from './components/router/AuthRouterOutlet';
 import {UploaderComponent} from './components/uploader/uploader.component';
 import {AlfrescoSettingsService} from 'ng2-alfresco-core/services';
+import {TranslateService, TranslatePipe} from 'ng2-translate/ng2-translate';
 
 declare var document: any;
 
 @Component({
     selector: 'my-app',
     templateUrl: 'app/app.component.html',
-    directives: [ROUTER_DIRECTIVES, AuthRouterOutlet, MDL]
+    directives: [ROUTER_DIRECTIVES, AuthRouterOutlet, MDL],
+    pipes: [TranslatePipe]
 })
 @RouteConfig([
     {path: '/home', name: 'Home', component: FilesComponent},
@@ -38,11 +40,15 @@ declare var document: any;
     {path: '/login', name: 'Login', component: Login}
 ])
 export class AppComponent {
+    translate: TranslateService;
 
     constructor(public auth:Authentication,
                 public router:Router,
+                translate: TranslateService,
                 alfrescoSettingsService:AlfrescoSettingsService) {
         alfrescoSettingsService.host = 'http://192.168.99.100:8080';
+
+        this.translationInit(translate);
     }
 
     isActive(instruction:any[]):boolean {
@@ -61,6 +67,22 @@ export class AppComponent {
             );
     }
 
+    changeLanguage(lang:string) {
+        this.translate.use(lang);
+    }
+
+    translationInit(translate: TranslateService) {
+        this.translate = translate;
+        let userLang = navigator.language.split('-')[0]; // use navigator lang if available
+        userLang = /(fr|en)/gi.test(userLang) ? userLang : 'en';
+
+        // this language will be used as a fallback when a translation isn't found in the current language
+        this.translate.setDefaultLang('en');
+
+        // the lang to use, if the lang isn't available, it will use the current loader to get them
+        this.translate.use(userLang);
+    }
+
     hideDrawer() {
         // todo: workaround for drawer closing
         document.querySelector('.mdl-layout').MaterialLayout.toggleDrawer();

demo-shell-ng2/app/main.ts

@@ -19,12 +19,14 @@ import {bootstrap}    from 'angular2/platform/browser';
 import {AppComponent} from './app.component';
 import {ROUTER_PROVIDERS} from 'angular2/router';
 import {HTTP_PROVIDERS}    from 'angular2/http';
+import {TRANSLATE_PROVIDERS} from 'ng2-translate/ng2-translate';
 import {ALFRESCO_AUTHENTICATION} from 'ng2-alfresco-login/ng2-alfresco-login';
 import {ALFRESCO_CORE_PROVIDERS} from 'ng2-alfresco-core/services';
 
 bootstrap(AppComponent, [
     ROUTER_PROVIDERS,
     HTTP_PROVIDERS,
+    TRANSLATE_PROVIDERS,
     ALFRESCO_AUTHENTICATION,
     ALFRESCO_CORE_PROVIDERS
 ]);