Translate tutorial

Author: jweisman

cloudapp/src/app/app-routing.module.ts

@@ -9,6 +9,7 @@ import { ExternalComponent } from './external/external.component';
 import { XmlComponent } from './xml/xml.component';
 import { BindComponent } from './bind/bind.component';
 import { StoreComponent } from './store/store.component';
+import { TranslateComponent } from './translate/translate.component';
 
 const routes: Routes = [
   { path: '', component: MainComponent },
@@ -20,6 +21,7 @@ const routes: Routes = [
   { path: 'xml', component: XmlComponent },
   { path: 'bind', component: BindComponent },
   { path: 'store', component: StoreComponent },
+  { path: 'translate', component: TranslateComponent },
 ];
 
 @NgModule({

cloudapp/src/app/app.module.ts

@@ -18,6 +18,7 @@ import { ExternalComponent } from './external/external.component';
 import { XmlComponent } from './xml/xml.component';
 import { BindComponent } from './bind/bind.component';
 import { StoreComponent } from './store/store.component';
+import { TranslateComponent } from './translate/translate.component';
 
 export function getToastrModule() {
   return ToastrModule.forRoot({
@@ -38,7 +39,8 @@ export function getToastrModule() {
       ExternalComponent,
       XmlComponent,
       BindComponent,
-      StoreComponent
+      StoreComponent,
+      TranslateComponent
    ],
    imports: [
       MaterialModule,

cloudapp/src/app/bind/bind.component.ts

@@ -30,7 +30,9 @@ export class BindComponent implements OnInit, OnDestroy {
       const entities = (pageInfo.entities||[]).filter(e=>e.type=='ITEM');
       if (entities.length > 0) {
         this.restService.call(entities[0].link)
-          .subscribe(res=>this.form = toFormGroup(res) as FormGroup);
+          .subscribe(res=>this.form = toFormGroup(res));
+      } else {
+        this.form = null;
       }
     });
   }

cloudapp/src/app/main/main.component.html

@@ -12,5 +12,6 @@ <h1>
     <li><a [routerLink]="['xml']">Working with bibliographic records in XML</a></li>
     <li><a [routerLink]="['bind']">Model binding with REST objects</a></li>  
     <li><a [routerLink]="['store']">Using the Store Service</a></li>  
+    <li><a [routerLink]="['translate']">Translating your app</a></li>  
   </ul>
 </section>

cloudapp/src/app/store/store.component.ts

@@ -28,7 +28,7 @@ export class StoreComponent implements OnInit {
 
     this.storeService.get(FORM_NAME).subscribe( value => {
       if (value) {
-        this.form = toFormGroup(value) as FormGroup;
+        this.form = toFormGroup(value);
       }
 
       this.form.valueChanges.pipe(

cloudapp/src/app/translate/translate.component.html

@@ -0,0 +1,19 @@
+<div>
+  <p translate [translateParams]="{ date: today }">Translate.Intro</p>
+</div>
+<div>
+  <p translate>Translate.ButtonDesc</p>
+  <button mat-stroked-button type="button" (click)="hi()">{{ 'Translate.Button' | translate }}</button>
+</div>
+<div>
+  <p translate>Translate.SelectDesc</p>
+  <mat-form-field>
+    <mat-label translate>Translate.Policy</mat-label>
+    <mat-select>
+      <mat-option *ngFor="let policy of policies" [value]="policy.code">
+        {{ policy.desc | translate }}
+      </mat-option>
+    </mat-select>
+  </mat-form-field>
+</div>
+

cloudapp/src/app/translate/translate.component.scss

@@ -0,0 +1,3 @@
+div {
+  margin-bottom: 10px;
+}

cloudapp/src/app/translate/translate.component.ts

@@ -0,0 +1,42 @@
+import { Component, OnInit } from '@angular/core';
+import { AppService } from '../app.service';
+import { TranslateService } from '@ngx-translate/core';
+import { CloudAppEventsService, InitData, CloudAppRestService } from '@exlibris/exl-cloudapp-angular-lib';
+import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
+
+@Component({
+  selector: 'app-translate',
+  templateUrl: './translate.component.html',
+  styleUrls: ['./translate.component.scss']
+})
+export class TranslateComponent implements OnInit {
+  initData: InitData;
+  policies: { code: string, desc: string }[];
+  today = new Date().toLocaleDateString();
+  blockTypes: any;
+
+  constructor(
+    private appService: AppService,
+    private translate: TranslateService,
+    private eventsService: CloudAppEventsService,
+    private restService: CloudAppRestService
+  ) { }
+
+  ngOnInit() {
+    this.translate.get('Translate.Title').subscribe(text=>this.appService.setTitle(text));
+    this.eventsService.getInitData().subscribe(data=>this.initData = data);
+    this.policies = [
+      { code: 'D', desc: _('Translate.Policies.DAILY') },
+      { code: 'W', desc: _('Translate.Policies.WEEKLY') },
+      { code: 'M', desc: _('Translate.Policies.MONTHLY') },
+      { code: 'Y', desc: _('Translate.Policies.YEARLY') },
+    ];
+  }
+
+  hi() {
+    alert(this.translate.instant('Translate.Prompt',
+      { name: this.initData.user.firstName } )
+    );
+  }
+
+}

cloudapp/src/app/utils.ts

@@ -1,6 +1,11 @@
 import { AbstractControl, FormArray, FormGroup, FormControl } from "@angular/forms";
 
-export function toFormGroup (object: Object): AbstractControl {
+/** Converts an object to a FormGroup recursively handling properties and array */
+export function toFormGroup (object: Object): FormGroup {
+  return _toFormGroup(object) as FormGroup;
+}
+
+function _toFormGroup (object: Object): AbstractControl {
   if (Array.isArray(object)) {
     return new FormArray(object.map(entry=>toFormGroup(entry)));
   } else if (typeof object === 'object' && object != null) {

cloudapp/src/i18n/en.json

@@ -0,0 +1,17 @@
+{
+	"Translate": {
+		"Button": "Say hi",
+		"ButtonDesc": "This shows how to translate the contents of a button and to define the string inside of the typescript file.",
+		"Intro": "This tutorial shows some of the several ways to indicate strings for translation. This shows how to translate text and include parameters such as today's date ({{date}})",
+		"Policies": {
+			"DAILY": "Daily",
+			"MONTHLY": "Monthly",
+			"WEEKLY": "Weekly",
+			"YEARLY": "Yearly"
+		},
+		"Policy": "Policy",
+		"Prompt": "Hello {{name}}",
+		"SelectDesc": "This shows how to translate the descriptions of select options.",
+		"Title": "Translating your app"
+	}
+}