i18n: Adding new languages: Part 1 (#1882)

Co-authored-by: Jose Alberto Hernandez <alberto@blue-daemon.local>

README.md

@@ -149,8 +149,24 @@ Setting for Languages (i18n) still under development
 MIFOS_DEFAULT_LANGUAGE=en-US
 ```
 ```
-MIFOS_SUPPORTED_LANGUAGES=en-US,fr-FR
+MIFOS_SUPPORTED_LANGUAGES=cs-CS,de-DE,en-US,es-MX,fr-FR,it-IT,ko-KO,lt-LT,lv-LV,ne-NE,pt-PT,sw-SW
 ```
+These are the Language available now:
+
+|  Language  | Code |    File    |
+|:----------:|:----:|:----------:|
+| Czech      |  cs  | cs-CS.json |
+| German     |  de  | de-DE.json |
+| English    |  en  | en-US.json |
+| Spanish    |  es  | es-MX.json |
+| French     |  fr  | fr-FR.json |
+| Italian    |  it  | it-IT.json |
+| Korean     |  ko  | ko-KO.json |
+| Lithuanian |  li  | li-LI.json |
+| Latvian    |  lv  | lv-LV.json |
+| Nepali     |  ne  | ne-NE.json |
+| Portuguese |  pt  | pt-PT.json |
+| Swahili    |  sw  | sw-SW.json |
 
 
 Setting for applying the Client preload in the Clients view, Default true

docker-compose.yml

@@ -21,4 +21,4 @@ services:
       - FINERACT_API_VERSION=/v1
       - FINERACT_PLATFORM_TENANT_IDENTIFIER=default
       - MIFOS_DEFAULT_LANGUAGE=en-US
-      - MIFOS_SUPPORTED_LANGUAGES=cs-CS,de-DE,en-US,es-MX,fr-FR,it-IT,ko-KO,lt-LT,lv-LV,ne-NE,pt-PT
+      - MIFOS_SUPPORTED_LANGUAGES=cs-CS,de-DE,en-US,es-MX,fr-FR,it-IT,ko-KO,lt-LT,lv-LV,ne-NE,pt-PT,sw-SW

docs/i18n.md

@@ -26,28 +26,36 @@ let title;
 translateService.get('My page title').subscribe((res: string) => { title = res; });
 ```
 
+or `TranslateService` dependency and use the asynchronous
+`instant()` method:
+
+```typescript
+const title: string = translateService.instant('My page title');
+```
+
 ## Extracting strings to translate
 
 Once you are ready to translate your app, just run `npm translations:extract`.
-It will create a `template.json` file in the `src/translations` folder.
+It will create a `template.json` file in the `src/assets/translations` folder.
 
 You can then use any text or code editor to generate the `.json` files for each of your supported languages, and put
-them in the `src/translations` folder.
+them in the `src/assets/translations` folder.
 
 Do no forget to edit the files in `src/environment` to add the supported languages of your application.
 
-### Marking strings for extraction
+These are the Language available now:
 
-If strings are not directly passed to `translateService` or put in HTML templates, they may be missing from the
+|  Language  | Code |    File    |
-extraction process.
+|:----------:|:----:|:----------:|
-
+| Czech      |  cs  | cs-CS.json |
-For these cases, you have to use the dummy `extract()` function:
+| German     |  de  | de-DE.json |
-```typescript
+| English    |  en  | en-US.json |
-import { extract } from './core/i18n.service';
+| Spanish    |  es  | es-MX.json |
-
+| French     |  fr  | fr-FR.json |
-function toBeTranslatedLater() {
+| Italian    |  it  | it-IT.json |
-  return extract('A string to be translated');
+| Korean     |  ko  | ko-KO.json |
-}
+| Lithuanian |  li  | li-LI.json |
-```
+| Latvian    |  lv  | lv-LV.json |
-
+| Nepali     |  ne  | ne-NE.json |
-Strings marked like this will then be properly extracted.
+| Portuguese |  pt  | pt-PT.json |
+| Swahili    |  sw  | sw-SW.json |

package.json

@@ -29,9 +29,9 @@
     "cypress:run": "cypress run"
   },
   "dependencies": {
-    "@angular-devkit/schematics": "^14.2.12",
+    "@angular-devkit/schematics": "14.2.12",
-    "@angular-material-components/datetime-picker": "^8.0.0",
+    "@angular-material-components/datetime-picker": "8.0.0",
-    "@angular/animations": "^14.3.0",
+    "@angular/animations": "14.3.0",
     "@angular/cdk": "14.2.7",
     "@angular/common": "14.3.0",
     "@angular/compiler": "14.3.0",
@@ -45,8 +45,10 @@
     "@angular/flex-layout": "^14.0.0-beta.40",
     "@ckeditor/ckeditor5-angular": "1.2.3",
     "@ckeditor/ckeditor5-build-classic": "21.0.0",
-    "@fortawesome/angular-fontawesome": "^0.10.2",
+    "@fortawesome/angular-fontawesome": "0.11.1",
-    "@fortawesome/free-solid-svg-icons": "5.8.2",
+    "@fortawesome/fontawesome-svg-core": "6.2.1",
+    "@fortawesome/free-brands-svg-icons": "6.2.1",
+    "@fortawesome/free-solid-svg-icons": "6.2.1",
     "@ngx-translate/core": "13.0.0",
     "@ngx-translate/http-loader": "^6.0.0",
     "@swimlane/ngx-graph": "^8.0.2",

src/app/account-transfers/account-transfers-routing.module.ts

@@ -2,9 +2,6 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
-/** Translation Imports */
-import { extract } from '../core/i18n/i18n.service';
-
 /** Custom Components */
 import { ViewStandingInstructionsComponent } from './view-standing-instructions/view-standing-instructions.component';
 import { EditStandingInstructionsComponent } from './edit-standing-instructions/edit-standing-instructions.component';
@@ -29,7 +26,7 @@ const routes: Routes = [
     children: [
       {
         path: 'create-standing-instructions',
-        data: { title: extract('Create Standing Instructions'), breadcrumb: 'Create Standing Instructions', routeParamBreadcrumb: 'Create Standing Instructions' },
+        data: { title: 'Create Standing Instructions', breadcrumb: 'Create Standing Instructions', routeParamBreadcrumb: 'Create Standing Instructions' },
         component: CreateStandingInstructionsComponent,
         resolve: {
           standingIntructionsTemplate: StandingInstructionsTemplateResolver
@@ -37,7 +34,7 @@ const routes: Routes = [
       },
       {
         path: 'make-account-transfer',
-        data: { title: extract('Account Transfer'), breadcrumb: 'Account Transfer', routeParamBreadcrumb: 'Account Transfer' },
+        data: { title: 'Account Transfer', breadcrumb: 'Account Transfer', routeParamBreadcrumb: 'Account Transfer' },
         component: MakeAccountTransfersComponent,
         resolve: {
           accountTransferTemplate: MakeAccountTransferTemplateResolver
@@ -45,7 +42,7 @@ const routes: Routes = [
       },
       {
         path: 'list-standing-instructions',
-        data: { title: extract('List Standing Instructions'), breadcrumb: 'List Standing Instructions', routeParamBreadcrumb: 'List Standing Instructions' },
+        data: { title: 'List Standing Instructions', breadcrumb: 'List Standing Instructions', routeParamBreadcrumb: 'List Standing Instructions' },
         component: ListStandingInstructionsComponent,
         resolve: {
           standingIntructionsTemplate: StandingInstructionsTemplateResolver
@@ -53,7 +50,7 @@ const routes: Routes = [
       },
       {
         path: 'account-transfers',
-        data: { title: extract('View Account Transfer'), breadcrumb: 'Account Transfers', routeParamBreadcrumb: false },
+        data: { title: 'View Account Transfer', breadcrumb: 'Account Transfers', routeParamBreadcrumb: false },
         children: [
           {
             path: ':transferid',
@@ -67,11 +64,11 @@ const routes: Routes = [
       },
       {
         path: ':standingInstructionsId',
-        data: { title: extract('Standing Instructions'), routeParamBreadcrumb: 'standingInstructionsId' },
+        data: { title: 'Standing Instructions', routeParamBreadcrumb: 'standingInstructionsId' },
         children: [
           {
             path: 'view',
-            data: { title: extract('View Standing Instructions'), breadcrumb: 'view', routeParamBreadcrumb: false },
+            data: { title: 'View Standing Instructions', breadcrumb: 'view', routeParamBreadcrumb: false },
             component: ViewStandingInstructionsComponent,
             resolve: {
               standingInstructionsData: ViewStandingInstructionsResolver,
@@ -79,7 +76,7 @@ const routes: Routes = [
           },
           {
             path: 'edit',
-            data: { title: extract('Edit Standing Instructions'), breadcrumb: 'edit', routeParamBreadcrumb: false },
+            data: { title: 'Edit Standing Instructions', breadcrumb: 'edit', routeParamBreadcrumb: false },
             component: EditStandingInstructionsComponent,
             resolve: {
               standingInstructionsDataAndTemplate: StandingInstructionsDataAndTemplateResolver,
@@ -87,7 +84,7 @@ const routes: Routes = [
           },
           {
             path: 'list-account-transactions',
-            data: { title: extract('List Account Transactions'), breadcrumb: 'List Account Transactions', routeParamBreadcrumb: 'List Account Transactions' },
+            data: { title: 'List Account Transactions', breadcrumb: 'List Account Transactions', routeParamBreadcrumb: 'List Account Transactions' },
             component: ListTransactionsComponent,
             resolve: {
               listTransactionData: ListTransactionsResolver

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

@@ -7,9 +7,6 @@ import { Routes, RouterModule } from '@angular/router';
 /** Routing Imports */
 import { Route } from '../core/route/route.service';
 
-/** Translation Imports */
-import { extract } from '../core/i18n/i18n.service';
-
 /** Custom Components */
 import { AccountingComponent } from './accounting.component';
 import { FrequentPostingsComponent } from './frequent-postings/frequent-postings.component';
@@ -71,7 +68,7 @@ const routes: Routes = [
   Route.withShell([
     {
       path: 'accounting',
-      data: { title: extract('Accounting'), breadcrumb: 'Accounting' },
+      data: { title: 'Accounting', breadcrumb: 'Accounting' },
       children: [
         {
           path: '',
@@ -79,7 +76,7 @@ const routes: Routes = [
         },
         {
           path: 'journal-entries',
-          data: { title: extract('Search Journal Entry'), breadcrumb: 'Journal Entries' },
+          data: { title: 'Search Journal Entry', breadcrumb: 'Journal Entries' },
           children: [
             {
               path: '',
@@ -92,7 +89,7 @@ const routes: Routes = [
             {
               path: 'frequent-postings',
               component: FrequentPostingsComponent,
-              data: { title: extract('Frequent Postings'), breadcrumb: 'Frequent Postings' },
+              data: { title: 'Frequent Postings', breadcrumb: 'Frequent Postings' },
               resolve: {
                 offices: OfficesResolver,
                 accountingRules: AccountingRulesAssociationsResolver,
@@ -103,7 +100,7 @@ const routes: Routes = [
             {
               path: 'create',
               component: CreateJournalEntryComponent,
-              data: { title: extract('Create Journal Entry'), breadcrumb: 'Create' },
+              data: { title: 'Create Journal Entry', breadcrumb: 'Create' },
               resolve: {
                 offices: OfficesResolver,
                 currencies: CurrenciesResolver,
@@ -113,12 +110,12 @@ const routes: Routes = [
             },
             {
               path: 'transactions',
-              data: { title: extract('Transactions'), breadcrumb: 'Transactions', addBreadcrumbLink: false },
+              data: { title: 'Transactions', breadcrumb: 'Transactions', addBreadcrumbLink: false },
               children: [
                 {
                   path: 'view/:id',
                   component: ViewJournalEntryTransactionComponent,
-                  data: { title: extract('View Transaction'), routeParamBreadcrumb: 'id' },
+                  data: { title: 'View Transaction', routeParamBreadcrumb: 'id' },
                   resolve: {
                     transaction: JournalEntryTransactionResolver
                   }
@@ -129,7 +126,7 @@ const routes: Routes = [
         },
         {
           path: 'financial-activity-mappings',
-          data: { title: extract('Financial Activity Mappings'), breadcrumb: 'Financial Activity Mappings' },
+          data: { title: 'Financial Activity Mappings', breadcrumb: 'Financial Activity Mappings' },
           children: [
             {
               path: '',
@@ -141,14 +138,14 @@ const routes: Routes = [
             {
               path: 'create',
               component: CreateFinancialActivityMappingComponent,
-              data: { title: extract('Create Financial Activity Mapping'), breadcrumb: 'Create' },
+              data: { title: 'Create Financial Activity Mapping', breadcrumb: 'Create' },
               resolve: {
                 financialActivityAccountsTemplate: FinancialActivityMappingsTemplateResolver
               }
             },
             {
               path: 'view/:id',
-              data: { title: extract('View Financial Activity Mapping'), routeParamBreadcrumb: 'id' },
+              data: { title: 'View Financial Activity Mapping', routeParamBreadcrumb: 'id' },
               children: [
                 {
                   path: '',
@@ -160,7 +157,7 @@ const routes: Routes = [
                 {
                   path: 'edit',
                   component: EditFinancialActivityMappingComponent,
-                  data: { title: extract('Edit Financial Activity Mapping'), breadcrumb: 'Edit', routeParamBreadcrumb: false },
+                  data: { title: 'Edit Financial Activity Mapping', breadcrumb: 'Edit', routeParamBreadcrumb: false },
                   resolve: {
                     financialActivityAccountAndTemplate: FinancialActivityMappingAndTemplateResolver
                   }
@@ -172,7 +169,7 @@ const routes: Routes = [
         {
           path: 'migrate-opening-balances',
           component: MigrateOpeningBalancesComponent,
-          data: { title:  extract('Migrate Opening Balances'), breadcrumb: 'Migrate Opening Balances' },
+          data: { title:  'Migrate Opening Balances', breadcrumb: 'Migrate Opening Balances' },
           resolve: {
             offices: OfficesResolver,
             currencies: CurrenciesResolver
@@ -180,7 +177,7 @@ const routes: Routes = [
         },
         {
           path: 'chart-of-accounts',
-          data: { title: extract('Chart of Accounts'), breadcrumb: 'Chart of Accounts' },
+          data: { title: 'Chart of Accounts', breadcrumb: 'Chart of Accounts' },
           children: [
             {
               path: '',
@@ -195,14 +192,14 @@ const routes: Routes = [
                 {
                   path: 'create',
                   component: CreateGlAccountComponent,
-                  data: { title: extract('Create GL Account'), breadcrumb: 'Create GL Account' },
+                  data: { title: 'Create GL Account', breadcrumb: 'Create GL Account' },
                   resolve: {
                     chartOfAccountsTemplate: ChartOfAccountsTemplateResolver
                   }
                 },
                 {
                   path: 'view/:id',
-                  data: { title: extract('View GL Account'), routeResolveBreadcrumb: ['glAccountAndChartOfAccountsTemplate', 'name'] },
+                  data: { title: 'View GL Account', routeResolveBreadcrumb: ['glAccountAndChartOfAccountsTemplate', 'name'] },
                   resolve: {
                     glAccountAndChartOfAccountsTemplate: GlAccountAndChartOfAccountsTemplateResolver
                   },
@@ -215,7 +212,7 @@ const routes: Routes = [
                     {
                       path: 'edit',
                       component: EditGlAccountComponent,
-                      data: { title: extract('Edit GL Account'), breadcrumb: 'Edit', routeResolveBreadcrumb: false }
+                      data: { title: 'Edit GL Account', breadcrumb: 'Edit', routeResolveBreadcrumb: false }
                     }
                   ]
                 }
@@ -225,7 +222,7 @@ const routes: Routes = [
         },
         {
           path: 'closing-entries',
-          data: { title: extract('Accounting Closures'), breadcrumb: 'Closing Entries' },
+          data: { title: 'Accounting Closures', breadcrumb: 'Closing Entries' },
           children: [
             {
               path: '',
@@ -238,14 +235,14 @@ const routes: Routes = [
             {
               path: 'create',
               component: CreateClosureComponent,
-              data: { title: extract('Create Accounting Closure'), breadcrumb: 'Create' },
+              data: { title: 'Create Accounting Closure', breadcrumb: 'Create' },
               resolve: {
                 offices: OfficesResolver
               }
             },
             {
               path: 'view/:id',
-              data: { title: extract('View Accounting Closure'), routeParamBreadcrumb: 'id' },
+              data: { title: 'View Accounting Closure', routeParamBreadcrumb: 'id' },
               resolve: {
                 glAccountClosure: ClosingEntryResolver
               },
@@ -258,7 +255,7 @@ const routes: Routes = [
                 {
                   path: 'edit',
                   component: EditClosureComponent,
-                  data: { title: extract('Edit Accounting Closure'), breadcrumb: 'Edit', routeParamBreadcrumb: false }
+                  data: { title: 'Edit Accounting Closure', breadcrumb: 'Edit', routeParamBreadcrumb: false }
                 }
               ]
             }
@@ -266,7 +263,7 @@ const routes: Routes = [
         },
         {
           path: 'accounting-rules',
-          data: { title: extract('Accounting Rules'), breadcrumb: 'Accounting Rules' },
+          data: { title: 'Accounting Rules', breadcrumb: 'Accounting Rules' },
           children: [
             {
               path: '',
@@ -278,14 +275,14 @@ const routes: Routes = [
             {
               path: 'create',
               component: CreateRuleComponent,
-              data: { title: extract('Create Accounting Rule'), breadcrumb: 'Create' },
+              data: { title: 'Create Accounting Rule', breadcrumb: 'Create' },
               resolve: {
                 accountingRulesTemplate: AccountingRulesTemplateResolver
               }
             },
             {
               path: 'view/:id',
-              data: { title: extract('View Accounting Rule'), routeResolveBreadcrumb: ['accountingRule', 'name'] },
+              data: { title: 'View Accounting Rule', routeResolveBreadcrumb: ['accountingRule', 'name'] },
               resolve: {
                 accountingRule: AccountingRuleResolver
               },
@@ -298,7 +295,7 @@ const routes: Routes = [
                 {
                   path: 'edit',
                   component: EditRuleComponent,
-                  data: { title: extract('Edit Accounting Rules'), breadcrumb: 'Edit', routeResolveBreadcrumb: false },
+                  data: { title: 'Edit Accounting Rules', breadcrumb: 'Edit', routeResolveBreadcrumb: false },
                   resolve: {
                     accountingRulesTemplate: AccountingRulesTemplateResolver
                   }
@@ -310,11 +307,11 @@ const routes: Routes = [
         {
           path: 'periodic-accruals',
           component: PeriodicAccrualsComponent,
-          data: { title: extract('Periodic Accrual Accounting'), breadcrumb: 'Execute Periodic Accrual Accounting' }
+          data: { title: 'Periodic Accrual Accounting', breadcrumb: 'Execute Periodic Accrual Accounting' }
         },
         {
           path: 'provisioning-entries',
-          data: { title: extract('Provisioning Entries'), breadcrumb: 'Provisioning Entries' },
+          data: { title: 'Provisioning Entries', breadcrumb: 'Provisioning Entries' },
           children: [
             {
               path: '',
@@ -326,12 +323,12 @@ const routes: Routes = [
             {
               path: 'create',
               component: CreateProvisioningEntryComponent,
-              data: { title: extract('Create Provisioning Entry'), breadcrumb: 'Create' }
+              data: { title: 'Create Provisioning Entry', breadcrumb: 'Create' }
             },
             {
               path: 'view/:id',
               component: ViewProvisioningEntryComponent,
-              data: { title: extract('View Provisioning Entry'), routeParamBreadcrumb: 'id' },
+              data: { title: 'View Provisioning Entry', routeParamBreadcrumb: 'id' },
               resolve: {
                 provisioningEntry: ProvisioningEntryResolver,
                 provisioningEntryEntries: ProvisioningEntryEntriesResolver,
@@ -347,7 +344,7 @@ const routes: Routes = [
                 {
                   path: 'view/:id',
                   component: ViewProvisioningJournalEntriesComponent,
-                  data: { title: extract('View Provisioning Journal Entry'), routeParamBreadcrumb: 'id' },
+                  data: { title: 'View Provisioning Journal Entry', routeParamBreadcrumb: 'id' },
                   resolve: {
                     provisioningJournalEntries: ProvisioningJournalEntriesResolver
                   }
@@ -360,12 +357,12 @@ const routes: Routes = [
     },
     {
       path: 'journal-entry',
-      data: {title: extract('Journal Entries'), breadcrumb: 'Journal Entries' },
+      data: {title: 'Journal Entries', breadcrumb: 'Journal Entries' },
       children: [
         {
           path: 'view/:id',
           component: ViewJournalEntryTransactionComponent,
-          data: { title: extract('View Transaction'), routeParamBreadcrumb: 'id' },
+          data: { title: 'View Transaction', routeParamBreadcrumb: 'id' },
           resolve: {
             transaction: JournalEntryTransactionResolver
           }
@@ -373,7 +370,7 @@ const routes: Routes = [
         {
           path: 'view-transfer/:transferId',
           component: ViewJournalEntryTransactionComponent,
-          data: { title: extract('View Transfer'), routeParamBreadcrumb: 'transferId' },
+          data: { title: 'View Transfer', routeParamBreadcrumb: 'transferId' },
           resolve: {
             transferJournalEntryData: ExternalAssetOwnerJournalEntryResolver
           }

src/app/app.module.ts

@@ -90,14 +90,7 @@ export function HttpLoaderFactory(http: HttpClient) {
     CollectionsModule,
     TasksModule,
     ConfigurationWizardModule,
-    AppRoutingModule,
+    AppRoutingModule
-    // TranslateModule.forRoot({
-    //   loader: {
-    //     provide: TranslateLoader,
-    //       useFactory: HttpLoaderFactory,
-    //       deps: [HttpClient]
-    //   }
-    // })
   ],
   declarations: [WebAppComponent, NotFoundComponent],
   providers: [DatePipe],

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

@@ -4,9 +4,6 @@ import { Routes, RouterModule } from '@angular/router';
 /** Routing Imports */
 import { Route } from '../core/route/route.service';
 
-/** Translation Imports */
-import { extract } from '../core/i18n/i18n.service';
-
 /** Custom Components */
 import { CentersComponent } from './centers.component';
 import { CreateCenterComponent } from './create-center/create-center.component';
@@ -34,7 +31,7 @@ const routes: Routes = [
 
     {
       path: 'centers',
-      data: { title: extract('Centers'), breadcrumb: 'Centers' },
+      data: { title: 'Centers', breadcrumb: 'Centers' },
       children: [
         {
           path: '',
@@ -43,14 +40,14 @@ const routes: Routes = [
         {
           path: 'create',
           component: CreateCenterComponent,
-          data: { title: extract('Create Center'), breadcrumb: 'Create' },
+          data: { title: 'Create Center', breadcrumb: 'Create' },
           resolve: {
             offices: OfficesResolver,
           }
         },
         {
           path: ':centerId',
-          data: { title: extract('Centers View'), routeParamBreadcrumb: 'centerId' },
+          data: { title: 'Centers View', routeParamBreadcrumb: 'centerId' },
           resolve: {
             centerViewData: CenterViewResolver,
           },
@@ -66,7 +63,7 @@ const routes: Routes = [
                 {
                   path: 'general',
                   component: GeneralTabComponent,
-                  data: { title: extract('General'), breadcrumb: 'General', routeParamBreadcrumb: false },
+                  data: { title: 'General', breadcrumb: 'General', routeParamBreadcrumb: false },
                   resolve: {
                     centerSummaryData: CenterSummaryResolver,
                     centerViewData: CenterResourceResolver,
@@ -76,7 +73,7 @@ const routes: Routes = [
                 {
                   path: 'notes',
                   component: NotesTabComponent,
-                  data: { title: extract('Notes'), breadcrumb: 'Notes', routeParamBreadcrumb: false },
+                  data: { title: 'Notes', breadcrumb: 'Notes', routeParamBreadcrumb: false },
                   resolve: {
                     centerNotes: CenterNotesResolver
                   }
@@ -86,7 +83,7 @@ const routes: Routes = [
                   children: [{
                     path: ':datatableName',
                     component: DatatableTabComponent,
-                    data: { title: extract('Data Table View'), routeParamBreadcrumb: 'datatableName' },
+                    data: { title: 'Data Table View', routeParamBreadcrumb: 'datatableName' },
                     resolve: {
                       centerDatatable: CenterDatatableResolver
                     }
@@ -97,14 +94,14 @@ const routes: Routes = [
             {
               path: 'edit',
               component: EditCenterComponent,
-              data: { title: extract('Edit Center'), breadcrumb: 'Edit', routeParamBreadcrumb: 'Edit' },
+              data: { title: 'Edit Center', breadcrumb: 'Edit', routeParamBreadcrumb: 'Edit' },
               resolve: {
                 centerData: CenterDataAndTemplateResolver,
               }
             },
             {
               path: 'actions/:name',
-              data: { title: extract('Center Actions'), routeParamBreadcrumb: 'name' },
+              data: { title: 'Center Actions', routeParamBreadcrumb: 'name' },
               component: CenterActionsComponent,
               resolve: {
                 centersActionData: CenterActionsResolver

src/app/clients/client-stepper/client-family-members-step/client-family-member-dialog/client-family-member-dialog.component.html

@@ -90,7 +90,7 @@
       <mat-datepicker-toggle matSuffix [for]="dueDatePicker"></mat-datepicker-toggle>
       <mat-datepicker #dueDatePicker></mat-datepicker>
       <mat-error *ngIf="familyMemberForm.controls.dateOfBirth.hasError('required')">
-        {{ "labels.inputs.Date of birth" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
+        {{"labels.inputs.Date Of Birth" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
       </mat-error>
     </mat-form-field>
 

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

@@ -4,9 +4,6 @@ import { Routes, RouterModule } from '@angular/router';
 /** Routing Imports */
 import { Route } from '../core/route/route.service';
 
-/** Translation Imports */
-import { extract } from '../core/i18n/i18n.service';
-
 /** Custom Components */
 import { ClientsComponent } from './clients.component';
 import { ClientsViewComponent } from './clients-view/clients-view.component';
@@ -53,7 +50,7 @@ import { ClientCollateralResolver } from './common-resolvers/client-collateral.r
 const routes: Routes = [
   Route.withShell([{
     path: 'clients',
-    data: { title: extract('Clients'), breadcrumb: 'Clients', routeParamBreadcrumb: false },
+    data: { title: 'Clients', breadcrumb: 'Clients', routeParamBreadcrumb: false },
     children: [
       {
         path: '',
@@ -61,7 +58,7 @@ const routes: Routes = [
       },
       {
         path: 'create',
-        data: { title: extract('Create Client'), breadcrumb: 'Create Client', routeParamBreadcrumb: false },
+        data: { title: 'Create Client', breadcrumb: 'Create Client', routeParamBreadcrumb: false },
         component: CreateClientComponent,
         resolve: {
           clientAddressFieldConfig: ClientAddressFieldConfigurationResolver,
@@ -71,7 +68,7 @@ const routes: Routes = [
       {
         path: ':clientId',
         component: ClientsViewComponent,
-        data: { title: extract('Clients View'), routeParamBreadcrumb: 'clientId' },
+        data: { title: 'Clients View', routeParamBreadcrumb: 'clientId' },
         resolve: {
           clientViewData: ClientViewResolver,
           clientTemplateData: ClientTemplateResolver,
@@ -86,7 +83,7 @@ const routes: Routes = [
           {
             path: 'general',
             component: GeneralTabComponent,
-            data: { title: extract('General'), breadcrumb: 'General', routeParamBreadcrumb: false },
+            data: { title: 'General', breadcrumb: 'General', routeParamBreadcrumb: false },
             resolve: {
               clientAccountsData: ClientAccountsResolver,
               clientChargesData: ClientChargesResolver,
@@ -96,7 +93,7 @@ const routes: Routes = [
           {
             path: 'address',
             component: AddressTabComponent,
-            data: { title: extract('Address'), breadcrumb: 'Address', routeParamBreadcrumb: false },
+            data: { title: 'Address', breadcrumb: 'Address', routeParamBreadcrumb: false },
             resolve: {
               clientAddressFieldConfig: ClientAddressFieldConfigurationResolver,
               clientAddressTemplateData: ClientAddressTemplateResolver,
@@ -105,7 +102,7 @@ const routes: Routes = [
           },
           {
             path: 'family-members',
-            data: { title: extract('Family Members'), breadcrumb: 'Family Members', routeParamBreadcrumb: false },
+            data: { title: 'Family Members', breadcrumb: 'Family Members', routeParamBreadcrumb: false },
             children: [
               {
                 path: '',
@@ -117,7 +114,7 @@ const routes: Routes = [
               {
                 path: 'add',
                 component: AddFamilyMemberComponent,
-                data: { title: extract('Add'), breadcrumb: 'Add', routeParamBreadcrumb: false },
+                data: { title: 'Add', breadcrumb: 'Add', routeParamBreadcrumb: false },
                 resolve: {
                   clientTemplate: ClientTemplateResolver
                 }
@@ -127,7 +124,7 @@ const routes: Routes = [
                 children: [{
                   path: 'edit',
                   component: EditFamilyMemberComponent,
-                  data: { title: extract('Family Member View'), routeParamBreadcrumb: 'familyMemberId' },
+                  data: { title: 'Family Member View', routeParamBreadcrumb: 'familyMemberId' },
                   resolve: {
                     clientTemplate: ClientTemplateResolver,
                     editFamilyMember: ClientFamilyMemberResolver
@@ -139,7 +136,7 @@ const routes: Routes = [
           {
             path: 'identities',
             component: IdentitiesTabComponent,
-            data: { title: extract('Identities'), breadcrumb: 'Identities', routeParamBreadcrumb: false },
+            data: { title: 'Identities', breadcrumb: 'Identities', routeParamBreadcrumb: false },
             resolve: {
               clientIdentities: ClientIdentitiesResolver,
               clientIdentifierTemplate: ClientIdentifierTemplateResolver
@@ -148,7 +145,7 @@ const routes: Routes = [
           {
             path: 'documents',
             component: DocumentsTabComponent,
-            data: { title: extract('Documents'), breadcrumb: 'Documents', routeParamBreadcrumb: false },
+            data: { title: 'Documents', breadcrumb: 'Documents', routeParamBreadcrumb: false },
             resolve: {
               clientDocuments: ClientDocumentsResolver
             }
@@ -156,7 +153,7 @@ const routes: Routes = [
           {
             path: 'notes',
             component: NotesTabComponent,
-            data: { title: extract('Notes'), breadcrumb: 'Notes', routeParamBreadcrumb: false },
+            data: { title: 'Notes', breadcrumb: 'Notes', routeParamBreadcrumb: false },
             resolve: {
               clientNotes: ClientNotesResolver
             }
@@ -166,7 +163,7 @@ const routes: Routes = [
             children: [{
               path: ':datatableName',
               component: DatatableTabComponent,
-              data: { title: extract('Data Table View'), routeParamBreadcrumb: 'datatableName' },
+              data: { title: 'Data Table View', routeParamBreadcrumb: 'datatableName' },
               resolve: {
                 clientDatatable: ClientDatatableResolver
               }
@@ -178,18 +175,18 @@ const routes: Routes = [
   },
   {
     path: 'clients',
-    data: { title: extract('Clients'), breadcrumb: 'Clients', routeParamBreadcrumb: false },
+    data: { title: 'Clients', breadcrumb: 'Clients', routeParamBreadcrumb: false },
     children: [
       {
         path: ':clientId',
-        data: { title: extract('Clients View'), routeParamBreadcrumb: 'clientId' },
+        data: { title: 'Clients View', routeParamBreadcrumb: 'clientId' },
         resolve: {
           clientViewData: ClientViewResolver
         },
         children: [
           {
             path: 'edit',
-            data: { title: extract('Edit Client'), breadcrumb: 'Edit', routeParamBreadcrumb: false },
+            data: { title: 'Edit Client', breadcrumb: 'Edit', routeParamBreadcrumb: false },
             component: EditClientComponent,
             resolve: {
               clientDataAndTemplate: ClientDataAndTemplateResolver
@@ -197,7 +194,7 @@ const routes: Routes = [
           },
           {
             path: 'actions/:name',
-            data: { title: extract('Client Actions'), routeParamBreadcrumb: 'name' },
+            data: { title: 'Client Actions', routeParamBreadcrumb: 'name' },
             component: ClientActionsComponent,
             resolve: {
               clientActionData: ClientActionsResolver
@@ -208,7 +205,7 @@ const routes: Routes = [
             children: [
               {
                 path: 'overview',
-                data: { title: extract('Charges Overview'), breadcrumb: 'Charges Overview' },
+                data: { title: 'Charges Overview', breadcrumb: 'Charges Overview' },
                 component: ChargesOverviewComponent,
                 resolve: {
                   clientChargesData: ClientChargeOverviewResolver
@@ -216,7 +213,7 @@ const routes: Routes = [
               },
               {
                 path: ':chargeId',
-                data: { title: extract('Charges'), routeParamBreadcrumb: 'chargeId' },
+                data: { title: 'Charges', routeParamBreadcrumb: 'chargeId' },
                 children: [
                   {
                     path: '',
@@ -227,7 +224,7 @@ const routes: Routes = [
                   },
                   {
                     path: 'pay',
-                    data: { title: extract('Pay Charge'), routeParamBreadcrumb: false },
+                    data: { title: 'Pay Charge', routeParamBreadcrumb: false },
                     component: ClientPayChargesComponent,
                     resolve: {
                       transactionData: ClientTransactionPayResolver

src/app/clients/clients-view/charges/charges-overview/charges-overview.component.html

@@ -1,6 +1,6 @@
-<div class="tab-container mat-typography">
+<mat-card class="charges-card">
 
-  <div style="margin-top: 5px;">
+  <div class="tab-container mat-typography">
 
     <h2>{{"labels.heading.Charges Overview" | translate}}</h2>
 
@@ -46,3 +46,4 @@
     <mat-paginator [pageSizeOptions]="[10, 20, 25]" showFirstLastButtons></mat-paginator>
 
   </div>
+</mat-card>

src/app/clients/clients-view/charges/charges-overview/charges-overview.component.scss

@@ -1,4 +1,15 @@
+table {
+	width: 100%;
+	margin-top: 3%;
+}
+
 .tab-container {
   padding: 1%;
   margin: 1%;
 }
+
+.charges-card {
+  margin: 0 auto;
+  max-width: 80rem;
+  width: 90%;
+}

src/app/clients/clients-view/family-members-tab/add-family-member/add-family-member.component.html

@@ -92,7 +92,7 @@
         <mat-datepicker-toggle matSuffix [for]="dueDatePicker"></mat-datepicker-toggle>
         <mat-datepicker #dueDatePicker></mat-datepicker>
         <mat-error *ngIf="addFamilyMemberForm.controls.dateOfBirth.hasError('required')">
-          {{"labels.inputs.Date of birth" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
+          {{"labels.inputs.Date Of Birth" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
         </mat-error>
       </mat-form-field>
 

src/app/clients/clients-view/family-members-tab/edit-family-member/edit-family-member.component.html

@@ -92,7 +92,7 @@
         <mat-datepicker-toggle matSuffix [for]="dueDatePicker"></mat-datepicker-toggle>
         <mat-datepicker #dueDatePicker></mat-datepicker>
         <mat-error *ngIf="editFamilyMemberForm.controls.dateOfBirth.hasError('required')">
-          {{"labels.inputs.Date of birth" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
+          {{"labels.inputs.Date Of Birth" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
         </mat-error>
       </mat-form-field>
 

src/app/clients/clients-view/general-tab/general-tab.component.html

@@ -102,7 +102,9 @@
     <div fxLayout="column" fxFlex="50%">
       <div fxLayout="row" fxLayoutAlign="flex-end">
         <button mat-raised-button class="f-right" color="primary"
-          (click)="toggleLoanAccountsOverview()">{{showClosedLoanAccounts?'View Active Accounts':'View Closed Accounts'}}</button>
+          (click)="toggleLoanAccountsOverview()">
+          {{ viewAccountsLabel(showClosedLoanAccounts) | translate }}
+        </button>
       </div>
     </div>
   </div>
@@ -113,12 +115,12 @@
       <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Account No" | translate}}. </th>
       <td mat-cell *matCellDef="let element"> <i class="fa fa-stop"
           [ngClass]="element.inArrears?'status-active-overdue':(element.status.code|statusLookup)"></i>
-        {{element.accountNo}}
+          <mifosx-account-number accountNo="{{element.accountNo}}"></mifosx-account-number>
       </td>
     </ng-container>
 
     <ng-container matColumnDef="Loan Account">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Loan Account" |translate}} </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Loan Product" | translate}} </th>
       <td mat-cell *matCellDef="let element"> {{element.productName}} </td>
     </ng-container>
 
@@ -187,12 +189,12 @@
       <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Account No" | translate}}. </th>
       <td mat-cell *matCellDef="let element"> <i class="fa fa-stop"
           [ngClass]="element.inArrears?'status-active-overdue':(element.status.code|statusLookup)"></i>
-        {{element.accountNo}}
+          <mifosx-account-number accountNo="{{element.accountNo}}"></mifosx-account-number>
       </td>
     </ng-container>
 
     <ng-container matColumnDef="Loan Account">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Loan Account" |translate}} </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Loan Product" | translate}} </th>
       <td mat-cell *matCellDef="let element"> {{element.productName}} </td>
     </ng-container>
 
@@ -239,7 +241,9 @@
     <div fxLayout="column" fxFlex="50%">
       <div fxLayout="row" fxLayoutAlign="flex-end">
         <button mat-raised-button class="f-right" color="primary"
-          (click)="toggleSavingAccountsOverview()">{{showClosedSavingAccounts?'View Active Accounts':'View Closed Accounts'}}</button>
+          (click)="toggleSavingAccountsOverview()">
+          {{ viewAccountsLabel(showClosedSavingAccounts) | translate }}
+        </button>
       </div>
     </div>
   </div>
@@ -250,11 +254,12 @@
     <ng-container matColumnDef="Account No">
       <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Account No" | translate}}. </th>
       <td mat-cell *matCellDef="let element"> <i class="fa fa-stop" [ngClass]="element.status.code|statusLookup"></i>
-        {{element.accountNo}} </td>
+        <mifosx-account-number accountNo="{{element.accountNo}}"></mifosx-account-number>
+      </td>
     </ng-container>
 
     <ng-container matColumnDef="Saving Account">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Saving Account" |translate}} </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Savings Product" | translate}} </th>
       <td mat-cell *matCellDef="let element"> {{element.productName}} </td>
     </ng-container>
 
@@ -309,11 +314,12 @@
     <ng-container matColumnDef="Account No">
       <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Account No" | translate}}. </th>
       <td mat-cell *matCellDef="let element"> <i class="fa fa-stop" [ngClass]="element.status.code|statusLookup"></i>
-        {{element.accountNo}} </td>
+        <mifosx-account-number accountNo="{{element.accountNo}}"></mifosx-account-number>
+      </td>
     </ng-container>
 
     <ng-container matColumnDef="Saving Account">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Saving Account" |translate}} </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Saving Product" | translate}} </th>
       <td mat-cell *matCellDef="let element"> {{element.productName}} </td>
     </ng-container>
 
@@ -337,7 +343,9 @@
     <div fxLayout="column" fxFlex="50%">
       <div fxLayout="row" fxLayoutAlign="flex-end">
         <button mat-raised-button class="f-right" color="primary"
-          (click)="toggleFixedAccountsOverview()">{{showClosedFixedAccounts?'View Active Accounts':'View Closed Accounts'}}</button>
+          (click)="toggleFixedAccountsOverview()">
+          {{ viewAccountsLabel(showClosedFixedAccounts) | translate }}
+        </button>
       </div>
     </div>
   </div>
@@ -348,11 +356,12 @@
     <ng-container matColumnDef="Account No">
       <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Account No" | translate}}. </th>
       <td mat-cell *matCellDef="let element"> <i class="fa fa-stop" [ngClass]="element.status.code|statusLookup"></i>
-        {{element.accountNo}} </td>
+        <mifosx-account-number accountNo="{{element.accountNo}}"></mifosx-account-number>
+      </td>
     </ng-container>
 
     <ng-container matColumnDef="Saving Account">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Saving Account" |translate}} </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Fixed Deposit Product" | translate}} </th>
       <td mat-cell *matCellDef="let element"> {{element.productName}} </td>
     </ng-container>
 
@@ -400,11 +409,12 @@
     <ng-container matColumnDef="Account No">
       <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Account No" | translate}}. </th>
       <td mat-cell *matCellDef="let element"> <i class="fa fa-stop" [ngClass]="element.status.code|statusLookup"></i>
-        {{element.accountNo}} </td>
+        <mifosx-account-number accountNo="{{element.accountNo}}"></mifosx-account-number>
+      </td>
     </ng-container>
 
     <ng-container matColumnDef="Saving Account">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Saving Account" |translate}} </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Fixed Deposit Product" | translate}} </th>
       <td mat-cell *matCellDef="let element"> {{element.productName}} </td>
     </ng-container>
 
@@ -429,7 +439,9 @@
     <div fxLayout="column" fxFlex="50%">
       <div fxLayout="row" fxLayoutAlign="flex-end">
         <button mat-raised-button class="f-right" color="primary"
-          (click)="toggleRecurringAccountsOverview()">{{showClosedRecurringAccounts?'View Active Accounts':'View Closed Accounts'}}</button>
+          (click)="toggleRecurringAccountsOverview()">
+          {{ viewAccountsLabel(showClosedRecurringAccounts) | translate }}
+        </button>
       </div>
     </div>
   </div>
@@ -440,11 +452,12 @@
     <ng-container matColumnDef="Account No">
       <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Account No" | translate}}. </th>
       <td mat-cell *matCellDef="let element"> <i class="fa fa-stop" [ngClass]="element.status.code|statusLookup"></i>
-        {{element.accountNo}} </td>
+        <mifosx-account-number accountNo="{{element.accountNo}}"></mifosx-account-number>
+      </td>
     </ng-container>
 
     <ng-container matColumnDef="Saving Account">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Saving Account" |translate}} </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Recurring Deposit Product" | translate}} </th>
       <td mat-cell *matCellDef="let element"> {{element.productName}} </td>
     </ng-container>
 
@@ -496,11 +509,12 @@
     <ng-container matColumnDef="Account No">
       <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Account No" | translate}}. </th>
       <td mat-cell *matCellDef="let element"> <i class="fa fa-stop" [ngClass]="element.status.code|statusLookup"></i>
-        {{element.accountNo}} </td>
+        <mifosx-account-number accountNo="{{element.accountNo}}"></mifosx-account-number>
+      </td>
     </ng-container>
 
     <ng-container matColumnDef="Saving Account">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Saving Account" |translate}} </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Recurring Deposit Product" | translate}} </th>
       <td mat-cell *matCellDef="let element"> {{element.productName}} </td>
     </ng-container>
 
@@ -524,7 +538,9 @@
     <div fxLayout="column" fxFlex="50%">
       <div fxLayout="row" fxLayoutAlign="flex-end">
         <button mat-raised-button class="f-right" color="primary"
-          (click)="toggleShareAccountsOverview()">{{showClosedSavingAccounts?'View Active Accounts':'View Closed Accounts'}}</button>
+          (click)="toggleShareAccountsOverview()">
+          {{ viewAccountsLabel(showClosedShareAccounts) | translate }}
+        </button>
       </div>
     </div>
   </div>
@@ -534,11 +550,12 @@
     <ng-container matColumnDef="Account No">
       <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Account No" | translate}}. </th>
       <td mat-cell *matCellDef="let element"> <i class="fa fa-stop" [ngClass]="element.status.code|statusLookup"></i>
-        {{element.accountNo}} </td>
+        <mifosx-account-number accountNo="{{element.accountNo}}"></mifosx-account-number>
+      </td>
     </ng-container>
 
     <ng-container matColumnDef="Share Account">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Share Account" |translate}} </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Share Product" | translate}} </th>
       <td mat-cell *matCellDef="let element"> {{element.productName}} </td>
     </ng-container>
 
@@ -582,11 +599,12 @@
     <ng-container matColumnDef="Account No">
       <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Account No" | translate}}. </th>
       <td mat-cell *matCellDef="let element"> <i class="fa fa-stop" [ngClass]="element.status.code|statusLookup"></i>
-        {{element.accountNo}} </td>
+        <mifosx-account-number accountNo="{{element.accountNo}}"></mifosx-account-number>
+      </td>
     </ng-container>
 
     <ng-container matColumnDef="Share Account">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Share Account" |translate}} </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Share Product" | translate}} </th>
       <td mat-cell *matCellDef="let element"> {{element.productName}} </td>
     </ng-container>
 

src/app/clients/clients-view/general-tab/general-tab.component.ts

@@ -156,4 +156,12 @@ export class GeneralTabComponent {
     this.router.navigate(['../', 'loans-accounts', loanId, 'transfer-funds', 'make-account-transfer'], { relativeTo: this.route, queryParams: queryParams });
   }
 
+  viewAccountsLabel(closed: boolean): string {
+    if (closed) {
+      return 'labels.buttons.View Active Accounts';
+    } else {
+      return 'labels.buttons.View Closed Accounts';
+    }
+  }
+
 }

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

@@ -1,9 +1,6 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
-/** Translation Imports */
-import { extract } from '../core/i18n/i18n.service';
-
 /** Custom Components */
 import { ViewCollateralComponent } from './view-collateral/view-collateral.component';
 
@@ -14,11 +11,11 @@ import { EditCollateralComponent } from './edit-collateral/edit-collateral.compo
 const routes: Routes = [
   {
     path: '',
-    data: { title: extract('Collateral'), breadcrumb: 'Collateral', routeParamBreadcrumb: false },
+    data: { title: 'Collateral', breadcrumb: 'Collateral', routeParamBreadcrumb: false },
     children: [
       {
         path: ':collateralId',
-        data: { title: extract('Collateral View'), routeParamBreadcrumb: 'collateralId' },
+        data: { title: 'Collateral View', routeParamBreadcrumb: 'collateralId' },
         children: [
           {
             path: '',
@@ -29,7 +26,7 @@ const routes: Routes = [
           },
           {
             path: 'edit',
-            data: { title: extract('edit'), routeParamBreadcrumb: 'edit' },
+            data: { title: 'edit', routeParamBreadcrumb: 'edit' },
             component: EditCollateralComponent,
             resolve: {
               clientCollateralData: ClientCollateralResolver,

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

@@ -4,9 +4,6 @@ import { Routes, RouterModule } from '@angular/router';
 /** Routing Imports */
 import { Route } from '../core/route/route.service';
 
-/** Translation Imports */
-import { extract } from '../core/i18n/i18n.service';
-
 /** Custom Components */
 import { IndividualCollectionSheetComponent } from './individual-collection-sheet/individual-collection-sheet.component';
 import { OfficesResolver } from 'app/organization/offices/common-resolvers/offices.resolver';
@@ -18,7 +15,7 @@ const routes: Routes = [
       children: [
         {
           path: 'individual-collection-sheet',
-          data: { title: extract('Individual Collection Sheet'), breadcrumb: 'Individual Collection Sheet', routeParamBreadcrumb: false },
+          data: { title: 'Individual Collection Sheet', breadcrumb: 'Individual Collection Sheet', routeParamBreadcrumb: false },
           component: IndividualCollectionSheetComponent,
           resolve: {
             officesData: OfficesResolver

src/app/core/core.module.ts

@@ -45,7 +45,7 @@ import { ContentComponent } from './shell/content/content.component';
   imports: [
     SharedModule,
     HttpClientModule,
-    TranslateModule.forRoot(),
+    TranslateModule,
     RouterModule
   ],
   declarations: [

src/app/core/i18n/i18n.service.ts

@@ -3,29 +3,15 @@ import { Injectable } from '@angular/core';
 
 /** Translation Imports */
 import { TranslateService } from '@ngx-translate/core';
-
+import { Observable } from 'rxjs';
-/** Custom Services */
-import { Logger } from '../logger/logger.service';
-
-/** Initialize Logger */
-const log = new Logger('I18nService');
-
-/**
- * Pass-through function to mark a string for translation extraction.
- * Running `npm translations:extract` will include the given string by using this.
- * @param {string} s The string to extract for translation.
- * @return {string} The translated string.
- */
-export function extract(s: string) {
-  return I18nService.translate(s);
-}
 
 @Injectable()
 export class I18nService {
 
   constructor(private translateService: TranslateService) { }
 
-  public static translate(key: string): string {
+  public translate(key: string): Observable<string> {
-    return key;
+    return this.translateService.get(key);
   }
+
 }

src/app/core/shell/breadcrumb/breadcrumb.component.html

@@ -1,13 +1,13 @@
 <nav class="breadcrumb-wrapper">
   <ul class="breadcrumb">
-    <span #breadcrumb class="breadcrumb-title">{{ breadcrumbs[breadcrumbs.length-1].label | translate }}</span>
+    <span #breadcrumb class="breadcrumb-title">{{ getTranslate(breadcrumbs[breadcrumbs.length-1].label) }}</span>
     <span *ngIf="breadcrumbs.length-1 !== 0" class="separator">
       <li *ngFor="let breadcrumb of breadcrumbs; let last = last" class="breadcrumb-label">
         <span *ngIf="!last" class="breadcrumb-link">
-          <a *ngIf="breadcrumb.url" [routerLink]="breadcrumb.url">{{ breadcrumb.label | translate }}</a>
+          <a *ngIf="breadcrumb.url" [routerLink]="breadcrumb.url">{{ getTranslate(breadcrumb.label) }}</a>
-          <span *ngIf="!breadcrumb.url">{{ breadcrumb.label | translate }}</span>
+          <span *ngIf="!breadcrumb.url">{{ getTranslate(breadcrumb.label) }}</span>
         </span>
-        <span *ngIf="last">{{ breadcrumb.label | translate }}</span>
+        <span *ngIf="last">{{ getTranslate(breadcrumb.label) }}</span>
       </li>
     </span>
   </ul>

src/app/core/shell/breadcrumb/breadcrumb.component.ts

@@ -11,6 +11,7 @@ import { Breadcrumb } from './breadcrumb.model';
 /** Custom Services */
 import { PopoverService } from '../../../configuration-wizard/popover/popover.service';
 import { ConfigurationWizardService } from '../../../configuration-wizard/configuration-wizard.service';
+import { TranslateService } from '@ngx-translate/core';
 
 /**
  * Route data property to generate breadcrumb using a static string.
@@ -68,7 +69,8 @@ export class BreadcrumbComponent implements OnInit, AfterViewInit {
   constructor(private activatedRoute: ActivatedRoute,
               private router: Router,
               private configurationWizardService: ConfigurationWizardService,
-              private popoverService: PopoverService) {
+              private popoverService: PopoverService,
+              private translateService: TranslateService) {
     this.generateBreadcrumbs();
   }
 
@@ -228,4 +230,11 @@ export class BreadcrumbComponent implements OnInit, AfterViewInit {
     this.router.navigate(['/home']);
   }
 
+  getTranslate(text: string): any {
+    const key: string = 'labels.text.' + text;
+    const translation = this.translateService.instant(key);
+    const result = (translation !== key) ? translation : text;
+    return result;
+  }
+
 }

src/app/core/utils/dates.ts

@@ -17,7 +17,8 @@ export class Dates {
   }
 
   public formatDate(timestamp: any, dateFormat: string): string {
-    return this.datePipe.transform(timestamp, dateFormat);
+    const datePipe: DatePipe = new DatePipe(this.language.code);
+    return datePipe.transform(timestamp, dateFormat);
   }
 
   public parseDate(value: any): Date {
@@ -35,4 +36,12 @@ export class Dates {
   public convertToDate(value: any, format: string): Date {
     return moment(value).toDate();
   }
+
+  get language() {
+    if (!localStorage.getItem('mifosXLanguage')) {
+      return 'en';
+    }
+    return JSON.parse(localStorage.getItem('mifosXLanguage'));
+  }
+
 }

src/app/deposits/fixed-deposits/fixed-deposits-routing.module.ts

@@ -2,9 +2,6 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
-/** Translation Imports */
-import { extract } from 'app/core/i18n/i18n.service';
-
 /** Custom Components */
 import { FixedDepositAccountViewComponent } from './fixed-deposit-account-view/fixed-deposit-account-view.component';
 import { InterestRateChartTabComponent } from './fixed-deposit-account-view/interest-rate-chart-tab/interest-rate-chart-tab.component';
@@ -29,11 +26,11 @@ import { FixedDepositsAccountAndTemplateResolver } from './common-resolvers/fixe
 const routes: Routes = [
   {
     path: '',
-    data: { title: extract('All Fixed Deposits'), breadcrumb: 'Fixed Deposits', routeParamBreadcrumb: false },
+    data: { title: 'All Fixed Deposits', breadcrumb: 'Fixed Deposits', routeParamBreadcrumb: false },
     children: [
       {
         path: 'create',
-        data: { title: extract('Create Fixed Deposit Account'), breadcrumb: 'Create Fixed Deposit Account' },
+        data: { title: 'Create Fixed Deposit Account', breadcrumb: 'Create Fixed Deposit Account' },
         component: CreateFixedDepositAccountComponent,
         resolve: {
           fixedDepositsAccountTemplate: FixedDepositsAccountTemplateResolver
@@ -41,7 +38,7 @@ const routes: Routes = [
       },
       {
         path: ':fixedDepositAccountId',
-        data: { title: extract('Fixed Deposit Account View'), routeParamBreadcrumb: 'fixedDepositAccountId' },
+        data: { title: 'Fixed Deposit Account View', routeParamBreadcrumb: 'fixedDepositAccountId' },
         resolve: {
           fixedDepositsAccountData: FixedDepositsAccountViewResolver,
         },
@@ -62,22 +59,22 @@ const routes: Routes = [
               {
                 path: 'interest-rate-chart',
                 component: InterestRateChartTabComponent,
-                data: { title: extract('Fixed Deposit Account Interest Rate Chart'), breadcrumb: 'Interest Rate Chart', routeParamBreadcrumb: false },
+                data: { title: 'Fixed Deposit Account Interest Rate Chart', breadcrumb: 'Interest Rate Chart', routeParamBreadcrumb: false },
               },
               {
                 path: 'transactions',
                 component: TransactionsTabComponent,
-                data: { title: extract('Fixed Deposit Account Transactions'), breadcrumb: 'Transactions', routeParamBreadcrumb: false },
+                data: { title: 'Fixed Deposit Account Transactions', breadcrumb: 'Transactions', routeParamBreadcrumb: false },
               },
               {
                 path: 'charges',
                 component: ChargesTabComponent,
-                data: { title: extract('Fixed Deposit Account Charges'), breadcrumb: 'Charges', routeParamBreadcrumb: false }
+                data: { title: 'Fixed Deposit Account Charges', breadcrumb: 'Charges', routeParamBreadcrumb: false }
               },
               {
                 path: 'standing-instructions',
                 component: StandingInstructionsTabComponent,
-                data: { title: extract('Fixed Deposit Account Standing Instructions'), breadcrumb: 'Standing Instructions', routeParamBreadcrumb: false }
+                data: { title: 'Fixed Deposit Account Standing Instructions', breadcrumb: 'Standing Instructions', routeParamBreadcrumb: false }
               },
               {
                 path: 'datatables',
@@ -85,7 +82,7 @@ const routes: Routes = [
                   {
                     path: ':datatableName',
                     component: DatatableTabsComponent,
-                    data: { title: extract('View Data Table'), routeParamBreadcrumb: 'datatableName' },
+                    data: { title: 'View Data Table', routeParamBreadcrumb: 'datatableName' },
                     resolve: {
                       savingsDatatable: SavingsDatatableResolver
                     }
@@ -96,7 +93,7 @@ const routes: Routes = [
           },
           {
             path: 'edit',
-            data: { title: extract('Edit Fixed Deposit Account'), breadcrumb: 'Edit', routeParamBreadcrumb: false },
+            data: { title: 'Edit Fixed Deposit Account', breadcrumb: 'Edit', routeParamBreadcrumb: false },
             component: EditFixedDepositAccountComponent,
             resolve: {
               fixedDepositsAccountAndTemplate: FixedDepositsAccountAndTemplateResolver
@@ -104,7 +101,7 @@ const routes: Routes = [
           },
           {
             path: 'transactions',
-            data: { title: extract('Fixed Deposits Account Transactions'), breadcrumb: 'Transactions', routeParamBreadcrumb: false },
+            data: { title: 'Fixed Deposits Account Transactions', breadcrumb: 'Transactions', routeParamBreadcrumb: false },
             children: [
               {
                 path: '',
@@ -131,7 +128,7 @@ const routes: Routes = [
           },
           {
             path: 'actions/:name',
-            data: { title: extract('Fixed Deposits Account Actions'), routeParamBreadcrumb: 'name' },
+            data: { title: 'Fixed Deposits Account Actions', routeParamBreadcrumb: 'name' },
             component: FixedDepositsAccountActionsComponent,
             resolve: {
               fixedDepositsAccountActionData: FixedDepositsAccountActionsResolver

src/app/deposits/recurring-deposits/recurring-deposits-routing.module.ts

@@ -2,9 +2,6 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
-/** Translation Imports */
-import { extract } from '../../core/i18n/i18n.service';
-
 /** Custom Components */
 import { RecurringDepositsAccountViewComponent } from './recurring-deposits-account-view/recurring-deposits-account-view.component';
 import { InterestRateChartTabComponent } from './recurring-deposits-account-view/interest-rate-chart-tab/interest-rate-chart-tab.component';
@@ -32,11 +29,11 @@ import { RecurringDepositsAccountTransactionTemplateResolver } from './common-re
 const routes: Routes = [
   {
     path: '',
-    data: { title: extract('Recurring Deposits'), breadcrumb: 'Recurring Deposits', routeParamBreadcrumb: false },
+    data: { title: 'Recurring Deposits', breadcrumb: 'Recurring Deposits', routeParamBreadcrumb: false },
     children: [
       {
         path: 'create-recurring-deposits-account',
-        data: { title: extract('Create Recurring Deposits Account'), breadcrumb: 'Create Recurring Deposits Account' },
+        data: { title: 'Create Recurring Deposits Account', breadcrumb: 'Create Recurring Deposits Account' },
         component: CreateRecurringDepositsAccountComponent,
         resolve: {
           recurringDepositsAccountTemplate: RecurringDepositsAccountTemplateResolver
@@ -44,7 +41,7 @@ const routes: Routes = [
       },
       {
         path: ':recurringDepositAccountId',
-        data: { title: extract('RecurringDeposit Account View'), routeParamBreadcrumb: 'recurringDepositAccountId' },
+        data: { title: 'RecurringDeposit Account View', routeParamBreadcrumb: 'recurringDepositAccountId' },
         children: [
           {
             path: '',
@@ -57,7 +54,7 @@ const routes: Routes = [
               {
                 path: 'interest-rate-chart',
                 component: InterestRateChartTabComponent,
-                data: { title: extract('Recurring Deposit Account Interest Rate Chart'), breadcrumb: 'Interest Rate Chart', routeParamBreadcrumb: false },
+                data: { title: 'Recurring Deposit Account Interest Rate Chart', breadcrumb: 'Interest Rate Chart', routeParamBreadcrumb: false },
                 resolve: {
                   recurringDepositsAccountData: RecurringDepositsAccountDataResolver
                 }
@@ -65,7 +62,7 @@ const routes: Routes = [
               {
                 path: 'transactions',
                 component: TransactionsTabComponent,
-                data: { title: extract('Recurring Deposit Account Transactions'), breadcrumb: 'Transactions', routeParamBreadcrumb: false },
+                data: { title: 'Recurring Deposit Account Transactions', breadcrumb: 'Transactions', routeParamBreadcrumb: false },
                 resolve: {
                   recurringDepositsAccountData: RecurringDepositsAccountDataResolver
                 }
@@ -73,12 +70,12 @@ const routes: Routes = [
               {
                 path: 'charges',
                 component: ChargesTabComponent,
-                data: { title: extract('Recurring Deposit Account Charges'), breadcrumb: 'Charges', routeParamBreadcrumb: false }
+                data: { title: 'Recurring Deposit Account Charges', breadcrumb: 'Charges', routeParamBreadcrumb: false }
               },
               {
                 path: 'standing-instructions-tab',
                 component: StandingInstructionsTabComponent,
-                data: { title: extract('Recurring Deposit Account Standing Instructions'), breadcrumb: 'Standing Instructions', routeParamBreadcrumb: false },
+                data: { title: 'Recurring Deposit Account Standing Instructions', breadcrumb: 'Standing Instructions', routeParamBreadcrumb: false },
                 resolve: {
                   recurringDepositsAccountData: RecurringDepositsAccountDataResolver
                 }
@@ -89,7 +86,7 @@ const routes: Routes = [
                   {
                     path: ':datatableName',
                     component: DatatableTabsComponent,
-                    data: { title: extract('View Data Table'), routeParamBreadcrumb: 'datatableName' },
+                    data: { title: 'View Data Table', routeParamBreadcrumb: 'datatableName' },
                     resolve: {
                       savingsDatatable: SavingsDatatableResolver
                     }
@@ -100,7 +97,7 @@ const routes: Routes = [
           },
           {
             path: 'edit-recurring-deposit-account',
-            data: { title: extract('Edit Recurring Deposit Account'), breadcrumb: 'Edit', routeParamBreadcrumb: false },
+            data: { title: 'Edit Recurring Deposit Account', breadcrumb: 'Edit', routeParamBreadcrumb: false },
             component: EditRecurringDepositAccountComponent,
             resolve: {
               recurringDepositsAccountAndTemplate: RecurringDepositsAccountAndTemplateResolver
@@ -108,7 +105,7 @@ const routes: Routes = [
           },
           {
             path: 'transactions',
-            data: { title: extract('Recurring Deposits Account Transactions'), breadcrumb: 'Transactions', routeParamBreadcrumb: false },
+            data: { title: 'Recurring Deposits Account Transactions', breadcrumb: 'Transactions', routeParamBreadcrumb: false },
             children: [
               {
                 path: '',
@@ -142,7 +139,7 @@ const routes: Routes = [
           },
           {
             path: 'actions/:name',
-            data: { title: extract('Recurring Deposits Account Actions'), routeParamBreadcrumb: 'name' },
+            data: { title: 'Recurring Deposits Account Actions', routeParamBreadcrumb: 'name' },
             component: RecurringDepositsAccountActionsComponent,
             resolve: {
               recurringDepositsAccountActionData: RecurringDepositsAccountActionsResolver
@@ -154,11 +151,11 @@ const routes: Routes = [
   },
   {
     path: '',
-    data: { title: extract('All Recurring Deposits'), breadcrumb: 'Recurring Deposits', routeParamBreadcrumb: false },
+    data: { title: 'All Recurring Deposits', breadcrumb: 'Recurring Deposits', routeParamBreadcrumb: false },
     children: [
       {
         path: ':recurringDepositAccountId',
-        data: { title: extract('RecurringDeposit Account View'), routeParamBreadcrumb: 'recurringDepositAccountId' },
+        data: { title: 'RecurringDeposit Account View', routeParamBreadcrumb: 'recurringDepositAccountId' },
         children: [
           {
             path: 'standing-instructions',

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

@@ -5,9 +5,6 @@ import { Routes, RouterModule } from '@angular/router';
 /** Routing Imports */
 import { Route } from '../core/route/route.service';
 
-/** Translation Imports */
-import { extract } from '../core/i18n/i18n.service';
-
 /** Custom Imports */
 import { GroupsComponent } from './groups.component';
 import { GroupsViewComponent } from './groups-view/groups-view.component';
@@ -38,7 +35,7 @@ const routes: Routes = [
   Route.withShell([
     {
       path: 'groups',
-      data: { title: extract('Groups'), breadcrumb: 'Groups', routeParamBreadcrumb: false },
+      data: { title: 'Groups', breadcrumb: 'Groups', routeParamBreadcrumb: false },
       children: [
         {
           path: '',
@@ -47,14 +44,14 @@ const routes: Routes = [
         {
           path: 'create',
           component: CreateGroupComponent,
-          data: { title: extract('Create Group'), breadcrumb: 'Create', routeParamBreadcrumb: false },
+          data: { title: 'Create Group', breadcrumb: 'Create', routeParamBreadcrumb: false },
           resolve: {
             offices: OfficesResolver
           }
         },
         {
           path: ':groupId',
-          data: { title: extract('View Group'), routeParamBreadcrumb: 'groupId' },
+          data: { title: 'View Group', routeParamBreadcrumb: 'groupId' },
           resolve: {
             groupViewData: GroupViewResolver
           },
@@ -75,7 +72,7 @@ const routes: Routes = [
                 {
                   path: 'general',
                   component: GeneralTabComponent,
-                  data: { title: extract('General'), breadcrumb: 'General', routeParamBreadcrumb: false },
+                  data: { title: 'General', breadcrumb: 'General', routeParamBreadcrumb: false },
                   resolve: {
                     groupAccountsData: GroupAccountsResolver,
                     groupSummary: GroupSummaryResolver,
@@ -86,7 +83,7 @@ const routes: Routes = [
                 {
                   path: 'notes',
                   component: NotesTabComponent,
-                  data: { title: extract('Notes'), breadcrumb: 'Notes', routeParamBreadcrumb: false },
+                  data: { title: 'Notes', breadcrumb: 'Notes', routeParamBreadcrumb: false },
                   resolve: {
                     groupNotes: GroupNotesResolver
                   }
@@ -94,7 +91,7 @@ const routes: Routes = [
                 {
                   path: 'committee',
                   component: CommitteeTabComponent,
-                  data: { title: extract('Committee'), breadcrumb: 'Committee', routeParamBreadcrumb: false }
+                  data: { title: 'Committee', breadcrumb: 'Committee', routeParamBreadcrumb: false }
                 },
                 {
                   path: 'datatables',
@@ -102,7 +99,7 @@ const routes: Routes = [
                     {
                       path: ':datatableName',
                       component: DatatableTabsComponent,
-                      data: { title: extract('View Data Table'), routeParamBreadcrumb: 'datatableName' },
+                      data: { title: 'View Data Table', routeParamBreadcrumb: 'datatableName' },
                       resolve: {
                         groupDatatable: GroupDatatableResolver
                       }
@@ -114,7 +111,7 @@ const routes: Routes = [
             {
               path: 'edit',
               component: EditGroupComponent,
-              data: { title: extract('Edit Group'), breadcrumb: 'Edit', routeParamBreadcrumb: false },
+              data: { title: 'Edit Group', breadcrumb: 'Edit', routeParamBreadcrumb: false },
               resolve: {
                 groupAndTemplateData: GroupDataAndTemplateResolver,
                 groupViewData: GroupViewResolver
@@ -129,7 +126,7 @@ const routes: Routes = [
                 },
                 {
                   path: 'add-role',
-                  data: { title: extract('Add Role'), breadcrumb: 'Add Role', routeParamBreadcrumb: false },
+                  data: { title: 'Add Role', breadcrumb: 'Add Role', routeParamBreadcrumb: false },
                   component: AddRoleComponent,
                   resolve: {
                     groupAndTemplateData: GroupDataAndTemplateResolver
@@ -139,7 +136,7 @@ const routes: Routes = [
             },
             {
               path: 'actions/:action',
-              data: { title: extract('Group Actions'), breadcrumb: 'action', routeParamBreadcrumb: 'action' },
+              data: { title: 'Group Actions', breadcrumb: 'action', routeParamBreadcrumb: 'action' },
               component: GroupActionsComponent,
               resolve: {
                 groupActionData: GroupActionsResolver

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

@@ -5,9 +5,6 @@ import { Routes, RouterModule } from '@angular/router';
 /** Routing Imports */
 import { Route } from '../core/route/route.service';
 
-/** Translation Imports */
-import { extract } from '../core/i18n/i18n.service';
-
 /** Custom Components */
 import { HomeComponent } from './home.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
@@ -26,12 +23,12 @@ const routes: Routes = [
     {
       path: 'home',
       component: HomeComponent,
-      data: { title: extract('Home') }
+      data: { title: 'Home' }
     },
     {
       path: 'dashboard',
       component: DashboardComponent,
-      data: { title: extract('Dashboard'), breadcrumb: 'Dashboard' },
+      data: { title: 'Dashboard', breadcrumb: 'Dashboard' },
       resolve: {
         offices: OfficesResolver
       }

src/app/home/home.module.ts

@@ -24,7 +24,7 @@ import { TranslateModule } from '@ngx-translate/core';
     SharedModule,
     PipesModule,
     HomeRoutingModule,
-    TranslateModule.forRoot(),
+    TranslateModule,
   ],
   declarations: [
     HomeComponent,

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

@@ -2,9 +2,6 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
-/** Translation Imports */
-import { extract } from '../core/i18n/i18n.service';
-
 /** Custom Components */
 import { LoansViewComponent } from './loans-view/loans-view.component';
 import { GeneralTabComponent } from './loans-view/general-tab/general-tab.component';
@@ -66,11 +63,11 @@ import { LoanCollateralsResolver } from './common-resolvers/loan-collaterals.res
 const routes: Routes = [
   {
     path: '',
-    data: { title: extract('Loans'), breadcrumb: 'Loans', routeParamBreadcrumb: false },
+    data: { title: 'Loans', breadcrumb: 'Loans', routeParamBreadcrumb: false },
     children: [
       {
         path: 'create',
-        data: { title: extract('Create Loans Account'), breadcrumb: 'Create Loans Account' },
+        data: { title: 'Create Loans Account', breadcrumb: 'Create Loans Account' },
         component: CreateLoansAccountComponent,
         resolve: {
           loansAccountTemplate: LoansAccountTemplateResolver
@@ -78,7 +75,7 @@ const routes: Routes = [
       },
       {
         path: ':loanId',
-        data: { title: extract('Loan View'), routeParamBreadcrumb: 'loanId' },
+        data: { title: 'Loan View', routeParamBreadcrumb: 'loanId' },
         component: LoansViewComponent,
         resolve: {
           loanDetailsData: LoanDetailsResolver,
@@ -94,7 +91,7 @@ const routes: Routes = [
           {
             path: 'general',
             component: GeneralTabComponent,
-            data: { title: extract('General'), breadcrumb: 'General', routeParamBreadcrumb: false },
+            data: { title: 'General', breadcrumb: 'General', routeParamBreadcrumb: false },
             resolve: {
               loanDetailsData: LoanDetailsResolver,
               loanDatatables: LoanDatatablesResolver
@@ -103,21 +100,21 @@ const routes: Routes = [
           {
             path: 'accountdetail',
             component: AccountDetailsComponent,
-            data: { title: extract('Account Detail'), breadcrumb: 'Account Detail', routeParamBreadcrumb: false }
+            data: { title: 'Account Detail', breadcrumb: 'Account Detail', routeParamBreadcrumb: false }
           },
           {
             path: 'original-schedule',
             component: OriginalScheduleTabComponent,
-            data: { title: extract('Original Schedule'), breadcrumb: 'Original Schedule', routeParamBreadcrumb: false },
+            data: { title: 'Original Schedule', breadcrumb: 'Original Schedule', routeParamBreadcrumb: false },
           },
           {
             path: 'repayment-schedule',
             component: RepaymentScheduleTabComponent,
-            data: { title: extract('Repayment Schedule'), breadcrumb: 'Repayment Schedule', routeParamBreadcrumb: false },
+            data: { title: 'Repayment Schedule', breadcrumb: 'Repayment Schedule', routeParamBreadcrumb: false },
           },
           {
             path: 'transactions',
-            data: { title: extract('Loans Account Transactions'), breadcrumb: 'Transactions', routeParamBreadcrumb: false },
+            data: { title: 'Loans Account Transactions', breadcrumb: 'Transactions', routeParamBreadcrumb: false },
             children: [
               {
                 path: '',
@@ -132,7 +129,7 @@ const routes: Routes = [
           },
           {
             path: 'delinquencytags',
-            data: { title: extract('Loans Delinquency Tags'), breadcrumb: 'Delinquency Tags', routeParamBreadcrumb: false },
+            data: { title: 'Loans Delinquency Tags', breadcrumb: 'Delinquency Tags', routeParamBreadcrumb: false },
             resolve: {
               loanDelinquencyTagsData: LoanDelinquencyTagsResolver
             },
@@ -159,7 +156,7 @@ const routes: Routes = [
           {
             path: 'loan-collateral',
             component: LoanCollateralTabComponent,
-            data: { title: extract('Loan Collateral Details'), breadcrumb: 'Loan Collateral Details', routeParamBreadcrumb: false },
+            data: { title: 'Loan Collateral Details', breadcrumb: 'Loan Collateral Details', routeParamBreadcrumb: false },
             resolve: {
               loanCollaterals: LoanCollateralsResolver
             }
@@ -167,27 +164,27 @@ const routes: Routes = [
           {
             path: 'loan-tranche-details',
             component: LoanTrancheDetailsComponent,
-            data: { title: extract('Loan Tranche Details'), breadcrumb: 'Loan Tranche Details', routeParamBreadcrumb: false },
+            data: { title: 'Loan Tranche Details', breadcrumb: 'Loan Tranche Details', routeParamBreadcrumb: false },
           },
           {
             path: 'overdue-charges',
             component: OverdueChargesTabComponent,
-            data: { title: extract('Overdue Charges'), breadcrumb: 'Overdue Charges', routeParamBreadcrumb: false }
+            data: { title: 'Overdue Charges', breadcrumb: 'Overdue Charges', routeParamBreadcrumb: false }
           },
           {
             path: 'floating-interest-rates',
             component: FloatingInterestRatesComponent,
-            data: { title: extract('Floating Interest Rates'), breadcrumb: 'Floating Interest Rates', routeParamBreadcrumb: false },
+            data: { title: 'Floating Interest Rates', breadcrumb: 'Floating Interest Rates', routeParamBreadcrumb: false },
           },
           {
             path: 'charges',
-            data: { title: extract('Loans Account Charges'), breadcrumb: 'Charges', routeParamBreadcrumb: false },
+            data: { title: 'Loans Account Charges', breadcrumb: 'Charges', routeParamBreadcrumb: false },
             component: ChargesTabComponent,
           },
           {
             path: 'loan-documents',
             component: LoanDocumentsTabComponent,
-            data: { title: extract('Loan Documents'), breadcrumb: 'Loan Documents', routeParamBreadcrumb: false },
+            data: { title: 'Loan Documents', breadcrumb: 'Loan Documents', routeParamBreadcrumb: false },
             resolve: {
               loanDocuments: LoanDocumentsResolver
             },
@@ -195,7 +192,7 @@ const routes: Routes = [
           {
             path: 'notes',
             component: NotesTabComponent,
-            data: { title: extract('Notes'), breadcrumb: 'Notes', routeParamBreadcrumb: false },
+            data: { title: 'Notes', breadcrumb: 'Notes', routeParamBreadcrumb: false },
             resolve: {
               loanNotes: LoanNotesResolver
             },
@@ -203,12 +200,12 @@ const routes: Routes = [
           {
             path: 'standing-instruction',
             component: StandingInstructionsTabComponent,
-            data: { title: extract('Standing Instructions'), breadcrumb: 'Standing Instructions', routeParamBreadcrumb: false }
+            data: { title: 'Standing Instructions', breadcrumb: 'Standing Instructions', routeParamBreadcrumb: false }
           },
           {
             path: 'external-asset-owner',
             component: ExternalAssetOwnerTabComponent,
-            data: { title: extract('External Asset Owner'), breadcrumb: 'External Asset Owner', routeParamBreadcrumb: false },
+            data: { title: 'External Asset Owner', breadcrumb: 'External Asset Owner', routeParamBreadcrumb: false },
             resolve: {
               activeTransferData: ExternalAssetOwnerActiveTransferResolver,
               loanTransfersData: ExternalAssetOwnerResolver
@@ -219,7 +216,7 @@ const routes: Routes = [
             children: [{
               path: ':datatableName',
               component: DatatableTabComponent,
-              data: { title: extract('Data Table View'), routeParamBreadcrumb: 'datatableName' },
+              data: { title: 'Data Table View', routeParamBreadcrumb: 'datatableName' },
               resolve: {
                 loanDatatable: LoanDatatableResolver
               }
@@ -229,7 +226,7 @@ const routes: Routes = [
       },
       {
         path: ':loanId/transactions/:id',
-        data: { title: extract('Loans Account Transactions'), breadcrumb: 'Transactions', routeParamBreadcrumb: false },
+        data: { title: 'Loans Account Transactions', breadcrumb: 'Transactions', routeParamBreadcrumb: false },
         resolve: {
           loanDetailsAssociationData: LoanDetailsResolver
         },
@@ -262,7 +259,7 @@ const routes: Routes = [
       },
       {
         path: ':loanId/edit-loans-account',
-        data: { title: extract('Modify Loans Account'), breadcrumb: 'Modify Loans Account', routeParamBreadcrumb: 'Edit' },
+        data: { title: 'Modify Loans Account', breadcrumb: 'Modify Loans Account', routeParamBreadcrumb: 'Edit' },
         component: EditLoansAccountComponent,
         resolve: {
           loansAccountAndTemplate: LoansAccountAndTemplateResolver
@@ -270,7 +267,7 @@ const routes: Routes = [
       },
       {
         path: ':loanId/charges',
-        data: { title: extract('Loans Account Charges'), breadcrumb: 'Charges', routeParamBreadcrumb: false },
+        data: { title: 'Loans Account Charges', breadcrumb: 'Charges', routeParamBreadcrumb: false },
         children: [
           {
             path: '',
@@ -299,7 +296,7 @@ const routes: Routes = [
       {
         path: ':loanId/actions/:action',
         component: LoanAccountActionsComponent,
-        data: { title: extract('Loan Account Actions'), breadcrumb: 'action', routeParamBreadcrumb: 'action' },
+        data: { title: 'Loan Account Actions', breadcrumb: 'action', routeParamBreadcrumb: 'action' },
         resolve: {
           actionButtonData: LoanActionButtonResolver
         }
@@ -310,7 +307,7 @@ const routes: Routes = [
       },
       {
         path: 'edit-loans-account',
-        data: { title: extract('Modify Loans Account'), breadcrumb: 'Modify Loans Account', routeParamBreadcrumb: 'Edit' },
+        data: { title: 'Modify Loans Account', breadcrumb: 'Modify Loans Account', routeParamBreadcrumb: 'Edit' },
         component: EditLoansAccountComponent,
         resolve: {
           loansAccountAndTemplate: LoansAccountAndTemplateResolver
@@ -323,7 +320,7 @@ const routes: Routes = [
     children: [
       {
         path: 'create',
-        data: { title: extract('Create GLIM Application'), breadcrumb: 'Create GLIM Application' },
+        data: { title: 'Create GLIM Application', breadcrumb: 'Create GLIM Application' },
         component: CreateGlimAccountComponent,
         resolve: {
           loansAccountTemplate: GLIMLoanTemplateResolver,
@@ -333,7 +330,7 @@ const routes: Routes = [
       },
       {
         path: ':glimId',
-        data: { title: extract('GSIM Account View'), routeParamBreadcrumb: 'savingAccountId' },
+        data: { title: 'GSIM Account View', routeParamBreadcrumb: 'savingAccountId' },
         component: GlimAccountComponent,
         resolve: {
           glimData: GLIMViewResolver,

src/app/loans/loans-view/account-details/account-details.component.html

@@ -1,4 +1,5 @@
 <div class="container">
+  <h3> {{"labels.heading.Loan Details" | translate}} </h3>
 
     <div fxLayout="row wrap" fxLayout.lt-md="column">
 
@@ -28,7 +29,7 @@
 
         <div fxFlexFill>
             <span fxFlex="50%"> {{"labels.inputs.Interest" | translate}} </span>
-            <span fxFlex="50%"> {{loanDetails.annualInterestRate}} per annum ({{loanDetails.interestRatePerPeriod}}%&nbsp; {{loanDetails.interestRateFrequencyType.value}}) - {{loanDetails.interestType.value}} </span>
+            <span fxFlex="50%"> {{loanDetails.annualInterestRate | formatNumber}} {{"labels.text.per annum" | translate}} ({{loanDetails.interestRatePerPeriod}} %&nbsp; {{loanDetails.interestRateFrequencyType.value}}) - {{"labels.text." + loanDetails.interestType.value | translate}} </span>
         </div>
 
         <div fxFlexFill>
@@ -53,7 +54,8 @@
 
         <div fxFlexFill>
             <span fxFlex="50%"> Fund Source</span>
-            <span fxFlex="50%"> {{loanDetails.fundName}} </span>
+            <span fxFlex="50%" *ngIf="loanDetails.fundName"> {{loanDetails.fundName}} </span>
+            <span fxFlex="50%" *ngIf="!loanDetails.fundName"> {{"labels.inputs.Unassigned" | translate}} </span>
         </div>
 
         <div fxFlexFill>
@@ -68,12 +70,12 @@
 
         <div fxFlexFill>
             <span fxFlex="50%"> {{"labels.inputs.Allow Partial Interest Calculation with same as repayment" | translate}}</span>
-            <span fxFlex="50%"> {{loanDetails.allowPartialPeriodInterestCalcualtion}} </span>
+            <span fxFlex="50%"> {{loanDetails.allowPartialPeriodInterestCalcualtion | yesNo}} </span>
         </div>
 
         <div fxFlexFill>
             <span fxFlex="50%"> {{"labels.inputs.Interest Type" | translate}}</span>
-            <span fxFlex="50%"> {{loanDetails.interestType.value}} </span>
+            <span fxFlex="50%"> {{"labels.text." + loanDetails.interestType.value | translate}} </span>
         </div>
 
         <div fxFlexFill>
@@ -158,7 +160,7 @@
 
         <div fxFlexFill *ngIf="loanDetails.isVariableInstallmentsAllowed">
             <span fxFlex="50%"> {{"labels.inputs.Gap between Installments" | translate}}</span>
-            <span fxFlex="50%"> {{loanDetails.minimumGap}}&nbsp;Days&nbsp;, Max:{{loanDetails.maximumGap}}&nbsp;Days) </span>
+            <span fxFlex="50%"> {{loanDetails.minimumGap | formatNumber}}&nbsp;{{"labels.text.Days" | translate}}&nbsp;, Max:{{loanDetails.maximumGap | formatNumber}}&nbsp;{{"labels.text.Days" | translate}}) </span>
         </div>
 
     </div>

src/app/loans/loans-view/general-tab/general-tab.component.html

@@ -81,12 +81,10 @@
     <table mat-table [dataSource]="detailsDataSource">
 
       <ng-container matColumnDef="Key">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Key" | translate }} </th>
         <td mat-cell *matCellDef="let ele"> {{ ele.key }} </td>
       </ng-container>
 
       <ng-container matColumnDef="Value">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Value" | translate }} </th>
         <td mat-cell *matCellDef="let ele">
           <ng-container *ngIf="ele.key === 'Disbursement Date'" >
             <span *ngIf="loanDetails.timeline.actualDisbursementDate"> {{loanDetails.timeline.actualDisbursementDate | dateFormat}} </span>
@@ -102,8 +100,6 @@
             <span *ngIf="!loanDetails.loanOfficerName"> {{"labels.inputs.Unassigned" | translate}} </span>
             <span *ngIf="loanDetails.loanOfficerName"> {{loanDetails.loanOfficerName}} &nbsp;
               <span *ngIf="loanDetails.loanOfficerName">
-                    <!-- <a ng-click="clickEvent('unassignloanofficer', loanDetails.id)" *mifosxHasPermission = "'REMOVELOANOFFICER_LOAN'"><i
-                      class="fa fa-times"></i></a> -->
               </span>
             </span>
           </ng-container>
@@ -125,7 +121,6 @@
         </td>
       </ng-container>
 
-      <tr mat-header-row *matHeaderRowDef="loanDetailsColumns"></tr>
       <tr mat-row *matRowDef="let row; columns: loanDetailsColumns;"></tr>
 
     </table>
@@ -138,12 +133,10 @@
     <table mat-table [dataSource]="detailsDataSource">
 
       <ng-container matColumnDef="Key">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Key" | translate }} </th>
         <td mat-cell *matCellDef="let ele"> {{ ele.key }} </td>
       </ng-container>
 
       <ng-container matColumnDef="Value">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Value" | translate }} </th>
         <td mat-cell *matCellDef="let ele">
           <ng-container *ngIf="ele.key === 'Disbursement Date'" >
             <span *ngIf="loanDetails.timeline.actualDisbursementDate"> {{loanDetails.timeline.actualDisbursementDate | dateFormat}} </span>
@@ -154,8 +147,6 @@
             <span *ngIf="!loanDetails.loanOfficerName"> {{"labels.inputs.Unassigned" | translate}} </span>
             <span *ngIf="loanDetails.loanOfficerName"> {{loanDetails.loanOfficerName}} &nbsp;
               <span *ngIf="loanDetails.loanOfficerName">
-                    <!-- <a ng-click="clickEvent('unassignloanofficer', loanDetails.id)" *mifosxHasPermission = "'REMOVELOANOFFICER_LOAN'"><i
-                      class="fa fa-times"></i></a> -->
               </span>
             </span>
           </ng-container>
@@ -174,7 +165,6 @@
         </td>
       </ng-container>
 
-      <tr mat-header-row *matHeaderRowDef="loanDetailsColumns"></tr>
       <tr mat-row *matRowDef="let row; columns: loanDetailsColumns;"></tr>
 
     </table>

src/app/loans/loans-view/loan-account-actions/add-collateral/add-collateral.component.html

@@ -15,7 +15,7 @@
                 {{ collateral.name }}</mat-option>
             </mat-select>
             <mat-error *ngIf="collateralForm.controls.collateralTypeId.hasError('required')">
-              {{"labels.inputs.Collateral type" | translate }} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate }}</strong>
+              {{"labels.inputs.Collateral Type" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -31,8 +31,6 @@
             <mat-label>{{"labels.inputs.Description" | translate}}</mat-label>
             <textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
-
-
         </div>
 
         <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">

src/app/loans/loans-view/loan-collateral-tab/loan-collateral-tab.component.html

@@ -1,23 +1,26 @@
-<div class="container">
+<div class="tab-container mat-typography">
+  <div fxLayout="row" fxLayoutAlign="start center">
 
+    <h3 fxFlex="90%">{{"labels.inputs.Loan Collateral Details" | translate}}</h3>
     <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px" class="action-buttons">
       <button mat-raised-button color="primary" [routerLink]="['../actions/Add Collateral']">
-      Add Collateral
+        {{"labels.buttons.Add Collateral" | translate}}
       </button>
     </div>
+  </div>
 
   <div fxLayout="row" fxLayoutGap="32px" *ngIf="loanCollaterals?.length > 0" class="performance-history-container">
     <table>
       <tbody>
         <tr>
           <td fxFlex="25%">
-            <b>Number of Collaterals :</b>
+            <b>{{"labels.inputs.Number of Collaterals" | translate}} :</b>
           </td>
           <td fxFlex="25%" class="left">
             {{loanCollaterals?.length | formatNumber}}
           </td>
           <td fxFlex="25%">
-            <b>Total Amount :</b>
+            <b>{{"labels.inputs.Total Amount" | translate}} :</b>
           </td>
           <td fxFlex="25%" class="left">
             {{totalAmount | formatNumber}}
@@ -35,7 +38,7 @@
     </ng-container>
 
     <ng-container matColumnDef="currency">
-      <th mat-header-cell *matHeaderCellDef> Currency </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Currency" | translate}}</th>
       <td mat-cell *matCellDef="let ele"> {{ ele.currency.code }} </td>
     </ng-container>
 

src/app/loans/loans-view/loan-collateral-tab/loan-collateral-tab.component.scss

@@ -1,8 +1,15 @@
 table {
 	width: 100%;
-  margin: 3% 0%;
+	margin-top: 3%;
+  .document-action-button {
+      min-width: 26px;
+      padding: 0 6px;
+      margin: 4px;
+      line-height: 25px;
+  }
 }
 
-.container {
+.tab-container {
-  padding-bottom: 2%;
+  padding: 1%;
+  margin: 1%;
 }

src/app/loans/loans-view/loans-view.component.html

@@ -6,8 +6,8 @@
 
       <div class="profile-image-container">
         <div>
-          <mifosx-svg-icon [iconClass]="" iconFile="account_placeholder"
+          <mifosx-svg-icon [iconClass]="" iconFile="account_placeholder" iconName="LOAN_ACCOUNT" iconWidth="210"
-          iconName="LOAN_ACCOUNT" iconWidth="210" matTooltip="{{ 'tooltips.Loan Account' | translate }}">
+            matTooltip="{{ 'tooltips.Loan Account' | translate}}">
           </mifosx-svg-icon>
         </div>
       </div>
@@ -18,25 +18,29 @@
 
             <div fxFlex="60%">
               <h3>
-                <i class="fa fa-stop" matTooltip="{{ loanDetailsData.status.value }}"
+                <i class="fa fa-stop" matTooltip="{{'labels.status.' + loanDetailsData.status.value | translate}}"
                   [ngClass]="loanDetailsData.inArrears?'status-active-overdue':( iconLoanStatusColor() | statusLookup)"></i>
-                  {{"labels.heading.Loan Product" | translate }}: {{loanDetailsData.loanProductName}} <mifosx-account-number accountNo="{{loanDetailsData.accountNo}}"></mifosx-account-number>
+                {{'labels.heading.Loan Product' | translate}}: {{loanDetailsData.loanProductName}}
+                <mifosx-account-number accountNo="{{loanDetailsData.accountNo}}"></mifosx-account-number>
               </h3>
               <span class="loans-overview">
-                {{entityType}} {{"labels.inputs.name" | translate }}: {{loanDetailsData.clientName ||
+                {{'labels.text.' + entityType | translate}} {{"labels.inputs.name" | translate}}: {{loanDetailsData.clientName ||
                 loanDetailsData.groupName}}<span class="m-l-10">({{loanDetailsData.clientAccountNo}})</span><br />
               </span>
               <div *ngIf="loanDisplayArrearsDelinquency != 1">
                 <span class="loans-overview" *ngIf="loanDetailsData.delinquencyRange">
-                  {{"labels.inputs.Loan Account Classification" | translate }} : {{loanDetailsData?.delinquencyRange.classification}}<br />
+                  {{"labels.inputs.Loan Account Classification" | translate}} :
+                  {{loanDetailsData?.delinquencyRange.classification}}<br />
                 </span>
                 <span class="loans-overview"
                   *ngIf="loanDetailsData.delinquent && loanDetailsData.delinquent.pastDueDays > 0">
-                  {{"labels.inputs.Past Due Days" | translate }} : {{loanDetailsData?.delinquent.pastDueDays | formatNumber }}<br />
+                  {{"labels.inputs.Past Due Days" | translate}} : {{loanDetailsData?.delinquent.pastDueDays |
+                  formatNumber }}<br />
                 </span>
                 <span class="loans-overview" *ngIf="loanDetailsData.delinquent && loanDetailsData.delinquent.delinquentDays > 0
                   && loanDetailsData.delinquent.pastDueDays != loanDetailsData.delinquent.delinquentDays">
-                  {{"labels.inputs.Delinquent Days" | translate }} : {{loanDetailsData?.delinquent.delinquentDays | formatNumber }}
+                  {{"labels.inputs.Delinquent Days" | translate}} : {{loanDetailsData?.delinquent.delinquentDays |
+                  formatNumber }}
                 </span>
               </div>
             </div>
@@ -46,14 +50,18 @@
               <span>{{"labels.inputs.Current Balance" | translate}}: {{loanDetailsData.currency.displaySymbol}}
                 {{loanDetailsData.summary.totalOutstanding | formatNumber}}</span><br>
               <div *ngIf="loanDisplayArrearsDelinquency < 2">
-                <span *ngIf="loanDetailsData.inArrears">{{"labels.inputs.Arrears By" | translate }}: {{loanDetailsData.summary.totalOverdue | currency:currencyCode:'symbol-narrow':'1.2-2' }}
+                <span *ngIf="loanDetailsData.inArrears">{{"labels.inputs.Arrears By" | translate}}:
-                <span *ngIf="!(loanDetailsData.summary.totalOverdue>=0)">{{"labels.inputs.Not Provided" | translate }}</span>
+                  {{loanDetailsData.summary.totalOverdue | currency:currencyCode:'symbol-narrow':'1.2-2' }}
+                  <span *ngIf="!(loanDetailsData.summary.totalOverdue>=0)">{{"labels.inputs.Not Provided" | translate
+                    }}</span>
                 </span><br>
-                <span *ngIf="loanDetailsData.inArrears">{{"labels.inputs.Arrears Since" | translate }}: {{loanDetailsData.summary.overdueSinceDate |
+                <span *ngIf="loanDetailsData.inArrears">{{"labels.inputs.Arrears Since" | translate}}:
+                  {{loanDetailsData.summary.overdueSinceDate |
                   dateFormat}}
                 </span>
                 <span *ngIf="loanDetailsData.totalOverpaid && loanDetailsData.totalOverpaid > 0">
-                  {{"labels.inputs.Overpaid By" | translate }}: {{loanDetailsData.currency.displaySymbol}} {{loanDetailsData.totalOverpaid | formatNumber }}
+                  {{"labels.inputs.Overpaid By" | translate}}: {{loanDetailsData.currency.displaySymbol}}
+                  {{loanDetailsData.totalOverpaid | formatNumber }}
                 </span>
               </div>
             </div>
@@ -79,26 +87,26 @@
             <mat-icon matListIcon>
               <fa-icon icon="{{item.icon}}" size="sm"></fa-icon>
             </mat-icon>
-            <span> {{item.name}} </span>
+            <span>{{'labels.menus.' + item.name | translate}}</span>
           </button>
         </ng-container>
 
         <ng-container *ngIf="buttonConfig.optionsPayment.length" class="loan-span">
-          <button mat-menu-item [matMenuTriggerFor]="Payments">{{"labels.buttons.Payments" | translate }}</button>
+          <button mat-menu-item [matMenuTriggerFor]="Payments">{{"labels.menus.Payments" | translate}}</button>
           <mat-menu #Payments="matMenu">
             <span *ngFor="let item of buttonConfig.optionsPayment">
               <button mat-menu-item *mifosxHasPermission="item.taskPermissionName"
-                (click)="loanAction(item.name)">{{item.name}}</button>
+                (click)="loanAction(item.name)">{{'labels.menus.' + item.name | translate}}</button>
             </span>
           </mat-menu>
         </ng-container>
 
         <ng-container *ngIf="buttonConfig.options.length" class="loan-span">
-          <button mat-menu-item [matMenuTriggerFor]="More">{{"labels.buttons.More" | translate }}</button>
+          <button mat-menu-item [matMenuTriggerFor]="More">{{"labels.menus.More" | translate}}</button>
           <mat-menu #More="matMenu">
             <span *ngFor="let item of buttonConfig.options">
               <button mat-menu-item *mifosxHasPermission="item.taskPermissionName"
-                (click)="loanAction(item.name)">{{item.name}}</button>
+                (click)="loanAction(item.name)">{{'labels.menus.' + item.name | translate}}</button>
             </span>
           </mat-menu>
         </ng-container>
@@ -191,8 +199,8 @@
         </a>
       </ng-container>
       <ng-container *ngIf="loanDetailsData.status.active">
-        <a mat-tab-link [routerLink]="['./external-asset-owner']" routerLinkActive #externalAssetOwner="routerLinkActive"
+        <a mat-tab-link [routerLink]="['./external-asset-owner']" routerLinkActive
-          [active]="externalAssetOwner.isActive">
+          #externalAssetOwner="routerLinkActive" [active]="externalAssetOwner.isActive">
           {{"labels.inputs.External Asset Owner" | translate}}
         </a>
       </ng-container>

src/app/loans/loans.module.ts

@@ -78,6 +78,7 @@ import { ChargeOffComponent } from './loans-view/loan-account-actions/charge-off
 import { AssetTransferLoanComponent } from './loans-view/loan-account-actions/asset-transfer-loan/asset-transfer-loan.component';
 import { ExternalAssetOwnerTabComponent } from './loans-view/external-asset-owner-tab/external-asset-owner-tab.component';
 import { ExternalAssetTransferComponent } from './loans-view/external-asset-owner-tab/external-asset-transfer/external-asset-transfer.component';
+import { TranslateModule } from '@ngx-translate/core';
 
 /**
  * Loans Module
@@ -85,7 +86,13 @@ import { ExternalAssetTransferComponent } from './loans-view/external-asset-owne
  * All components related to loan functions should be declared here.
  */
 @NgModule({
-  imports: [SharedModule, LoansRoutingModule, DirectivesModule, PipesModule],
+  imports: [
+    SharedModule,
+    DirectivesModule,
+    LoansRoutingModule,
+    PipesModule,
+    TranslateModule
+  ],
   declarations: [
     AddLoanChargeComponent,
     LoansViewComponent,

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

@@ -2,9 +2,6 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
-/** Transalation Imports */
-import { extract } from '../core/i18n/i18n.service';
-
 /** Custom Components */
 import { LoginComponent } from './login.component';
 
@@ -13,7 +10,7 @@ const routes: Routes = [
   {
     path: 'login',
     component: LoginComponent,
-    data: { title: extract('Login') }
+    data: { title: 'Login' }
   }
 ];
 

src/app/login/login.module.ts

@@ -21,7 +21,7 @@ import { TranslateModule } from '@ngx-translate/core';
   imports: [
     SharedModule,
     LoginRoutingModule,
-    TranslateModule.forRoot()
+    TranslateModule
   ],
   declarations: [
     LoginComponent,

src/app/login/reset-password/reset-password.component.html

@@ -1,4 +1,4 @@
-<p>{{ 'labels.text.Please update your password" | translate }}:</p>
+<p>{{"labels.text.Please update your password" | translate}}:</p>
 
 <mat-divider></mat-divider>
 
@@ -33,7 +33,7 @@
 
   <p class="reset-password-error" *ngIf="resetPasswordForm.errors?.passwordsDoNotMatch &&
     (!resetPasswordForm.controls.password.hasError('required') && !resetPasswordForm.controls.repeatPassword.hasError('required'))">
-    {{ 'labels.text.Passwords" | translate }} <strong>{{ 'labels.text.do not match" | translate }}</strong>
+    {{"labels.text.Passwords" | translate}} <strong>{{"labels.text.do not match" | translate}}</strong>
   </p>
 
   <button mat-raised-button color="primary" fxFlexAlign="center" class="reset-password-button" [disabled]="!resetPasswordForm.valid">

src/app/login/two-factor-authentication/two-factor-authentication.component.html

@@ -1,9 +1,9 @@
-<p><strong>{{ 'labels.text.Two Factor Authentication" | translate }}</strong></p>
+<p><strong>{{"labels.text.Two Factor Authentication" | translate}}</strong></p>
 
 <mat-divider></mat-divider>
 
 <!-- Select delivery method to receive OTP -->
-<p *ngIf="!otpRequested">{{ 'labels.text.Please select a delivery method" | translate }}:</p>
+<p *ngIf="!otpRequested">{{"labels.text.Please select a delivery method" | translate}}:</p>
 
 <form fxLayout="column" *ngIf="!otpRequested" [formGroup]="twoFactorAuthenticationDeliveryMethodForm" class="two-factor-auth-form"
   (ngSubmit)="requestOTP()">
@@ -11,7 +11,7 @@
   <mat-radio-group fxLayout="column" fxFlexAlign="center" formControlName="twoFactorAuthenticationDeliveryMethod">
     <mat-radio-button *ngFor="let twoFactorAuthenticationDeliveryMethod of twoFactorAuthenticationDeliveryMethods"
       [value]="twoFactorAuthenticationDeliveryMethod">
-      {{ 'labels.inputs.Send" | translate }} {{ twoFactorAuthenticationDeliveryMethod.name }} {{ 'labels.inputs.to" | translate }} {{ twoFactorAuthenticationDeliveryMethod.target }}
+      {{"labels.inputs.Send" | translate}} {{ twoFactorAuthenticationDeliveryMethod.name }} {{"labels.inputs.to" | translate}} {{ twoFactorAuthenticationDeliveryMethod.target }}
     </mat-radio-button>
   </mat-radio-group>
 
@@ -23,7 +23,7 @@
 </form>
 
 <!-- Show input for OTP -->
-<p *ngIf="otpRequested">{{ 'labels.text.Please enter the OTP" | translate }}:</p>
+<p *ngIf="otpRequested">{{"labels.text.Please enter the OTP" | translate}}:</p>
 
 <form fxLayout="column" *ngIf="otpRequested" [formGroup]="twoFactorAuthenticationForm" class="two-factor-auth-form"
   (ngSubmit)="validateOTP()">
@@ -32,16 +32,16 @@
     <span matPrefix>
       <fa-icon icon="user-shield" class="m-r-10"></fa-icon>
     </span>
-    <mat-label>{{ 'labels.inputs.OTP" | translate }}</mat-label>
+    <mat-label>{{"labels.inputs.OTP" | translate}}</mat-label>
     <input type="password" matInput autocomplete="off" required formControlName="otp">
     <mat-hint align="start">
-      <strong>{{ 'labels.inputs.Delivery Method" | translate }}:</strong> {{ selectedTwoFactorAuthenticationDeliveryMethod.name }}
+      <strong>{{"labels.inputs.Delivery Method" | translate}}:</strong> {{ selectedTwoFactorAuthenticationDeliveryMethod.name }}
     </mat-hint>
     <mat-hint align="end">
-      <strong>{{ 'labels.inputs.Validity" | translate }}:</strong> {{ tokenValidityTime / 60 }} {{ 'labels.inputs.mins" | translate }}
+      <strong>{{"labels.inputs.Validity" | translate}}:</strong> {{ tokenValidityTime / 60 }} {{"labels.inputs.mins" | translate}}
     </mat-hint>
     <mat-error *ngIf="twoFactorAuthenticationForm.controls.otp.hasError('required')">
-      {{ 'labels.inputs.OTP" | translate }} {{ 'labels.commons.is' | translate }} <strong>{{ 'labels.commons.required' | translate }}</strong>
+      {{"labels.inputs.OTP" | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
     </mat-error>
   </mat-form-field>
 

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

@@ -5,9 +5,6 @@ import { Routes, RouterModule } from '@angular/router';
 /** Routing Imports */
 import { Route } from '../core/route/route.service';
 
-/** Translation Imports */
-import { extract } from '../core/i18n/i18n.service';
-
 /** Custom Components */
 import { NavigationComponent } from './navigation.component';
 
@@ -20,7 +17,7 @@ const routes: Routes = [
     {
       path: 'navigation',
       component: NavigationComponent,
-      data: { title: extract('Navigation'), breadcrumb: 'Navigation' },
+      data: { title: 'Navigation', breadcrumb: 'Navigation' },
       resolve: {
         offices: OfficesResolver
       }

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

@@ -5,9 +5,6 @@ import { Routes, RouterModule } from '@angular/router';
 /** Routing Imports */
 import { Route } from '../core/route/route.service';
 
-/** Translation Imports */
-import { extract } from '../core/i18n/i18n.service';
-
 /** Custom Components */
 import { NotificationsPageComponent } from './notifications-page/notifications-page.component';
 
@@ -20,7 +17,7 @@ const routes: Routes = [
     {
       path: 'notifications',
       component: NotificationsPageComponent,
-      data: { title: extract('Notifications'), breadcrumb: 'Notifications' },
+      data: { title: 'Notifications', breadcrumb: 'Notifications' },
       resolve: {
         notifications: NotificationsResolver
       }

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

@@ -5,9 +5,6 @@ import { Routes, RouterModule } from '@angular/router';
 /** Routing Imports */
 import { Route } from '../core/route/route.service';
 
-/** Translation Imports */
-import { extract } from '../core/i18n/i18n.service';
-
 /** Custom Components */
 import { OrganizationComponent } from './organization.component';
 import { LoanProvisioningCriteriaComponent } from './loan-provisioning-criteria/loan-provisioning-criteria.component';
@@ -112,7 +109,7 @@ const routes: Routes = [
   Route.withShell([
     {
       path: 'organization',
-      data: { title: extract('Organization'), breadcrumb: 'Organization' },
+      data: { title: 'Organization', breadcrumb: 'Organization' },
       children: [
         {
           path: '',
@@ -120,7 +117,7 @@ const routes: Routes = [
         },
         {
           path: 'provisioning-criteria',
-          data: { title: extract('Provisioning Criteria'), breadcrumb: 'Provisioning Criteria' },
+          data: { title: 'Provisioning Criteria', breadcrumb: 'Provisioning Criteria' },
           children: [
             {
               path: '',
@@ -131,7 +128,7 @@ const routes: Routes = [
             },
             {
               path: 'create',
-              data: { title: extract('Create Provisioning Criteria'), breadcrumb: 'Create Provisioning Criteria' },
+              data: { title: 'Create Provisioning Criteria', breadcrumb: 'Create Provisioning Criteria' },
               component: CreateLoanProvisioningCriteriaComponent,
               resolve: {
                 loanProvisioningCriteriaTemplate: LoanProvisioningCriteriaTemplateResolver,
@@ -139,7 +136,7 @@ const routes: Routes = [
             },
             {
               path: ':id',
-              data: { title: extract('View Provisioning Criteria'), routeParamBreadcrumb: 'id' },
+              data: { title: 'View Provisioning Criteria', routeParamBreadcrumb: 'id' },
               children: [
                 {
                   path: '',
@@ -151,7 +148,7 @@ const routes: Routes = [
                 {
                   path: 'edit',
                   component: EditLoanProvisioningCriteriaComponent,
-                  data: { title: extract('Edit Provisioning Criteria'), breadcrumb: 'Edit', routeParamBreadcrumb: false },
+                  data: { title: 'Edit Provisioning Criteria', breadcrumb: 'Edit', routeParamBreadcrumb: false },
                   resolve: {
                     loanProvisioningCriteriaAndTemplate: LoanProvisioningCriteriaAndTemplateResolver
                   }
@@ -162,7 +159,7 @@ const routes: Routes = [
         },
         {
           path: 'offices',
-          data: { title: extract('Manage Offices'), breadcrumb: 'Manage Offices' },
+          data: { title: 'Manage Offices', breadcrumb: 'Manage Offices' },
           children: [
             {
               path: '',
@@ -174,14 +171,14 @@ const routes: Routes = [
             {
               path: 'create',
               component: CreateOfficeComponent,
-              data: { title: extract('Create Office'), breadcrumb: 'Create Office' },
+              data: { title: 'Create Office', breadcrumb: 'Create Office' },
               resolve: {
                 offices: OfficesResolver,
               }
             },
             {
               path: ':officeId',
-              data: { title: extract('View Office'), breadcrumb: 'officeId', routeParamBreadcrumb: 'officeId' },
+              data: { title: 'View Office', breadcrumb: 'officeId', routeParamBreadcrumb: 'officeId' },
               component: ViewOfficeComponent,
               resolve: {
                  officeDatatables: OfficeDatatablesResolver,
@@ -195,7 +192,7 @@ const routes: Routes = [
                 {
                   path: 'general',
                   component: GeneralTabComponent,
-                  data: { title: extract('General'), breadcrumb: 'General', routeParamBreadcrumb: false },
+                  data: { title: 'General', breadcrumb: 'General', routeParamBreadcrumb: false },
                   resolve: {
                     office: OfficeResolver
                   }
@@ -205,7 +202,7 @@ const routes: Routes = [
                   children: [{
                       path: ':datatableName',
                       component: DatatableTabsComponent,
-                      data: { title: extract('Data Table View'), routeParamBreadcrumb: 'datatableName' },
+                      data: { title: 'Data Table View', routeParamBreadcrumb: 'datatableName' },
                       resolve: {
                         officeDatatable: OfficeDatatableResolver
                       }
@@ -217,7 +214,7 @@ const routes: Routes = [
             {
               path: ':officeId/edit',
               component: EditOfficeComponent,
-              data: { title: extract('Edit Office'), breadcrumb: 'Edit', routeParamBreadcrumb: false },
+              data: { title: 'Edit Office', breadcrumb: 'Edit', routeParamBreadcrumb: false },
               resolve: {
                 officeTemplate: EditOfficeResolver
               }
@@ -226,7 +223,7 @@ const routes: Routes = [
         },
         {
           path: 'employees',
-          data: { title: extract('Manage Employees'), breadcrumb: 'Manage Employees' },
+          data: { title: 'Manage Employees', breadcrumb: 'Manage Employees' },
           children: [
             {
               path: '',
@@ -238,14 +235,14 @@ const routes: Routes = [
             {
               path: 'create',
               component: CreateEmployeeComponent,
-              data: { title: extract('Create Employee'), breadcrumb: 'Create Employee' },
+              data: { title: 'Create Employee', breadcrumb: 'Create Employee' },
               resolve: {
                 offices: OfficesResolver
               }
             },
             {
               path: ':id',
-              data: { title: extract('View Employee'), routeParamBreadcrumb: 'id' },
+              data: { title: 'View Employee', routeParamBreadcrumb: 'id' },
               children: [
                 {
                   path: '',
@@ -257,7 +254,7 @@ const routes: Routes = [
                 {
                   path: 'edit',
                   component: EditEmployeeComponent,
-                  data: { title: extract('Edit Employee'), breadcrumb: 'Edit', routeParamBreadcrumb: false },
+                  data: { title: 'Edit Employee', breadcrumb: 'Edit', routeParamBreadcrumb: false },
                   resolve: {
                     employee: EditEmployeeResolver
                   }
@@ -268,7 +265,7 @@ const routes: Routes = [
         },
         {
           path: 'currencies',
-          data: { title: extract('Currency Configuration'), breadcrumb: 'Currency Configuration' },
+          data: { title: 'Currency Configuration', breadcrumb: 'Currency Configuration' },
           resolve: {
             currencies: CurrenciesResolver
           },
@@ -279,14 +276,14 @@ const routes: Routes = [
             },
             {
               path: 'manage',
-              data: { title: extract('Manage Currencies'), breadcrumb: 'Manage Currencies' },
+              data: { title: 'Manage Currencies', breadcrumb: 'Manage Currencies' },
               component: ManageCurrenciesComponent
             }
           ]
         },
         {
           path: 'sms-campaigns',
-          data: { title: extract('SMS Campaigns'), breadcrumb: 'SMS Campaigns' },
+          data: { title: 'SMS Campaigns', breadcrumb: 'SMS Campaigns' },
           children: [
             {
               path: '',
@@ -297,7 +294,7 @@ const routes: Routes = [
             },
             {
               path: 'create',
-              data: { title: extract('Create SMS Campaign'), breadcrumb: 'Create Campaign' },
+              data: { title: 'Create SMS Campaign', breadcrumb: 'Create Campaign' },
               component: CreateCampaignComponent,
               resolve: {
                 smsCampaignTemplate: SmsCampaignTemplateResolver
@@ -305,7 +302,7 @@ const routes: Routes = [
             },
             {
               path: ':id',
-              data: { title: extract('View SMS Campaign'), routeResolveBreadcrumb: ['smsCampaign', 'campaignName'] },
+              data: { title: 'View SMS Campaign', routeResolveBreadcrumb: ['smsCampaign', 'campaignName'] },
               resolve: {
                 smsCampaign: SmsCampaignResolver
               },
@@ -318,7 +315,7 @@ const routes: Routes = [
                 {
                   path: 'edit',
                   component: EditCampaignComponent,
-                  data: { title: extract('Edit SMS Campaign'), breadcrumb: 'Edit', routeResolveBreadcrumb: false},
+                  data: { title: 'Edit SMS Campaign', breadcrumb: 'Edit', routeResolveBreadcrumb: false},
                   resolve: {
                     smsCampaignTemplate: SmsCampaignTemplateResolver,
                   }
@@ -330,7 +327,7 @@ const routes: Routes = [
         {
           path: 'standing-instructions-history',
           component: StandingInstructionsHistoryComponent,
-          data: { title: extract('Standing Instructions History'), breadcrumb: 'Standing Instructions History' },
+          data: { title: 'Standing Instructions History', breadcrumb: 'Standing Instructions History' },
           resolve: {
             standingInstructionsTemplate: StandingInstructionsTemplateResolver
           }
@@ -338,7 +335,7 @@ const routes: Routes = [
         {
           path: 'fund-mapping',
           component: FundMappingComponent,
-          data: { title: extract('Advance Search'), breadcrumb: 'Advance Search' },
+          data: { title: 'Advance Search', breadcrumb: 'Advance Search' },
           resolve: {
             advanceSearchTemplate: AdvanceSearchTemplateResolver
           }
@@ -346,12 +343,12 @@ const routes: Routes = [
         {
           path: 'investors',
           component: InvestorsComponent,
-          data: { title: extract('Investors'), breadcrumb: 'Investors' },
+          data: { title: 'Investors', breadcrumb: 'Investors' },
           resolve: {  }
         },
         {
           path: 'adhoc-query',
-          data: { title: extract('Adhoc Query'), breadcrumb: 'Adhoc Query' },
+          data: { title: 'Adhoc Query', breadcrumb: 'Adhoc Query' },
           children: [
             {
               path: '',
@@ -363,14 +360,14 @@ const routes: Routes = [
             {
               path: 'create',
               component: CreateAdhocQueryComponent,
-              data: { title: extract('Create Adhoc Query'), breadcrumb: 'Create' },
+              data: { title: 'Create Adhoc Query', breadcrumb: 'Create' },
               resolve: {
                 adhocQueryTemplate: AdhocQueryTemplateResolver
               }
             },
             {
               path: ':id',
-              data: { title: extract('View Adhoc Query'), routeParamBreadcrumb: 'id' },
+              data: { title: 'View Adhoc Query', routeParamBreadcrumb: 'id' },
               children: [
                 {
                   path: '',
@@ -382,7 +379,7 @@ const routes: Routes = [
                 {
                   path: 'edit',
                   component: EditAdhocQueryComponent,
-                  data: { title: extract('Edit Adhoc Query'), breadcrumb: 'Edit', routeParamBreadcrumb: false },
+                  data: { title: 'Edit Adhoc Query', breadcrumb: 'Edit', routeParamBreadcrumb: false },
                   resolve: {
                     adhocQueryAndTemplate: AdhocQueryAndTemplateResolver
                   }
@@ -393,7 +390,7 @@ const routes: Routes = [
         },
         {
           path: 'tellers',
-          data: { title: extract('Tellers'), breadcrumb: 'Tellers' },
+          data: { title: 'Tellers', breadcrumb: 'Tellers' },
           children: [
             {
               path: '',
@@ -405,14 +402,14 @@ const routes: Routes = [
             {
               path: 'create',
               component: CreateTellerComponent,
-              data: { title: extract('Create Teller'), breadcrumb: 'Create' },
+              data: { title: 'Create Teller', breadcrumb: 'Create' },
               resolve: {
                 offices: OfficesResolver
               }
             },
             {
               path: ':id',
-              data: { title: extract('View Teller'), routeParamBreadcrumb: 'id' },
+              data: { title: 'View Teller', routeParamBreadcrumb: 'id' },
               children: [
                 {
                   path: '',
@@ -424,7 +421,7 @@ const routes: Routes = [
                 {
                   path: 'edit',
                   component: EditTellerComponent,
-                  data: { title: extract('Edit Teller'), breadcrumb: 'Edit', routeParamBreadcrumb: false },
+                  data: { title: 'Edit Teller', breadcrumb: 'Edit', routeParamBreadcrumb: false },
                   resolve: {
                     teller: TellerResolver,
                     offices: OfficesResolver
@@ -432,7 +429,7 @@ const routes: Routes = [
                 },
                 {
                   path: 'cashiers',
-                  data: { title: extract('Cashiers'), breadcrumb: 'Cashiers', routeParamBreadcrumb: false },
+                  data: { title: 'Cashiers', breadcrumb: 'Cashiers', routeParamBreadcrumb: false },
                   children: [
                     {
                       path: '',
@@ -443,7 +440,7 @@ const routes: Routes = [
                     },
                     {
                       path: 'create',
-                      data: { title: extract('Cashiers'), breadcrumb: 'Create Cashier' },
+                      data: { title: 'Cashiers', breadcrumb: 'Create Cashier' },
                       component: CreateCashierComponent,
                       resolve: {
                         cashierTemplate: EditCashierResolver
@@ -451,12 +448,12 @@ const routes: Routes = [
                     },
                     {
                       path: ':id',
-                      data: { title: extract('View Cashier'),  routeParamBreadcrumb: 'id' },
+                      data: { title: 'View Cashier', routeParamBreadcrumb: 'id' },
                       children: [
                         {
                           path: '',
                           component: ViewCashierComponent,
-                          data: { title: extract('View Cashier'), breadcrumb: 'View Cashier', routeParamBreadcrumb: false },
+                          data: { title: 'View Cashier', breadcrumb: 'View Cashier', routeParamBreadcrumb: false },
                           resolve: {
                             cashier: CashierResolver
                           }
@@ -464,7 +461,7 @@ const routes: Routes = [
                         {
                           path: 'edit',
                           component: EditCashierComponent,
-                          data: { title: extract('Edit Cashier'), breadcrumb: 'Edit', routeParamBreadcrumb: false },
+                          data: { title: 'Edit Cashier', breadcrumb: 'Edit', routeParamBreadcrumb: false },
                           resolve: {
                             cashier: CashierResolver,
                             cashierTemplate: EditCashierResolver
@@ -472,7 +469,7 @@ const routes: Routes = [
                         },
                         {
                           path: 'transactions',
-                          data: { title: extract('Cashier Transactions'), breadcrumb: 'Transactions', routeParamBreadcrumb: false },
+                          data: { title: 'Cashier Transactions', breadcrumb: 'Transactions', routeParamBreadcrumb: false },
                           component: TransactionsComponent,
                           resolve: {
                             currencies: CurrenciesResolver
@@ -481,7 +478,7 @@ const routes: Routes = [
                         {
                           path: 'settle',
                           component: SettleCashComponent,
-                          data: { title: extract('Settle Cash'), breadcrumb: 'Settle Cash', routeParamBreadcrumb: false },
+                          data: { title: 'Settle Cash', breadcrumb: 'Settle Cash', routeParamBreadcrumb: false },
                           resolve: {
                             cashierTemplate: CashierTransactionTemplateResolver
                           }
@@ -489,7 +486,7 @@ const routes: Routes = [
                         {
                           path: 'allocate',
                           component: AllocateCashComponent,
-                          data: { title: extract('Allocate Cash'), breadcrumb: 'Allocate Cash', routeParamBreadcrumb: false },
+                          data: { title: 'Allocate Cash', breadcrumb: 'Allocate Cash', routeParamBreadcrumb: false },
                           resolve: {
                             cashierTemplate: CashierTransactionTemplateResolver
                           }
@@ -504,7 +501,7 @@ const routes: Routes = [
         },
         {
           path: 'payment-types',
-          data: { title: extract('Payment Types'), breadcrumb: 'Payment Types' },
+          data: { title: 'Payment Types', breadcrumb: 'Payment Types' },
           children: [
             {
               path: '',
@@ -516,7 +513,7 @@ const routes: Routes = [
             {
               path: 'create',
               component: CreatePaymentTypeComponent,
-              data: { title: extract('Create Payment Type'), breadcrumb: 'Create Payment Type'}
+              data: { title: 'Create Payment Type', breadcrumb: 'Create Payment Type'}
             },
             {
               path: ':id',
@@ -525,7 +522,7 @@ const routes: Routes = [
                 {
                   path: 'edit',
                   component: EditPaymentTypeComponent,
-                  data: { title: extract('Edit Payment Type'), breadcrumb: 'Edit', routeParamBreadcrumb: false },
+                  data: { title: 'Edit Payment Type', breadcrumb: 'Edit', routeParamBreadcrumb: false },
                   resolve: {
                     paymentType: PaymentTypesResolver
                   }
@@ -537,7 +534,7 @@ const routes: Routes = [
         {
           path: 'password-preferences',
           component: PasswordPreferencesComponent,
-          data: { title: extract('Password Preferences'), breadcrumb: 'Password Preferences' },
+          data: { title: 'Password Preferences', breadcrumb: 'Password Preferences' },
           resolve: {
             passwordPreferencesTemplate: PasswordPreferencesTemplateResolver
           }
@@ -545,14 +542,14 @@ const routes: Routes = [
         {
           path: 'bulkloan',
           component: BulkLoanReassignmnetComponent,
-          data: { title: extract('Bulk Loan Reassignment'), breadcrumb: 'Bulk Loan Reasssignment' },
+          data: { title: 'Bulk Loan Reassignment', breadcrumb: 'Bulk Loan Reasssignment' },
           resolve: {
             offices: OfficesResolver
           }
         },
         {
           path: 'entity-data-table-checks',
-          data: { title: extract('Entity Data Table Checks'), breadcrumb: 'Entity Data Table Checks' },
+          data: { title: 'Entity Data Table Checks', breadcrumb: 'Entity Data Table Checks' },
           children: [
             {
               path: '',
@@ -564,7 +561,7 @@ const routes: Routes = [
             {
               path: 'create',
               component: CreateEnityDataTableChecksComponent,
-              data: { title: extract('Create Entity Data Table Checks'), breadcrumb: 'Create' },
+              data: { title: 'Create Entity Data Table Checks', breadcrumb: 'Create' },
               resolve: {
                 dataTableEntity: EntityDataTableChecksTemplateResolver
               }
@@ -574,14 +571,14 @@ const routes: Routes = [
         {
           path: 'working-days',
           component: WorkingDaysComponent,
-          data: { title: extract('Working Days'), breadcrumb: 'Working Days' },
+          data: { title: 'Working Days', breadcrumb: 'Working Days' },
           resolve: {
             workingDays: WorkingDaysResolver
           }
         },
         {
           path: 'manage-funds',
-          data: { title: extract('Manage Funds'), breadcrumb: 'Manage Funds' },
+          data: { title: 'Manage Funds', breadcrumb: 'Manage Funds' },
           children: [
             {
               path: '',
@@ -593,11 +590,11 @@ const routes: Routes = [
             {
               path: 'create',
               component: CreateFundComponent,
-              data: { title: extract('Create Fund'), breadcrumb: 'Create' }
+              data: { title: 'Create Fund', breadcrumb: 'Create' }
             },
             {
               path: ':id',
-              data: { title: extract('View Fund'), breadcrumb: 'id', routeParamBreadcrumb: 'id' },
+              data: { title: 'View Fund', breadcrumb: 'id', routeParamBreadcrumb: 'id' },
               resolve: {
                 fundData: ManageFundResolver
               },
@@ -612,7 +609,7 @@ const routes: Routes = [
                 {
                   path: 'edit',
                   component: EditFundComponent,
-                  data: { title: extract('Edit Fund'), breadcrumb: 'Edit', routeParamBreadcrumb: false },
+                  data: { title: 'Edit Fund', breadcrumb: 'Edit', routeParamBreadcrumb: false },
                   resolve: {
                     fundData: ManageFundResolver
                   }
@@ -626,7 +623,7 @@ const routes: Routes = [
         },
         {
           path: 'bulk-import',
-          data: { title: extract('Bulk Import'), breadcrumb: 'Bulk Import' },
+          data: { title: 'Bulk Import', breadcrumb: 'Bulk Import' },
           children: [
             {
               path: '',
@@ -635,7 +632,7 @@ const routes: Routes = [
             {
               path: ':import-name',
               component: ViewBulkImportComponent,
-              data: { title: extract('View Bulk Import'), routeParamBreadcrumb: 'import-name' },
+              data: { title: 'View Bulk Import', routeParamBreadcrumb: 'import-name' },
               resolve: {
                 offices: OfficesResolver,
                 imports: BulkImportResolver
@@ -645,7 +642,7 @@ const routes: Routes = [
         },
         {
           path: 'holidays',
-          data: { title: extract('Manage Holidays'), breadcrumb: 'Manage Holidays' },
+          data: { title: 'Manage Holidays', breadcrumb: 'Manage Holidays' },
           children: [
             {
               path: '',
@@ -657,7 +654,7 @@ const routes: Routes = [
             {
               path: 'create',
               component: CreateHolidayComponent,
-              data: { title: extract('Create Holiday'), breadcrumb: 'Create' },
+              data: { title: 'Create Holiday', breadcrumb: 'Create' },
               resolve: {
                 offices: OfficesResolver,
                 holidayTemplate: HolidayTemplateResolver
@@ -665,7 +662,7 @@ const routes: Routes = [
             },
             {
               path: ':id',
-              data: { title: extract('View Holidays'), routeParamBreadcrumb: 'id' },
+              data: { title: 'View Holidays', routeParamBreadcrumb: 'id' },
               children: [
                 {
                   path: '',
@@ -677,7 +674,7 @@ const routes: Routes = [
                 {
                   path: 'edit',
                   component: EditHolidayComponent,
-                  data: { title: extract('Edit Holidays'), breadcrumb: 'Edit', routeParamBreadcrumb: false },
+                  data: { title: 'Edit Holidays', breadcrumb: 'Edit', routeParamBreadcrumb: false },
                   resolve: {
                     holiday: HolidayResolver,
                     holidayTemplate: HolidayTemplateResolver

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

@@ -5,9 +5,6 @@ import { Routes, RouterModule } from '@angular/router';
 /** Routing Imports */
 import { Route } from '../core/route/route.service';
 
-/** Translation Imports */
-import { extract } from '../core/i18n/i18n.service';
-
 /** Custom Components */
 import { ProductsComponent } from './products.component';
 import { LoanProductsComponent } from './loan-products/loan-products.component';
@@ -135,7 +132,7 @@ const routes: Routes = [
   Route.withShell([
     {
       path: 'products',
-      data: { title: extract('Products'), breadcrumb: 'Products' },
+      data: { title: 'Products', breadcrumb: 'Products' },
       children: [
         {
           path: '',
@@ -143,7 +140,7 @@ const routes: Routes = [
         },
         {
           path: 'loan-products',
-          data: { title: extract('Loan Products'), breadcrumb: 'Loan Products' },
+          data: { title: 'Loan Products', breadcrumb: 'Loan Products' },
           children: [
             {
               path: '',
@@ -155,7 +152,7 @@ const routes: Routes = [
             {
               path: 'create',
               component: CreateLoanProductComponent,
-              data: { title: extract('Create Loan Product'), breadcrumb: 'Create' },
+              data: { title: 'Create Loan Product', breadcrumb: 'Create' },
               resolve: {
                 loanProductsTemplate: LoanProductsTemplateResolver,
                 configurations: GlobalConfigurationsResolver
@@ -167,7 +164,7 @@ const routes: Routes = [
               resolve: {
                 loanProductDatatables: LoanProductDatatablesResolver
               },
-              data: { title: extract('View Loan Product'), breadcrumb: 'productId', routeParamBreadcrumb: 'productId' },
+              data: { title: 'View Loan Product', breadcrumb: 'productId', routeParamBreadcrumb: 'productId' },
               children: [
                 {
                   path: '',
@@ -176,7 +173,7 @@ const routes: Routes = [
                 },
                 {
                   path: 'general',
-                  data: { title: extract('General'), breadcrumb: 'General', routeParamBreadcrumb: false },
+                  data: { title: 'General', breadcrumb: 'General', routeParamBreadcrumb: false },
                   component: GeneralTabComponent,
                   resolve: {
                     loanProduct: LoanProductResolver
@@ -187,7 +184,7 @@ const routes: Routes = [
                   children: [{
                     path: ':datatableName',
                     component: DatatableTabComponent,
-                    data: { title: extract('Data Table View'), routeParamBreadcrumb: 'datatableName' },
+                    data: { title: 'Data Table View', routeParamBreadcrumb: 'datatableName' },
                     resolve: {
                       loanProductDatatable: LoanProductDatatableResolver
                     }
@@ -196,7 +193,7 @@ const routes: Routes = [
                 {
                   path: 'edit',
                   component: EditLoanProductComponent,
-                  data: { title: extract('Edit Loan Product'), breadcrumb: 'Edit', routeParamBreadcrumb: false },
+                  data: { title: 'Edit Loan Product', breadcrumb: 'Edit', routeParamBreadcrumb: false },
                   resolve: {
                     loanProductAndTemplate: LoanProductAndTemplateResolver,
                     configurations: GlobalConfigurationsResolver
@@ -208,7 +205,7 @@ const routes: Routes = [
         },
         {
           path: 'saving-products',
-          data: { title: extract('Saving Products'), breadcrumb: 'Saving Products' },
+          data: { title: 'Saving Products', breadcrumb: 'Saving Products' },
           children: [
             {
               path: '',
@@ -220,14 +217,14 @@ const routes: Routes = [
             {
               path: 'create',
               component: CreateSavingProductComponent,
-              data: { title: extract('Create Saving Product'), breadcrumb: 'Create' },
+              data: { title: 'Create Saving Product', breadcrumb: 'Create' },
               resolve: {
                 savingProductsTemplate: SavingProductsTemplateResolver
               }
             },
             {
               path: ':productId',
-              data: { title: extract('View Saving Product'), breadcrumb: 'productId', routeParamBreadcrumb: 'productId' },
+              data: { title: 'View Saving Product', breadcrumb: 'productId', routeParamBreadcrumb: 'productId' },
               resolve: {
                 savingProductDatatables: SavingProductDatatablesResolver
               },
@@ -243,7 +240,7 @@ const routes: Routes = [
                     },
                     {
                       path: 'general',
-                      data: { title: extract('General'), breadcrumb: 'General', routeParamBreadcrumb: false },
+                      data: { title: 'General', breadcrumb: 'General', routeParamBreadcrumb: false },
                       component: SavingProductGeneralTabComponent,
                       resolve: {
                         savingProduct: SavingProductResolver
@@ -254,7 +251,7 @@ const routes: Routes = [
                       children: [{
                         path: ':datatableName',
                         component: SavingProductDatatableTabComponent,
-                        data: { title: extract('Data Table View'), routeParamBreadcrumb: 'datatableName' },
+                        data: { title: 'Data Table View', routeParamBreadcrumb: 'datatableName' },
                         resolve: {
                           savingProductDatatable: SavingProductDatatableResolver
                         }
@@ -265,7 +262,7 @@ const routes: Routes = [
                 {
                   path: 'edit',
                   component: EditSavingProductComponent,
-                  data: { title: extract('Edit Saving Product'), breadcrumb: 'Edit', routeParamBreadcrumb: false },
+                  data: { title: 'Edit Saving Product', breadcrumb: 'Edit', routeParamBreadcrumb: false },
                   resolve: {
                     savingProductAndTemplate: SavingProductAndTemplateResolver
                   }
@@ -276,7 +273,7 @@ const routes: Routes = [
         },
         {
           path: 'share-products',
-          data: { title: extract('Share Products'), breadcrumb: 'Share Products' },
+          data: { title: 'Share Products', breadcrumb: 'Share Products' },
           children: [
             {
               path: '',
@@ -288,14 +285,14 @@ const routes: Routes = [
             {
               path: 'create',
               component: CreateShareProductComponent,
-              data: { title: extract('Create Share Product'), breadcrumb: 'Create' },
+              data: { title: 'Create Share Product', breadcrumb: 'Create' },
               resolve: {
                 shareProductsTemplate: ShareProductsTemplateResolver
               }
             },
             {
               path: ':productId',
-              data: { title: extract('View Share Product'), breadcrumb: 'productId', routeParamBreadcrumb: 'productId' },
+              data: { title: 'View Share Product', breadcrumb: 'productId', routeParamBreadcrumb: 'productId' },
               resolve: {
                 shareProductDatatables: ShareProductDatatablesResolver
               },
@@ -311,7 +308,7 @@ const routes: Routes = [
                     },
                     {
                       path: 'general',
-                      data: { title: extract('General'), breadcrumb: 'General', routeParamBreadcrumb: false },
+                      data: { title: 'General', breadcrumb: 'General', routeParamBreadcrumb: false },
                       component: ShareProductGeneralTabComponent,
                       resolve: {
                         shareProduct: ShareProductResolver
@@ -322,7 +319,7 @@ const routes: Routes = [
                       children: [{
                         path: ':datatableName',
                         component: ShareProductDatatableTabComponent,
-                        data: { title: extract('Data Table View'), routeParamBreadcrumb: 'datatableName' },
+                        data: { title: 'Data Table View', routeParamBreadcrumb: 'datatableName' },
                         resolve: {
                           shareProductDatatable: ShareProductDatatableResolver
                         }
@@ -333,14 +330,14 @@ const routes: Routes = [
                 {
                   path: 'edit',
                   component: EditShareProductComponent,
-                  data: { title: extract('Edit Share Product'), breadcrumb: 'Edit', routeParamBreadcrumb: false },
+                  data: { title: 'Edit Share Product', breadcrumb: 'Edit', routeParamBreadcrumb: false },
                   resolve: {
                     shareProductAndTemplate: ShareProductAndTemplateResolver
                   }
                 },
                 {
                   path: 'dividends',
-                  data: { title: extract('Share Products Dividends'), breadcrumb: 'Dividends', routeParamBreadcrumb: false },
+                  data: { title: 'Share Products Dividends', breadcrumb: 'Dividends', routeParamBreadcrumb: false },
                   children: [
                     {
                       path: '',
@@ -352,7 +349,7 @@ const routes: Routes = [
                     {
                       path: 'create',
                       component: CreateDividendComponent,
-                      data: { title: extract('Create Dividend'), breadcrumb: 'Create', routeParamBreadcrumb: false },
+                      data: { title: 'Create Dividend', breadcrumb: 'Create', routeParamBreadcrumb: false },
                       resolve: {
                         shareProduct: ShareProductResolver
                       }
@@ -360,7 +357,7 @@ const routes: Routes = [
                     {
                       path: ':dividendId',
                       component: ViewDividendComponent,
-                      data: { title: extract('View Dividend'), routeParamBreadcrumb: 'dividendId' },
+                      data: { title: 'View Dividend', routeParamBreadcrumb: 'dividendId' },
                       resolve: {
                         dividendData: ViewDividendDataResolver
                       }
@@ -373,7 +370,7 @@ const routes: Routes = [
         },
         {
           path: 'tax-configurations',
-          data: { title: extract('Manage Tax Configurations'), breadcrumb: 'Manage Tax Configurations' },
+          data: { title: 'Manage Tax Configurations', breadcrumb: 'Manage Tax Configurations' },
           children: [
             {
               path: '',
@@ -381,7 +378,7 @@ const routes: Routes = [
             },
             {
               path: 'tax-components',
-              data: { title: extract('Manage Tax Components'), breadcrumb: 'Tax Components' },
+              data: { title: 'Manage Tax Components', breadcrumb: 'Tax Components' },
               children: [
                 {
                   path: '',
@@ -393,14 +390,14 @@ const routes: Routes = [
                 {
                   path: 'create',
                   component: CreateTaxComponentComponent,
-                  data: { title: extract('Create Tax Component'), breadcrumb: 'Create' },
+                  data: { title: 'Create Tax Component', breadcrumb: 'Create' },
                   resolve: {
                     taxComponentTemplate: TaxComponentTemplateResolver
                   }
                 },
                 {
                   path: ':id',
-                  data: { title: extract('View Tax Component'), routeParamBreadcrumb: 'id' },
+                  data: { title: 'View Tax Component', routeParamBreadcrumb: 'id' },
                   resolve: {
                     taxComponent: TaxComponentResolver
                   },
@@ -414,7 +411,7 @@ const routes: Routes = [
                     },
                     {
                       path: 'edit',
-                      data: { title: extract('Edit Tax Component'), breadcrumb: 'Edit', routeParamBreadcrumb: false },
+                      data: { title: 'Edit Tax Component', breadcrumb: 'Edit', routeParamBreadcrumb: false },
                       component: EditTaxComponentComponent,
                       resolve: {
                         taxComponent: TaxComponentResolver
@@ -426,7 +423,7 @@ const routes: Routes = [
             },
             {
               path: 'tax-groups',
-              data: { title: extract('Manage Tax Groups'), breadcrumb: 'Tax Groups' },
+              data: { title: 'Manage Tax Groups', breadcrumb: 'Tax Groups' },
               children: [
                 {
                   path: '',
@@ -438,14 +435,14 @@ const routes: Routes = [
                 {
                   path: 'create',
                   component: CreateTaxGroupComponent,
-                  data: { title: extract('Create Tax Group'), breadcrumb: 'Create' },
+                  data: { title: 'Create Tax Group', breadcrumb: 'Create' },
                   resolve: {
                     taxGroupTemplate: ManageTaxGroupTemplateResolver
                   }
                 },
                 {
                   path: ':id',
-                  data: { title: extract('View Tax Group'), routeParamBreadcrumb: 'id' },
+                  data: { title: 'View Tax Group', routeParamBreadcrumb: 'id' },
                   resolve: {
                     taxGroup: TaxGroupResolver
                   },
@@ -459,7 +456,7 @@ const routes: Routes = [
                     },
                     {
                       path: 'edit',
-                      data: { title: extract('Edit Tax Group'), breadcrumb: 'Edit', routeParamBreadcrumb: false },
+                      data: { title: 'Edit Tax Group', breadcrumb: 'Edit', routeParamBreadcrumb: false },
                       component: EditTaxGroupComponent,
                       resolve: {
                         taxGroup: EditTaxGroupResolver
@@ -473,7 +470,7 @@ const routes: Routes = [
         },
         {
           path: 'delinquency-bucket-configurations',
-          data: { title: extract('Manage Delinquency Bucket Configurations'), breadcrumb: 'Manage Delinquency Bucket Configurations' },
+          data: { title: 'Manage Delinquency Bucket Configurations', breadcrumb: 'Manage Delinquency Bucket Configurations' },
           children: [
             {
               path: '',
@@ -481,7 +478,7 @@ const routes: Routes = [
             },
             {
               path: 'ranges',
-              data: { title: extract('Manage Delinquency Ranges'), breadcrumb: 'Delinquency Ranges' },
+              data: { title: 'Manage Delinquency Ranges', breadcrumb: 'Delinquency Ranges' },
               children: [
                 {
                   path: '',
@@ -493,11 +490,11 @@ const routes: Routes = [
                 {
                   path: 'create',
                   component: CreateRangeComponent,
-                  data: { title: extract('Create Delinquency Range'), breadcrumb: 'Create' }
+                  data: { title: 'Create Delinquency Range', breadcrumb: 'Create' }
                 },
                 {
                   path: ':rangeId',
-                  data: { title: extract('View Delinquency Range'), routeParamBreadcrumb: 'id' },
+                  data: { title: 'View Delinquency Range', routeParamBreadcrumb: 'id' },
                   resolve: {
                     delinquencyRange: DelinquencyRangeComponentsResolver
                   },
@@ -511,7 +508,7 @@ const routes: Routes = [
                     },
                     {
                       path: 'edit',
-                      data: { title: extract('Edit Delinquency Range'), breadcrumb: 'Edit', routeParamBreadcrumb: false },
+                      data: { title: 'Edit Delinquency Range', breadcrumb: 'Edit', routeParamBreadcrumb: false },
                       component: EditRangeComponent,
                       resolve: {
                         delinquencyRange: DelinquencyRangeComponentsResolver
@@ -523,7 +520,7 @@ const routes: Routes = [
             },
             {
               path: 'buckets',
-              data: { title: extract('Manage Delinquency Bucket'), breadcrumb: 'Delinquency Buckets' },
+              data: { title: 'Manage Delinquency Bucket', breadcrumb: 'Delinquency Buckets' },
               children: [
                 {
                   path: '',
@@ -535,14 +532,14 @@ const routes: Routes = [
                 {
                   path: 'create',
                   component: CreateBucketComponent,
-                  data: { title: extract('Create Delinquency Bucket'), breadcrumb: 'Create' },
+                  data: { title: 'Create Delinquency Bucket', breadcrumb: 'Create' },
                   resolve: {
                     delinquencyRanges: DelinquencyRangeComponentsResolver
                   }
                 },
                 {
                   path: ':bucketId',
-                  data: { title: extract('View Delinquency Bucket'), routeParamBreadcrumb: 'id' },
+                  data: { title: 'View Delinquency Bucket', routeParamBreadcrumb: 'id' },
                   resolve: {
                     delinquencyBucket: DelinquencyBucketComponentsResolver
                   },
@@ -556,7 +553,7 @@ const routes: Routes = [
                     },
                     {
                       path: 'edit',
-                      data: { title: extract('Edit Delinquency Bucket'), breadcrumb: 'Edit', routeParamBreadcrumb: false },
+                      data: { title: 'Edit Delinquency Bucket', breadcrumb: 'Edit', routeParamBreadcrumb: false },
                       component: EditBucketComponent,
                       resolve: {
                         delinquencyBucket: DelinquencyBucketComponentsResolver,
@@ -571,12 +568,12 @@ const routes: Routes = [
         },
         {
           path: 'recurring-deposit-products',
-          data: { title: extract('Recurring Deposit Products'), breadcrumb: 'Recurring Deposit Products' },
+          data: { title: 'Recurring Deposit Products', breadcrumb: 'Recurring Deposit Products' },
           children: [
             {
               path: 'create',
               component: CreateRecurringDepositProductComponent,
-              data: { title: extract('Create Recurring Deposit Product'), breadcrumb: 'Create' },
+              data: { title: 'Create Recurring Deposit Product', breadcrumb: 'Create' },
               resolve: {
                 recurringDepositProductsTemplate: RecurringDepositProductsTemplateResolver
               }
@@ -590,7 +587,7 @@ const routes: Routes = [
             },
             {
               path: ':productId',
-              data: { title: extract('View Recurring Deposit Product'), breadcrumb: 'productId', routeParamBreadcrumb: 'productId' },
+              data: { title: 'View Recurring Deposit Product', breadcrumb: 'productId', routeParamBreadcrumb: 'productId' },
               component: ViewRecurringDepositProductComponent,
               resolve: {
                 recurringDepositDatatables: SavingProductDatatablesResolver
@@ -613,7 +610,7 @@ const routes: Routes = [
                   children: [{
                     path: ':datatableName',
                     component: RecurringDepositDatatableTabComponent,
-                    data: { title: extract('Data Table View'), routeParamBreadcrumb: 'datatableName' },
+                    data: { title: 'Data Table View', routeParamBreadcrumb: 'datatableName' },
                     resolve: {
                       recurringDepositDatatable: SavingProductDatatableResolver
                     }
@@ -621,7 +618,7 @@ const routes: Routes = [
                 },
                 {
                   path: 'edit',
-                  data: { title: extract('Edit Recurring Deposit Product'), breadcrumb: 'edit', routeParamBreadcrumb: false },
+                  data: { title: 'Edit Recurring Deposit Product', breadcrumb: 'edit', routeParamBreadcrumb: false },
                   component: EditRecurringDepositProductComponent,
                   resolve: {
                     recurringDepositProductAndTemplate: RecurringDepositProductAndTemplateResolver
@@ -633,12 +630,12 @@ const routes: Routes = [
         },
         {
           path: 'fixed-deposit-products',
-          data: { title: extract('Fixed Deposit Products'), breadcrumb: 'Fixed Deposit Products' },
+          data: { title: 'Fixed Deposit Products', breadcrumb: 'Fixed Deposit Products' },
           children: [
             {
               path: 'create',
               component: CreateFixedDepositProductComponent,
-              data: { title: extract('Create Fixed Deposit Product'), breadcrumb: 'Create' },
+              data: { title: 'Create Fixed Deposit Product', breadcrumb: 'Create' },
               resolve: {
                 fixedDepositProductsTemplate: FixedDepositProductsTemplateResolver
               }
@@ -652,7 +649,7 @@ const routes: Routes = [
             },
             {
               path: ':productId',
-              data: { title: extract('View Fixed Deposit Product'), breadcrumb: 'productId', routeParamBreadcrumb: 'productId' },
+              data: { title: 'View Fixed Deposit Product', breadcrumb: 'productId', routeParamBreadcrumb: 'productId' },
               component: ViewFixedDepositProductComponent,
               resolve: {
                 fixedDepositDatatables: SavingProductDatatablesResolver
@@ -675,7 +672,7 @@ const routes: Routes = [
                   children: [{
                     path: ':datatableName',
                     component: FixedDepositDatatableTabComponent,
-                    data: { title: extract('Data Table View'), routeParamBreadcrumb: 'datatableName' },
+                    data: { title: 'Data Table View', routeParamBreadcrumb: 'datatableName' },
                     resolve: {
                       fixedDepositDatatable: SavingProductDatatableResolver
                     }
@@ -683,7 +680,7 @@ const routes: Routes = [
                 },
                 {
                   path: 'edit',
-                  data: { title: extract('Edit Fixed Deposit Product'), breadcrumb: 'edit', routeParamBreadcrumb: false },
+                  data: { title: 'Edit Fixed Deposit Product', breadcrumb: 'edit', routeParamBreadcrumb: false },
                   component: EditFixedDepositProductComponent,
                   resolve: {
                     fixedDepositProductAndTemplate: FixedDepositProductAndTemplateResolver
@@ -695,12 +692,12 @@ const routes: Routes = [
         },
         {
           path: 'products-mix',
-          data: { title: extract('Products Mix'), breadcrumb: 'Products Mix' },
+          data: { title: 'Products Mix', breadcrumb: 'Products Mix' },
           children: [
             {
               path: 'create',
               component: CreateProductMixComponent,
-              data: { title: extract('Create Product Mix'), breadcrumb: 'Create' },
+              data: { title: 'Create Product Mix', breadcrumb: 'Create' },
               resolve: {
                 productsMixTemplate: ProductsMixTemplateResolver
               }
@@ -714,7 +711,7 @@ const routes: Routes = [
             },
             {
               path: ':id',
-              data: { title: extract('View Product Mix'), routeParamBreadcrumb: 'id' },
+              data: { title: 'View Product Mix', routeParamBreadcrumb: 'id' },
               resolve: {
                 productMix: ViewProductMixResolver
               },
@@ -728,7 +725,7 @@ const routes: Routes = [
                 },
                 {
                   path: 'edit',
-                  data: { title: extract('Edit Product Mix'), breadcrumb: 'Edit', routeParamBreadcrumb: false },
+                  data: { title: 'Edit Product Mix', breadcrumb: 'Edit', routeParamBreadcrumb: false },
                   component: EditProductMixComponent,
                   resolve: {
                     productMix: ViewProductMixResolver
@@ -740,7 +737,7 @@ const routes: Routes = [
         },
         {
           path: 'floating-rates',
-          data: { title: extract('Floating Rates'), breadcrumb: 'Floating Rates' },
+          data: { title: 'Floating Rates', breadcrumb: 'Floating Rates' },
           children: [
             {
               path: '',
@@ -752,11 +749,11 @@ const routes: Routes = [
             {
               path: 'create',
               component: CreateFloatingRateComponent,
-              data: { title: extract('Create Floating Rate'), breadcrumb: 'Create' }
+              data: { title: 'Create Floating Rate', breadcrumb: 'Create' }
             },
             {
               path: ':id',
-              data: { title: extract('View Floating Rate'), routeParamBreadcrumb: 'id' },
+              data: { title: 'View Floating Rate', routeParamBreadcrumb: 'id' },
               resolve: {
                 floatingRate: FloatingRateResolver
               },
@@ -771,7 +768,7 @@ const routes: Routes = [
                 {
                   path: 'edit',
                   component: EditFloatingRateComponent,
-                  data: { title: extract('Edit Floating Rate'), breadcrumb: 'Edit', routeParamBreadcrumb: false },
+                  data: { title: 'Edit Floating Rate', breadcrumb: 'Edit', routeParamBreadcrumb: false },
                   resolve: {
                     floatingRate: FloatingRateResolver
                   }
@@ -782,12 +779,12 @@ const routes: Routes = [
         },
         {
           path: 'charges',
-          data: { title: extract('Charges'), breadcrumb: 'Charges' },
+          data: { title: 'Charges', breadcrumb: 'Charges' },
           children: [
             {
               path: 'create',
               component: CreateChargeComponent,
-              data: { title: extract('Create Charge'), breadcrumb: 'Create Charge' },
+              data: { title: 'Create Charge', breadcrumb: 'Create Charge' },
               resolve: {
                 chargesTemplate: ChargesTemplateResolver
               }
@@ -801,7 +798,7 @@ const routes: Routes = [
             },
             {
               path: ':id',
-              data: { title: extract('View Charges'), breadcrumb: 'id', routeParamBreadcrumb: 'id' },
+              data: { title: 'View Charges', breadcrumb: 'id', routeParamBreadcrumb: 'id' },
               resolve: {
                 charge: ChargeResolver
               },
@@ -816,7 +813,7 @@ const routes: Routes = [
                 {
                   path: 'edit',
                   component: EditChargeComponent,
-                  data: { title: extract('Edit Charge'), breadcrumb: 'Edit', routeParamBreadcrumb: false },
+                  data: { title: 'Edit Charge', breadcrumb: 'Edit', routeParamBreadcrumb: false },
                   resolve: {
                     chargesTemplate: ChargesTemplateAndResolver
                   }
@@ -827,12 +824,12 @@ const routes: Routes = [
         },
         {
           path: 'collaterals',
-          data: { title: extract('Collaterals'), breadcrumb: 'Collaterals' },
+          data: { title: 'Collaterals', breadcrumb: 'Collaterals' },
           children: [
             {
               path: 'create',
               component: CreateCollateralComponent,
-              data: { title: extract('Create Collateral'), breadcrumb: 'Create Collateral' },
+              data: { title: 'Create Collateral', breadcrumb: 'Create Collateral' },
               resolve: {
                 collateralTemplate: CollateralTemplateResolver
               }
@@ -846,7 +843,7 @@ const routes: Routes = [
             },
             {
               path: ':id',
-              data: { title: extract('View Collateral'), routeParamBreadcrumb: 'id' },
+              data: { title: 'View Collateral', routeParamBreadcrumb: 'id' },
               resolve: {
                 collateral: CollateralResolver
               },
@@ -861,7 +858,7 @@ const routes: Routes = [
                 {
                   path: 'edit',
                   component: EditCollateralComponent,
-                  data: { title: extract('Edit Collateral'), breadcrumb: 'Edit', routeParamBreadcrumb: false },
+                  data: { title: 'Edit Collateral', breadcrumb: 'Edit', routeParamBreadcrumb: false },
                   resolve: {
                     collateralTemplate: CollateralTemplateResolver,
                     collateral: CollateralResolver

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

@@ -5,9 +5,6 @@ import { Routes, RouterModule } from '@angular/router';
 /** Routing Imports */
 import { Route } from '../core/route/route.service';
 
-/** Translation Imports */
-import { extract } from '../core/i18n/i18n.service';
-
 /** Custom Components */
 import { ProfileComponent } from './profile.component';
 
@@ -17,7 +14,7 @@ const routes: Routes = [
     {
       path: 'profile',
       component:  ProfileComponent,
-      data: { title: extract('Profile'), breadcrumb: 'Profile' },
+      data: { title: 'Profile', breadcrumb: 'Profile' },
     }
   ])
 ];

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

@@ -5,9 +5,6 @@ import { Routes, RouterModule } from '@angular/router';
 /** Routing Imports */
 import { Route } from '../core/route/route.service';
 
-/** Translation Imports */
-import { extract } from '../core/i18n/i18n.service';
-
 /** Custom Components */
 import { ReportsComponent } from './reports.component';
 import { RunReportComponent } from './run-report/run-report.component';
@@ -27,7 +24,7 @@ const routes: Routes = [
   Route.withShell([
     {
       path: 'reports',
-      data: { title: extract('Reports'), breadcrumb: 'Reports' },
+      data: { title: 'Reports', breadcrumb: 'Reports' },
       resolve: {
         reports: ReportsResolver
       },
@@ -43,7 +40,7 @@ const routes: Routes = [
         },
         {
           path: 'run/:name',
-          data: { title: extract('Reports'), routeParamBreadcrumb: 'name' },
+          data: { title: 'Reports', routeParamBreadcrumb: 'name' },
           component: RunReportComponent,
           resolve: {
             reportParameters: RunReportResolver,
@@ -54,7 +51,7 @@ const routes: Routes = [
     },
     {
       path: 'xbrl',
-      data: { title: extract('XBRL'), breadcrumb: 'XBRL' },
+      data: { title: 'XBRL', breadcrumb: 'XBRL' },
       children: [
         {
           path: '',
@@ -67,7 +64,7 @@ const routes: Routes = [
         },
         {
           path: 'report',
-          data: { title: extract('XBRL Report'), breadcrumb: 'Run Report' },
+          data: { title: 'XBRL Report', breadcrumb: 'Run Report' },
           component: XBRLReportComponent
         }
       ]

src/app/reports/reports.component.html

@@ -12,18 +12,18 @@
     <table mat-table [dataSource]="dataSource" matSort>
 
       <ng-container matColumnDef="reportName">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.name" | translate}} </th>
         <td mat-cell *matCellDef="let report"> {{ report.reportName }} </td>
       </ng-container>
 
       <ng-container matColumnDef="reportType">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Type </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Type" | translate}} </th>
-        <td mat-cell *matCellDef="let report"> {{ report.reportType }} </td>
+        <td mat-cell *matCellDef="let report"> {{'labels.text.' + report.reportType | translate}} </td>
       </ng-container>
 
       <ng-container matColumnDef="reportCategory">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Category </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Category" | translate}} </th>
-        <td mat-cell *matCellDef="let report"> {{ report.reportCategory }} </td>
+        <td mat-cell *matCellDef="let report"> {{'labels.text.' + report.reportCategory | translate}} </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>

src/app/reports/run-report/chart/chart.component.html

@@ -1,7 +1,7 @@
 <div class="m-b-20" fxLayoutAlign="end">
   <mat-button-toggle-group  aria-label="Select Chart Type">
-    <mat-button-toggle value="Bar" (click) = "setBarChart(inputData)">Bar Chart</mat-button-toggle>
+    <mat-button-toggle value="Bar" (click) = "setBarChart(inputData)">{{"labels.buttons.Bar Chart" | translate}}</mat-button-toggle>
-    <mat-button-toggle value="Pie" (click) = "setPieChart(inputData)">Pie Chart</mat-button-toggle>
+    <mat-button-toggle value="Pie" (click) = "setPieChart(inputData)">{{"labels.buttons.Pie Chart" | translate}}</mat-button-toggle>
   </mat-button-toggle-group>
 </div>
 

src/app/reports/run-report/run-report.component.html

@@ -14,7 +14,7 @@
               <mat-label>{{param.label}}</mat-label>
               <input matInput required [formControlName]="param.name">
               <mat-error *ngIf="reportForm.controls[param.name].hasError('required')">
-                {{param.label}} is <strong>required</strong>
+                {{param.label}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
               </mat-error>
             </mat-form-field>
 
@@ -25,7 +25,7 @@
               <mat-datepicker-toggle matSuffix [for]="runReportDatePicker"></mat-datepicker-toggle>
               <mat-datepicker #runReportDatePicker></mat-datepicker>
               <mat-error *ngIf="reportForm.controls[param.name].hasError('required')">
-                {{param.label}} is <strong>required</strong>
+                {{param.label}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
               </mat-error>
             </mat-form-field>
 
@@ -37,7 +37,7 @@
                 </mat-option>
               </mat-select>
               <mat-error *ngIf="reportForm.controls[param.name].hasError('required')">
-                {{param.label}} is <strong>required</strong>
+                {{param.label}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
               </mat-error>
             </mat-form-field>
 
@@ -46,7 +46,7 @@
         </ng-container>
 
         <mat-form-field fxFlex>
-          <mat-label>{{ 'Decimal Places' | translate }}</mat-label>
+          <mat-label>{{"labels.inputs.Decimal Places" | translate}}</mat-label>
           <mat-select [formControl]="decimalChoice">
             <mat-option value="0">0</mat-option>
             <mat-option value="1">1</mat-option>
@@ -57,30 +57,30 @@
         </mat-form-field>
 
         <mat-form-field fxFlex *ngIf="isPentahoReport()">
-          <mat-label>{{ 'Output Type' | translate }}</mat-label>
+          <mat-label>{{'labels.inputs.Output Type' | translate}}</mat-label>
           <mat-select required formControlName="outputType">
             <mat-option *ngFor="let option of outputTypeOptions" [value]="option.value">
-              {{option.name | translate}}
+              {{ "labels.inputs." + option.name | translate}}
             </mat-option>
           </mat-select>
           <mat-error *ngIf="reportForm.controls['outputType'].hasError('required')">
-            Report Output Type is <strong>required</strong>
+            {{ "labels.text.Report Output Type" | translate }} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
           </mat-error>
         </mat-form-field>
 
         <div fxFlex="98%" *ngIf="exportToS3Allowed"  >
           <mat-checkbox labelPosition="after" formControlName="exportOutputToS3">
-            Export output data to S3 repository [{{exportToS3Repository}}]
+            {{ "labels.text.Export output data to S3 repository" | translate }} [{{exportToS3Repository}}]
           </mat-checkbox>
         </div>
 
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['/reports']">Cancel</button>
+        <button type="button" mat-raised-button [routerLink]="['/reports']">{{"labels.buttons.Cancel" | translate}}</button>
         <button mat-raised-button color="primary" [disabled]="!reportForm.valid" id="runreport">
           <fa-icon icon="file-export" class="m-r-10"></fa-icon>
-          {{ 'Run Report' | translate }}
+          {{"labels.buttons.Run Report" | translate}}
         </button>
       </mat-card-actions>
 
@@ -96,7 +96,7 @@
 
     <div class="m-b-20">
       <button mat-raised-button color="primary" (click)="isCollapsed = false">
-        {{ 'Parameters' | translate }}
+        {{'labels.buttons.Parameters' | translate}}
       </button>
     </div>
 

src/app/reports/run-report/table-and-sms/table-and-sms.component.html

@@ -4,8 +4,8 @@
 
     <div class="m-b-10" *ngIf="dataObject.report.type === 'Table'" fxLayoutAlign="end">
       <button mat-raised-button color="primary" (click)="exportFile()" [disabled]="notExistsReportData"
-        matToolTip="Export the data to CSV file">
+        matToolTip="{{'labels.text.Export the data to CSV file' | translate}}">
-        Export CSV
+        {{'labels.buttons.Export CSV' | translate}}
       </button>
     </div>
 
@@ -29,7 +29,7 @@
     <div class="alert" [hidden]="!notExistsReportData">
       <div class="message">
         <i class="fa fa-exclamation-circle alert-check"></i>
-        No report data was generated
+        {{'labels.text.No report data was generated' | translate}}
       </div>
     </div>
   </div>
@@ -37,7 +37,7 @@
   <div class="alert" *ngIf="!hideOutput && toBeExportedToRepo">
     <div class="message">
       <i class="fa fa-exclamation-circle alert-check"></i>
-      The report request has been sent and the report will be exported to file repository
+      {{'labels.text.The report request has been sent and the report will be exported to file repository' | translate}}
     </div>
   </div>
 
@@ -47,7 +47,7 @@
 
   <div class="back-button" *ngIf="!hideOutput">
     <button type="button" color="primary" mat-raised-button [routerLink]="['../..']">
-      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>Back</button>
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>{{"labels.buttons.Back" | translate}}</button>
   </div>
 
 </div>

src/app/reports/xbrl-report/xbrl-report.component.html

@@ -7,14 +7,14 @@
       <mat-card-content fxLayout="column">
 
         <mat-form-field fxFlex (click)="startDatePicker.open()">
-          <mat-label>Start Date</mat-label>
+          <mat-label>{{"labels.inputs.Start Date" | translate}}</mat-label>
           <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="startDatePicker" formControlName="startDate">
           <mat-datepicker-toggle matSuffix [for]="startDatePicker"></mat-datepicker-toggle>
           <mat-datepicker #startDatePicker></mat-datepicker>
         </mat-form-field>
 
         <mat-form-field fxFlex (click)="endDatePicker.open()">
-          <mat-label>End Date</mat-label>
+          <mat-label>{{"labels.inputs.End Date" | translate}}</mat-label>
           <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="endDatePicker" formControlName="endDate">
           <mat-datepicker-toggle matSuffix [for]="endDatePicker"></mat-datepicker-toggle>
           <mat-datepicker #endDatePicker></mat-datepicker>
@@ -23,8 +23,8 @@
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">{{"labels.buttons.Cancel" | translate}}</button>
-        <button mat-raised-button color="primary" id="runreport">Run Report</button>
+        <button mat-raised-button color="primary" id="runreport">{{"labels.buttons.Run Report" | translate}}</button>
       </mat-card-actions>
 
     </form>
@@ -38,7 +38,7 @@
   <mat-card *ngIf="!isCollapsed">
 
     <button mat-raised-button color="primary" (click)="isCollapsed = !isCollapsed">
-      Parameters
+      {{"labels.buttons.Parameters" | translate}}
     </button>
 
     <div class="m-t-20">
@@ -46,17 +46,17 @@
       <table mat-table [dataSource]="dataSource" matSort>
 
         <ng-container matColumnDef="name">
-          <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.name" | translate}} </th>
           <td mat-cell *matCellDef="let entry"> {{ entry.name }} </td>
         </ng-container>
 
         <ng-container matColumnDef="dimension">
-          <th mat-header-cell *matHeaderCellDef mat-sort-header> Dimension </th>
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Dimension" | translate}} </th>
           <td mat-cell *matCellDef="let entry"> {{ entry.dimension }} </td>
         </ng-container>
 
         <ng-container matColumnDef="value">
-          <th mat-header-cell *matHeaderCellDef mat-sort-header> Value </th>
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Value" | translate}} </th>
           <td mat-cell *matCellDef="let entry"> <input [formControl]="entry.value"></td>
         </ng-container>
 
@@ -66,9 +66,9 @@
       </table>
 
       <div class="container m-t-20" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="10px">
-        <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">{{"labels.buttons.Cancel" | translate}}</button>
         <a [href]="submit()" download="file.xml">
-        <button mat-raised-button color="primary">Submit</button>
+        <button mat-raised-button color="primary">{{"labels.buttons.Submit" | translate}}</button>
         </a>
       </div>
 

src/app/reports/xbrl/xbrl.component.html

@@ -1,7 +1,7 @@
 <mat-card class="container">
 
   <div *ngIf="XBRLSuccess">
-     <h1><strong>Saved Successfully</strong></h1>
+     <h1><strong>{{"labels.heading.Saved Successfully" | translate}}</strong></h1>
   </div>
 
   <div *ngIf="!XBRLSuccess">
@@ -39,12 +39,12 @@
 
       <div class="container m-t-20" fxLayout="row" fxLayoutAlign="center" fxLayoutGap="20px">
          <button mat-raised-button color="primary" [routerLink]="['./report']">
-            <fa-icon icon="cog"></fa-icon>
+            <fa-icon icon="cog" class="m-r-10"></fa-icon>
-            &nbsp;&nbsp; Generate Report
+            {{"labels.buttons.Generate Report" | translate}}
          </button>
          <button mat-raised-button color="accent" (click)="submit()">
-            <fa-icon icon="download"></fa-icon>
+            <fa-icon icon="download" class="m-r-10"></fa-icon>
-            &nbsp;&nbsp; Save Changes 
+            {{"labels.buttons.Save Changes" | translate}}
          </button>
       </div>
 

src/app/savings/saving-account-actions/activate-savings-account/activate-savings-account.component.html

@@ -7,20 +7,20 @@
       <mat-card-content>
 
         <mat-form-field fxFlex (click)="activatedOnDatePicker.open()">
-          <mat-label>Activated On Date</mat-label>
+          <mat-label>{{'labels.inputs.Activated On Date' | translate}}</mat-label>
           <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="activatedOnDatePicker" required formControlName="activatedOnDate">
           <mat-datepicker-toggle matSuffix [for]="activatedOnDatePicker"></mat-datepicker-toggle>
           <mat-datepicker #activatedOnDatePicker></mat-datepicker>
           <mat-error *ngIf="activateSavingsAccountForm.controls.activatedOnDate.hasError('required')">
-            Activated On Date is <strong>required</strong>
+            {{'labels.inputs.Activated On Date' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
           </mat-error>
         </mat-form-field>
 
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../transactions']">Cancel</button>
+        <button type="button" mat-raised-button [routerLink]="['../../transactions']">{{'labels.buttons.Cancel' | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!activateSavingsAccountForm.valid">Confirm</button>
+        <button mat-raised-button color="primary" [disabled]="!activateSavingsAccountForm.valid">{{'labels.buttons.Confirm' | translate}}</button>
       </mat-card-actions>
 
     </form>

src/app/savings/saving-account-actions/add-charge-savings-account/add-charge-savings-account.component.html

@@ -8,29 +8,29 @@
 
         <div fxLayout="column">
           <mat-form-field>
-            <mat-label>Charge</mat-label>
+            <mat-label>{{'labels.inputs.Charge' | translate}}</mat-label>
             <mat-select required formControlName="chargeId">
               <mat-option *ngFor="let savingsCharge of savingsChargeOptions" [value]="savingsCharge.id">
                 {{ savingsCharge.name + ' (' + savingsCharge.currency.name + ')' }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="savingsChargeForm.controls.chargeId.hasError('required')">
-              Charge is <strong>required</strong>
+              {{'labels.inputs.Charge' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <div *ngIf="chargeDetails" fxLayout="column">
 
             <mat-form-field>
-              <mat-label>Amount</mat-label>
+              <mat-label>{{'labels.inputs.Amount' | translate}}</mat-label>
               <input type="number" required matInput formControlName="amount" />
               <mat-error *ngIf="savingsChargeForm.controls.amount.hasError('required')">
-                Amount is <strong>required</strong>
+                {{'labels.inputs.Amount' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
               </mat-error>
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>Charge Calculation</mat-label>
+              <mat-label>{{'labels.inputs.Charge Calculation' | translate}}</mat-label>
               <mat-select formControlName="chargeCalculationType">
                 <mat-option *ngFor="let chargeCalculation of chargeDetails.chargeCalculationTypeOptions"
                   [value]="chargeCalculation.id">
@@ -40,7 +40,7 @@
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>Charge time type</mat-label>
+              <mat-label>{{'labels.inputs.Charge time type' | translate}}</mat-label>
               <mat-select formControlName="chargeTimeType">
                 <mat-option *ngFor="let chargeTime of chargeDetails.chargeTimeTypeOptions" [value]="chargeTime.id">
                   {{ chargeTime.value }}
@@ -49,29 +49,29 @@
             </mat-form-field>
 
             <mat-form-field *ngIf="savingsChargeForm.contains('dueDate')" (click)="dueDatePicker.open()">
-              <mat-label>Due for collection on</mat-label>
+              <mat-label>{{'labels.inputs.Due for collection on' | translate}}</mat-label>
               <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="dueDatePicker" required
                 formControlName="dueDate">
               <mat-datepicker-toggle matSuffix [for]="dueDatePicker"></mat-datepicker-toggle>
               <mat-datepicker #dueDatePicker></mat-datepicker>
               <mat-error *ngIf="savingsChargeForm.controls.dueDate.hasError('required')">
-                Due for collection on is <strong>required</strong>
+                {{'labels.inputs.Due for collection on' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
               </mat-error>
             </mat-form-field>
 
             <mat-form-field *ngIf="savingsChargeForm.contains('feeOnMonthDay')" (click)="feeOnMonthDayPicker.open()">
-              <mat-label>Due On</mat-label>
+              <mat-label>{{'labels.inputs.Due On' | translate}}</mat-label>
               <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="feeOnMonthDayPicker" required
                 formControlName="feeOnMonthDay">
               <mat-datepicker-toggle matSuffix [for]="feeOnMonthDayPicker"></mat-datepicker-toggle>
               <mat-datepicker #feeOnMonthDayPicker></mat-datepicker>
               <mat-error *ngIf="savingsChargeForm.controls.feeOnMonthDay.hasError('required')">
-                Due Date is <strong>required</strong>
+                {{'labels.inputs.Due Date' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
               </mat-error>
             </mat-form-field>
 
             <mat-form-field *ngIf="savingsChargeForm.contains('feeInterval')">
-              <mat-label>Repeats Every</mat-label>
+              <mat-label>{{'labels.inputs.Repeats Every' | translate}}</mat-label>
               <input matInput formControlName="feeInterval" />
             </mat-form-field>
 
@@ -80,8 +80,8 @@
         </div>
 
         <mat-card-actions fxLayoutGap="5px" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center">
-          <button type="button" mat-raised-button [routerLink]="['../../transactions']">Cancel</button>
+          <button type="button" mat-raised-button [routerLink]="['../../transactions']">{{'labels.buttons.Cancel' | translate}}</button>
-          <button mat-raised-button color="primary" [disabled]="!savingsChargeForm.valid">Submit</button>
+          <button mat-raised-button color="primary" [disabled]="!savingsChargeForm.valid">{{'labels.buttons.Submit' | translate}}</button>
         </mat-card-actions>
 
       </mat-card-content>

src/app/savings/saving-account-actions/apply-annual-fees-savings-account/apply-annual-fees-savings-account.component.html

@@ -9,20 +9,20 @@
         <div fxLayout="column">
 
           <mat-form-field (click)="dueDatePicker.open()">
-            <mat-label>Annual Fees Transaction Date</mat-label>
+            <mat-label>{{'labels.inputs.Annual Fees Transaction Date' | translate}}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="dueDatePicker" required formControlName="dueDate">
             <mat-datepicker-toggle matSuffix [for]="dueDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #dueDatePicker></mat-datepicker>
             <mat-error *ngIf="applyAnnualFeesForm.controls.dueDate.hasError('required')">
-              Due Date is <strong>required</strong>
+              {{'labels.inputs.Due Date' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Amount</mat-label>
+            <mat-label>{{'labels.inputs.Amount' | translate}}</mat-label>
             <input type="number" formControlName="amount" required matInput />
             <mat-error *ngIf="applyAnnualFeesForm.controls.amount.hasError('required')">
-              Amount is <strong>required</strong>
+              {{'labels.inputs.Amount' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -31,8 +31,8 @@
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{'labels.buttons.Cancel' | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!applyAnnualFeesForm.valid">Confirm</button>
+        <button mat-raised-button color="primary" [disabled]="!applyAnnualFeesForm.valid">{{'labels.buttons.Confirm' | translate}}</button>
       </mat-card-actions>
 
     </form>

src/app/savings/saving-account-actions/approve-savings-account/approve-savings-account.component.html

@@ -9,17 +9,17 @@
         <div fxLayout="column">
 
           <mat-form-field (click)="approvedOnDatePicker.open()">
-            <mat-label>Approved On Date</mat-label>
+            <mat-label>{{'labels.inputs.Approved On Date' | translate}}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="approvedOnDatePicker" required formControlName="approvedOnDate">
             <mat-datepicker-toggle matSuffix [for]="approvedOnDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #approvedOnDatePicker></mat-datepicker>
             <mat-error *ngIf="approveSavingsAccountForm.controls.approvedOnDate.hasError('required')">
-              Approved On Date is <strong>required</strong>
+              {{'labels.inputs.Approved On Date' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Note</mat-label>
+            <mat-label>{{'labels.inputs.Note' | translate}}</mat-label>
             <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
 
@@ -28,8 +28,8 @@
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{'labels.buttons.Cancel' | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!approveSavingsAccountForm.valid">Confirm</button>
+        <button mat-raised-button color="primary" [disabled]="!approveSavingsAccountForm.valid">{{'labels.buttons.Confirm' | translate}}</button>
       </mat-card-actions>
 
     </form>

src/app/savings/saving-account-actions/close-savings-account/close-savings-account.component.html

@@ -9,32 +9,32 @@
         <div fxLayout="column">
 
           <mat-form-field (click)="closedOnDatePicker.open()">
-            <mat-label>Closed On Date</mat-label>
+            <mat-label>{{'labels.inputs.Closed On Date' | translate}}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="closedOnDatePicker" required formControlName="closedOnDate">
             <mat-datepicker-toggle matSuffix [for]="closedOnDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #closedOnDatePicker></mat-datepicker>
             <mat-error *ngIf="closeSavingsAccountForm.controls.closedOnDate.hasError('required')">
-              Closed On Date is <strong>required</strong>
+              {{'labels.inputs.Closed On Date' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-checkbox class="m-b-25 m-t-15" formControlName="withdrawBalance">
-            Withdraw Balance
+            {{'labels.inputs.Withdraw Balance' | translate}}
           </mat-checkbox>
 
           <mat-checkbox  formControlName="postInterestValidationOnClosure">
-            Is Interest Posting required on closure date?
+            {{'labels.inputs.Is Interest Posting required on closure date' | translate}}?
           </mat-checkbox>
 
           <div *ngIf="closeSavingsAccountForm.controls['withdrawBalance'].value" fxLayout="column">
 
             <mat-form-field class="m-t-20" *ngIf="closeSavingsAccountForm.controls['amount']">
-              <mat-label>Transaction Amount</mat-label>
+              <mat-label>{{'labels.inputs.Transaction Amount' | translate}}</mat-label>
               <input type="number" required matInput formControlName="amount"/>
             </mat-form-field>
 
             <mat-form-field *ngIf="closeSavingsAccountForm.controls['paymentTypeId']">
-              <mat-label>Payment Type</mat-label>
+              <mat-label>{{'labels.inputs.Payment Type' | translate}}</mat-label>
               <mat-select formControlName="paymentTypeId">
                 <mat-option *ngFor="let paymentType of paymentTypeOptions"
                   [value]="paymentType.id">
@@ -47,41 +47,41 @@
               <span fxFlex="75%" class="expandcollapsebutton m-l-10 m-t-40" (click)="addPaymentDetails()">
                 <mat-slide-toggle>
                   <div [className]="showPaymentDetails ? 'enabled' : 'disabled'">
-                    <span class="m-l-10">Show Payment Details</span>
+                    <span class="m-l-10">{{'labels.inputs.Show Payment Details' | translate}}</span>
                   </div>
                 </mat-slide-toggle>
               </span>
             </div>
 
             <mat-form-field *ngIf="closeSavingsAccountForm.controls['accountNumber']">
-              <mat-label>Account Number</mat-label>
+              <mat-label>{{'labels.inputs.Account Number' | translate}}</mat-label>
               <input type="number" formControlName="accountNumber" matInput />
             </mat-form-field>
 
             <mat-form-field *ngIf="closeSavingsAccountForm.controls['checkNumber']">
-              <mat-label>Cheque</mat-label>
+              <mat-label>{{'labels.inputs.Cheque' | translate}}</mat-label>
               <input type="number" formControlName="checkNumber" matInput />
             </mat-form-field>
 
             <mat-form-field *ngIf="closeSavingsAccountForm.controls['routingCode']">
-              <mat-label>Routing Code</mat-label>
+              <mat-label>{{'labels.inputs.Routing Code' | translate}}</mat-label>
               <input formControlName="routingCode" matInput />
             </mat-form-field>
 
             <mat-form-field *ngIf="closeSavingsAccountForm.controls['receiptNumber']">
-              <mat-label>Receipt Number</mat-label>
+              <mat-label>{{'labels.inputs.Receipt Number' | translate}}</mat-label>
               <input formControlName="receiptNumber" matInput />
             </mat-form-field>
 
             <mat-form-field *ngIf="closeSavingsAccountForm.controls['bankNumber']">
-              <mat-label>Bank</mat-label>
+              <mat-label>{{'labels.inputs.Bank' | translate}}</mat-label>
               <input formControlName="bankNumber" matInput />
             </mat-form-field>
 
           </div>
 
           <mat-form-field>
-            <mat-label>Note</mat-label>
+            <mat-label>{{'labels.inputs.Note' | translate}}</mat-label>
             <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
 
@@ -90,8 +90,8 @@
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{'labels.buttons.Cancel' | translate}}</button>
-        <button mat-raised-button color="warn" [disabled]="!closeSavingsAccountForm.valid">Confirm</button>
+        <button mat-raised-button color="warn" [disabled]="!closeSavingsAccountForm.valid">{{'labels.buttons.Confirm' | translate}}</button>
       </mat-card-actions>
 
     </form>

src/app/savings/saving-account-actions/manage-savings-account/manage-savings-account.component.html

@@ -2,48 +2,48 @@
 
   <mat-card>
 
-    <h2 mat-title *ngIf="transactionType.holdamount">Hold Amount</h2>
+    <h2 mat-title *ngIf="transactionType.holdamount">{{'labels.heading.Hold Amount' | translate}}</h2>
-    <h2 mat-title *ngIf="transactionType.blockaccount">Block Savings Account</h2>
+    <h2 mat-title *ngIf="transactionType.blockaccount">{{'labels.heading.Block Savings Account' | translate}}</h2>
 
     <form [formGroup]="manageSavingsAccountForm" (ngSubmit)="submit()">
 
       <mat-card-content fxLayout="column">
 
         <mat-form-field>
-          <mat-label>Reason</mat-label>
+          <mat-label>{{'labels.inputs.Reason' | translate}}</mat-label>
           <mat-select required formControlName="reasonForBlock">
             <mat-option *ngFor="let codeValue of reasonOptions" [value]="codeValue.id">
               {{ codeValue.name }}
             </mat-option>
           </mat-select>
           <mat-error *ngIf="manageSavingsAccountForm.controls.reasonForBlock.hasError('required')">
-            Reason is <strong>required</strong>
+            {{'labels.inputs.Reason' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
           </mat-error>
         </mat-form-field>
 
         <mat-form-field fxFlex (click)="transactionDatePicker.open()" *ngIf="transactionType.holdamount">
-          <mat-label>Transaction Date</mat-label>
+          <mat-label>{{'labels.inputs.Transaction Date' | translate}}</mat-label>
           <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transactionDatePicker" required formControlName="transactionDate">
           <mat-datepicker-toggle matSuffix [for]="transactionDatePicker"></mat-datepicker-toggle>
           <mat-datepicker #transactionDatePicker></mat-datepicker>
           <mat-error *ngIf="manageSavingsAccountForm.controls.transactionDate.hasError('required')">
-            Transaction Date is <strong>required</strong>
+            {{'labels.inputs.Transaction Date' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
           </mat-error>
         </mat-form-field>
 
         <mat-form-field *ngIf="transactionType.holdamount">
-          <mat-label>Transaction Amount</mat-label>
+          <mat-label>{{'labels.inputs.Transaction Amount' | translate}}</mat-label>
           <input type="number" formControlName="transactionAmount" required matInput />
           <mat-error *ngIf="manageSavingsAccountForm.controls.transactionAmount.hasError('required')">
-            Transaction Amount is <strong>required</strong>
+            {{'labels.inputs.Transaction Amount' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
           </mat-error>
         </mat-form-field>
 
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../transactions']">Cancel</button>
+        <button type="button" mat-raised-button [routerLink]="['../../transactions']">{{'labels.buttons.Cancel' | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!manageSavingsAccountForm.valid">Confirm</button>
+        <button mat-raised-button color="primary" [disabled]="!manageSavingsAccountForm.valid">{{'labels.buttons.Confirm' | translate}}</button>
       </mat-card-actions>
 
     </form>

src/app/savings/saving-account-actions/post-interest-as-on-savings-account/post-interest-as-on-savings-account.component.html

@@ -7,20 +7,20 @@
       <mat-card-content>
 
         <mat-form-field fxFlex (click)="transactionDatePicker.open()">
-          <mat-label>Transaction Date</mat-label>
+          <mat-label>{{'labels.inputs.Transaction Date' | translate}}</mat-label>
           <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transactionDatePicker" required formControlName="transactionDate">
           <mat-datepicker-toggle matSuffix [for]="transactionDatePicker"></mat-datepicker-toggle>
           <mat-datepicker #transactionDatePicker></mat-datepicker>
           <mat-error *ngIf="postInterestSavingsAccountForm.controls.transactionDate.hasError('required')">
-            Transaction Date is <strong>required</strong>
+            {{'labels.inputs.Transaction Date' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
           </mat-error>
         </mat-form-field>
 
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{'labels.buttons.Cancel' | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!postInterestSavingsAccountForm.valid">Confirm</button>
+        <button mat-raised-button color="primary" [disabled]="!postInterestSavingsAccountForm.valid">{{'labels.buttons.Confirm' | translate}}</button>
       </mat-card-actions>
 
     </form>

src/app/savings/saving-account-actions/reject-savings-account/reject-savings-account.component.html

@@ -9,17 +9,17 @@
         <div fxLayout="column">
 
           <mat-form-field (click)="rejectedOnDatePicker.open()">
-            <mat-label>Rejected On Date</mat-label>
+            <mat-label>{{'labels.inputs.Rejected On Date' | translate}}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="rejectedOnDatePicker" required formControlName="rejectedOnDate">
             <mat-datepicker-toggle matSuffix [for]="rejectedOnDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #rejectedOnDatePicker></mat-datepicker>
             <mat-error *ngIf="rejectSavingsAccountForm.controls.rejectedOnDate.hasError('required')">
-              Rejected On Date is <strong>required</strong>
+              {{'labels.inputs.Rejected On Date' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Note</mat-label>
+            <mat-label>{{'labels.inputs.Note' | translate}}</mat-label>
             <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
 
@@ -28,8 +28,8 @@
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{'labels.buttons.Cancel' | translate}}</button>
-        <button mat-raised-button color="warn" [disabled]="!rejectSavingsAccountForm.valid">Confirm</button>
+        <button mat-raised-button color="warn" [disabled]="!rejectSavingsAccountForm.valid">{{'labels.buttons.Confirm' | translate}}</button>
       </mat-card-actions>
 
     </form>

src/app/savings/saving-account-actions/savings-account-assign-staff/savings-account-assign-staff.component.html

@@ -9,7 +9,7 @@
         <div fxLayout="column">
 
           <mat-form-field fxFlex="48%">
-            <mat-label>To Savings Officer</mat-label>
+            <mat-label>{{'labels.inputs.To Savings Officer' | translate}}</mat-label>
             <mat-select formControlName="toSavingsOfficerId">
               <mat-option *ngFor="let officer of fieldOfficerData" [value]="officer.id">
                 {{ officer.displayName }}
@@ -18,12 +18,12 @@
           </mat-form-field>
 
           <mat-form-field (click)="assignmentDatePicker.open()">
-            <mat-label>Assignment Date</mat-label>
+            <mat-label>{{'labels.inputs.Assignment Date' | translate}}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="assignmentDatePicker" required formControlName="assignmentDate">
             <mat-datepicker-toggle matSuffix [for]="assignmentDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #assignmentDatePicker></mat-datepicker>
             <mat-error *ngIf="savingsAssignStaffForm.controls.assignmentDate.hasError('required')">
-              Assignment Date is <strong>required</strong>
+              {{'labels.inputs.Assignment Date' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -32,8 +32,8 @@
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{'labels.buttons.Cancel' | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!savingsAssignStaffForm.valid">Confirm</button>
+        <button mat-raised-button color="primary" [disabled]="!savingsAssignStaffForm.valid">{{'labels.buttons.Confirm' | translate}}</button>
       </mat-card-actions>
 
     </form>

src/app/savings/saving-account-actions/savings-account-transactions/savings-account-transactions.component.html

@@ -2,36 +2,36 @@
 
   <mat-card>
 
-    <h2 mat-title *ngIf="transactionType.withdrawal">Withdraw Money From Saving Account</h2>
+    <h2 mat-title *ngIf="transactionType.withdrawal">{{'labels.heading.Withdraw Money From Saving Account' | translate}}</h2>
-    <h2 mat-title *ngIf="transactionType.deposit">Deposit Money To Saving Account</h2>
+    <h2 mat-title *ngIf="transactionType.deposit">{{'labels.heading.Deposit Money To Saving Account' | translate}}</h2>
 
     <form [formGroup]="savingAccountTransactionForm" (ngSubmit)="submit()">
 
       <mat-card-content fxLayout="column">
 
         <mat-form-field (click)="dueDatePicker.open()">
-          <mat-label>Transaction Date</mat-label>
+          <mat-label>{{'labels.inputs.Transaction Date' | translate}}</mat-label>
           <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="dueDatePicker"
             formControlName="transactionDate" required>
           <mat-datepicker-toggle matSuffix [for]="dueDatePicker"></mat-datepicker-toggle>
           <mat-datepicker #dueDatePicker></mat-datepicker>
           <mat-error *ngIf="savingAccountTransactionForm.controls.transactionDate.hasError('required')">
-            Transaction Date is <strong>required</strong>
+            {{'labels.inputs.Transaction Date' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
           </mat-error>
         </mat-form-field>
 
         <mat-form-field appearance="fill">
-          <mat-label>Transaction Amount</mat-label>
+          <mat-label>{{'labels.inputs.Transaction Amount' | translate}}</mat-label>
           <span matTextSuffix class="m-l-10">{{ currencyCode }}</span>
           <span fxFlex="auto"></span>
           <input type="number" class="right-input" formControlName="transactionAmount" required matInput />
           <mat-error *ngIf="savingAccountTransactionForm.controls.transactionAmount.hasError('required')">
-            Transaction Amount is <strong>required</strong>
+            {{'labels.inputs.Transaction Amount' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
           </mat-error>
         </mat-form-field>
 
         <mat-form-field>
-          <mat-label>Payment Type</mat-label>
+          <mat-label>{{'labels.inputs.Payment Type' | translate}}</mat-label>
           <mat-select required formControlName="paymentTypeId">
             <mat-option *ngFor="let paymentType of paymentTypeOptions" [value]="paymentType.id">
               {{ paymentType.name }}
@@ -43,45 +43,45 @@
           <span fxFlex="75%" class="expandcollapsebutton m-l-10 m-t-40" (click)="addPaymentDetails()">
             <mat-slide-toggle>
               <div [className]="addPaymentDetailsFlag ? 'enabled' : 'disabled'">
-                <span class="m-l-10">Show Payment Details</span>
+                <span class="m-l-10">{{'labels.inputs.Show Payment Details' | translate}}</span>
               </div>
             </mat-slide-toggle>
           </span>
         </div>
 
         <mat-form-field *ngIf="addPaymentDetailsFlag">
-          <mat-label>Account Number</mat-label>
+          <mat-label>{{'labels.inputs.Account Number' | translate}}</mat-label>
           <input type="number" formControlName="accountNumber" matInput />
         </mat-form-field>
 
         <mat-form-field *ngIf="addPaymentDetailsFlag">
-          <mat-label>Cheque</mat-label>
+          <mat-label>{{'labels.inputs.Cheque' | translate}}</mat-label>
           <input type="number" formControlName="checkNumber" matInput />
         </mat-form-field>
 
         <mat-form-field *ngIf="addPaymentDetailsFlag">
-          <mat-label>Routing Code</mat-label>
+          <mat-label>{{'labels.inputs.Routing Code' | translate}}</mat-label>
           <input formControlName="routingCode" matInput />
         </mat-form-field>
 
         <mat-form-field *ngIf="addPaymentDetailsFlag">
-          <mat-label>Receipt Number</mat-label>
+          <mat-label>{{'labels.inputs.Receipt Number' | translate}}</mat-label>
           <input formControlName="receiptNumber" matInput />
         </mat-form-field>
 
         <mat-form-field *ngIf="addPaymentDetailsFlag">
-          <mat-label>Bank</mat-label>
+          <mat-label>{{'labels.inputs.Bank' | translate}}</mat-label>
           <input formControlName="bankNumber" matInput />
         </mat-form-field>
 
         <mat-form-field>
-          <mat-label>Notes</mat-label>
+          <mat-label>{{'labels.inputs.Notes' | translate}}</mat-label>
           <textarea formControlName="note" matInput cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
         </mat-form-field>
 
         <mat-card-actions fxLayoutGap="5px" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center">
-          <button type="button" mat-raised-button [routerLink]="['../../transactions']">Cancel</button>
+          <button type="button" mat-raised-button [routerLink]="['../../transactions']">{{'labels.buttons.Cancel' | translate}}</button>
-          <button mat-raised-button color="primary" [disabled]="!savingAccountTransactionForm.valid">Submit</button>
+          <button mat-raised-button color="primary" [disabled]="!savingAccountTransactionForm.valid">{{'labels.buttons.Submit' | translate}}</button>
         </mat-card-actions>
 
       </mat-card-content>

src/app/savings/saving-account-actions/savings-account-unassign-staff/savings-account-unassign-staff.component.html

@@ -7,20 +7,20 @@
       <mat-card-content>
 
         <mat-form-field fxFlex (click)="unassignedDatePicker.open()">
-          <mat-label>Unassignment Date</mat-label>
+          <mat-label>{{'labels.inputs.Unassignment Date' | translate}}</mat-label>
           <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="unassignedDatePicker" required formControlName="unassignedDate">
           <mat-datepicker-toggle matSuffix [for]="unassignedDatePicker"></mat-datepicker-toggle>
           <mat-datepicker #unassignedDatePicker></mat-datepicker>
           <mat-error *ngIf="savingsUnassignStaffForm.controls.unassignedDate.hasError('required')">
-            Unassignment Date is <strong>required</strong>
+            {{'labels.inputs.Unassignment Date' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
           </mat-error>
         </mat-form-field>
 
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{'labels.buttons.Cancel' | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!savingsUnassignStaffForm.valid">Confirm</button>
+        <button mat-raised-button color="primary" [disabled]="!savingsUnassignStaffForm.valid">{{'labels.buttons.Confirm' | translate}}</button>
       </mat-card-actions>
 
     </form>

src/app/savings/saving-account-actions/undo-approval-savings-account/undo-approval-savings-account.component.html

@@ -7,15 +7,15 @@
       <mat-card-content>
 
         <mat-form-field fxFlex>
-          <mat-label>Note</mat-label>
+          <mat-label>{{'labels.inputs.Note' | translate}}</mat-label>
           <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
         </mat-form-field>
 
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{'labels.buttons.Cancel' | translate}}</button>
-        <button mat-raised-button color="warn" [disabled]="!undoApprovalSavingsAccountForm.valid">Confirm</button>
+        <button mat-raised-button color="warn" [disabled]="!undoApprovalSavingsAccountForm.valid">{{'labels.buttons.Confirm' | translate}}</button>
       </mat-card-actions>
 
     </form>

src/app/savings/saving-account-actions/withdraw-by-client-savings-account/withdraw-by-client-savings-account.component.html

@@ -9,17 +9,17 @@
         <div fxLayout="column">
 
           <mat-form-field (click)="withdrawnOnDatePicker.open()">
-            <mat-label>Withdrawn On Date</mat-label>
+            <mat-label>{{'labels.inputs.Withdrawn On Date' | translate}}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="withdrawnOnDatePicker" required formControlName="withdrawnOnDate">
             <mat-datepicker-toggle matSuffix [for]="withdrawnOnDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #withdrawnOnDatePicker></mat-datepicker>
             <mat-error *ngIf="withdrawSavingsAccountForm.controls.withdrawnOnDate.hasError('required')">
-              Withdrawn On Date is <strong>required</strong>
+              {{'labels.inputs.Withdrawn On Date' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Note</mat-label>
+            <mat-label>{{'labels.inputs.Note' | translate}}</mat-label>
             <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
 
@@ -28,8 +28,8 @@
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{'labels.buttons.Cancel' | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!withdrawSavingsAccountForm.valid">Confirm</button>
+        <button mat-raised-button color="primary" [disabled]="!withdrawSavingsAccountForm.valid">{{'labels.buttons.Confirm' | translate}}</button>
       </mat-card-actions>
 
     </form>

src/app/savings/savings-account-view/savings-account-view.component.html

@@ -6,7 +6,7 @@
 
       <div class="profile-image-container">
         <div>
-          <img mat-card-md-image class="profile-image" matTooltip="Savings Account"
+          <img mat-card-md-image class="profile-image" matTooltip="{{ 'tooltips.Savings Account' | translate}}"
             [src]="'assets/images/savings_account_placeholder.png'">
         </div>
       </div>
@@ -18,7 +18,7 @@
               [matTooltip]="savingsAccountData.status.value" *ngIf="!savingsAccountData.subStatus.block"></i>
             <i class="fa fa-stop" [ngClass]="savingsAccountData.subStatus.value | statusLookup"
               [matTooltip]="savingsAccountData.subStatus.value" *ngIf="savingsAccountData.subStatus.block"></i>
-            Savings Product : {{savingsAccountData.savingsProductName}}<span class="m-l-10">
+              {{'labels.inputs.Savings Product' | translate}} : {{savingsAccountData.savingsProductName}}<span class="m-l-10">
               <mifosx-account-number accountNo="{{savingsAccountData.accountNo}}"></mifosx-account-number></span>
           </h3>
           <div fxFlex="5%">
@@ -32,13 +32,13 @@
         </mat-card-title>
         <mat-card-subtitle>
           <p>
-            {{entityType}} Name: {{savingsAccountData.clientName || savingsAccountData.groupName}}
+            {{entityType}} {{'labels.inputs.name' | translate}}: {{savingsAccountData.clientName || savingsAccountData.groupName}}
             <span class="m-l-10" *ngIf="savingsAccountData.clientAccountNo">({{savingsAccountData.clientAccountNo}})</span><br />
             <span *ngIf="!savingsAccountData.status.rejected && !savingsAccountData.status.submittedAndPendingApproval">
-              Current Balances  :
+              {{'labels.inputs.Current Balances' | translate}}  :
               {{savingsAccountData.currency.displaySymbol}}<span class="m-l-10">{{savingsAccountData.summary.accountBalance |
               number}}</span><br />
-              Available Balance :
+              {{'labels.inputs.Available Balance' | translate}} :
               {{savingsAccountData.currency.displaySymbol}}<span class="m-l-10">{{savingsAccountData.summary.availableBalance |
               number}}</span>
             </span>
@@ -52,16 +52,16 @@
             <mat-icon matListIcon>
               <fa-icon icon="{{item.icon}}" size="sm"></fa-icon>
             </mat-icon>
-            <span> {{item.name}} </span>
+            <span> {{'labels.menus.' + item.name | translate}} </span>
           </button>
         </ng-container>
 
         <ng-container *ngIf="buttonConfig.options && !savingsAccountData.subStatus.block">
-          <button mat-menu-item [matMenuTriggerFor]="More">More</button>
+          <button mat-menu-item [matMenuTriggerFor]="More">{{'labels.menus.More' | translate}}</button>
           <mat-menu #More="matMenu">
             <span *ngFor="let option of buttonConfig.options">
               <button mat-menu-item *mifosxHasPermission="option.taskPermissionName"
-                (click)="doAction(option.name)">{{option.name}}</button>
+                (click)="doAction(option.name)">{{'labels.menus.' + option.name | translate}}</button>
             </span>
           </mat-menu>
         </ng-container>
@@ -77,121 +77,121 @@
 
       <div fxFlex="49%"
         *ngIf="isActive; else alternateSummary">
-        <h4 class="table-headers">Account Summary</h4>
+        <h4 class="table-headers">{{'labels.heading.Account Summary' | translate}}</h4>
         <table>
           <tbody>
             <tr *ngIf="savingsAccountData.summary.totalWithdrawals">
-              <td>Total Withdrawls</td>
+              <td>{{'labels.inputs.Total Withdrawls' | translate}}</td>
               <td>{{savingsAccountData.summary.totalWithdrawals | currency:currencyCode:'symbol-narrow':'1.2-2'}}</td>
             </tr>
             <tr *ngIf="savingsAccountData.summary.totalWithdrawalFees">
-              <td>Withdrawals Fees</td>
+              <td>{{'labels.inputs.Withdrawals Fees' | translate}}</td>
               <td>{{savingsAccountData.summary.totalWithdrawalFees | currency:currencyCode:'symbol-narrow':'1.2-2'}}</td>
             </tr>
             <tr *ngIf="savingsAccountData.summary.totalAnnualFees">
-              <td>Annual Fees</td>
+              <td>{{'labels.inputs.Annual Fees' | translate}}</td>
               <td>{{savingsAccountData.summary.totalAnnualFees | currency:currencyCode:'symbol-narrow':'1.2-2'}}</td>
             </tr>
             <tr *ngIf="savingsAccountData.summary.totalInterestEarned >= 0">
-              <td>Interest Earned</td>
+              <td>{{'labels.inputs.Interest Earned' | translate}}</td>
               <td>{{savingsAccountData.summary.totalInterestEarned | currency:currencyCode:'symbol-narrow':'1.2-2'}}</td>
             </tr>
             <tr *ngIf="savingsAccountData.summary.totalInterestPosted">
-              <td>Interest Posted</td>
+              <td>{{'labels.inputs.Interest Posted' | translate}}</td>
               <td>{{savingsAccountData.summary.totalInterestPosted | currency:currencyCode:'symbol-narrow':'1.2-2'}}</td>
             </tr>
             <tr *ngIf="savingsAccountData.summary.interestNotPosted >= 0">
-              <td>Interest Earned Not Posted</td>
+              <td>{{'labels.inputs.Interest Earned Not Posted' | translate}}</td>
               <td>{{savingsAccountData.summary.interestNotPosted | currency:currencyCode:'symbol-narrow':'1.2-2'}}</td>
             </tr>
             <tr *ngIf="savingsAccountData.summary.totalOverdraftInterestDerived">
-              <td>Interest On Overdraft</td>
+              <td>{{'labels.inputs.Interest On Overdraft' | translate}}</td>
               <td>
                 {{savingsAccountData.summary.totalOverdraftInterestDerived | currency:currencyCode:'symbol-narrow':'1.2-2'}}</td>
             </tr>
             <tr *ngIf="savingsAccountData.summary.interestNotPosted < 0">
-              <td>Overdraft Interest Not Posted</td>
+              <td>{{'labels.inputs.Overdraft Interest Not Posted' | translate}}</td>
               <td>{{savingsAccountData.summary.interestNotPosted | currency:currencyCode:'symbol-narrow':'1.2-2'}}</td>
             </tr>
             <tr *ngIf="savingsAccountData.nominalAnnualInterestRate">
-              <td>Nominal Interest Rate</td>
+              <td>{{'labels.inputs.Nominal Interest Rate' | translate}}</td>
               <td>{{savingsAccountData.nominalAnnualInterestRate | formatNumber}} %</td>
             </tr>
             <tr>
-              <td>Interest Compounding Period</td>
+              <td>{{'labels.inputs.Interest Compounding Period' | translate}}</td>
               <td>{{savingsAccountData.interestCompoundingPeriodType.value}}</td>
             </tr>
             <tr>
-              <td>Interest Posting Period</td>
+              <td>{{'labels.inputs.Interest Posting Period' | translate}}</td>
               <td>{{savingsAccountData.interestPostingPeriodType.value}}</td>
             </tr>
             <tr>
-              <td>Interest Calculated Using</td>
+              <td>{{'labels.inputs.Interest Calculated Using' | translate}}</td>
               <td>{{savingsAccountData.interestCalculationType.value}}</td>
             </tr>
             <tr>
-              <td># Days in Year</td>
+              <td># {{'labels.inputs.Days in Year' | translate}}</td>
               <td>{{savingsAccountData.interestCalculationDaysInYearType.value}}</td>
             </tr>
             <tr *ngIf="savingsAccountData.withdrawalFee">
-              <td>Withdrawal Fee</td>
+              <td>{{'labels.inputs.Withdrawal Fee' | translate}}</td>
               <td>{{savingsAccountData.withdrawalFee.amount | currency:currencyCode:'symbol-narrow':'1.2-2'}}</td>
             </tr>
             <tr *ngIf="savingsAccountData.lastActiveTransactionDate">
-              <td>Last Active Transaction Date</td>
+              <td>{{'labels.inputs.Last Active Transaction Date' | translate}}</td>
               <td>{{savingsAccountData.lastActiveTransactionDate | dateFormat}}</td>
             </tr>
             <tr *ngIf="!(savingsAccountData.subStatus.id === 0)">
-              <td>Substatus</td>
+              <td>{{'labels.inputs.Substatus' | translate}}</td>
               <td>{{savingsAccountData.subStatus.value}}</td>
             </tr>
             <tr *ngIf="savingsAccountData.daysToInactive">
-              <td>Days to Inactive</td>
+              <td>{{'labels.inputs.Days to Inactive' | translate}}</td>
               <td>{{savingsAccountData.daysToInactive}}</td>
             </tr>
             <tr *ngIf="savingsAccountData.daysToDormancy">
-              <td>Days to Dormancy</td>
+              <td>{{'labels.inputs.Days to Dormancy' | translate}}</td>
               <td>{{savingsAccountData.daysToDormancy}}</td>
             </tr>
             <tr *ngIf="savingsAccountData.daysToEscheat">
-              <td>Days to Escheat</td>
+              <td>{{'labels.inputs.Days to Escheat' | translate}}</td>
               <td>{{savingsAccountData.daysToEscheat}}</td>
             </tr>
             <tr *ngIf="savingsAccountData.annualFee">
-              <td>Annual Fee</td>
+              <td>{{'labels.inputs.Annual Fee' | translate}}</td>
               <td>{{savingsAccountData.annualFee.amount | currency:currencyCode:'symbol-narrow':'1.2-2'}}
               </td>
             </tr>
             <tr *ngIf="savingsAccountData.allowOverdraft">
-              <td>Over Draft Limit</td>
+              <td>{{'labels.inputs.Over Draft Limit' | translate}}</td>
               <td>{{savingsAccountData.overdraftLimit | currency:currencyCode:'symbol-narrow':'1.2-2'}}</td>
             </tr>
             <tr *ngIf="savingsAccountData.allowOverdraft">
-              <td>Min Overdraft Required for Interest Calculation</td>
+              <td>{{'labels.inputs.Min Overdraft Required for Interest Calculation' | translate}}</td>
               <td>{{savingsAccountData.minOverdraftForInterestCalculation | currency:currencyCode:'symbol-narrow':'1.2-2'}}</td>
             </tr>
             <tr *ngIf="savingsAccountData.minBalanceForInterestCalculation">
-              <td>Min Balance Required for Interest Calculation</td>
+              <td>{{'labels.inputs.Min Balance Required for Interest Calculation' | translate}}</td>
               <td>{{savingsAccountData.minBalanceForInterestCalculation | formatNumber}}</td>
             </tr>
             <tr *ngIf="savingsAccountData.minRequiredBalance">
-              <td>Minimum Required Balance</td>
+              <td>{{'labels.inputs.Minimum Required Balance' | translate}}</td>
               <td>{{savingsAccountData.minRequiredBalance | formatNumber}}</td>
             </tr>
             <tr *ngIf="savingsAccountData.enforceMinRequiredBalance">
-              <td>Enforce Minimum Required Balance</td>
+              <td>{{'labels.inputs.Enforce Minimum Required Balance' | translate}}</td>
               <td>{{savingsAccountData.enforceMinRequiredBalance | formatNumber}}</td>
             </tr>
             <tr *ngIf="savingsAccountData.summary.lastInterestCalculationDate">
-              <td>Interest Recalculation Date</td>
+              <td>{{'labels.inputs.Interest Recalculation Date' | translate}}</td>
               <td>{{savingsAccountData.summary.lastInterestCalculationDate | dateFormat}}</td>
             </tr>
             <tr *ngIf="savingsAccountData.onHoldFunds">
-              <td>On Hold Funds</td>
+              <td>{{'labels.inputs.On Hold Funds' | translate}}</td>
               <td><a *mifosxHasPermission="'READ_SAVINGSACCOUNT'">{{savingsAccountData.onHoldFunds | currency:currencyCode:'symbol-narrow':'1.2-2'}}</a></td>
             </tr>
             <tr *ngIf="savingsAccountData.withHoldTax">
-              <td>Withhold Tax Group</td>
+              <td>{{'labels.inputs.Withhold Tax Group' | translate}}</td>
               <td>{{savingsAccountData.taxGroup.name}}</td>
             </tr>
           </tbody>
@@ -200,24 +200,24 @@
 
       <ng-template #alternateSummary>
         <div fxFlex="49%">
-          <h4 class="table-headers">Account Summary</h4>
+          <h4 class="table-headers">{{'labels.heading.Account Summary' | translate}}</h4>
           <table>
             <tbody>
               <tr>
-                <td>Activated On</td>
+                <td>{{'labels.inputs.Activated On' | translate}}</td>
                 <td>{{savingsAccountData.timeline.activatedOnDate ? (savingsAccountData.timeline.activatedOnDate |
                   dateFormat) : 'Not Activated'}}</td>
               </tr>
               <tr>
-                <td>Currency</td>
+                <td>{{'labels.inputs.Currency' | translate}}</td>
                 <td>{{savingsAccountData.currency.name}} [{{savingsAccountData.currency.code}}]</td>
               </tr>
               <tr>
-                <td>External Id</td>
+                <td>{{'labels.inputs.External Id' | translate}}</td>
                 <td *ngIf="savingsAccountData.externalId">
                   <mifosx-external-identifier externalId="{{savingsAccountData.externalId}}"></mifosx-external-identifier>
                 </td>
-                <td *ngIf="!savingsAccountData.externalId">Not Provided</td>
+                <td *ngIf="!savingsAccountData.externalId">{{'labels.inputs.Not Provided' | translate}}</td>
               </tr>
             </tbody>
           </table>
@@ -228,30 +228,30 @@
 
         <div
           *ngIf="!savingsAccountData.status.rejected && !savingsAccountData.status.submittedAndPendingApproval; else alternateDetails">
-          <h4 class="table-headers">Savings Details</h4>
+          <h4 class="table-headers">{{'labels.heading.Savings Details' | translate}}</h4>
           <table>
             <tbody>
               <tr>
-                <td>Activated On</td>
+                <td>{{'labels.inputs.Activated On' | translate}}</td>
                 <td>{{savingsAccountData.timeline.activatedOnDate ? (savingsAccountData.timeline.activatedOnDate |
                   dateFormat) : 'Not Activated'}}</td>
               </tr>
               <tr>
-                <td>Field Officer</td>
+                <td>{{'labels.inputs.Field Officer' | translate}}</td>
                 <td>{{savingsAccountData.fieldOfficerName ? savingsAccountData.fieldOfficerName : 'Unassigned'}}</td>
               </tr>
               <tr>
-                <td>External Id</td>
+                <td>{{'labels.inputs.External Id' | translate}}</td>
                 <td *ngIf="savingsAccountData.externalId">
                   <mifosx-external-identifier externalId="{{savingsAccountData.externalId}}"></mifosx-external-identifier>
                 </td>
-                <td *ngIf="!savingsAccountData.externalId">Not Provided</td>              </tr>
+                <td *ngIf="!savingsAccountData.externalId">{{'labels.inputs.Not Provided' | translate}}</td>              </tr>
               <tr>
-                <td>Currency</td>
+                <td>{{'labels.inputs.Currency' | translate}}</td>
                 <td>{{savingsAccountData.currency.name}} [{{savingsAccountData.currency.code}}]</td>
               </tr>
               <tr>
-                <td>Nominal Interest Rate</td>
+                <td>{{'labels.inputs.Nominal Interest Rate' | translate}}</td>
                 <td>{{savingsAccountData.nominalAnnualInterestRate | formatNumber}} %</td>
               </tr>
             </tbody>
@@ -260,15 +260,15 @@
 
         <ng-template #alternateDetails>
           <div>
-            <h4 class="table-headers">Savings Details</h4>
+            <h4 class="table-headers">{{'labels.heading.Savings Details' | translate}}</h4>
             <table>
               <tbody>
                 <tr>
-                  <td>Field Officer</td>
+                  <td>{{'labels.inputs.Field Officer' | translate}}</td>
                   <td>{{savingsAccountData.fieldOfficerName ? savingsAccountData.fieldOfficerName : 'Unassigned'}}</td>
                 </tr>
                 <tr>
-                  <td>Balance</td>
+                  <td>{{'labels.inputs.Balance' | translate}}</td>
                   <td>{{savingsAccountData.summary.accountBalance}}</td>
                 </tr>
               </tbody>
@@ -277,16 +277,16 @@
         </ng-template>
 
         <div *ngIf="!savingsAccountData.status.rejected && !savingsAccountData.status.submittedAndPendingApproval">
-          <h4 class="table-headers">Performance History</h4>
+          <h4 class="table-headers">{{'labels.heading.Performance History' | translate}}</h4>
           <table>
             <tbody>
               <tr *ngIf="savingsAccountData.summary.totalDeposits">
-                <td>Total Deposits</td>
+                <td>{{'labels.inputs.Total Deposits' | translate}}</td>
                 <td>{{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.summary.totalDeposits |
                   number}}</td>
               </tr>
               <tr *ngIf="savingsAccountData.summary.totalInterestEarned >= 0">
-                <td>Total Interest Earned</td>
+                <td>{{'labels.inputs.Total Interest Earned' | translate}}</td>
                 <td>{{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.summary.totalInterestEarned
                   | formatNumber}}</td>
               </tr>
@@ -301,25 +301,25 @@
     <nav mat-tab-nav-bar class="navigation-tabs" *ngIf="isActive">
       <a mat-tab-link [routerLink]="['./transactions']" routerLinkActive #transactions="routerLinkActive"
         [active]="transactions.isActive">
-        Transactions
+        {{'labels.inputs.Transactions' | translate}}
       </a>
       <a mat-tab-link [routerLink]="['./charges']" routerLinkActive #charges="routerLinkActive"
         [active]="charges.isActive">
-        Charges
+        {{'labels.inputs.Charges' | translate}}
       </a>
       <a mat-tab-link [routerLink]="['./documents']" routerLinkActive #savingsDocuments="routerLinkActive"
         [active]="savingsDocuments.isActive">
-        Savings Documents
+        {{'labels.inputs.Savings Documents' | translate}}
       </a>
       <a mat-tab-link *mifosxHasPermission="'READ_SAVINGSNOTE'" [routerLink]="['./notes']" routerLinkActive #notes="routerLinkActive"
         [active]="notes.isActive">
-        Notes
+        {{'labels.inputs.Notes' | translate}}
       </a>
       <ng-container *mifosxHasPermission="'READ_SAVINGSACCOUNTCHARGE'">
         <a mat-tab-link [routerLink]="['./standing-instructions']" routerLinkActive
           #standingInstructions="routerLinkActive" [active]="standingInstructions.isActive"
           *ngIf="savingsAccountData.clientId">
-          Standing Instructions
+          {{'labels.inputs.Standing Instructions' | translate}}
         </a>
       </ng-container>
       <ng-container *ngFor="let savingsDatatable of savingsDatatables">

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

@@ -2,9 +2,6 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
-/** Translation Imports */
-import { extract } from '../core/i18n/i18n.service';
-
 /** Custom Components */
 import { SavingsAccountViewComponent } from './savings-account-view/savings-account-view.component';
 import { TransactionsTabComponent } from './savings-account-view/transactions-tab/transactions-tab.component';
@@ -50,11 +47,11 @@ import { SavingsTransactionGeneralTabComponent } from './savings-account-view/tr
 const routes: Routes = [
   {
     path: '',
-    data: { title: extract('All Savings'), breadcrumb: 'Savings', routeParamBreadcrumb: false },
+    data: { title: 'All Savings', breadcrumb: 'Savings', routeParamBreadcrumb: false },
     children: [
       {
         path: 'create',
-        data: { title: extract('Create Savings Account'), breadcrumb: 'Create Savings Account' },
+        data: { title: 'Create Savings Account', breadcrumb: 'Create Savings Account' },
         component: CreateSavingsAccountComponent,
         resolve: {
           savingsAccountTemplate: SavingsAccountTemplateResolver
@@ -62,7 +59,7 @@ const routes: Routes = [
       },
       {
         path: ':savingAccountId',
-        data: { title: extract('Saving Account View'), routeParamBreadcrumb: 'savingAccountId' },
+        data: { title: 'Saving Account View', routeParamBreadcrumb: 'savingAccountId' },
         component: SavingsAccountViewComponent,
         resolve: {
           savingsAccountData: SavingsAccountViewResolver,
@@ -76,7 +73,7 @@ const routes: Routes = [
           },
           {
             path: 'transactions',
-            data: { title: extract('Savings Account Transactions'), breadcrumb: 'Transactions', routeParamBreadcrumb: false },
+            data: { title: 'Savings Account Transactions', breadcrumb: 'Transactions', routeParamBreadcrumb: false },
             children: [
               {
                 path: '',
@@ -91,17 +88,17 @@ const routes: Routes = [
           {
             path: 'charges',
             component: ChargesTabComponent,
-            data: { title: extract('Savings Account Charges'), breadcrumb: 'Charges', routeParamBreadcrumb: false }
+            data: { title: 'Savings Account Charges', breadcrumb: 'Charges', routeParamBreadcrumb: false }
           },
           {
             path: 'standing-instructions',
             component: StandingInstructionsTabComponent,
-            data: { title: extract('Savings Account SIH'), breadcrumb: 'Standing Instructions', routeParamBreadcrumb: false }
+            data: { title: 'Savings Account SIH', breadcrumb: 'Standing Instructions', routeParamBreadcrumb: false }
           },
           {
             path: 'notes',
             component: NotesTabComponent,
-            data: { title: extract('Savings Account Notes'), breadcrumb: 'Notes', routeParamBreadcrumb: false },
+            data: { title: 'Savings Account Notes', breadcrumb: 'Notes', routeParamBreadcrumb: false },
             resolve: {
               savingAccountNotes: SavingNotesResolver
             }
@@ -109,7 +106,7 @@ const routes: Routes = [
           {
             path: 'documents',
             component: SavingsDocumentsTabComponent,
-            data: { title: extract('Savings Account Documents'), breadcrumb: 'Documents', routeParamBreadcrumb: false },
+            data: { title: 'Savings Account Documents', breadcrumb: 'Documents', routeParamBreadcrumb: false },
             resolve: {
               savingsDocuments: SavingDocumentsResolver
             }
@@ -120,7 +117,7 @@ const routes: Routes = [
               {
                 path: ':datatableName',
                 component: DatatableTabsComponent,
-                data: { title: extract('View Data Table'), routeParamBreadcrumb: 'datatableName' },
+                data: { title: 'View Data Table', routeParamBreadcrumb: 'datatableName' },
                 resolve: {
                   savingsDatatable: SavingsDatatableResolver
                 }
@@ -131,7 +128,7 @@ const routes: Routes = [
       },
       {
         path: ':savingAccountId/edit',
-        data: { title: extract('Edit Savings Account'), breadcrumb: 'Edit', routeParamBreadcrumb: false },
+        data: { title: 'Edit Savings Account', breadcrumb: 'Edit', routeParamBreadcrumb: false },
         component: EditSavingsAccountComponent,
         resolve: {
           savingsAccountAndTemplate: SavingsAccountAndTemplateResolver
@@ -139,7 +136,7 @@ const routes: Routes = [
       },
       {
         path: ':savingAccountId/transactions/:id',
-        data: { title: extract('Savings Account Transactions'), breadcrumb: 'Transactions', routeParamBreadcrumb: false },
+        data: { title: 'Savings Account Transactions', breadcrumb: 'Transactions', routeParamBreadcrumb: false },
         children: [
           {
             path: '',
@@ -166,7 +163,7 @@ const routes: Routes = [
                   {
                     path: ':datatableName',
                     component: DatatableTransactionTabComponent,
-                    data: { title: extract('View Data table'), routeParamBreadcrumb: 'datatableName' },
+                    data: { title: 'View Data table', routeParamBreadcrumb: 'datatableName' },
                     resolve: {
                       transactionDatatable: TransactionDatatableResolver
                     }
@@ -195,7 +192,7 @@ const routes: Routes = [
       },
       {
         path: ':savingAccountId/charges',
-        data: { title: extract('Savings Account Charges'), breadcrumb: 'Charges', routeParamBreadcrumb: false },
+        data: { title: 'Savings Account Charges', breadcrumb: 'Charges', routeParamBreadcrumb: false },
         children: [
           {
             path: '',
@@ -214,7 +211,7 @@ const routes: Routes = [
       },
       {
         path: ':savingAccountId/actions/:name',
-        data: { title: extract('Savings Account Actions'), breadcrumb: 'Savings Account Actions', routeParamBreadcrumb: 'name' },
+        data: { title: 'Savings Account Actions', breadcrumb: 'Savings Account Actions', routeParamBreadcrumb: 'name' },
         component: SavingAccountActionsComponent,
         resolve: {
           savingsAccountActionData: SavingsAccountActionsResolver
@@ -229,7 +226,7 @@ const routes: Routes = [
         children: [
           {
             path: 'create',
-            data: { title: extract('Create GSIM Application'), breadcrumb: 'Create GSIM Application' },
+            data: { title: 'Create GSIM Application', breadcrumb: 'Create GSIM Application' },
             component: CreateGsimAccountComponent,
             resolve: {
               groupsData: GroupViewResolver,
@@ -238,7 +235,7 @@ const routes: Routes = [
           },
           {
             path: ':savingAccountId',
-            data: { title: extract('GSIM Account View'), routeParamBreadcrumb: 'savingAccountId' },
+            data: { title: 'GSIM Account View', routeParamBreadcrumb: 'savingAccountId' },
             children: [
               {
                 path: '',

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

@@ -5,9 +5,6 @@ import { Routes, RouterModule } from '@angular/router';
 /** Routing Imports */
 import { Route } from '../core/route/route.service';
 
-/** Translation Imports */
-import { extract } from '../core/i18n/i18n.service';
-
 /** Custom Components */
 import { SearchPageComponent } from './search-page/search-page.component';
 
@@ -20,7 +17,7 @@ const routes: Routes = [
     {
       path: 'search',
       component: SearchPageComponent,
-      data: { title: extract('Search'), breadcrumb: 'Search' },
+      data: { title: 'Search', breadcrumb: 'Search' },
       runGuardsAndResolvers: 'paramsOrQueryParamsChange',
       resolve: {
         searchResults: SearchResolver

src/app/self-service/self-service-routing.module.ts

@@ -5,9 +5,6 @@ import { Routes, RouterModule } from '@angular/router';
 /** Routing Imports */
 import { Route } from '../core/route/route.service';
 
-/** Translation Imports */
-import { extract } from '../core/i18n/i18n.service';
-
 /** Custom Components */
 import { SelfServiceComponent } from './self-service.component';
 import { UsersComponent } from './users/users.component';
@@ -28,11 +25,11 @@ const routes: Routes = [
     {
       path: 'self-service',
       component: SelfServiceComponent,
-      data: { title: extract('Self Service'), breadcrumb: 'Self Service', addBreadcrumbLink: false },
+      data: { title: 'Self Service', breadcrumb: 'Self Service', addBreadcrumbLink: false },
       children: [
         {
           path: 'users',
-          data: { title: extract('Self Service Users'), breadcrumb: 'Users' },
+          data: { title: 'Self Service Users', breadcrumb: 'Users' },
           children: [
             {
               path: '',
@@ -44,14 +41,14 @@ const routes: Routes = [
             {
               path: 'create',
               component: CreateUserComponent,
-              data: { title: extract('Create Self Service User'), breadcrumb: 'Create' },
+              data: { title: 'Create Self Service User', breadcrumb: 'Create' },
               resolve: {
                 offices: OfficesResolver
               }
             },
             {
               path: 'view/:id',
-              data: { title: extract('View Self Service User'), routeResolveBreadcrumb: ['user', 'username'] },
+              data: { title: 'View Self Service User', routeResolveBreadcrumb: ['user', 'username'] },
               resolve: {
                 user: ViewUserResolver
               },
@@ -63,7 +60,7 @@ const routes: Routes = [
                 {
                   path: 'edit',
                   component: EditUserComponent,
-                  data: { title: extract('Edit Self Service User'), breadcrumb: 'Edit', routeResolveBreadcrumb: false }
+                  data: { title: 'Edit Self Service User', breadcrumb: 'Edit', routeResolveBreadcrumb: false }
                 }
               ]
             }
@@ -72,12 +69,12 @@ const routes: Routes = [
         {
           path: 'app-configuration',
           component: AppConfigurationComponent,
-          data: { title: extract('Self Service App Configuration'), breadcrumb: 'App Configuration' }
+          data: { title: 'Self Service App Configuration', breadcrumb: 'App Configuration' }
         },
         {
           path: 'task-management',
           component: TaskManagementComponent,
-          data: { title: extract('Self Service Task Management'), breadcrumb: 'Task Management' }
+          data: { title: 'Self Service Task Management', breadcrumb: 'Task Management' }
         }
       ]
     }

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

@@ -5,9 +5,6 @@ import { Routes, RouterModule } from '@angular/router';
 /** Routing Imports */
 import { Route } from '../core/route/route.service';
 
-/** Translation Imports */
-import { extract } from '../core/i18n/i18n.service';
-
 /** Custom Components */
 import { SettingsComponent } from './settings.component';
 
@@ -17,7 +14,7 @@ const routes: Routes = [
     {
       path: 'settings',
       component: SettingsComponent,
-      data: { title: extract('Settings'), breadcrumb: 'Settings' }
+      data: { title: 'Settings', breadcrumb: 'Settings' }
     }
   ])
 ];

src/app/settings/settings.component.html

@@ -9,14 +9,14 @@
 
       <mat-expansion-panel-header>
         <mat-panel-title>
-          Main Configuration
+          {{'labels.inputs.Main Configuration' | translate}}
         </mat-panel-title>
       </mat-expansion-panel-header>
 
       <div fxLayout="column">
 
         <mat-form-field>
-          <mat-label>Default Language</mat-label>
+          <mat-label>{{'labels.inputs.Default Language' | translate}}</mat-label>
           <mat-select [formControl]="language" [compareWith]="compareOptions">
             <mat-option *ngFor="let language of languages" [value]="language">
               {{ language.name }}
@@ -25,7 +25,7 @@
         </mat-form-field>
 
         <mat-form-field>
-          <mat-label>Default Date Format</mat-label>
+          <mat-label>{{'labels.inputs.Default Date Format' | translate}}</mat-label>
           <mat-select [formControl]="dateFormat">
             <mat-option *ngFor="let dateFormat of dateFormats" [value]="dateFormat">
               {{ dateFormat }}
@@ -34,7 +34,7 @@
         </mat-form-field>
 
         <mat-form-field>
-          <mat-label>Decimals to Display</mat-label>
+          <mat-label>{{'labels.inputs.Decimals to Display' | translate}}</mat-label>
           <mat-select [formControl]="decimalsToDisplay">
             <mat-option *ngFor="let decimalOpt of decimals" [value]="decimalOpt">
               {{ decimalOpt }}
@@ -50,22 +50,22 @@
 
       <mat-expansion-panel-header>
         <mat-panel-title>
-          Images
+          {{'labels.inputs.Images' | translate}}
         </mat-panel-title>
       </mat-expansion-panel-header>
 
       <div fxLayout="column">
 
-        <span class="header">Favicon</span>
+        <span class="header">{{'labels.inputs.Favicon' | translate}}</span>
         <mifosx-file-upload></mifosx-file-upload>
 
-        <span class="header">Cover Image</span>
+        <span class="header">{{'labels.inputs.Cover Image' | translate}}</span>
         <mifosx-file-upload></mifosx-file-upload>
 
-        <span class="header">Logo</span>
+        <span class="header">{{'labels.inputs.Logo' | translate}}</span>
         <mifosx-file-upload></mifosx-file-upload>
 
-        <span class="header">Logo with Organization Name</span>
+        <span class="header">{{'labels.inputs.Logo with Organization Name' | translate}}</span>
         <mifosx-file-upload></mifosx-file-upload>
 
       </div>
@@ -76,17 +76,17 @@
 
       <mat-expansion-panel-header>
         <mat-panel-title>
-          Theme and Font
+          {{'labels.inputs.Theme and Font' | translate}}
         </mat-panel-title>
       </mat-expansion-panel-header>
 
       <div fxLayout="column">
 
-        <span class="header">Theme</span>
+        <span class="header">{{'labels.inputs.Theme' | translate}}</span>
         <mifosx-theme-picker></mifosx-theme-picker>
 
         <mat-form-field>
-          <mat-label>Default Font</mat-label>
+          <mat-label>{{'labels.inputs.Default Font' | translate}}</mat-label>
           <mat-select>
             <mat-option *ngFor="let font of fonts" [value]="font">
               {{ font }}
@@ -102,24 +102,24 @@
 
       <mat-expansion-panel-header>
         <mat-panel-title>
-          Contact Information
+          {{'labels.inputs.Contact Information' | translate}}
         </mat-panel-title>
       </mat-expansion-panel-header>
 
       <div fxLayout="column">
 
         <mat-form-field>
-          <mat-label>Website</mat-label>
+          <mat-label>{{'labels.inputs.Website' | translate}}</mat-label>
           <input type="url" matInput>
         </mat-form-field>
 
         <mat-form-field>
-          <mat-label>Email</mat-label>
+          <mat-label>{{'labels.inputs.Email' | translate}}</mat-label>
           <input type="email" matInput>
         </mat-form-field>
 
         <mat-form-field>
-          <mat-label>Contact No</mat-label>
+          <mat-label>{{'labels.inputs.Contact No' | translate}}</mat-label>
           <input type="tel" matInput>
         </mat-form-field>
 

src/app/shared/account-number/account-number.component.html

@@ -1,5 +1,5 @@
 <span (mouseenter)="mouseEnter()" (mouseleave)="mouseLeave()">
-  <span class="m-l-5" *ngIf="displayL && iconVisible" (click)="copyValue()"><b><fa-icon icon="copy" size="sm" title="Copy Account Number"></fa-icon></b></span>
+  <span class="m-l-5" *ngIf="displayL && iconVisible" (click)="copyValue()"><b><fa-icon icon="copy" size="sm" title="{{'labels.text.Copy Account Number' | translate }}"></fa-icon></b></span>
   <span class="m-l-5">{{ accountNo }}</span>
-  <span class="m-l-3" *ngIf="displayR && iconVisible" (click)="copyValue()"><b><fa-icon icon="copy" size="sm" title="Copy Account Number"></fa-icon></b></span>
+  <span class="m-l-3" *ngIf="displayR && iconVisible" (click)="copyValue()"><b><fa-icon icon="copy" size="sm" title="{{'labels.text.Copy Account Number' | translate }}"></fa-icon></b></span>
 </span>

src/app/shared/entity-name/entity-name.component.html

@@ -1,5 +1,5 @@
 <span (mouseenter)="mouseEnter()" (mouseleave)="mouseLeave()">
-  <span class="m-l-5" *ngIf="displayL && iconVisible" (click)="copyValue()"><b><fa-icon icon="copy" size="sm" title="Copy Account Number"></fa-icon></b></span>
+  <span class="m-l-5" *ngIf="displayL && iconVisible" (click)="copyValue()"><b><fa-icon icon="copy" size="sm" title="{{'labels.text.Copy Account Number' | translate}}"></fa-icon></b></span>
   <span class="m-l-5"><b>{{ entityName }}</b></span>
-  <span class="m-l-3" *ngIf="displayR && iconVisible" (click)="copyValue()"><b><fa-icon icon="copy" size="sm" title="Copy Account Number"></fa-icon></b></span>
+  <span class="m-l-3" *ngIf="displayR && iconVisible" (click)="copyValue()"><b><fa-icon icon="copy" size="sm" title="{{'labels.text.Copy Account Number' | translate}}"></fa-icon></b></span>
 </span>

src/app/shared/footer/footer.component.html

@@ -1,4 +1,4 @@
-<div fxLayout="column" id="footer" class="m-b-20">
+<div fxLayout="column" id="footer" class="m-b-20" *ngIf="displayBackEndInfo">
   <mat-divider fxFlexAlign="center" class="divider"></mat-divider>
   <div fxLayout="column" class="m-b-20 content">
 
@@ -15,7 +15,7 @@
       <td colspan="2" class="center footer-content"><b>{{ server }}</b></td>
     </tr>
     <tr *ngIf="isBusinessDateDefined">
-      <td class="footer-content">Current Business Date:</td>
+      <td class="footer-content">{{'labels.text.Current Business Date' | translate}}:</td>
       <td class="center footer-content business-date"><b>{{ businessDate | date: 'EEEE, MMMM dd, y' }}</b></td>
     </tr>
   </table>

src/app/shared/footer/footer.component.ts

@@ -42,16 +42,19 @@ export class FooterComponent implements OnInit, OnDestroy {
   alert$: Subscription;
   timer: any;
 
-  displayBackEndInfo: boolean = environment.displayBackEndInfo;
+  displayBackEndInfo = true;
 
   constructor(private systemService: SystemService,
     private settingsService: SettingsService,
     private authenticationService: AuthenticationService,
     private alertService: AlertService,
     private dateUtils: Dates,
-    private versionService: VersionService) { }
+    private versionService: VersionService) {
+      this.displayBackEndInfo = (environment.displayBackEndInfo === 'true');
+  }
 
   ngOnInit() {
+    if (this.displayBackEndInfo) {
       this.alert$ = this.alertService.alertEvent.subscribe((alertEvent: Alert) => {
         const alertType = alertEvent.type;
         if (alertType === SettingsService.businessDateType + ' Set Config') {
@@ -76,10 +79,13 @@ export class FooterComponent implements OnInit, OnDestroy {
         this.versions.fineract.hash = buildVersion[1];
       });
     }
+  }
 
   ngOnDestroy() {
+    if (this.displayBackEndInfo) {
       clearTimeout(this.timer);
     }
+  }
 
   /**
    * Get the Configuration for Business Date

src/app/shared/search-tool/search-tool.component.html

@@ -1,15 +1,15 @@
 <div *ngIf="searchVisible" class="search-bar" fxFlex="auto" fxHide.lt-sm="true" fxLayout="row" fxLayoutGap="2%" [@fadeInOut]>
 
   <mat-form-field class="search">
-    <mat-label>Search</mat-label>
+    <mat-label>{{'labels.text.Search' | translate}}</mat-label>
     <input matInput type="text" [formControl]="query" (keydown.enter)="search()">
   </mat-form-field>
 
   <mat-form-field class="resource">
-    <mat-label>Resource</mat-label>
+    <mat-label>{{'labels.text.Resource' | translate}}</mat-label>
     <mat-select [formControl]="resource">
       <mat-option *ngFor="let option of resourceOptions" [value]="option.value">
-        {{ option.name }}
+        {{'labels.text.' + option.name | translate }}
       </mat-option>
     </mat-select>
   </mat-form-field>
@@ -18,6 +18,6 @@
 
 <div class="search-icon">
   <button mat-icon-button (click)="toggleSearchVisibility()" fxHide.lt-sm="true">
-    <fa-icon icon="search" size="lg" matTooltip="Search"></fa-icon>
+    <fa-icon icon="search" size="lg" matTooltip="{{'labels.text.Search' | translate}}"></fa-icon>
   </button>
 </div>

src/app/shared/shared.module.ts

@@ -55,7 +55,7 @@ import { StepperButtonsComponent } from './steppers/stepper-buttons/stepper-butt
     IconsModule,
     MaterialModule,
     ReactiveFormsModule,
-    TranslateModule.forRoot(),
+    TranslateModule,
     PipesModule,
     DirectivesModule,
     NgxMatDatetimePickerModule,

src/app/shares/shares-account-actions/redeem-shares/redeem-shares.component.html

@@ -27,12 +27,10 @@
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{ 'labels.inputs.Today's Price' | translate }}</mat-label>
+            <mat-label>{{"labels.inputs.Today's Price" | translate}}</mat-label>
             <input matInput required formControlName="unitPrice">
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">

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

@@ -2,9 +2,6 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
-/** Translation Imports */
-import { extract } from '../core/i18n/i18n.service';
-
 /** Custom Components */
 import { SharesAccountViewComponent } from './shares-account-view/shares-account-view.component';
 import { TransactionsTabComponent } from './shares-account-view/transactions-tab/transactions-tab.component';
@@ -24,11 +21,11 @@ import { SharesAccountAndTemplateResolver } from './common-resolvers/share-accou
 const routes: Routes = [
   {
     path: '',
-    data: { title: extract('Shares'), breadcrumb: 'Shares', routeParamBreadcrumb: false },
+    data: { title: 'Shares', breadcrumb: 'Shares', routeParamBreadcrumb: false },
     children: [
       {
         path: 'create',
-        data: { title: extract('Create Shares Account'), breadcrumb: 'Create Shares Account' },
+        data: { title: 'Create Shares Account', breadcrumb: 'Create Shares Account' },
         component: CreateSharesAccountComponent,
         resolve: {
           sharesAccountTemplate: SharesAccountTemplateResolver
@@ -36,7 +33,7 @@ const routes: Routes = [
       },
       {
         path: ':shareAccountId',
-        data: { title: extract('Shares Account View'), routeParamBreadcrumb: 'shareAccountId' },
+        data: { title: 'Shares Account View', routeParamBreadcrumb: 'shareAccountId' },
         children: [
           {
             path: '',
@@ -48,23 +45,23 @@ const routes: Routes = [
               {
                 path: 'transactions',
                 component: TransactionsTabComponent,
-                data: { title: extract('Shares Account Transactions'), breadcrumb: 'Transactions', routeParamBreadcrumb: false }
+                data: { title: 'Shares Account Transactions', breadcrumb: 'Transactions', routeParamBreadcrumb: false }
               },
               {
                 path: 'charges',
                 component: ChargesTabComponent,
-                data: { title: extract('Shares Account Charges'), breadcrumb: 'Charges', routeParamBreadcrumb: false }
+                data: { title: 'Shares Account Charges', breadcrumb: 'Charges', routeParamBreadcrumb: false }
               },
               {
                 path: 'dividends',
                 component: DividendsTabComponent,
-                data: { title: extract('Shares Account Dividends'), breadcrumb: 'Dividends', routeParamBreadcrumb: false }
+                data: { title: 'Shares Account Dividends', breadcrumb: 'Dividends', routeParamBreadcrumb: false }
               }
             ]
           },
           {
             path: 'edit',
-            data: { title: extract('Edit Shares Account'), breadcrumb: 'Edit', routeParamBreadcrumb: false },
+            data: { title: 'Edit Shares Account', breadcrumb: 'Edit', routeParamBreadcrumb: false },
             component: EditSharesAccountComponent,
             resolve: {
               sharesAccountAndTemplate: SharesAccountAndTemplateResolver
@@ -72,7 +69,7 @@ const routes: Routes = [
           },
           {
             path: 'actions/:name',
-            data: { title: extract('Shares Account Actions'), breadcrumb: 'Actions', routeParamBreadcrumb: 'name' },
+            data: { title: 'Shares Account Actions', breadcrumb: 'Actions', routeParamBreadcrumb: 'name' },
             component: SharesAccountActionsComponent,
             resolve: {
               shareAccountActionData: ShareAccountActionsResolver

src/app/system/account-number-preferences/account-number-preferences.component.html

@@ -1,7 +1,7 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
   <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'ADD_PREFERENCES'">
     <fa-icon icon="plus" class="m-r-10"></fa-icon>
-    Create Preference
+    {{'labels.buttons.Create Preference' | translate}}
   </button>
 </div>
 
@@ -19,7 +19,7 @@
     <table mat-table [dataSource]="dataSource" matSort>
 
       <ng-container matColumnDef="accountType">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Account Number Preferences </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Account Number Preferences' | translate}} </th>
         <td mat-cell *matCellDef="let accountNumberPreference"> {{ accountNumberPreference.accountType.value }} </td>
       </ng-container>
 

src/app/system/account-number-preferences/create-account-number-preference/create-account-number-preference.component.html

@@ -9,19 +9,19 @@
         <div fxLayout="column">
 
           <mat-form-field>
-            <mat-label>Account Type</mat-label>
+            <mat-label>{{'labels.inputs.Account Type' | translate}}</mat-label>
             <mat-select required formControlName="accountType">
               <mat-option *ngFor="let accountType of accountNumberPreferencesTemplateData.accountTypeOptions" [value]="accountType.id">
                 {{ accountType.value }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="accountNumberPreferenceForm.controls.accountType.hasError('required')">
-              Account Type is <strong>required</strong>
+              {{'labels.inputs.Account Type' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Prefix Field</mat-label>
+            <mat-label>{{'labels.inputs.Prefix Field' | translate}}</mat-label>
             <mat-select formControlName="prefixType">
               <mat-option *ngFor="let prefixType of prefixTypeData" [value]="prefixType.id">
                 {{ prefixType.value }}
@@ -34,8 +34,8 @@
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!accountNumberPreferenceForm.valid" *mifosxHasPermission="'CREATE_ACCOUNTNUMBERFORMAT'">Submit</button>
+        <button mat-raised-button color="primary" [disabled]="!accountNumberPreferenceForm.valid" *mifosxHasPermission="'CREATE_ACCOUNTNUMBERFORMAT'">{{'labels.buttons.Submit' | translate}}</button>
       </mat-card-actions>
 
     </form>

src/app/system/account-number-preferences/edit-account-number-preference/edit-account-number-preference.component.html

@@ -9,19 +9,19 @@
         <div fxLayout="column">
 
           <mat-form-field>
-            <mat-label>Account Type</mat-label>
+            <mat-label>{{'labels.inputs.Account Type' | translate}}</mat-label>
             <mat-select required formControlName="accountType">
               <mat-option *ngFor="let accountType of accountNumberPreferencesTemplateData.accountTypeOptions" [value]="accountType.id">
                 {{ accountType.value }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="accountNumberPreferenceForm.controls.accountType.hasError('required')">
-              Account Type is <strong>required</strong>
+              {{'labels.inputs.Account Type' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Prefix Field</mat-label>
+            <mat-label>{{'labels.inputs.Prefix Field' | translate}}</mat-label>
             <mat-select formControlName="prefixType">
               <mat-option *ngFor="let prefixType of prefixTypeData" [value]="prefixType.id">
                 {{ prefixType.value }}
@@ -34,9 +34,9 @@
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate}}</button>
         <button mat-raised-button color="primary"
-          [disabled]="!accountNumberPreferenceForm.valid || accountNumberPreferenceForm.pristine" *mifosxHasPermission="'UPDATE_ACCOUNTNUMBERFORMAT'">Submit</button>
+          [disabled]="!accountNumberPreferenceForm.valid || accountNumberPreferenceForm.pristine" *mifosxHasPermission="'UPDATE_ACCOUNTNUMBERFORMAT'">{{'labels.buttons.Submit' | translate}}</button>
       </mat-card-actions>
 
     </form>

src/app/system/account-number-preferences/view-account-number-preference/view-account-number-preference.component.html

@@ -2,12 +2,12 @@
 
   <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_ACCOUNTNUMBERFORMAT'">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    Edit
+    {{'labels.buttons.Edit' | translate}}
   </button>
 
   <button mat-raised-button color="warn" (click)="delete()" *mifosxHasPermission="'DELETE_ACCOUNTNUMBERFORMAT'">
     <fa-icon icon="trash" class="m-r-10"></fa-icon>
-    Delete
+    {{'labels.buttons.Delete' | translate}}
   </button>
 
 </div>
@@ -21,7 +21,7 @@
       <div fxLayout="row wrap" class="content">
 
         <div fxFlex="50%" class="mat-body-strong">
-          Account Type
+          {{'labels.inputs.Account Type' | translate}}
         </div>
 
         <div fxFlex="50%">
@@ -29,7 +29,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong" *ngIf="accountNumberPreferenceData.prefixType">
-          Prefix Type
+          {{'labels.inputs.Prefix Type' | translate}}
         </div>
 
         <div fxFlex="50%" *ngIf="accountNumberPreferenceData.prefixType">

src/app/system/audit-trails/audit-trails.component.html

@@ -1,19 +1,19 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
   <button mat-raised-button color="primary" (click)="downloadCSV()">
     <fa-icon icon="file" class="m-r-10"></fa-icon>
-    Download CSV
+    {{'labels.buttons.Download CSV' | translate}}
   </button>
 </div>
 
 <div class="container" fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
   <mat-form-field fxFlex="48%">
-    <mat-label>Resource ID</mat-label>
+    <mat-label>{{'labels.inputs.Resource ID' | translate}}</mat-label>
     <input matInput [formControl]="resourceId">
   </mat-form-field>
 
   <mat-form-field fxFlex="48%">
-    <mat-label>Status</mat-label>
+    <mat-label>{{'labels.inputs.Status' | translate}}</mat-label>
     <mat-select [formControl]="processingResult" (selectionChange)="applyFilter($event.value, 'processingResult')">
       <mat-option *ngFor="let processingResult of auditTrailSearchTemplateData.processingResults" [value]="processingResult.id">
         {{ processingResult.processingResult }}
@@ -22,41 +22,41 @@
   </mat-form-field>
 
   <mat-form-field fxFlex="48%">
-    <mat-label>User</mat-label>
+    <mat-label>{{'labels.inputs.User' | translate}}</mat-label>
     <input matInput [formControl]="user" [matAutocomplete]="userNameAutocomplete">
   </mat-form-field>
 
   <mat-form-field fxFlex="48%">
-    <mat-label>Action</mat-label>
+    <mat-label>{{'labels.inputs.Action' | translate}}</mat-label>
     <input matInput [formControl]="actionName" [matAutocomplete]="actionNameAutocomplete">
   </mat-form-field>
 
   <mat-form-field fxFlex="48%">
-    <mat-label>Entity</mat-label>
+    <mat-label>{{'labels.inputs.Entity' | translate}}</mat-label>
     <input matInput [formControl]="entityName" [matAutocomplete]="entityNameAutocomplete">
   </mat-form-field>
 
   <mat-form-field fxFlex="48%">
-    <mat-label>Checker</mat-label>
+    <mat-label>{{'labels.inputs.Checker' | translate}}</mat-label>
     <input matInput [formControl]="checker" [matAutocomplete]="checkerAutocomplete">
   </mat-form-field>
 
   <mat-form-field fxFlex="48%" (click)="fromDatePicker.open()">
-    <mat-label>Maker From Date</mat-label>
+    <mat-label>{{'labels.inputs.Maker From Date' | translate}}</mat-label>
     <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="fromDatePicker" [formControl]="fromDate">
     <mat-datepicker-toggle matSuffix [for]="fromDatePicker"></mat-datepicker-toggle>
     <mat-datepicker #fromDatePicker></mat-datepicker>
   </mat-form-field>
 
   <mat-form-field fxFlex="48%" (click)="toDatePicker.open()">
-    <mat-label>Maker To Date</mat-label>
+    <mat-label>{{'labels.inputs.Maker To Date' | translate}}</mat-label>
     <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="toDatePicker" [formControl]="toDate">
     <mat-datepicker-toggle matSuffix [for]="toDatePicker"></mat-datepicker-toggle>
     <mat-datepicker #toDatePicker></mat-datepicker>
   </mat-form-field>
 
   <mat-form-field fxFlex="48%" (click)="checkedFromDatePicker.open()">
-    <mat-label>Checker From Date</mat-label>
+    <mat-label>{{'labels.inputs.Checker From Date' | translate}}</mat-label>
     <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="checkedFromDatePicker"
       [formControl]="checkedFromDate">
     <mat-datepicker-toggle matSuffix [for]="checkedFromDatePicker"></mat-datepicker-toggle>
@@ -64,7 +64,7 @@
   </mat-form-field>
 
   <mat-form-field fxFlex="48%" (click)="checkedToDatePicker.open()">
-    <mat-label>Checked To Date</mat-label>
+    <mat-label>{{'labels.inputs.Checked To Date' | translate}}</mat-label>
     <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="checkedToDatePicker" [formControl]="checkedToDate">
     <mat-datepicker-toggle matSuffix [for]="checkedToDatePicker"></mat-datepicker-toggle>
     <mat-datepicker #checkedToDatePicker></mat-datepicker>
@@ -102,52 +102,52 @@
   <table mat-table [dataSource]="dataSource" matSort>
 
     <ng-container matColumnDef="id">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Trail ID </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Trail ID' | translate}} </th>
       <td mat-cell *matCellDef="let auditTrail"> {{ auditTrail.id }} </td>
     </ng-container>
 
     <ng-container matColumnDef="resourceId">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Resource ID </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Resource ID' | translate}} </th>
       <td mat-cell *matCellDef="let auditTrail"> {{ auditTrail.resourceId }} </td>
     </ng-container>
 
     <ng-container matColumnDef="processingResult">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Status </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Status' | translate}} </th>
       <td mat-cell *matCellDef="let auditTrail"> {{ auditTrail.processingResult }} </td>
     </ng-container>
 
     <ng-container matColumnDef="maker">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header > Made By </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header > {{'labels.inputs.Made By' | translate}} </th>
       <td mat-cell *matCellDef="let auditTrail"> {{ auditTrail.maker }} </td>
     </ng-container>
 
     <ng-container matColumnDef="actionName">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Action </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Action' | translate}} </th>
       <td mat-cell *matCellDef="let auditTrail"> {{ auditTrail.actionName }} </td>
     </ng-container>
 
     <ng-container matColumnDef="entityName">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Entity </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Entity' | translate}} </th>
       <td mat-cell *matCellDef="let auditTrail"> {{ auditTrail.entityName }} </td>
     </ng-container>
 
     <ng-container matColumnDef="officeName">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Office </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Office' | translate}} </th>
       <td mat-cell *matCellDef="let auditTrail"> {{ auditTrail.officeName }} </td>
     </ng-container>
 
     <ng-container matColumnDef="madeOnDate">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Made Date </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Made Date' | translate}} </th>
       <td mat-cell *matCellDef="let auditTrail"> {{ auditTrail.madeOnDate  | dateFormat  }} </td>
     </ng-container>
 
     <ng-container matColumnDef="checker">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header > Checker </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header > {{'labels.inputs.Checker' | translate}} </th>
       <td mat-cell *matCellDef="let auditTrail"> {{ auditTrail.checker  }} </td>
     </ng-container>
 
     <ng-container matColumnDef="checkedOnDate">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Checked Date </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Checked Date' | translate}} </th>
       <td mat-cell *matCellDef="let auditTrail"> {{ auditTrail.checkedOnDate  | dateFormat  }} </td>
     </ng-container>
 

src/app/system/audit-trails/view-audit/view-audit.component.html

@@ -9,7 +9,7 @@
         <div fxLayout="row wrap" class="content">
 
           <div fxFlex="50%" class="mat-body-strong">
-            ID
+            {{'labels.inputs.ID' | translate}}
           </div>
 
           <div fxFlex="50%">
@@ -17,7 +17,7 @@
           </div>
 
           <div fxFlex="50%" class="mat-body-strong">
-            Status
+            {{'labels.inputs.Status' | translate}}
           </div>
 
           <div fxFlex="50%">
@@ -25,7 +25,7 @@
           </div>
 
           <div fxFlex="50%" class="mat-body-strong">
-            User
+            {{'labels.inputs.User' | translate}}
           </div>
 
           <div fxFlex="50%">
@@ -33,7 +33,7 @@
           </div>
 
           <div fxFlex="50%" class="mat-body-strong">
-            Action
+            {{'labels.inputs.Action' | translate}}
           </div>
 
           <div fxFlex="50%">
@@ -41,7 +41,7 @@
           </div>
 
           <div fxFlex="50%" class="mat-body-strong">
-            Entity
+            {{'labels.inputs.Entity' | translate}}
           </div>
 
           <div fxFlex="50%">
@@ -49,7 +49,7 @@
           </div>
 
           <div fxFlex="50%" class="mat-body-strong">
-            Resource ID
+            {{'labels.inputs.Resource ID' | translate}}
           </div>
 
           <div fxFlex="50%">
@@ -57,7 +57,7 @@
           </div>
 
           <div fxFlex="50%" class="mat-body-strong">
-            Date
+            {{'labels.inputs.Date' | translate}}
           </div>
 
           <div fxFlex="50%">
@@ -65,7 +65,7 @@
           </div>
 
           <div fxFlex="50%" class="mat-body-strong" *ngIf="auditTrailData.officeName">
-            Office
+            {{'labels.inputs.Office' | translate}}
           </div>
 
           <div fxFlex="50%" *ngIf="auditTrailData.officeName">
@@ -73,7 +73,7 @@
           </div>
 
           <div fxFlex="50%" class="mat-body-strong" *ngIf="auditTrailData.savingsAccountNo">
-            Savings Account No
+            {{'labels.inputs.Savings Account No' | translate}}
           </div>
 
           <div fxFlex="50%" *ngIf="auditTrailData.savingsAccountNo">
@@ -81,7 +81,7 @@
           </div>
 
           <div fxFlex="50%" class="mat-body-strong" *ngIf="auditTrailData.groupLevelName">
-            Group Level
+            {{'labels.inputs.Group Level' | translate}}
           </div>
 
           <div fxFlex="50%" *ngIf="auditTrailData.groupLevelName">
@@ -101,12 +101,12 @@
     <table mat-table [dataSource]="dataSource" matSort>
 
       <ng-container matColumnDef="command">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Command </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Command' | translate}} </th>
         <td mat-cell *matCellDef="let auditTrailCommand"> {{ auditTrailCommand.command }} </td>
       </ng-container>
 
       <ng-container matColumnDef="commandValue">
-        <th mat-header-cell *matHeaderCellDef> Command Value </th>
+        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Command Value' | translate}} </th>
         <td mat-cell *matCellDef="let auditTrailCommand" class="column-value-wrapper"> {{ auditTrailCommand.commandValue }} </td>
       </ng-container>
 

src/app/system/codes/codes.component.html

@@ -2,7 +2,7 @@
   <div #buttonCreateCode>
     <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_CODE'">
       <fa-icon icon="plus" class="m-r-10"></fa-icon>
-      Create Code
+      {{'labels.buttons.Create Code' | translate}}
     </button>
   </div>
 </div>
@@ -19,15 +19,15 @@
   <div #tableCodes class="mat-elevation-z8">
     <table mat-table [dataSource]="dataSource" matSort>
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Code Name </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Code Name' | translate}} </th>
         <td mat-cell *matCellDef="let code"> {{ code.name }} </td>
       </ng-container>
 
       <ng-container matColumnDef="systemDefined">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> System Defined </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.System Defined' | translate}} </th>
         <td mat-cell *matCellDef="let code">
-          <fa-icon *ngIf="code.systemDefined" icon="check-circle" size="lg" class="system-defined" matTooltip="Yes" matTooltipPosition="right"></fa-icon>
+          <fa-icon *ngIf="code.systemDefined" icon="check-circle" size="lg" class="system-defined" matTooltip="{{ 'tooltips.Yes' | translate}}" matTooltipPosition="right"></fa-icon>
-          <fa-icon *ngIf="!code.systemDefined" icon="times-circle" size="lg" class="not-system-defined" matTooltip="No" matTooltipPosition="right"></fa-icon>
+          <fa-icon *ngIf="!code.systemDefined" icon="times-circle" size="lg" class="not-system-defined" matTooltip="{{ 'tooltips.No' | translate}}" matTooltipPosition="right"></fa-icon>
         </td>
       </ng-container>
 
@@ -41,29 +41,29 @@
 </div>
 
 <ng-template #templateButtonCreateCode let-popover="popover">
-  <h2>Manage Codes</h2>
+  <h2>{{'labels.heading.Manage Codes' | translate}}</h2>
-  <p class="mw300">To create additional codes.</p>
+  <p class="mw300">{{'labels.text.To create additional codes.' | translate}}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStep();">Back</button>
+    <button mat-raised-button color="primary" (click)="popover.close();previousStep();">{{'labels.buttons.Back' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter, filter, 'bottom', true);">Next</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter, filter, 'bottom', true);">{{'labels.buttons.Next' | translate}}</button>
   </div>
 </ng-template>
 
 <ng-template #templateFilter let-popover="popover">
-  <h4>Search bar to filter codes.</h4>
+  <h4>{{'labels.heading.Search bar to filter codes' | translate}}</h4>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonCreateCode, buttonCreateCode, 'bottom', true);">Back</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonCreateCode, buttonCreateCode, 'bottom', true);">{{'labels.buttons.Back' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateTableCodes, tableCodes, 'top', true);">Next</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateTableCodes, tableCodes, 'top', true);">{{'labels.buttons.Next' | translate}}</button>
   </div>
 </ng-template>
 
 <ng-template #templateTableCodes let-popover="popover">
-  <h4>List of all codes in the Mifos system for your organization.</h4>
+  <h4>{{'labels.heading.List of all codes in the Mifos system' | translate}}</h4>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter, filter, 'bottom', true);">Back</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter, filter, 'bottom', true);">{{'labels.buttons.Back' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">Next</button>
+    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">{{'labels.buttons.Next' | translate}}</button>
   </div>
 </ng-template>

src/app/system/codes/create-code/create-code.component.html

@@ -9,10 +9,10 @@
           <div #codeFormRef fxLayout="column">
 
             <mat-form-field>
-              <mat-label>Code Name</mat-label>
+              <mat-label>{{'labels.inputs.Code Name' | translate}}</mat-label>
               <input matInput required formControlName="name">
               <mat-error *ngIf="codeForm.controls.name.hasError('required')">
-                Code Name is <strong>required</strong>
+                {{'labels.inputs.Code Name' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
               </mat-error>
             </mat-form-field>
 
@@ -21,8 +21,8 @@
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!codeForm.valid" *mifosxHasPermission="'CREATE_CODE'">Submit</button>
+        <button mat-raised-button color="primary" [disabled]="!codeForm.valid" *mifosxHasPermission="'CREATE_CODE'">{{'labels.buttons.Submit' | translate}}</button>
       </mat-card-actions>
 
     </form>
@@ -32,12 +32,12 @@
 </div>
 
 <ng-template #templateCodeFormRef let-data let-popover="popover">
-  <h2>Create Code</h2>
+  <h2>{{'labels.heading.Create Code' | translate}}</h2>
-  <p class="mw400">To create code, click on create code and enter the code name.<br> For more details click: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67895350/Manage+Codes" target="_blank">Manage Codes</a></p>
+  <p class="mw400">{{'labels.text.To create code,create' | translate}}<br> {{'labels.text.For more details click' | translate}}: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67895350/Manage+Codes" target="_blank">{{'labels.inputs.Manage Codes' | translate}}</a></p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close()">Create Code</button>
+    <button mat-raised-button color="primary" (click)="popover.close()">{{'labels.buttons.Create Code' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">Back</button>
+    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">{{'labels.buttons.Back' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">Next</button>
+    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">{{'labels.buttons.Next' | translate}}</button>
   </div>
 </ng-template>

src/app/system/codes/edit-code/edit-code.component.html

@@ -9,10 +9,10 @@
           <div fxLayout="column">
 
             <mat-form-field>
-              <mat-label>Code Name</mat-label>
+              <mat-label>{{'labels.inputs.Code Name' | translate}}</mat-label>
               <input matInput required formControlName="name">
               <mat-error *ngIf="codeForm.controls.name.hasError('required')">
-                Code Name is <strong>required</strong>
+                {{'labels.inputs.Code Name' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
               </mat-error>
             </mat-form-field>
 
@@ -21,8 +21,8 @@
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!codeForm.valid || codeForm.pristine" *mifosxHasPermission="'UPDATE_CODE'">Submit</button>
+        <button mat-raised-button color="primary" [disabled]="!codeForm.valid || codeForm.pristine" *mifosxHasPermission="'UPDATE_CODE'">{{'labels.buttons.Submit' | translate}}</button>
       </mat-card-actions>
 
     </form>

src/app/system/codes/view-code/view-code.component.html

@@ -2,20 +2,20 @@
 
   <button mat-raised-button color="primary" (click)="addCodeValueRow()" *mifosxHasPermission="'CREATE_CODEVALUE'">
     <fa-icon icon="plus" class="m-r-10"></fa-icon>
-    Add Code Value
+    {{'labels.buttons.Add Code Value' | translate}}
   </button>
 
   <span *ngIf="!codeData.systemDefined">
   <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_CODE'">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    Edit Code
+    {{'labels.buttons.Edit Code' | translate}}
   </button>
   </span>
 
   <span *ngIf="!codeData.systemDefined">
     <button mat-raised-button color="warn" (click)="delete()" *mifosxHasPermission="'DELETE_CODEVALUE'">
       <fa-icon icon="trash" class="m-r-10"></fa-icon>
-      Delete Code
+      {{'labels.buttons.Delete Code' | translate}}
     </button>
   </span>
 
@@ -36,47 +36,47 @@
           <div fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" [formGroupName]="i">
 
             <mat-form-field fxFlex="20%">
-              <mat-label>Name</mat-label>
+              <mat-label>{{'labels.inputs.name' | translate}}</mat-label>
               <input required matInput formControlName="name">
               <mat-error *ngIf="codeValues.at(i).controls.name.hasError('required')">
-                Name is <strong>required</strong>
+                {{'labels.inputs.name' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
               </mat-error>
             </mat-form-field>
 
             <mat-form-field fxFlex="22%">
-              <mat-label>Description</mat-label>
+              <mat-label>{{'labels.inputs.Description' | translate}}</mat-label>
               <input matInput formControlName="description">
             </mat-form-field>
 
             <mat-form-field fxFlex="18%">
-              <mat-label>Position</mat-label>
+              <mat-label>{{'labels.inputs.Position' | translate}}</mat-label>
               <input required matInput formControlName="position" type="number">
               <mat-error *ngIf="codeValues.at(i).controls.position.hasError('required')">
-                Name is <strong>required</strong>
+                {{'labels.inputs.name' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
               </mat-error>
             </mat-form-field>
 
             <div class="active-wrapper" fxFlex="8%">
-              <mat-checkbox formControlName="isActive" class="active">Active</mat-checkbox>
+              <mat-checkbox formControlName="isActive" class="active">{{'labels.inputs.Active' | translate}}</mat-checkbox>
             </div>
 
             <div fxLayoutGap="2%" fxFlex="22%" class="options-wrapper">
               <span *ngIf="codeValueRowStatus[i] === 'edit'">
                 <button mat-stroked-button color="primary" [disabled]="codeValues.at(i).pristine" (click)="updateCodeValue(i)"
                   *mifosxHasPermission="'UPDATE_CODEVALUE'">
-                  Submit
+                  {{'labels.buttons.Submit' | translate}}
                 </button>
               </span>
               <button mat-button *ngIf="codeValueRowStatus[i] === 'edit'" (click)="disableRow(i)">
-                Cancel
+                {{'labels.buttons.Cancel' | translate}}
               </button>
-              <button mat-icon-button color="primary" [disabled]="!codeValuesForm.get('codeValues').at(i).valid" *ngIf="codeValueRowStatus[i] === 'new'" matTooltip="Add" matTooltipPosition="above" (click)="addCodeValue(i)">
+              <button mat-icon-button color="primary" [disabled]="!codeValuesForm.get('codeValues').at(i).valid" *ngIf="codeValueRowStatus[i] === 'new'" matTooltip="{{ 'tooltips.Add' | translate}}" matTooltipPosition="above" (click)="addCodeValue(i)">
                 <fa-icon icon="plus" size="lg"></fa-icon>
               </button>
-              <button type="button" color="primary" *ngIf="codeValueRowStatus[i] === 'disabled'" mat-icon-button matTooltip="Edit" matTooltipPosition="above" (click)="enableRow(i)">
+              <button type="button" color="primary" *ngIf="codeValueRowStatus[i] === 'disabled'" mat-icon-button matTooltip="{{ 'tooltips.Edit' | translate}}" matTooltipPosition="above" (click)="enableRow(i)">
                 <fa-icon icon="edit" size="lg"></fa-icon>
               </button>
-              <button type="button" color="warn" mat-icon-button matTooltip="Delete" *mifosxHasPermission="'DELETE_CODEVALUE'" matTooltipPosition="above" (click)="codeValueRowStatus[i] === 'new' ? removeNewCodeValue(i) : deleteCodeValue(i)">
+              <button type="button" color="warn" mat-icon-button matTooltip="{{ 'tooltips.Delete' | translate}}" *mifosxHasPermission="'DELETE_CODEVALUE'" matTooltipPosition="above" (click)="codeValueRowStatus[i] === 'new' ? removeNewCodeValue(i) : deleteCodeValue(i)">
                 <fa-icon icon="trash" size="lg"></fa-icon>
               </button>
             </div>

src/app/system/configurations/business-date-tab/business-date-tab.component.html

@@ -2,8 +2,7 @@
 
   <div class="mat-elevation-z8">
     <div *ngIf="!isBusinessDateEnabled">
-      <p>The Business Date functionality is not enabled. If you need that, Go to Global Configurations and enable the
+      <p>{{'labels.text.Business Date functionality is not enabled' | translate}}: <code>{{configurationName}}</code></p>
-        configuration: <code>{{configurationName}}</code></p>
     </div>
 
     <div *ngIf="isBusinessDateEnabled">
@@ -13,7 +12,7 @@
           <mat-card-content>
             <div fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" class="space">
               <div fxFlex="50%">
-                <span fxFlex="40%" class="date-type">User date format: </span>
+                <span fxFlex="40%" class="date-type">{{'labels.inputs.User date format' | translate}}: </span>
                 <span fxFlex="60%" class="date-value">{{userDateFormat}}</span>
               </div>
             </div>
@@ -21,19 +20,19 @@
             <!-- Business Date -->
             <div fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
               <div fxFlex="50%" *ngIf="!isEditInProgress">
-                <span fxFlex="40%" class="date-type">Business Date: </span>
+                <span fxFlex="40%" class="date-type">{{'labels.inputs.Business Date' | translate}}: </span>
                 <span fxFlex="60%" class="date-value">{{businessDate | dateFormat}}</span>
               </div>
 
               <mat-form-field (click)="businessDatePicker.open()" *ngIf="isEditInProgress && (dateIndex == 0)">
-                <mat-label>Business Date</mat-label>
+                <mat-label>{{'labels.inputs.Business Date' | translate}}</mat-label>
                 <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="businessDatePicker"
                   formControlName="businessDate">
                 <mat-datepicker-toggle matSuffix [for]="businessDatePicker">
                 </mat-datepicker-toggle>
                 <mat-datepicker #businessDatePicker></mat-datepicker>
                 <mat-error *ngIf="businessDateForm.controls.businessDate.hasError('required')">
-                  Business Date is <strong>required</strong>
+                  {{'labels.inputs.Business Date' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
                 </mat-error>
               </mat-form-field>
 
@@ -41,13 +40,13 @@
                 <span *ngIf="isEditInProgress && (dateIndex == 0)">
                   <button mat-raised-button color="primary" [disabled]="businessDateForm.pristine" (click)="submit()"
                     *mifosxHasPermission="'UPDATE_BUSINESSDATE'">
-                    Submit
+                    {{'labels.buttons.Submit' | translate}}
                   </button>
                   <button mat-raised-button (click)="editInProgressToggle(0)">
-                    Cancel
+                    {{'labels.buttons.Cancel' | translate}}
                   </button>
                 </span>
-                <button type="button" color="primary" *ngIf="!isEditInProgress" mat-icon-button matTooltip="Edit the Business Date"
+                <button type="button" color="primary" *ngIf="!isEditInProgress" mat-icon-button matTooltip="{{ 'tooltips.Edit the Business Date' | translate}}"
                   matTooltipPosition="above" (click)="editInProgressToggle(0)">
                   <fa-icon icon="edit" size="lg"></fa-icon>
                 </button>
@@ -57,19 +56,19 @@
             <!-- COB Date -->
             <div fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
               <div fxFlex="50%" *ngIf="!isEditInProgress">
-                <span fxFlex="40%" class="date-type">COB Date: </span>
+                <span fxFlex="40%" class="date-type">{{'labels.inputs.COB Date' | translate}}: </span>
                 <span fxFlex="60%" class="date-value">{{cobDate | dateFormat}}</span>
               </div>
 
               <mat-form-field (click)="cobDatePicker.open()" *ngIf="isEditInProgress && (dateIndex == 1)">
-                <mat-label>COB Date</mat-label>
+                <mat-label>{{'labels.inputs.COB Date' | translate}}</mat-label>
                 <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="cobDatePicker"
                   formControlName="businessDate">
                 <mat-datepicker-toggle matSuffix [for]="cobDatePicker">
                 </mat-datepicker-toggle>
                 <mat-datepicker #cobDatePicker></mat-datepicker>
                 <mat-error *ngIf="businessDateForm.controls.cobDate.hasError('required')">
-                  COB Date is <strong>required</strong>
+                  {{'labels.inputs.COB Date' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
                 </mat-error>
               </mat-form-field>
 
@@ -77,13 +76,13 @@
                 <span *ngIf="isEditInProgress && (dateIndex == 1)">
                   <button mat-stroked-button color="primary" [disabled]="businessDateForm.pristine" (click)="submit()"
                     *mifosxHasPermission="'UPDATE_BUSINESSDATE'">
-                    Submit
+                    {{'labels.buttons.Submit' | translate}}
                   </button>
                 </span>
                 <button mat-button *ngIf="isEditInProgress && (dateIndex == 1)" (click)="editInProgressToggle(1)">
-                  Cancel
+                  {{'labels.buttons.Cancel' | translate}}
                 </button>
-                <button type="button" color="primary" *ngIf="!isEditInProgress" mat-icon-button matTooltip="Edit the COB Date"
+                <button type="button" color="primary" *ngIf="!isEditInProgress" mat-icon-button matTooltip="{{ 'tooltips.Edit the COB Date' | translate}}"
                   matTooltipPosition="above" (click)="editInProgressToggle(1)">
                   <fa-icon icon="edit" size="lg"></fa-icon>
                 </button>

src/app/system/configurations/business-date-tab/business-date-tab.component.ts

@@ -2,7 +2,6 @@
 import { Component, OnInit } from '@angular/core';
 import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 
-import { ActivatedRoute } from '@angular/router';
 import { Alert } from 'app/core/alert/alert.model';
 import { AlertService } from 'app/core/alert/alert.service';
 import { Dates } from 'app/core/utils/dates';

src/app/system/configurations/configurations.component.html

@@ -1,10 +1,10 @@
 <mat-card class="configurations-card">
   <mat-card-content>
     <mat-tab-group #tabGroup mat-align-tabs="center">
-      <mat-tab label="Global Configurations">
+      <mat-tab label="{{'labels.inputs.Global Configurations' | translate}}">
         <mifosx-global-configurations-tab></mifosx-global-configurations-tab>
       </mat-tab>
-      <mat-tab label="Business Date" *ngIf="isBusinessDateEnabled">
+      <mat-tab label="{{'labels.inputs.Business Date' | translate}}" *ngIf="isBusinessDateEnabled">
         <mifosx-business-date-tab></mifosx-business-date-tab>
       </mat-tab>
     </mat-tab-group>

src/app/system/configurations/global-configurations-tab/edit-configuration/edit-configuration.component.html

@@ -9,27 +9,27 @@
         <div fxLayout="column">
 
           <mat-form-field>
-            <mat-label>Configuration Name</mat-label>
+            <mat-label>{{'labels.inputs.Configuration Name' | translate}}</mat-label>
             <input matInput required formControlName="name">
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Description</mat-label>
+            <mat-label>{{'labels.inputs.Description' | translate}}</mat-label>
             <textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Number Value</mat-label>
+            <mat-label>{{'labels.inputs.Number Value' | translate}}</mat-label>
             <input matInput type="number" formControlName="value">
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>String Value</mat-label>
+            <mat-label>{{'labels.inputs.String Value' | translate}}</mat-label>
             <input matInput formControlName="stringValue">
           </mat-form-field>
 
           <mat-form-field fxFlex="48%" (click)="configurationDatePicker.open()">
-            <mat-label>Date Value</mat-label>
+            <mat-label>{{'labels.inputs.Date Value' | translate}}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="configurationDatePicker" formControlName="dateValue">
             <mat-datepicker-toggle matSuffix [for]="configurationDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #configurationDatePicker></mat-datepicker>
@@ -40,9 +40,9 @@
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../..']"> Cancel </button>
+        <button type="button" mat-raised-button [routerLink]="['../..']"> {{'labels.buttons.Cancel' | translate}} </button>
         <button mat-raised-button color="primary" [disabled]="configurationForm.pristine || !configurationForm.valid">
-          Submit </button>
+          {{'labels.buttons.Submit' | translate}} </button>
       </mat-card-actions>
 
     </form>

src/app/system/configurations/global-configurations-tab/global-configurations-tab.component.html

@@ -12,41 +12,41 @@
     <table mat-table [dataSource]="dataSource" matSort>
 
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.name' | translate}} </th>
         <td mat-cell *matCellDef="let configuration"> {{ configuration.name }}&nbsp;&nbsp;
-        <fa-icon icon="question-circle" matTooltip="{{ configuration.description === undefined ? 'No Description' : configuration.description }}" matTooltipPosition="right"></fa-icon>
+        <fa-icon icon="question-circle" matTooltip="{{ getTooltip(configuration.description) | translate }}" matTooltipPosition="right"></fa-icon>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="enabled">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Status </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Status' | translate}} </th>
         <td mat-cell *matCellDef="let configuration">
           <mat-slide-toggle [(ngModel)]="configuration.enabled" name="{{configuration.name}}" (click)="toggleStatus(configuration)">
             <div [className]="configuration.enabled ? 'enabled' : 'disabled'">
-              <span *ngIf="configuration.enabled">Enabled</span>
+              <span *ngIf="configuration.enabled">{{'labels.inputs.Enabled' | translate}}</span>
-              <span *ngIf="!configuration.enabled">Disabled</span>
+              <span *ngIf="!configuration.enabled">{{'labels.inputs.Disabled' | translate}}</span>
             </div>
           </mat-slide-toggle>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="value">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Value </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Value' | translate}} </th>
         <td mat-cell *matCellDef="let configuration"> {{ configuration.value }}</td>
       </ng-container>
 
       <ng-container matColumnDef="stringValue">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> String Value </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.String Value' | translate}} </th>
         <td mat-cell *matCellDef="let configuration"> {{ configuration.stringValue }}</td>
       </ng-container>
 
       <ng-container matColumnDef="dateValue">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Date Value </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Date Value' | translate}} </th>
         <td mat-cell *matCellDef="let configuration"> {{ configuration.dateValue | dateFormat }}</td>
       </ng-container>
 
       <ng-container matColumnDef="edit">
-        <th mat-header-cell *matHeaderCellDef> Edit </th>
+        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Edit' | translate}} </th>
         <td mat-cell *matCellDef="let configuration">
           <button mat-button color="primary" [routerLink]="[configuration.id, 'edit']">
             <fa-icon icon="edit"></fa-icon>
@@ -66,19 +66,19 @@
 </div>
 
 <ng-template #templateFilter let-data let-popover="popover">
- <h4>Search bar to filter configurations.</h4>
+ <h4>{{'labels.heading.Search bar to filter configurations' | translate}}</h4>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">Back</button>
+    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">{{'labels.buttons.Back' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateConfigurationsTable, configurationsTable, 'top', true)">Next</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateConfigurationsTable, configurationsTable, 'top', true)">{{'labels.buttons.Next' | translate}}</button>
   </div>
 </ng-template>
 
 <ng-template #templateConfigurationsTable let-data let-popover="popover">
-  <h4 class="mw300">Global Configuration options and their current status. For more details click: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67895362/Global+Configuration" target="_blank">Global Configurations</a></h4>
+  <h4 class="mw300">{{'labels.heading.Global Configuration options' | translate}}: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67895362/Global+Configuration" target="_blank">{{'labels.inputs.Global Configurations' | translate}}</a></h4>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter, filter, 'bottom', true)">Back</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter, filter, 'bottom', true)">{{'labels.buttons.Back' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">Next</button>
+    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">{{'labels.buttons.Next' | translate}}</button>
   </div>
 </ng-template>

src/app/system/configurations/global-configurations-tab/global-configurations-tab.component.ts

@@ -148,4 +148,12 @@ export class GlobalConfigurationsTabComponent implements OnInit, AfterViewInit {
     this.configurationWizardService.showConfigurations = true;
     this.router.navigate(['/system']);
   }
+
+  getTooltip(description: string): string {
+    if (description === undefined) {
+      return description;
+    }
+    return 'labels.text.No Description';
+  }
+
 }

src/app/system/configure-maker-checker-tasks/configure-maker-checker-tasks.component.html

@@ -3,7 +3,7 @@
   <div #buttonEdit class="in-block">
     <button mat-raised-button color="primary" (click)="editTask(); backupCheckValues();" *mifosxHasPermission="'UPDATE_PERMISSION'">
       <fa-icon icon="edit" class="m-r-10"></fa-icon>
-      Edit
+      {{'labels.buttons.Edit' | translate}}
     </button>
   </div>
 </div>
@@ -19,7 +19,7 @@
         <div #mcTable fxFlex="30" fxLayout="column">
           <mat-list>
             <mat-list-item [ngClass]="selectedItem == grouping ? 'active' : 'inactive'" *ngFor="let grouping of groupings" (click)="showPermissions(grouping)">
-              <span class="groupingName">
+              <span class="grouping-name">
                 {{ formatName(grouping) }}
               </span>
             </mat-list-item>
@@ -28,10 +28,10 @@
 
         <mat-divider [vertical]="true"></mat-divider>
 
-        <div fxFlex="70" fxLayout="column" class="listPermission">
+        <div fxFlex="70" fxLayout="column" class="list-permission">
           <form [formGroup]="formGroup" (submit)="submit()">
 
-            <div *ngFor="let permission of permissions.permissions" class="displayPermissions">
+            <div *ngFor="let permission of permissions.permissions" class="display-permissions">
                 <div formArrayName="roster">
                   <div [formGroupName]="permission.id">
                     <mat-checkbox name="cp" id="{{ permission.code }}" formControlName="selected">
@@ -49,8 +49,8 @@
 
     <div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px" *ngIf="!isDisabled">
       <mat-card-actions>
-        <button type="button" mat-raised-button (click)="cancel(); restoreCheckboxes();">Cancel</button>
+        <button type="button" mat-raised-button (click)="cancel(); restoreCheckboxes();">{{'labels.buttons.Cancel' | translate}}</button>
-        <button mat-raised-button color="primary" (click)="submit()" *mifosxHasPermission="'UPDATE_PERMISSION'">Submit</button>
+        <button mat-raised-button color="primary" (click)="submit()" *mifosxHasPermission="'UPDATE_PERMISSION'">{{'labels.buttons.Submit' | translate}}</button>
       </mat-card-actions>
     </div>
 
@@ -59,20 +59,20 @@
 </div>
 
 <ng-template #templateButtonEdit let-popover="popover">
-  <h2>Edit</h2>
+  <h2>{{'labels.heading.Edit' | translate}}</h2>
-  <p class="mw300">To add or remove a task from the Maker-Checker list.</p>
+  <p class="mw300">{{'labels.text.To add or remove a task from the Maker-Checker list' | translate}}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">Back</button>
+    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">{{'labels.buttons.Back' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateMcTable,mcTable,'top', true);">Next</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateMcTable,mcTable,'top', true);">{{'labels.buttons.Next' | translate}}</button>
   </div>
 </ng-template>
 
 <ng-template #templateMcTable let-popover="popover">
-  <h4 class="mw300">List of all maker checker tasks. For more details click: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67895359/Configure+Maker-Checker+Tasks" target="_blank">Configure Maker-Checker Tasks</a></h4>
+  <h4 class="mw300">{{'labels.heading.List of all maker checker tasks' | translate}}: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67895359/Configure+Maker-Checker+Tasks" target="_blank">{{'labels.inputs.Configure Maker-Checker Tasks' | translate}}</a></h4>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonEdit,buttonEdit,'bottom', true);">Back</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonEdit,buttonEdit,'bottom', true);">{{'labels.buttons.Back' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">Next</button>
+    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">{{'labels.buttons.Next' | translate}}</button>
   </div>
 </ng-template>

src/app/system/configure-maker-checker-tasks/configure-maker-checker-tasks.component.scss

@@ -1,4 +1,4 @@
-.displayPermissions {
+.display-permissions {
   padding-top: 15px;
 }
 
@@ -18,15 +18,15 @@ mat-list-item {
   background-color: #f2f2f2;
 }
 
-.groupingName {
+.grouping-name {
   padding: 0px 10px;
 }
 
-.listPermission {
+.list-permission {
   padding-left: 20px;
 }
 
-.permissionSelected {
+.permission-selected {
   margin-top: 10px;
   height: 40px;
 }

src/app/system/entity-to-entity-mapping/entity-to-entity-mapping.component.html

@@ -3,22 +3,22 @@
   <div class="mat-elevation-z8">
     <table mat-table [dataSource]="datasource">
       <ng-container matColumnDef="entitymapping">
-        <th mat-header-cell *matHeaderCellDef> Mapping Between Entities </th>
+        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Mapping Between Entities' | translate}} </th>
         <td mat-cell *matCellDef="let mappingType" (click)="showFilters(mappingType.id)">
           <span *ngIf="mappingType.mappingTypes == 'office_access_to_loan_products'">
-            Offices --> Loan Products
+            {{'labels.inputs.Offices Loan Products' | translate}}
           </span>
           <span *ngIf="mappingType.mappingTypes == 'office_access_to_savings_products'">
-            Offices --> Savings Products
+            {{'labels.inputs.Offices Savings Products' | translate}}
           </span>
           <span *ngIf="mappingType.mappingTypes == 'office_access_to_fees/charges'">
-            Offices --> Charges/Fees
+            {{'labels.inputs.Offices Charges/Fees' | translate}}
           </span>
           <span *ngIf="mappingType.mappingTypes == 'role_access_to_loan_products'">
-            Roles --> Loan Products
+            {{'labels.inputs.Roles Loan Products' | translate}}
           </span>
           <span *ngIf="mappingType.mappingTypes == 'role_access_to_savings_products'">
-            Roles --> Savings Products
+            {{'labels.inputs.Roles Savings Products' | translate}}
           </span>
         </td>
       </ng-container>
@@ -33,7 +33,7 @@
       <mat-card>
 
         <form [formGroup]="filterPreferenceForm" (ngSubmit)="showFilteredData()">
-          <mat-card-title> {{firstMappingEntity}} access to {{secondMappingEntity}} </mat-card-title>
+          <mat-card-title> {{firstMappingEntity}} {{'labels.text.access to' | translate}} {{secondMappingEntity}} </mat-card-title>
           <mat-card-content>
 
             <div fxLayout="row" fxLayoutAlign="space-evenly center">
@@ -42,14 +42,14 @@
                 <mat-label>{{firstMappingEntity}}</mat-label>
                 <mat-select required formControlName="mappingFirstParamId">
                   <mat-option [value]="0">
-                    All
+                    {{'labels.inputs.All' | translate}}
                   </mat-option>
                   <mat-option *ngFor="let firstEntity of firstEntityData" [value]="firstEntity.id">
                     {{ firstEntity.name }}
                   </mat-option>
                 </mat-select>
                 <mat-error *ngIf="filterPreferenceForm.controls.mappingFirstParamId.hasError('required')">
-                  {{firstMappingEntity}} is <strong>required</strong>
+                  {{firstMappingEntity}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
                 </mat-error>
               </mat-form-field>
 
@@ -57,20 +57,20 @@
                 <mat-label>{{secondMappingEntity}}</mat-label>
                 <mat-select required formControlName="mappingSecondParamId">
                   <mat-option [value]="0">
-                    All
+                    {{'labels.inputs.All' | translate}}
                   </mat-option>
                   <mat-option *ngFor="let secondEntity of secondEntityData" [value]="secondEntity.id">
                     {{ secondEntity.name }}
                   </mat-option>
                 </mat-select>
                 <mat-error *ngIf="filterPreferenceForm.controls.mappingSecondParamId.hasError('required')">
-                  {{secondMappingEntity}} is <strong>required</strong>
+                  {{secondMappingEntity}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
                 </mat-error>
               </mat-form-field>
 
               <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-                <button mat-raised-button color="primary" [disabled]="!filterPreferenceForm.valid">Submit</button>
+                <button mat-raised-button color="primary" [disabled]="!filterPreferenceForm.valid">{{'labels.buttons.Submit' | translate}}</button>
-                <button *ngIf="hasClickedFilters" mat-raised-button color="primary" (click)="showAddScreen(selectedMappingType)">Add</button>
+                <button *ngIf="hasClickedFilters" mat-raised-button color="primary" (click)="showAddScreen(selectedMappingType)">{{'labels.buttons.Add' | translate}}</button>
               </mat-card-actions>
             </div>
 
@@ -92,19 +92,19 @@
               </ng-container>
 
               <ng-container matColumnDef="startdate">
-                <th mat-header-cell *matHeaderCellDef> Start Date </th>
+                <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Start Date' | translate}} </th>
-                <td mat-cell *matCellDef="let listdata"> {{ listdata.startDate }} </td>
+                <td mat-cell *matCellDef="let listdata"> {{ listdata.startDate | dateFormat }} </td>
               </ng-container>
 
               <ng-container matColumnDef="enddate">
-                <th mat-header-cell *matHeaderCellDef> End Date </th>
+                <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.End Date' | translate}} </th>
-                <td mat-cell *matCellDef="let listdata"> {{ listdata.endDate }} </td>
+                <td mat-cell *matCellDef="let listdata"> {{ listdata.endDate | dateFormat }} </td>
               </ng-container>
 
               <ng-container matColumnDef="edit">
                 <th mat-header-cell *matHeaderCellDef> </th>
                 <td mat-cell *matCellDef="let listdata">
-                  <button type="button" color="primary" mat-icon-button matTooltip="Edit" matTooltipPosition="above" *mifosxHasPermission="'UPDATE_ENTITYMAPPING'"
+                  <button type="button" color="primary" mat-icon-button matTooltip="{{ 'tooltips.Edit' | translate}}" matTooltipPosition="above" *mifosxHasPermission="'UPDATE_ENTITYMAPPING'"
                     (click)="showEditScreen(listdata.mapId, selectedMappingType)">
                     <fa-icon icon="edit" size="lg"></fa-icon>
                   </button>
@@ -114,7 +114,7 @@
               <ng-container matColumnDef="delete">
                 <th mat-header-cell *matHeaderCellDef> </th>
                 <td mat-cell *matCellDef="let listdata">
-                  <button type="button" color="warn" mat-icon-button matTooltip="Delete" matTooltipPosition="above" *mifosxHasPermission="'DELETE_ENTITYMAPPING'"
+                  <button type="button" color="warn" mat-icon-button matTooltip="{{ 'tooltips.Delete' | translate}}" matTooltipPosition="above" *mifosxHasPermission="'DELETE_ENTITYMAPPING'"
                   (click)="delete(listdata.mapId)">
                     <fa-icon icon="trash" size="lg"></fa-icon>
                   </button>

src/app/system/external-services/amazon-s3/amazon-s3.component.html

@@ -1,7 +1,7 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
   <button mat-raised-button color="primary" [routerLink]="['edit']">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    Edit
+    {{'labels.buttons.Edit' | translate}}
   </button>
 </div>
 
@@ -10,12 +10,12 @@
   <table mat-table [dataSource]="dataSource" matSort>
 
     <ng-container matColumnDef="name">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.name' | translate}} </th>
       <td mat-cell *matCellDef="let configuration"> {{ configuration.name }} </td>
     </ng-container>
 
     <ng-container matColumnDef="value">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Value </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Value' | translate}} </th>
       <td mat-cell *matCellDef="let configuration"> {{ getConfigurationValue(configuration) }} </td>
     </ng-container>