Translation

package.json

@@ -7,7 +7,7 @@
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build",
-    "build-prod":"ng build --configuration production",
+    "build-prod": "ng build --configuration production",
     "watch": "ng build --watch --configuration development",
     "test": "ng test --no-watch --no-progress --browsers=ChromeHeadless",
     "lint": "ng lint",
@@ -22,6 +22,9 @@
     "@angular/platform-browser-dynamic": "~13.2.2",
     "@angular/router": "~13.2.2",
     "@ionic/angular": "^6.0.0",
+    "@ionic/storage-angular": "^3.0.6",
+    "@ngx-translate/core": "^14.0.0",
+    "@ngx-translate/http-loader": "^7.0.0",
     "rxjs": "~6.6.0",
     "tslib": "^2.2.0",
     "zone.js": "~0.11.4"

src/app/app.component.ts

@@ -1,3 +1,4 @@
+import { TranslateService } from '@ngx-translate/core';
 import { Component } from '@angular/core';
 
 @Component({
@@ -6,5 +7,8 @@ import { Component } from '@angular/core';
   styleUrls: ['app.component.scss'],
 })
 export class AppComponent {
-  constructor() {}
+  constructor( translate: TranslateService) {
+    translate.setDefaultLang('en-EN');
+  }
+
 }

src/app/app.module.ts

@@ -7,10 +7,34 @@ import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';
 
+import { HttpClientModule, HttpClient } from '@angular/common/http';
+import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+
+import { IonicStorageModule } from '@ionic/storage-angular';
+
+// eslint-disable-next-line prefer-arrow/prefer-arrow-functions
+export function createTranslateLoader(http: HttpClient) {
+  return new TranslateHttpLoader(http,'../assets/i18n/', '.json');
+}
+
 @NgModule({
   declarations: [AppComponent],
   entryComponents: [],
-  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
+  imports: [
+    BrowserModule,
+    HttpClientModule,
+    IonicModule.forRoot(),
+    IonicStorageModule.forRoot(),
+    TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: (createTranslateLoader),
+        deps: [HttpClient],
+      },
+    }),
+    AppRoutingModule,
+  ],
   providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
   bootstrap: [AppComponent],
 })

src/app/pages/home/home.module.ts

@@ -1,3 +1,4 @@
+import { TranslateModule } from '@ngx-translate/core';
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { IonicModule } from '@ionic/angular';
@@ -12,7 +13,8 @@ import { HomePageRoutingModule } from './home-routing.module';
     CommonModule,
     FormsModule,
     IonicModule,
-    HomePageRoutingModule
+    HomePageRoutingModule,
+    TranslateModule
   ],
   declarations: [HomePage]
 })

src/app/pages/home/home.page.html

@@ -1,7 +1,7 @@
 <ion-header [translucent]="true">
   <ion-toolbar>
     <ion-title>
-      Blank
+      {{'LOGIN.code' | translate}}
     </ion-title>
   </ion-toolbar>
 </ion-header>

src/assets/i18n/ar-AR.json

@@ -0,0 +1,63 @@
+{
+    "LOGIN-AND-SIGNUP":{
+        "Signup":"إنشاء حساب",
+        "login":"تسجيل الدخول",
+        "english-language":"EN",
+        "arabic-language":"العربية",
+        "french-language":"fr"
+    },
+    "LOGIN":{
+        "code":"الكود",
+        "phone":"الهاتف",
+       "prefix":"يرجى تحديد الرقم الوطني",
+       "phone-number":"يرجى ادخال رقم الهاتف",
+       "password":"كلمة السر",
+       "login":"تسجيل الدخول",
+       "forgot-password":"هل نسيت كلمة السر الخاصة بك ؟",
+       "or":"أو",
+       "registered-yet":"ليس لدي حساب ؟"
+    },
+    "FORGOT-PASSWORD":{
+        "forgot-password":"نسيت كلمة المرور",
+        "code":"الكود",
+        "phone":"الهاتف",
+       "prefix-phrase":"يرجى تحديد البادئة",
+       "phone-number-phrase":"يرجى إدخال رقم الهاتف",
+       "pin":"إرسال الرقم السري"
+    },
+    "RESET-YOUR-PASSWORD":{
+        "reset-your-password":"إعادة تعين كلمةالمرور",
+        "new-password":"كلمة السر الجديدة",
+        "confirm-new-password":"إعادة كتابة كلمة السر الجديدة",
+        "confirm":"تأكيد"
+    },
+    "SIGNUP":{
+        "sign-up":"إنشاءحساب",
+        "name":"الاسم",
+        "error-msg":"هناك خطأ",
+        "code":"الكود",
+        "phone":"الهاتف",
+       "prefix":"يرجى تحديد الرقم الوطني",
+       "phone-number":"يرجى إدخال رقم الهاتف",
+       "password":"كلمة السر",
+       "confirm-password":"تأكيد كلمة السر",
+       "register":"تسجيل",
+       "or":"أو",
+       "have-an-account":"لدي حساب ؟"
+    },
+    "CODE-CONFIRMATION":{
+        "confirm-phrase":"تاكيد رقم الهاتف من خلال الرمز المبعوت",
+        "confirm":"تسجيل",
+        "resend":"لم يصلني الرمز ؟اعادة ارسال الرمز؟"
+    },
+    "PICTURE":{
+        "profile-picture":"اختيار صورة شخصية",
+        "take-a-pic":"أخذ صورة",
+        "skip":"تخطي الآن"
+    },
+    "CHOOSEN-PICTURE":{
+        "choose-phrase":"اختيار الصورة",
+        "upload":"رفع الصورة",
+        "retake-pic":"إعادة اخذ الصورة"
+    }
+}