Add RTL example to translations tutorial

Author: jweisman

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

@@ -1,4 +1,4 @@
-<div id="page-container">
+<div id="page-container" [dir]="dir">
   <div id="content-wrap">
     <app-topmenu></app-topmenu>
     <div>
@@ -21,7 +21,7 @@
     </div>
   </div>
   <footer id="footer">
-    <p><a (click)="setLang('en')">English</a> | <a (click)="setLang('es')">Español</a></p>
+    <p><a (click)="setLang('en')">English</a> | <a (click)="setLang('es')">Español</a> | <a (click)="setLang('he')">עברית</a></p>
   </footer>
 </div>
 

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

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { AppService } from '../app.service';
-import { TranslateService } from '@ngx-translate/core';
+import { LangChangeEvent, TranslateService } from '@ngx-translate/core';
 import { CloudAppEventsService, InitData, CloudAppRestService } from '@exlibris/exl-cloudapp-angular-lib';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 
@@ -14,12 +14,12 @@ export class TranslateComponent implements OnInit {
   policies: { code: string, desc: string }[];
   today = new Date().toLocaleDateString();
   blockTypes: any;
+  dir = "ltr";
 
   constructor(
     private appService: AppService,
     private translate: TranslateService,
     private eventsService: CloudAppEventsService,
-    private restService: CloudAppRestService
   ) { }
 
   ngOnInit() {
@@ -31,6 +31,11 @@ export class TranslateComponent implements OnInit {
       { code: 'M', desc: _('Translate.Policies.MONTHLY') },
       { code: 'Y', desc: _('Translate.Policies.YEARLY') },
     ];
+    this.translate.onLangChange.subscribe((event: LangChangeEvent) =>
+    {
+      this.dir = ['ar', 'he'].includes(event.lang) ? 'rtl' : 'ltr';
+    });
+
   }
 
   hi() {

cloudapp/src/i18n/he.json

@@ -0,0 +1,17 @@
+{
+	"Translate": {
+		"Button": "אמור שלום",
+		"ButtonDesc": "זה מראה כיצד לתרגם את התוכן של כפתור ולהגדיר את המחרוזת בתוך קובץ ה-typescript.",
+		"Intro": "מדריך זה מציג כמה דרכים לציין מחרוזות לתרגום. זה מראה כיצד לתרגם טקסט ולכלול פרמטרים כגון התאריך של היום ({{date}})",
+		"Policies": {
+			"DAILY": "יומי",
+			"MONTHLY": "חודשי",
+			"WEEKLY": "שבועי",
+			"YEARLY": "שנתי"
+		},
+		"Policy": "מדיניות",
+		"Prompt": "שלום {{name}}",
+		"SelectDesc": "זה מראה כיצד לתרגם את התיאורים של אפשרויות נבחרות.",
+		"Title": "תרגום האפליקציה שלך"
+	}
+}