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

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

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>
 
@@ -9,7 +9,7 @@
 
   <div fxLayout="row">
     <mat-form-field fxFlex>
-      <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
+      <mat-label>{{'labels.inputs.Filter' | translate }}</mat-label>
       <input matInput (keyup)="applyFilter($event.target.value)">
     </mat-form-field>
   </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 mat-raised-button color="primary" [disabled]="!accountNumberPreferenceForm.valid" *mifosxHasPermission="'CREATE_ACCOUNTNUMBERFORMAT'">Submit</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'">{{'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>
@@ -11,7 +11,7 @@
 
   <div #filter fxLayout="row">
     <mat-form-field fxFlex>
-      <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
+      <mat-label>{{'labels.inputs.Filter' | translate }}</mat-label>
       <input matInput (keyup)="applyFilter($event.target.value)">
     </mat-form-field>
   </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="times-circle" size="lg" class="not-system-defined" matTooltip="No" 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="{{ '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>
-  <p class="mw300">To create additional codes.</p>
+  <h2>{{'labels.heading.Manage Codes' | translate}}</h2>
+  <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="primary" (click)="popover.close();previousStep();">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter, filter, 'bottom', true);">Next</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();">{{'labels.buttons.Back' | translate}}</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="primary" (click)="popover.close();showPopover(templateButtonCreateCode, buttonCreateCode, 'bottom', true);">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateTableCodes, tableCodes, 'top', true);">Next</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);">{{'labels.buttons.Back' | translate}}</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="primary" (click)="popover.close();showPopover(templateFilter, filter, 'bottom', true);">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">Next</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);">{{'labels.buttons.Back' | translate}}</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 mat-raised-button color="primary" [disabled]="!codeForm.valid" *mifosxHasPermission="'CREATE_CODE'">Submit</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'">{{'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>
-  <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>
+  <h2>{{'labels.heading.Create Code' | translate}}</h2>
+  <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="primary" (click)="popover.close()">Create Code</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">Next</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()">{{'labels.buttons.Create Code' | translate}}</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()">{{'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 mat-raised-button color="primary" [disabled]="!codeForm.valid || codeForm.pristine" *mifosxHasPermission="'UPDATE_CODE'">Submit</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'">{{'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
-        configuration: <code>{{configurationName}}</code></p>
+      <p>{{'labels.text.Business Date functionality is not enabled' | translate}}: <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

@@ -2,7 +2,7 @@
 
   <div #filter fxLayout="row">
     <mat-form-field fxFlex>
-      <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
+      <mat-label>{{'labels.inputs.Filter' | translate }}</mat-label>
       <input matInput (keyup)="applyFilter($event.target.value)">
     </mat-form-field>
   </div>
@@ -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">Disabled</span>
+              <span *ngIf="configuration.enabled">{{'labels.inputs.Enabled' | translate}}</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="primary" (click)="popover.close();previousStep()">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateConfigurationsTable, configurationsTable, 'top', true)">Next</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()">{{'labels.buttons.Back' | translate}}</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="primary" (click)="popover.close();showPopover(templateFilter, filter, 'bottom', true)">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">Next</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)">{{'labels.buttons.Back' | translate}}</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 mat-raised-button color="primary" (click)="submit()" *mifosxHasPermission="'UPDATE_PERMISSION'">Submit</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'">{{'labels.buttons.Submit' | translate}}</button>
       </mat-card-actions>
     </div>
 
@@ -59,20 +59,20 @@
 </div>
 
 <ng-template #templateButtonEdit let-popover="popover">
-  <h2>Edit</h2>
-  <p class="mw300">To add or remove a task from the Maker-Checker list.</p>
+  <h2>{{'labels.heading.Edit' | translate}}</h2>
+  <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="primary" (click)="popover.close();previousStep()">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateMcTable,mcTable,'top', true);">Next</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()">{{'labels.buttons.Back' | translate}}</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="primary" (click)="popover.close();showPopover(templateButtonEdit,buttonEdit,'bottom', true);">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">Next</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);">{{'labels.buttons.Back' | translate}}</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 *ngIf="hasClickedFilters" mat-raised-button color="primary" (click)="showAddScreen(selectedMappingType)">Add</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)">{{'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>
-                <td mat-cell *matCellDef="let listdata"> {{ listdata.startDate }} </td>
+                <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Start Date' | translate}} </th>
+                <td mat-cell *matCellDef="let listdata"> {{ listdata.startDate | dateFormat }} </td>
               </ng-container>
 
               <ng-container matColumnDef="enddate">
-                <th mat-header-cell *matHeaderCellDef> End Date </th>
-                <td mat-cell *matCellDef="let listdata"> {{ listdata.endDate }} </td>
+                <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.End Date' | translate}} </th>
+                <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>
 

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

@@ -9,15 +9,15 @@
         <div fxLayout="column">
 
           <mat-form-field>
-            <mat-label>S3 Bucket Name</mat-label>
+            <mat-label>{{'labels.inputs.S3 Bucket Name' | translate}}</mat-label>
             <input matInput required formControlName="s3_bucket_name">
             <mat-error *ngIf="amazonS3ConfigurationForm.controls.s3_bucket_name.hasError('required')">
