#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
 ]);

demo-shell-ng2/i18n/en.json

@@ -0,0 +1,9 @@
+{
+  "title" : "Welcome",
+  "login" : "Login",
+  "username" : "Username",
+  "input-required-message": "Required",
+  "input-min-message": "Your username needs to be at least 4 characters.",
+  "login-button": "Login",
+  "login-error-message": "You have entered an invalid username or password"
+}

demo-shell-ng2/i18n/it.json

@@ -0,0 +1,9 @@
+{
+  "title" : "Benvenuto",
+  "login" : "Autenticazione",
+  "username" : "Nome utente",
+  "input-required-message": "Campo obbligatorio",
+  "input-min-message": "Inserire un nome utente di 4 caratteri minimo.",
+  "login-button": "Accedi",
+  "login-error-message": "Nome utente o password non validi"
+}

demo-shell-ng2/index.html

@@ -38,7 +38,9 @@
                 'ng2-uploader': 'node_modules/ng2-uploader',
                 'ng2-alfresco-core': 'node_modules/ng2-alfresco-core',
                 'ng2-alfresco-documentlist': 'node_modules/ng2-alfresco-documentlist',
-                'ng2-alfresco-login': 'node_modules/ng2-alfresco-login'
+                'ng2-alfresco-login': 'node_modules/ng2-alfresco-login',
+                'ng2-translate': 'node_modules/ng2-translate',
+                'rxjs': 'node_modules/rxjs'
             },
             packages: {
                 app: {
@@ -56,6 +58,12 @@
                 },
                 'ng2-alfresco-login': {
                     defaultExtension: 'js'
+                },
+                'ng2-translate': {
+                    defaultExtension: 'js'
+                },
+                'rxjs': {
+                    defaultExtension: 'js'
                 }
             }
         });

demo-shell-ng2/package.json

@@ -46,6 +46,7 @@
     "font-awesome": "^4.5.0",
     "jquery": "^2.2.2",
     "material-design-lite": "^1.1.3",
+    "ng2-translate": "^1.11.2",
     "ng2-uploader": "denisvuyka/ng2-uploader",
     "reflect-metadata": "0.1.2",
     "rxjs": "5.0.0-beta.2",