-              S3 Bucket Name is <strong>required</strong>
+              {{'labels.inputs.S3 Bucket Name' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>S3 Access Key</mat-label>
+            <mat-label>{{'labels.inputs.S3 Access Key' | translate}}</mat-label>
             <input matInput required type="{{ accessKeyInputType }}" formControlName="s3_access_key">
             <button mat-button *ngIf="amazonS3ConfigurationForm.controls.s3_access_key.value" matSuffix mat-icon-button
               (mousedown)="accessKeyInputType = 'text'" (mouseup)="accessKeyInputType = 'password'">
@@ -25,12 +25,12 @@
               <fa-icon *ngIf="accessKeyInputType === 'text'" icon="eye-slash"></fa-icon>
             </button>
             <mat-error *ngIf="amazonS3ConfigurationForm.controls.s3_access_key.hasError('required')">
-              S3 Access Key is <strong>required</strong>
+              {{'labels.inputs.S3 Access Key' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>S3 Secret Key</mat-label>
+            <mat-label>{{'labels.inputs.S3 Secret Key' | translate}}</mat-label>
             <input matInput required type="{{ secretKeyInputType }}" formControlName="s3_secret_key">
             <button mat-button *ngIf="amazonS3ConfigurationForm.controls.s3_secret_key.value" matSuffix mat-icon-button
               (mousedown)="secretKeyInputType = 'text'" (mouseup)="secretKeyInputType = 'password'">
@@ -38,7 +38,7 @@
               <fa-icon *ngIf="secretKeyInputType === 'text'" icon="eye-slash"></fa-icon>
             </button>
             <mat-error *ngIf="amazonS3ConfigurationForm.controls.s3_secret_key.hasError('required')">
-              S3 Secret Key is <strong>required</strong>
+              {{'labels.inputs.S3 Secret Key' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -47,8 +47,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 mat-raised-button color="primary" [disabled]="!amazonS3ConfigurationForm.valid || amazonS3ConfigurationForm.pristine">Submit</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate}}</button>
+        <button mat-raised-button color="primary" [disabled]="!amazonS3ConfigurationForm.valid || amazonS3ConfigurationForm.pristine">{{'labels.buttons.Submit' | translate}}</button>
       </mat-card-actions>
 
     </form>

src/app/system/external-services/email/edit-email/edit-email.component.html

@@ -9,15 +9,15 @@
         <div fxLayout="column">
 
           <mat-form-field>
-            <mat-label>Username</mat-label>
+            <mat-label>{{'labels.inputs.Username' | translate}}</mat-label>
             <input matInput required formControlName="username">
             <mat-error *ngIf="emailConfigurationForm.controls.username.hasError('required')">
-              Username is <strong>required</strong>
+              {{'labels.inputs.Username' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Password</mat-label>
+            <mat-label>{{'labels.inputs.Password' | translate}}</mat-label>
             <input matInput required type="{{ passwordInputType }}" formControlName="password">
             <button mat-button *ngIf="emailConfigurationForm.controls.password.value" matSuffix mat-icon-button
               (mousedown)="passwordInputType = 'text'" (mouseup)="passwordInputType = 'password'">
@@ -25,43 +25,43 @@
               <fa-icon *ngIf="passwordInputType === 'text'" icon="eye-slash"></fa-icon>
             </button>
             <mat-error *ngIf="emailConfigurationForm.controls.password.hasError('required')">
-              Password is <strong>required</strong>
+              {{'labels.inputs.Password' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Host</mat-label>
+            <mat-label>{{'labels.inputs.Host' | translate}}</mat-label>
             <input matInput required formControlName="host">
             <mat-error *ngIf="emailConfigurationForm.controls.host.hasError('required')">
-              Host is <strong>required</strong>
+              {{'labels.inputs.Host' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Port</mat-label>
+            <mat-label>{{'labels.inputs.Port' | translate}}</mat-label>
             <input matInput type="number" required formControlName="port">
             <mat-error *ngIf="emailConfigurationForm.controls.port.hasError('required')">
-              Port is <strong>required</strong>
+              {{'labels.inputs.Port' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="useTLS" class="margin-v">
-            Use TLS?
+            {{'labels.inputs.Use TLS' | translate}}?
           </mat-checkbox>
 
           <mat-form-field>
-            <mat-label>From Email</mat-label>
+            <mat-label>{{'labels.inputs.From Email' | translate}}</mat-label>
             <input matInput type="email" required formControlName="fromEmail">
             <mat-error *ngIf="emailConfigurationForm.controls.fromEmail.hasError('required')">
-              From Email is <strong>required</strong>
+              {{'labels.inputs.From Email' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>From Name</mat-label>
+            <mat-label>{{'labels.inputs.From Name' | translate}}</mat-label>
             <input matInput required formControlName="fromName">
             <mat-error *ngIf="emailConfigurationForm.controls.fromName.hasError('required')">
-              From Name is <strong>required</strong>
+              {{'labels.inputs.From Name' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
         </div>
@@ -69,9 +69,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]="!emailConfigurationForm.valid || emailConfigurationForm.pristine">Submit</button>
+          [disabled]="!emailConfigurationForm.valid || emailConfigurationForm.pristine">{{'labels.buttons.Submit' | translate}}</button>
       </mat-card-actions>
 
     </form>

src/app/system/external-services/email/email.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"> {{ configuration.value }} </td>
     </ng-container>
 

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

@@ -12,16 +12,16 @@
             <mat-icon matListIcon>
               <fa-icon icon="cloud" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>S3 Amazon External Service</h4>
-            <p matLine>S3 Amazon Service Configuration</p>
+            <h4 matLine>{{'labels.heading.S3 Amazon External Service' | translate}}</h4>
+            <p matLine>{{'labels.text.S3 Amazon Service Configuration' | translate}}</p>
           </mat-list-item>
 
           <mat-list-item [routerLink]="['sms']">
             <mat-icon matListIcon>
               <fa-icon icon="comment-alt" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>SMS External Service</h4>
-            <p matLine>SMS Service Configuration</p>
+            <h4 matLine>{{'labels.heading.SMS External Service' | translate}}</h4>
+            <p matLine>{{'labels.text.SMS Service Configuration' | translate}}</p>
           </mat-list-item>
 
         </mat-nav-list>
@@ -36,16 +36,16 @@
             <mat-icon matListIcon>
               <fa-icon icon="envelope" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>Email External Service</h4>
-            <p matLine>Email Service Configuration</p>
+            <h4 matLine>{{'labels.heading.Email External Service' | translate}}</h4>
+            <p matLine>{{'labels.text.Email Service Configuration' | translate}}</p>
           </mat-list-item>
 
           <mat-list-item [routerLink]="['notification']">
             <mat-icon matListIcon>
               <fa-icon icon="bell" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>Notification External Service</h4>
-            <p matLine>Notification Service Configuration</p>
+            <h4 matLine> {{'labels.heading.Notification External Service' | translate}}</h4>
+            <p matLine>{{'labels.text.Notification Service Configuration' | translate}}</p>
           </mat-list-item>
 
         </mat-nav-list>

src/app/system/external-services/notification/edit-notification/edit-notification.component.html

@@ -9,26 +9,26 @@
         <div fxLayout="column">
 
           <mat-form-field>
-            <mat-label>Server Key</mat-label>
+            <mat-label>{{'labels.inputs.Server Key' | translate}}</mat-label>
             <input matInput required formControlName="server_key">
             <mat-error *ngIf="notificationConfigurationForm.controls.server_key.hasError('required')">
-              Server Key is <strong>required</strong>
+              {{'labels.inputs.Server Key' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>GCM End Point</mat-label>
+            <mat-label>{{'labels.inputs.GCM End Point' | translate}}</mat-label>
             <input matInput required formControlName="gcm_end_point">
             <mat-error *ngIf="notificationConfigurationForm.controls.gcm_end_point.hasError('required')">
-              GCM End Point is <strong>required</strong>
+              {{'labels.inputs.GCM End Point' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>FCM End Point</mat-label>
+            <mat-label>{{'labels.inputs.FCM End Point' | translate}}</mat-label>
             <input matInput required formControlName="fcm_end_point">
             <mat-error *ngIf="notificationConfigurationForm.controls.fcm_end_point.hasError('required')">
-              FCM End Point is <strong>required</strong>
+              {{'labels.inputs.FCM End Point' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -37,8 +37,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 mat-raised-button color="primary" [disabled]="!notificationConfigurationForm.valid || notificationConfigurationForm.pristine">Submit</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate}}</button>
+        <button mat-raised-button color="primary" [disabled]="!notificationConfigurationForm.valid || notificationConfigurationForm.pristine">{{'labels.buttons.Submit' | translate}}</button>
       </mat-card-actions>
 
     </form>

src/app/system/external-services/notification/notification.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"> {{ configuration.value }} </td>
     </ng-container>
 

src/app/system/external-services/sms/edit-sms/edit-sms.component.html

@@ -1,56 +1,56 @@
 <div class="container">
 
-    <mat-card>
-  
-      <form [formGroup]="smsConfigurationForm" (ngSubmit)="submit()">
-  
-        <mat-card-content>
-  
-          <div fxLayout="column">
-  
-            <mat-form-field>
-              <mat-label>Host Name</mat-label>
-              <input matInput required formControlName="host_name">
-              <mat-error *ngIf="smsConfigurationForm.controls.host_name.hasError('required')">
-                Host Name is <strong>required</strong>
-              </mat-error>
-            </mat-form-field>
-  
-            <mat-form-field>
-              <mat-label>Port Number</mat-label>
-              <input matInput required formControlName="port_number">
-              <mat-error *ngIf="smsConfigurationForm.controls.port_number.hasError('required')">
-                Port Number is <strong>required</strong>
-              </mat-error>
-            </mat-form-field>
-  
-            <mat-form-field>
-              <mat-label>End Point</mat-label>
-              <input matInput required formControlName="end_point">
-              <mat-error *ngIf="smsConfigurationForm.controls.end_point.hasError('required')">
-                End Point is <strong>required</strong>
+  <mat-card>
+
+    <form [formGroup]="smsConfigurationForm" (ngSubmit)="submit()">
+
+      <mat-card-content>
+
+        <div fxLayout="column">
+
+          <mat-form-field>
+            <mat-label>{{'labels.inputs.Host Name' | translate}}</mat-label>
+            <input matInput required formControlName="host_name">
+            <mat-error *ngIf="smsConfigurationForm.controls.host_name.hasError('required')">
+              {{'labels.inputs.Host Name' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field>
+            <mat-label>{{'labels.inputs.Port Number' | translate}}</mat-label>
+            <input matInput required formControlName="port_number">
+            <mat-error *ngIf="smsConfigurationForm.controls.port_number.hasError('required')">
+              {{'labels.inputs.Port Number' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field>
+            <mat-label>{{'labels.inputs.End Point' | translate}}</mat-label>
+            <input matInput required formControlName="end_point">
+            <mat-error *ngIf="smsConfigurationForm.controls.end_point.hasError('required')">
+              {{'labels.inputs.End Point' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field>
+              <mat-label>{{'labels.inputs.Tenant App Key' | translate}}</mat-label>
+              <input matInput required formControlName="tenant_app_key">
+              <mat-error *ngIf="smsConfigurationForm.controls.tenant_app_key.hasError('required')">
+                {{'labels.inputs.Tenant App Key' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
               </mat-error>
             </mat-form-field>
 
-            <mat-form-field>
-                <mat-label>Tenant App Key</mat-label>
-                <input matInput required formControlName="tenant_app_key">
-                <mat-error *ngIf="smsConfigurationForm.controls.tenant_app_key.hasError('required')">
-                  Tenant App Key is <strong>required</strong>
-                </mat-error>
-              </mat-form-field>
-  
-          </div>
-  
-        </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 mat-raised-button color="primary" [disabled]="!smsConfigurationForm.valid || smsConfigurationForm.pristine">Submit</button>
-        </mat-card-actions>
-  
-      </form>
-  
-    </mat-card>
-  
-  </div>
+        </div>
+
+      </mat-card-content>
+
+      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate}}</button>
+        <button mat-raised-button color="primary" [disabled]="!smsConfigurationForm.valid || smsConfigurationForm.pristine">{{'labels.buttons.Submit' | translate}}</button>
+      </mat-card-actions>
+
+    </form>
+
+  </mat-card>
+
+</div>

src/app/system/external-services/sms/sms.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"> {{ configuration.value }} </td>
     </ng-container>
 

src/app/system/manage-data-tables/manage-data-tables.component.html

@@ -11,7 +11,7 @@
 
   <div #filter fxLayout="row" fxLayoutGap="20px">
     <mat-form-field fxFlex>
-      <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
+      <mat-label>{{'labels.inputs.Filter' | translate}}</mat-label>
       <input matInput (keyup)="applyFilter($event.target.value)">
     </mat-form-field>
   </div>

src/app/system/manage-external-events/manage-external-events.component.html

@@ -2,7 +2,7 @@
 
   <div #filter fxLayout="row">
     <mat-form-field fxFlex>
-      <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
+      <mat-label>{{'labels.inputs.Filter' | translate}}</mat-label>
       <input matInput (keyup)="applyFilter($event.target.value)">
     </mat-form-field>
 

src/app/system/manage-hooks/manage-hooks.component.html

@@ -9,7 +9,7 @@
 
   <div fxLayout="row" fxLayoutGap="20px">
     <mat-form-field fxFlex>
-      <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
+      <mat-label>{{'labels.inputs.Filter' | translate}}</mat-label>
       <input matInput (keyup)="applyFilter($event.target.value)">
     </mat-form-field>
   </div>

src/app/system/manage-hooks/view-hook/view-hook.component.html

@@ -41,7 +41,7 @@
         </div>
 
         <div fxFlex="50%">
-          {{ hookData.createdAt  | dateFormat }}
+          {{ hookData.createdAt | dateFormat }}
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
@@ -49,7 +49,7 @@
         </div>
 
         <div fxFlex="50%">
-          {{ hookData.updatedAt  | dateFormat }}
+          {{ hookData.updatedAt | dateFormat }}
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">

src/app/system/manage-jobs/scheduler-jobs/manage-scheduler-jobs.component.html

@@ -18,7 +18,7 @@
 
   <div #filter fxLayout="row" fxLayoutGap="20px">
     <mat-form-field fxFlex>
-      <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
+      <mat-label>{{'labels.inputs.Filter' | translate}}</mat-label>
       <input matInput (keyup)="applyFilter($event.target.value)">
     </mat-form-field>
   </div>

src/app/system/manage-reports/manage-reports.component.html

@@ -11,7 +11,7 @@
 
     <div #filter fxLayout="row">
         <mat-form-field fxFlex>
-            <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
+            <mat-label>{{'labels.inputs.Filter' | translate}}</mat-label>
             <input matInput (keyup)="applyFilter($event.target.value)">
         </mat-form-field>
     </div>

src/app/system/manage-surveys/manage-surveys.component.html

@@ -9,7 +9,7 @@
 
   <div fxLayout="row">
     <mat-form-field fxFlex>
-      <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
+      <mat-label>{{'labels.inputs.Filter' | translate}}</mat-label>
       <input matInput (keyup)="applyFilter($event.target.value)">
     </mat-form-field>
   </div>

src/app/system/roles-and-permissions/roles-and-permissions.component.html

@@ -11,7 +11,7 @@
 
   <div #filter fxLayout="row" fxLayoutGap="20px">
     <mat-form-field fxFlex>
-      <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
+      <mat-label>{{'labels.inputs.Filter' | translate}}</mat-label>
       <input matInput (keyup)="applyFilter($event.target.value)">
     </mat-form-field>
   </div>

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

@@ -3,7 +3,6 @@ import { NgModule } from '@angular/core';
 /** Routing Imports */
 import { Routes, RouterModule } from '@angular/router';
 import { Route } from '../core/route/route.service';
-import { extract } from '../core/i18n/i18n.service';
 
 /** Component Imports */
 import { SystemComponent } from './system.component';
@@ -94,7 +93,7 @@ const routes: Routes = [
   Route.withShell([
     {
       path: 'system',
-      data: { title: extract('System'), breadcrumb: 'System' },
+      data: { title: 'System', breadcrumb: 'System' },
       children: [
         {
           path: '',
@@ -102,7 +101,7 @@ const routes: Routes = [
         },
         {
           path: 'codes',
-          data: { title: extract('View Codes'), breadcrumb: 'Codes' },
+          data: { title: 'View Codes', breadcrumb: 'Codes' },
           children: [
             {
               path: '',
@@ -114,11 +113,11 @@ const routes: Routes = [
             {
               path: 'create',
               component: CreateCodeComponent,
-              data: { title: extract('Create Code'), breadcrumb: 'Create' }
+              data: { title: 'Create Code', breadcrumb: 'Create' }
             },
             {
               path: ':id',
-              data: { title: extract('View Code'), routeParamBreadcrumb: 'id' },
+              data: { title: 'View Code', routeParamBreadcrumb: 'id' },
               children: [
                 {
                   path: '',
@@ -131,7 +130,7 @@ const routes: Routes = [
                 {
                   path: 'edit',
                   component: EditCodeComponent,
-                  data: { title: extract('Edit Code'), breadcrumb: 'Edit', routeParamBreadcrumb: false },
+                  data: { title: 'Edit Code', breadcrumb: 'Edit', routeParamBreadcrumb: false },
                   resolve: {
                     code: CodeResolver
                   }
@@ -142,7 +141,7 @@ const routes: Routes = [
         },
         {
           path: 'external-events',
-          data: { title: extract('Manage External Events'), breadcrumb: 'Manage External Events' },
+          data: { title: 'Manage External Events', breadcrumb: 'Manage External Events' },
           children: [
             {
               path: '',
@@ -156,14 +155,14 @@ const routes: Routes = [
         {
           path: 'entity-to-entity-mapping',
           component: EntityToEntityMappingComponent,
-          data: { title: extract('Entity to Entity Mapping'), breadcrumb: 'Entity to Entity Mapping' },
+          data: { title: 'Entity to Entity Mapping', breadcrumb: 'Entity to Entity Mapping' },
           resolve: {
             entityMappings: EntityToEntityMappingResolver
           }
         },
         {
           path: 'external-services',
-          data: { title: extract('External Services'), breadcrumb: 'External Services' },
+          data: { title: 'External Services', breadcrumb: 'External Services' },
           children: [
             {
               path: '',
@@ -171,7 +170,7 @@ const routes: Routes = [
             },
             {
               path: 'amazon-s3',
-              data: { title: extract('View Amazon S3 Configuration'), breadcrumb: 'Amazon S3' },
+              data: { title: 'View Amazon S3 Configuration', breadcrumb: 'Amazon S3' },
               children: [
                 {
                   path: '',
@@ -183,7 +182,7 @@ const routes: Routes = [
                 {
                   path: 'edit',
                   component: EditAmazonS3Component,
-                  data: { title: extract('Edit Amazon S3 Configuration'), breadcrumb: 'Edit' },
+                  data: { title: 'Edit Amazon S3 Configuration', breadcrumb: 'Edit' },
                   resolve: {
                     amazonS3Configuration: AmazonS3ConfigurationResolver
                   }
@@ -192,7 +191,7 @@ const routes: Routes = [
             },
             {
               path: 'email',
-              data: { title: extract('View Email Configuration'), breadcrumb: 'Email' },
+              data: { title: 'View Email Configuration', breadcrumb: 'Email' },
               children: [
                 {
                   path: '',
@@ -204,7 +203,7 @@ const routes: Routes = [
                 {
                   path: 'edit',
                   component: EditEmailComponent,
-                  data: { title: extract('Edit Email Configuration'), breadcrumb: 'Edit' },
+                  data: { title: 'Edit Email Configuration', breadcrumb: 'Edit' },
                   resolve: {
                     emailConfiguration: EmailConfigurationResolver
                   }
@@ -213,7 +212,7 @@ const routes: Routes = [
             },
             {
               path: 'sms',
-              data: { title: extract('View SMS Configuration'), breadcrumb: 'SMS' },
+              data: { title: 'View SMS Configuration', breadcrumb: 'SMS' },
               children: [
                 {
                   path: '',
@@ -224,7 +223,7 @@ const routes: Routes = [
                 },
                 {
                   path: 'edit',
-                  data: { title: extract('Edit SMS Configuration'), breadcrumb: 'Edit' },
+                  data: { title: 'Edit SMS Configuration', breadcrumb: 'Edit' },
                   component: EditSMSComponent,
                   resolve: {
                     smsConfiguration: SMSConfigurationResolver
@@ -234,7 +233,7 @@ const routes: Routes = [
             },
             {
               path: 'notification',
-              data: { title: extract('View Notification Configuration'), breadcrumb: 'Notification' },
+              data: { title: 'View Notification Configuration', breadcrumb: 'Notification' },
               children: [
                 {
                   path: '',
@@ -246,7 +245,7 @@ const routes: Routes = [
                 {
                   path: 'edit',
                   component: EditNotificationComponent,
-                  data: { title: extract('Edit Notification Configuration'), breadcrumb: 'Edit' },
+                  data: { title: 'Edit Notification Configuration', breadcrumb: 'Edit' },
                   resolve: {
                     notificationConfiguration: NotificationConfigurationResolver
                   }
@@ -257,7 +256,7 @@ const routes: Routes = [
         },
         {
           path: 'data-tables',
-          data: { title: extract('Manage Data Tables'), breadcrumb: 'Manage Data Tables' },
+          data: { title: 'Manage Data Tables', breadcrumb: 'Manage Data Tables' },
           children: [
             {
               path: '',
@@ -269,14 +268,14 @@ const routes: Routes = [
             {
               path: 'create',
               component: CreateDataTableComponent,
-              data: { title: extract('Create Data Table'), breadcrumb: 'Create' },
+              data: { title: 'Create Data Table', breadcrumb: 'Create' },
               resolve: {
                 columnCodes: CodesResolver
               }
             },
             {
               path: ':datatableName',
-              data: { title: extract('View Data Table'), routeParamBreadcrumb: 'datatableName' },
+              data: { title: 'View Data Table', routeParamBreadcrumb: 'datatableName' },
               children: [
                 {
                   path: '',
@@ -288,7 +287,7 @@ const routes: Routes = [
                 {
                   path: 'edit',
                   component: EditDataTableComponent,
-                  data: { title: extract('Edit Data table'), breadcrumb: 'Edit', routeParamBreadcrumb: false },
+                  data: { title: 'Edit Data table', breadcrumb: 'Edit', routeParamBreadcrumb: false },
                   resolve: {
                     dataTable: DataTableResolver,
                     columnCodes: CodesResolver
@@ -300,7 +299,7 @@ const routes: Routes = [
         },
         {
           path: 'hooks',
-          data: { title: extract('Manage Hooks'), breadcrumb: 'Manage Hooks' },
+          data: { title: 'Manage Hooks', breadcrumb: 'Manage Hooks' },
           children: [
             {
               path: '',
@@ -312,14 +311,14 @@ const routes: Routes = [
             {
               path: 'create',
               component: CreateHookComponent,
-              data: { title: extract('Create Hook'), breadcrumb: 'Create' },
+              data: { title: 'Create Hook', breadcrumb: 'Create' },
               resolve: {
                 hooksTemplate: HooksTemplateResolver
               }
             },
             {
               path: ':id',
-              data: { title: extract('View Hook'), routeParamBreadcrumb: 'id' },
+              data: { title: 'View Hook', routeParamBreadcrumb: 'id' },
               children: [
                 {
                   path: '',
@@ -331,7 +330,7 @@ const routes: Routes = [
                 {
                   path: 'edit',
                   component: EditHookComponent,
-                  data: { title: extract('Edit Hook'), breadcrumb: 'Edit', routeParamBreadcrumb: false },
+                  data: { title: 'Edit Hook', breadcrumb: 'Edit', routeParamBreadcrumb: false },
                   resolve: {
                     hooksTemplate: HooksTemplateResolver,
                     hook: HookResolver
@@ -343,7 +342,7 @@ const routes: Routes = [
         },
         {
           path: 'roles-and-permissions',
-          data: { title: extract('Roles and Permissions'), breadcrumb: 'Roles and Permissions' },
+          data: { title: 'Roles and Permissions', breadcrumb: 'Roles and Permissions' },
           children: [
             {
               path: '',
@@ -355,11 +354,11 @@ const routes: Routes = [
             {
               path: 'add',
               component: AddRoleComponent,
-              data: { title: extract('Add Role'), breadcrumb: 'Add' }
+              data: { title: 'Add Role', breadcrumb: 'Add' }
             },
             {
               path: ':id',
-              data: { title: extract('View Role'), routeParamBreadcrumb: 'id' },
+              data: { title: 'View Role', routeParamBreadcrumb: 'id' },
               runGuardsAndResolvers: 'always',
               children: [
                 {
@@ -372,7 +371,7 @@ const routes: Routes = [
                 {
                   path: 'edit',
                   component: EditRoleComponent,
-                  data: { title: extract('Edit Role'), breadcrumb: 'Edit', routeParamBreadcrumb: false },
+                  data: { title: 'Edit Role', breadcrumb: 'Edit', routeParamBreadcrumb: false },
                   resolve: {
                     role: ViewRoleResolver,
                   }
@@ -383,7 +382,7 @@ const routes: Routes = [
         },
         {
           path: 'configure-mc-tasks',
-          data: { title: extract('Configure Maker Checker Tasks'), breadcrumb: 'Configure Maker Checker Tasks' },
+          data: { title: 'Configure Maker Checker Tasks', breadcrumb: 'Configure Maker Checker Tasks' },
           component: ConfigureMakerCheckerTasksComponent,
           resolve: {
             permissions: MakerCheckerTasksResolver
@@ -391,7 +390,7 @@ const routes: Routes = [
         },
         {
           path: 'surveys',
-          data: { title: extract('Manage Surveys'), breadcrumb: 'Manage Surveys' },
+          data: { title: 'Manage Surveys', breadcrumb: 'Manage Surveys' },
           children: [
             {
               path: '',
@@ -403,11 +402,11 @@ const routes: Routes = [
             {
               path: 'create',
               component: CreateSurveyComponent,
-              data: { title: extract('Create Survey'), breadcrumb: 'Create' },
+              data: { title: 'Create Survey', breadcrumb: 'Create' },
             },
             {
               path: ':id',
-              data: { title: extract('View Survey'), routeParamBreadcrumb: 'id' },
+              data: { title: 'View Survey', routeParamBreadcrumb: 'id' },
               children: [
                 {
                   path: '',
@@ -419,7 +418,7 @@ const routes: Routes = [
                 {
                   path: 'edit',
                   component: EditSurveyComponent,
-                  data: { title: extract('Edit Survey'), breadcrumb: 'Edit', routeParamBreadcrumb: false },
+                  data: { title: 'Edit Survey', breadcrumb: 'Edit', routeParamBreadcrumb: false },
                   resolve: {
                     survey: SurveyResolver
                   }
@@ -430,7 +429,7 @@ const routes: Routes = [
         },
         {
           path: 'manage-jobs',
-          data: { title: extract('Manage Scheduler and COB Jobs'), breadcrumb: 'Manage Scheduler and COB Jobs' },
+          data: { title: 'Manage Scheduler and COB Jobs', breadcrumb: 'Manage Scheduler and COB Jobs' },
           children: [
             {
               path: '',
@@ -439,7 +438,7 @@ const routes: Routes = [
             },
             {
               path: ':id',
-              data: { title: extract('View Scheduler Job'), routeParamBreadcrumb: 'id' },
+              data: { title: 'View Scheduler Job', routeParamBreadcrumb: 'id' },
               children: [
                 {
                   path: '',
@@ -451,7 +450,7 @@ const routes: Routes = [
                 {
                   path: 'edit',
                   component: EditSchedulerJobComponent,
-                  data: { title: extract('Edit Scheduler Job'), routeParamBreadcrumb: false, breadcrumb: 'Edit' },
+                  data: { title: 'Edit Scheduler Job', routeParamBreadcrumb: false, breadcrumb: 'Edit' },
                   resolve: {
                     jobSelected: ManageSchedulerJobResolver
                   }
@@ -459,7 +458,7 @@ const routes: Routes = [
                 {
                   path: 'viewhistory',
                   component: ViewHistorySchedulerJobComponent,
-                  data: { title: extract('Scheduler Job History'), breadcrumb: 'View History' },
+                  data: { title: 'Scheduler Job History', breadcrumb: 'View History' },
                   resolve: {
                     jobsSchedulerHistory: ViewHistorySchedulerJobsResolver
                   },
@@ -470,7 +469,7 @@ const routes: Routes = [
         },
         {
           path: 'configurations',
-          data: { title: extract('Configurations'), breadcrumb: 'Configurations' },
+          data: { title: 'Configurations', breadcrumb: 'Configurations' },
           children: [
             {
               path: '',
@@ -481,7 +480,7 @@ const routes: Routes = [
             },
             {
               path: ':id/edit',
-              data: { title: extract('Edit Configuration'), routeParamBreadcrumb: 'id' },
+              data: { title: 'Edit Configuration', routeParamBreadcrumb: 'id' },
               component: EditConfigurationComponent,
               resolve: {
                 configuration: GlobalConfigurationResolver
@@ -491,7 +490,7 @@ const routes: Routes = [
         },
         {
           path: 'account-number-preferences',
-          data: { title: extract('Account Number Preferences'), breadcrumb: 'Account Number Preferences' },
+          data: { title: 'Account Number Preferences', breadcrumb: 'Account Number Preferences' },
           children: [
             {
               path: '',
@@ -503,14 +502,14 @@ const routes: Routes = [
             {
               path: 'create',
               component: CreateAccountNumberPreferenceComponent,
-              data: { title: extract('Create Account Number Preference'), breadcrumb: 'Create' },
+              data: { title: 'Create Account Number Preference', breadcrumb: 'Create' },
               resolve: {
                 accountNumberPreferencesTemplate: AccountNumberPreferencesTemplateResolver
               }
             },
             {
               path: ':id',
-              data: { title: extract('View Account Number Preference'), routeParamBreadcrumb: 'id' },
+              data: { title: 'View Account Number Preference', routeParamBreadcrumb: 'id' },
               children: [
                 {
                   path: '',
@@ -522,7 +521,7 @@ const routes: Routes = [
                 {
                   path: 'edit',
                   component: EditAccountNumberPreferenceComponent,
-                  data: { title: extract('Edit Account Number Preference'), breadcrumb: 'Edit', routeParamBreadcrumb: false },
+                  data: { title: 'Edit Account Number Preference', breadcrumb: 'Edit', routeParamBreadcrumb: false },
                   resolve: {
                     accountNumberPreference: AccountNumberPreferenceResolver,
                     accountNumberPreferencesTemplate: AccountNumberPreferencesTemplateResolver
@@ -534,7 +533,7 @@ const routes: Routes = [
         },
         {
           path: 'reports',
-          data: { title: extract('Manage Reports'), breadcrumb: 'Manage Reports' },
+          data: { title: 'Manage Reports', breadcrumb: 'Manage Reports' },
           children: [
             {
               path: '',
@@ -546,14 +545,14 @@ const routes: Routes = [
             {
               path: 'create',
               component: CreateReportComponent,
-              data: { title: extract('Create Report'), breadcrumb: 'Create' },
+              data: { title: 'Create Report', breadcrumb: 'Create' },
               resolve: {
                 reportTemplate: ReportTemplateResolver
               }
             },
             {
               path: ':id',
-              data: { title: extract('View Report'), routeParamBreadcrumb: 'id' },
+              data: { title: 'View Report', routeParamBreadcrumb: 'id' },
               children: [
                 {
                   path: '',
@@ -565,7 +564,7 @@ const routes: Routes = [
                 {
                   path: 'edit',
                   component: EditReportComponent,
-                  data: { title: extract('Edit Report'), routeParamBreadcrumb: false, breadcrumb: 'Edit' },
+                  data: { title: 'Edit Report', routeParamBreadcrumb: false, breadcrumb: 'Edit' },
                   resolve: {
                     report: ReportResolver,
                     reportTemplate: ReportTemplateResolver
@@ -577,7 +576,7 @@ const routes: Routes = [
         },
         {
           path: 'audit-trails',
-          data: { title: extract('Audit Trails'), breadcrumb: 'Audit Trails' },
+          data: { title: 'Audit Trails', breadcrumb: 'Audit Trails' },
           children: [
             {
               path: '',
@@ -589,7 +588,7 @@ const routes: Routes = [
             {
               path: ':id',
               component: ViewAuditComponent,
-              data: { title: extract('View Audit'), routeParamBreadcrumb: 'id' },
+              data: { title: 'View Audit', routeParamBreadcrumb: 'id' },
               resolve: {
                 auditTrail: AuditTrailResolver
               }

src/app/system/system.component.html

@@ -13,8 +13,8 @@
               <mat-icon matListIcon>
                 <fa-icon icon="table" size="sm"></fa-icon>
               </mat-icon>
-              <h4 matLine>Manage Data tables</h4>
-              <p matLine>Add new extra fields to any entity in the form of data table</p>
+              <h4 matLine>{{'labels.heading.Manage Data tables' | translate}}</h4>
+              <p matLine>{{'labels.text.Add new extra fields to any entity' | translate}}</p>
             </mat-list-item>
           </div>
 
@@ -23,8 +23,8 @@
               <mat-icon matListIcon>
                 <fa-icon icon="list-ul" size="sm"></fa-icon>
               </mat-icon>
-              <h4 matLine>Manage Codes</h4>
-              <p matLine>Codes are used to define drop down values</p>
+              <h4 matLine>{{'labels.heading.Manage Codes' | translate}}</h4>
+              <p matLine>{{'labels.text.Codes are used to define drop down values' | translate}}</p>
             </mat-list-item>
           </div>
 
@@ -33,8 +33,8 @@
               <mat-icon matListIcon>
                 <fa-icon icon="key" size="sm"></fa-icon>
               </mat-icon>
-              <h4 matLine>Manage Roles and Permissions</h4>
-              <p matLine>Define or modify roles and associated permissions</p>
+              <h4 matLine>{{'labels.heading.Manage Roles and Permissions' | translate}}</h4>
+              <p matLine>{{'labels.text.Define or modify roles and associated permissions' | translate}}</p>
             </mat-list-item>
           </div>
 
@@ -43,8 +43,8 @@
               <mat-icon matListIcon>
                 <fa-icon icon="sitemap" size="sm"></fa-icon>
               </mat-icon>
-              <h4 matLine>Configure Maker Checker Tasks</h4>
-              <p matLine>Define or modify Maker Checker tasks</p>
+              <h4 matLine>{{'labels.heading.Configure Maker Checker Tasks' | translate}}</h4>
+              <p matLine>{{'labels.text.Define or modify Maker Checker tasks' | translate}}</p>
             </mat-list-item>
           </div>
 
@@ -52,32 +52,32 @@
             <mat-icon matListIcon>
               <fa-icon icon="anchor" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>Manage Hooks</h4>
-            <p matLine>Define Hooks</p>
+            <h4 matLine>{{'labels.heading.Manage Hooks' | translate}}</h4>
+            <p matLine>{{'labels.text.Define Hooks' | translate}}</p>
           </mat-list-item>
 
           <mat-list-item [routerLink]="['entity-to-entity-mapping']">
             <mat-icon matListIcon>
               <fa-icon icon="road" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>Entity to Entity Mapping</h4>
-            <p matLine>Define or modify entity to entity mappings</p>
+            <h4 matLine>{{'labels.heading.Entity to Entity Mapping' | translate}}</h4>
+            <p matLine>{{'labels.text.Define or modify entity to entity mappings' | translate}}</p>
           </mat-list-item>
 
           <mat-list-item [routerLink]="['surveys']">
             <mat-icon matListIcon>
               <fa-icon icon="file-alt" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>Manage Surveys</h4>
-            <p matLine>Manage your Services</p>
+            <h4 matLine>{{'labels.heading.Manage Surveys' | translate}}</h4>
+            <p matLine>{{'labels.text.Manage your Services' | translate}}</p>
           </mat-list-item>
 
           <mat-list-item [routerLink]="['external-events']"  *mifosxHasPermission="'READ_EXTERNAL_EVENT_CONFIGURATION'">
             <mat-icon matListIcon>
               <fa-icon icon="anchor" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>Manage External Events</h4>
-            <p matLine>External Events configuration, to enable or disable the event publication</p>
+            <h4 matLine>{{'labels.heading.Manage External Events' | translate}}</h4>
+            <p matLine>{{'labels.text.External Events configuration, to enable or disable' | translate}}</p>
           </mat-list-item>
 
         </mat-nav-list>
@@ -92,56 +92,56 @@
             <mat-icon matListIcon>
               <fa-icon icon="money-check" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>Audit Trails</h4>
-            <p matLine>Audit logs of all the activities, such as create client, disburse loans etc</p>
+            <h4 matLine>{{'labels.heading.Audit Trails' | translate}}</h4>
+            <p matLine>{{'labels.text.Audit logs of all the activities' | translate}}</p>
           </mat-list-item>
 
           <mat-list-item [routerLink]="['reports']">
             <mat-icon matListIcon>
               <fa-icon icon="file-word" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>Manage Reports</h4>
-            <p matLine>Add new report and classify reports</p>
+            <h4 matLine>{{'labels.heading.Manage Reports' | translate}}</h4>
+            <p matLine>{{'labels.text.Add new report and classify reports' | translate}}</p>
           </mat-list-item>
 
           <mat-list-item [routerLink]="['manage-jobs']">
             <mat-icon matListIcon>
               <fa-icon icon="clock" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>Manage Jobs</h4>
-            <p matLine>Manage Schedule and Workflow jobs, modify jobs or view history and logs</p>
+            <h4 matLine>{{'labels.heading.Manage Jobs' | translate}}</h4>
+            <p matLine>{{'labels.text.Manage Schedule and Workflow jobs, modify jobs' | translate}}</p>
           </mat-list-item>
 
           <mat-list-item [routerLink]="['configurations']">
             <mat-icon matListIcon>
               <fa-icon icon="cogs" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>Configurations</h4>
-            <p matLine>Global configurations, Cache and Business Date settings</p>
+            <h4 matLine>{{'labels.heading.Configurations' | translate}}</h4>
+            <p matLine>{{'labels.text.Global configurations, Cache and Business Date' | translate}}</p>
           </mat-list-item>
 
           <mat-list-item [routerLink]="['account-number-preferences']">
             <mat-icon matListIcon>
               <fa-icon icon="key" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>Account Number Preferences</h4>
-            <p matLine>Preferences for generating account numbers for client, loan and savings accounts</p>
+            <h4 matLine>{{'labels.heading.Account Number Preferences' | translate}}</h4>
+            <p matLine>{{'labels.text.Preferences for generating account numbers for client' | translate}}</p>
           </mat-list-item>
 
           <mat-list-item [routerLink]="['external-services']">
             <mat-icon matListIcon>
               <fa-icon icon="cog" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>External Services</h4>
-            <p matLine>External Services Configuration</p>
+            <h4 matLine>{{'labels.heading.External Services' | translate}}</h4>
+            <p matLine>{{'labels.text.External Services Configuration' | translate}}</p>
           </mat-list-item>
 
           <mat-list-item>
             <mat-icon matListIcon>
               <fa-icon icon="key" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>Two-Factor Configuration</h4>
-            <p matLine>Two-factor authentication configuration settings</p>
+            <h4 matLine>{{'labels.heading.Two-Factor Configuration' | translate}}</h4>
+            <p matLine>{{'labels.text.Two-factor authentication configuration' | translate}}</p>
           </mat-list-item>
 
         </mat-nav-list>
@@ -155,71 +155,71 @@
 </div>
 
 <ng-template #templateDatatables let-popover="popover">
-  <h2>Manage Data Tables</h2>
-  <p class="mw300">Mifos X data-tables allow the user to add custom fields in addition to the built-in fields to a client profile, loan/saving account, group, center or an office.</p>
+  <h2>{{'labels.heading.Manage Data Tables' | translate}}</h2>
+  <p class="mw300">{{'labels.text.Mifos X data-tables allow the user to add custom fields' | 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="primary" (click)="popover.close();previousStepDatatables()">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStepDatatables()">Next</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();previousStepDatatables()">{{'labels.buttons.Back' | translate}}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();nextStepDatatables()">{{'labels.buttons.Next' | translate}}</button>
   </div>
 </ng-template>
 
 <ng-template #templateCodes let-popover="popover">
-  <h2>Manage Codes</h2>
-  <p class="mw300">From this selection you can create new drop-downs and edit their values as well as edit the values for system-generated codes and drop-downs.</p>
+  <h2>{{'labels.heading.Manage Codes' | translate}}</h2>
+  <p class="mw300">{{'labels.text.Selection you can create new drop-downs and edit' | 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="primary" (click)="popover.close();previousStepCodes()">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStepCodes()">Next</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();previousStepCodes()">{{'labels.buttons.Back' | translate}}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();nextStepCodes()">{{'labels.buttons.Next' | translate}}</button>
   </div>
 </ng-template>
 
 <ng-template #templateRolesandPermission let-popover="popover">
-  <h2>Manage Roles and Permissions</h2>
-  <p class="mw300">Roles and Permissions allow the administrator to control access to Mifos based on what roles are assigned to Users and what Permissions are assigned to roles.</p>
+  <h2>{{'labels.heading.Manage Roles and Permissions' | translate}}</h2>
+  <p class="mw300">{{'labels.text.Roles and Permissions allow the administrator to control access' | 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="primary" (click)="popover.close();previousStepRolesandPermission()">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStepRolesandPermission()">Next</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();previousStepRolesandPermission()">{{'labels.buttons.Back' | translate}}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();nextStepRolesandPermission()">{{'labels.buttons.Next' | translate}}</button>
   </div>
 </ng-template>
 
 <ng-template #templateMakerCheckerTable let-popover="popover">
-  <h2>Configure Maker-Checker Tasks</h2>
-  <p class="mw300">The “Maker-Checker” principle requires every tasks to be completed by two people to reduce the chance of errors and misuse. One person initiates the process and the second completes it.</p>
+  <h2>{{'labels.heading.Configure Maker-Checker Tasks' | translate}}</h2>
+  <p class="mw300">{{'labels.text.“Maker-Checker” principle requires every tasks' | 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="primary" (click)="popover.close();previousStepMakerCheckerTable()">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStepMakerCheckerTable()">Next</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();previousStepMakerCheckerTable()">{{'labels.buttons.Back' | translate}}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();nextStepMakerCheckerTable()">{{'labels.buttons.Next' | translate}}</button>
   </div>
 </ng-template>
 
 <ng-template #templateConfigurations let-popover="popover">
-  <h2>Configuration</h2>
-  <p class="mw300">The Configurations page allows you to further customize the way your organization uses the Mifos system.</p>
+  <h2>{{'labels.heading.Configuration' | translate}}</h2>
+  <p class="mw300">{{'labels.text.Configurations page allows you to further customize' | 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="primary" (click)="popover.close();previousStepConfigurations()">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStepConfigurations()">Next</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();previousStepConfigurations()">{{'labels.buttons.Back' | translate}}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();nextStepConfigurations()">{{'labels.buttons.Next' | translate}}</button>
   </div>
 </ng-template>
 
 <ng-template #templateSchedulerJobs let-popover="popover">
-  <h2>Manage Scheduler Jobs</h2>
-  <p class="mw300">By using Scheduler Jobs, you can set batch jobs to be completed at regular intervals. From this page you can schedule, modify or delete jobs.</p>
+  <h2>{{'labels.heading.Manage Scheduler Jobs' | translate}}</h2>
+  <p class="mw300">{{'labels.text.Scheduler Jobs can set batch jobs' | 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="primary" (click)="popover.close();previousStepSchedulerJobs()">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStepSchedulerJobs()">Next</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();previousStepSchedulerJobs()">{{'labels.buttons.Back' | translate}}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();nextStepSchedulerJobs()">{{'labels.buttons.Next' | translate}}</button>
   </div>
 </ng-template>
 
 <ng-template #templateManageReports let-popover="popover">
-  <h2>Manage Reports</h2>
-  <p class="mw300">You may add customized reports and edit core reports for your organization.</p>
+  <h2>{{'labels.heading.Manage Reports' | translate}}</h2>
+  <p class="mw300">{{'labels.text.Add customized reports and edit core reports' | 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="primary" (click)="popover.close();previousStepManageReports()">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStepManageReports()">Next</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();previousStepManageReports()">{{'labels.buttons.Back' | translate}}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();nextStepManageReports()">{{'labels.buttons.Next' | translate}}</button>
   </div>
 </ng-template>