From 02bae35c3369c420830f8a6e731614b4de5bc0a5 Mon Sep 17 00:00:00 2001
From: RADHA THAKARE <67684749+radhathakare@users.noreply.github.com>
Date: Sat, 16 Sep 2023 01:45:42 +0530
Subject: [PATCH] Accounting translate module (#1799)

* feat:Accounting Translate Module

* feat:Accounting Translate Module Updated Chart Account
---
 .../accounting-rules.component.html           | 14 +--
 .../create-rule/create-rule.component.html    | 38 ++++----
 .../edit-rule/edit-rule.component.html        | 38 ++++----
 .../view-rule/view-rule.component.html        | 20 ++---
 src/app/accounting/accounting.component.html  | 90 +++++++++----------
 .../chart-of-accounts.component.html          | 70 +++++++--------
 .../create-gl-account.component.html          | 40 ++++-----
 .../edit-gl-account.component.html            | 28 +++---
 .../view-gl-account.component.html            | 24 ++---
 .../closing-entries.component.html            | 38 ++++----
 .../create-closure.component.html             | 14 +--
 .../edit-closure/edit-closure.component.html  | 10 +--
 .../view-closure/view-closure.component.html  | 18 ++--
 .../create-journal-entry.component.html       | 58 ++++++------
 ...-financial-activity-mapping.component.html | 12 +--
 ...-financial-activity-mapping.component.html |  8 +-
 ...financial-activity-mappings.component.html | 27 +++---
 ...-financial-activity-mapping.component.html |  8 +-
 .../frequent-postings.component.html          | 52 +++++------
 .../migrate-opening-balances.component.html   | 45 +++++-----
 .../periodic-accruals.component.html          |  8 +-
 .../create-provisioning-entry.component.html  | 10 +--
 .../provisioning-entries.component.html       | 20 ++---
 .../view-provisioning-entry.component.html    | 28 +++---
 ...rovisioning-journal-entries.component.html | 20 ++---
 .../revert-transaction.component.html         | 22 ++---
 .../search-journal-entry.component.html       | 38 ++++----
 27 files changed, 400 insertions(+), 398 deletions(-)

diff --git a/src/app/accounting/accounting-rules/accounting-rules.component.html b/src/app/accounting/accounting-rules/accounting-rules.component.html
index cae54e4a0..f94d59bbf 100644
--- a/src/app/accounting/accounting-rules/accounting-rules.component.html
+++ b/src/app/accounting/accounting-rules/accounting-rules.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="'CREATE_ACCOUNTINGRULE'">
     <fa-icon icon="plus" class="m-r-10"></fa-icon>
-    Add Rule
+    {{"labels.buttons.Add Rule" |translate}}
   </button>
 </div>
 
@@ -19,32 +19,32 @@
     <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 accountingRule"> {{ accountingRule.name }} </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 accountingRule"> {{ accountingRule.officeName }} </td>
       </ng-container>
 
       <ng-container matColumnDef="debitTags">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Debit Tags </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Debit Tags" |translate}} </th>
         <td mat-cell *matCellDef="let accountingRule"> {{ accountingRule.debitTags }} </td>
       </ng-container>
 
       <ng-container matColumnDef="debitAccount">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Debit Account </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Debit Account" |translate}} </th>
         <td mat-cell *matCellDef="let accountingRule"> {{ accountingRule.debitAccounts ? accountingRule.debitAccounts[0].name : '' }} </td>
       </ng-container>
 
       <ng-container matColumnDef="creditTags">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Credit Tags </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Credit Tags" |translate}} </th>
         <td mat-cell *matCellDef="let accountingRule"> {{ accountingRule.creditTags }} </td>
       </ng-container>
 
       <ng-container matColumnDef="creditAccount">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Credit Account </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Credit Account" |translate}} </th>
         <td mat-cell *matCellDef="let accountingRule"> {{ accountingRule.creditAccounts ? accountingRule.creditAccounts[0].name : '' }} </td>
       </ng-container>
 
diff --git a/src/app/accounting/accounting-rules/create-rule/create-rule.component.html b/src/app/accounting/accounting-rules/create-rule/create-rule.component.html
index d991f0e66..eb2b03b53 100644
--- a/src/app/accounting/accounting-rules/create-rule/create-rule.component.html
+++ b/src/app/accounting/accounting-rules/create-rule/create-rule.component.html
@@ -9,35 +9,35 @@
         <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Accounting Rule Name</mat-label>
+            <mat-label>{{"labels.inputs.Accounting Rule Name" |translate}}</mat-label>
             <input matInput required formControlName="name">
             <mat-error *ngIf="accountingRuleForm.controls.name.hasError('required')">
-              Accounting Rule Name is <strong>required</strong>
+              {{"labels.inputs.Accounting Rule Name" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Office</mat-label>
+            <mat-label>{{"labels.inputs.Office" |translate}}</mat-label>
             <mat-select required formControlName="officeId">
               <mat-option *ngFor="let office of officeData" [value]="office.id">
                 {{ office.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="accountingRuleForm.controls.officeId.hasError('required')">
-              Office is <strong>required</strong>
+              {{"labels.inputs.Office" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <div fxFlex="48%" fxLayout="row" fxLayout.lt-md="column" class="rule-wrapper">
-            <mat-label fxFlex="50%">Affected GL Entry (Debit) Rule Type *</mat-label>
+            <mat-label fxFlex="50%">{{"labels.inputs.Affected GL Entry (Debit) Rule Type" |translate}} *</mat-label>
             <mat-radio-group fxFlex="50%" fxLayout="row" fxLayoutGap="5%" formControlName="debitRuleType">
-              <mat-radio-button value="fixedAccount">Fixed Account</mat-radio-button>
-              <mat-radio-button value="listOfAccounts">List of Accounts</mat-radio-button>
+              <mat-radio-button value="fixedAccount">{{"labels.inputs.Fixed Account" |translate}}</mat-radio-button>
+              <mat-radio-button value="listOfAccounts">{{"labels.inputs.List of Accounts"|translate}}</mat-radio-button>
             </mat-radio-group>
           </div>
 
           <mat-form-field fxFlex="48%" *ngIf="accountingRuleForm.controls.debitRuleType.value === 'fixedAccount'">
-            <mat-label>Account to Debit</mat-label>
+            <mat-label>{{"labels.inputs.Account to Debit"|translate}}</mat-label>
             <mat-select formControlName="accountToDebit">
               <mat-option *ngFor="let glAccount of glAccountData" [value]="glAccount.id">
                 {{ glAccount.name }}
@@ -47,7 +47,7 @@
 
           <div fxFlex="48%" fxLayout="row" fxLayoutGap="2%" fxLayout.lt-md="column" *ngIf="accountingRuleForm.controls.debitRuleType.value === 'listOfAccounts'">
             <mat-form-field fxFlex="50%">
-              <mat-label>Debit Tags</mat-label>
+              <mat-label>{{"labels.inputs.Debit Tags" |translate}}</mat-label>
               <mat-select formControlName="debitTags" multiple>
                 <mat-option *ngFor="let debitTag of debitTagData" [value]="debitTag.id">
                   {{ debitTag.name }}
@@ -57,21 +57,21 @@
 
             <div fxFlex="50%" ngClass.gt-md="entries-wrapper">
               <mat-checkbox labelPosition="before" formControlName="allowMultipleDebitEntries" class="entries">
-                Multiple Debit Entries Allowed
+                {{"labels.inputs.Multiple Debit Entries Allowed" |translate}}
               </mat-checkbox>
             </div>
           </div>
 
           <div fxFlex="48%" fxLayout="row" fxLayout.lt-md="column" class="rule-wrapper">
-            <mat-label fxFlex="50%">Affected GL Entry (Credit) Rule Type *</mat-label>
+            <mat-label fxFlex="50%">{{"labels.inputs.Affected GL Entry (Credit) Rule Type" |translate}} *</mat-label>
             <mat-radio-group fxFlex="50%" fxLayout="row" fxLayoutGap="5%" formControlName="creditRuleType">
-              <mat-radio-button value="fixedAccount">Fixed Account</mat-radio-button>
-              <mat-radio-button value="listOfAccounts">List of Accounts</mat-radio-button>
+              <mat-radio-button value="fixedAccount">{{"labels.inputs.Fixed Account" |translate}}</mat-radio-button>
+              <mat-radio-button value="listOfAccounts">{{"labels.inputs.List of Accounts"|translate}}</mat-radio-button>
             </mat-radio-group>
           </div>
 
           <mat-form-field fxFlex="48%" *ngIf="accountingRuleForm.controls.creditRuleType.value === 'fixedAccount'">
-            <mat-label>Account to Credit</mat-label>
+            <mat-label>{{"labels.inputs.Account to Credit" |translate}}</mat-label>
             <mat-select formControlName="accountToCredit">
               <mat-option *ngFor="let glAccount of glAccountData" [value]="glAccount.id">
                 {{ glAccount.name }}
@@ -81,7 +81,7 @@
 
           <div fxFlex="48%" fxLayout="row" fxLayoutGap="2%" fxLayout.lt-md="column" *ngIf="accountingRuleForm.controls.creditRuleType.value === 'listOfAccounts'">
             <mat-form-field fxFlex="50%">
-              <mat-label>Credit Tags</mat-label>
+              <mat-label>{{"labels.inputs.Credit Tags" |translate}}</mat-label>
               <mat-select formControlName="creditTags" multiple>
                 <mat-option *ngFor="let creditTag of creditTagData" [value]="creditTag.id">
                   {{ creditTag.name }}
@@ -91,13 +91,13 @@
 
             <div fxFlex="50%" ngClass.gt-md="entries-wrapper">
               <mat-checkbox labelPosition="before" formControlName="allowMultipleCreditEntries" class="entries">
-                Multiple Credit Entries Allowed
+                {{"labels.inputs.Multiple Credit Entries Allowed" |translate}}
               </mat-checkbox>
             </div>
           </div>
 
           <mat-form-field fxFlex="98%">
-            <mat-label>Description</mat-label>
+            <mat-label>{{"labels.inputs.Description" |translate}}</mat-label>
             <textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
 
@@ -106,8 +106,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]="!accountingRuleForm.valid" *mifosxHasPermission="'CREATE_ACCOUNTINGRULE'">Submit</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{ "labels.buttons.Cancel" | translate}}</button>
+        <button mat-raised-button color="primary" [disabled]="!accountingRuleForm.valid" *mifosxHasPermission="'CREATE_ACCOUNTINGRULE'">{{"labels.buttons.Submit" | translate}}</button>
       </mat-card-actions>
 
     </form>
diff --git a/src/app/accounting/accounting-rules/edit-rule/edit-rule.component.html b/src/app/accounting/accounting-rules/edit-rule/edit-rule.component.html
index 8486658f2..77ff8a337 100644
--- a/src/app/accounting/accounting-rules/edit-rule/edit-rule.component.html
+++ b/src/app/accounting/accounting-rules/edit-rule/edit-rule.component.html
@@ -9,35 +9,35 @@
         <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Accounting Rule Name</mat-label>
+            <mat-label>{{"labels.inputs.Accounting Rule Name" |translate}}</mat-label>
             <input matInput required formControlName="name">
             <mat-error *ngIf="accountingRuleForm.controls.name.hasError('required')">
-              Accounting Rule Name is <strong>required</strong>
+              {{"labels.inputs.Accounting Rule Name" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Office</mat-label>
+            <mat-label>{{"labels.inputs.Office" |translate}}</mat-label>
             <mat-select required formControlName="officeId">
               <mat-option *ngFor="let office of officeData" [value]="office.id">
                 {{ office.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="accountingRuleForm.controls.officeId.hasError('required')">
-              Office is <strong>required</strong>
+              {{"labels.inputs.Office" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <div fxFlex="48%" fxLayout="row" fxLayout.lt-md="column" class="rule-wrapper">
-            <mat-label fxFlex="50%">Affected GL Entry (Debit) Rule Type *</mat-label>
+            <mat-label fxFlex="50%">{{"labels.inputs.Affected GL Entry (Debit) Rule Type" |translate}} *</mat-label>
             <mat-radio-group fxFlex="50%" fxLayout="row" fxLayoutGap="5%" formControlName="debitRuleType">
-              <mat-radio-button value="fixedAccount">Fixed Account</mat-radio-button>
-              <mat-radio-button value="listOfAccounts">List of Accounts</mat-radio-button>
+              <mat-radio-button value="fixedAccount">{{"labels.inputs.Fixed Account" |translate}}</mat-radio-button>
+              <mat-radio-button value="listOfAccounts">{{"labels.inputs.List of Accounts"|translate}}</mat-radio-button>
             </mat-radio-group>
           </div>
 
           <mat-form-field fxFlex="48%" *ngIf="accountingRuleForm.controls.debitRuleType.value === 'fixedAccount'">
-            <mat-label>Account to Debit</mat-label>
+            <mat-label>{{"labels.inputs.Account to Debit"|translate}}</mat-label>
             <mat-select formControlName="accountToDebit">
               <mat-option *ngFor="let glAccount of glAccountData" [value]="glAccount.id">
                 {{ glAccount.name }}
@@ -47,7 +47,7 @@
 
           <div fxFlex="48%" fxLayout="row" fxLayoutGap="2%" fxLayout.lt-md="column" *ngIf="accountingRuleForm.controls.debitRuleType.value === 'listOfAccounts'">
             <mat-form-field fxFlex="50%">
-              <mat-label>Debit Tags</mat-label>
+              <mat-label>{{"labels.inputs.Debit Tags" |translate}}</mat-label>
               <mat-select formControlName="debitTags" multiple>
                 <mat-option *ngFor="let debitTag of debitTagData" [value]="debitTag.id">
                   {{ debitTag.name }}
@@ -57,21 +57,21 @@
 
             <div fxFlex="50%" ngClass.gt-md="entries-wrapper">
               <mat-checkbox labelPosition="before" formControlName="allowMultipleDebitEntries" class="entries">
-                Multiple Debit Entries Allowed
+                {{"labels.inputs.Multiple Debit Entries Allowed" |translate}}
               </mat-checkbox>
             </div>
           </div>
 
           <div fxFlex="48%" fxLayout="row" fxLayout.lt-md="column" class="rule-wrapper">
-            <mat-label fxFlex="50%">Affected GL Entry (Credit) Rule Type *</mat-label>
+            <mat-label fxFlex="50%">{{"labels.inputs.Affected GL Entry (Credit) Rule Type" |translate}} *</mat-label>
             <mat-radio-group fxFlex="50%" fxLayout="row" fxLayoutGap="5%" formControlName="creditRuleType">
-              <mat-radio-button value="fixedAccount">Fixed Account</mat-radio-button>
-              <mat-radio-button value="listOfAccounts">List of Accounts</mat-radio-button>
+              <mat-radio-button value="fixedAccount">{{"labels.inputs.Fixed Account" |translate}}</mat-radio-button>
+              <mat-radio-button value="listOfAccounts">{{"labels.inputs.List of Accounts"|translate}}</mat-radio-button>
             </mat-radio-group>
           </div>
 
           <mat-form-field fxFlex="48%" *ngIf="accountingRuleForm.controls.creditRuleType.value === 'fixedAccount'">
-            <mat-label>Account to Credit</mat-label>
+            <mat-label>{{"labels.inputs.Account to Credit" |translate}}</mat-label>
             <mat-select formControlName="accountToCredit">
               <mat-option *ngFor="let glAccount of glAccountData" [value]="glAccount.id">
                 {{ glAccount.name }}
@@ -81,7 +81,7 @@
 
           <div fxFlex="48%" fxLayout="row" fxLayoutGap="2%" fxLayout.lt-md="column" *ngIf="accountingRuleForm.controls.creditRuleType.value === 'listOfAccounts'">
             <mat-form-field fxFlex="50%">
-              <mat-label>Credit Tags</mat-label>
+              <mat-label>{{"labels.inputs.Credit Tags" |translate}}</mat-label>
               <mat-select formControlName="creditTags" multiple>
                 <mat-option *ngFor="let creditTag of creditTagData" [value]="creditTag.id">
                   {{ creditTag.name }}
@@ -91,13 +91,13 @@
 
             <div fxFlex="50%" ngClass.gt-md="entries-wrapper">
               <mat-checkbox labelPosition="before" formControlName="allowMultipleCreditEntries" class="entries">
-                Multiple Credit Entries Allowed
+                {{"labels.inputs.Multiple Credit Entries Allowed" |translate}}
               </mat-checkbox>
             </div>
           </div>
 
           <mat-form-field fxFlex="98%">
-            <mat-label>Description</mat-label>
+            <mat-label>{{"labels.inputs.Description" |translate}}</mat-label>
             <textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
 
@@ -106,8 +106,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]="accountingRuleForm.pristine || !accountingRuleForm.valid" *mifosxHasPermission="'UPDATE_ACCOUNTINGRULE'">Submit</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{ "labels.buttons.Cancel" | translate}}</button>
+        <button mat-raised-button color="primary" [disabled]="accountingRuleForm.pristine || !accountingRuleForm.valid" *mifosxHasPermission="'UPDATE_ACCOUNTINGRULE'">{{"labels.buttons.Submit" | translate}}</button>
       </mat-card-actions>
 
     </form>
diff --git a/src/app/accounting/accounting-rules/view-rule/view-rule.component.html b/src/app/accounting/accounting-rules/view-rule/view-rule.component.html
index 54d814d33..81047e01a 100644
--- a/src/app/accounting/accounting-rules/view-rule/view-rule.component.html
+++ b/src/app/accounting/accounting-rules/view-rule/view-rule.component.html
@@ -1,11 +1,11 @@
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
   <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_ACCOUNTINGRULE'">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    Edit
+    {{"labels.buttons.Edit"|translate}}
   </button>
   <button mat-raised-button color="warn" (click)="deleteAccountingRule()" *mifosxHasPermission="'DELETE_ACCOUNTINGRULE'">
     <fa-icon icon="trash" class="m-r-10"></fa-icon>
-    Delete
+    {{"labels.buttons.Delete" |translate}}
   </button>
 </div>
 
@@ -20,7 +20,7 @@
         <div fxLayout="row wrap" class="content">
 
           <div fxFlex="50%" class="header">
-            Office
+            {{"labels.inputs.Office" |translate}}
           </div>
 
           <div fxFlex="50%">
@@ -28,7 +28,7 @@
           </div>
 
           <div fxFlex="50%" class="header" *ngIf="accountingRule.description">
-            Description
+            {{"labels.inputs.Description" |translate}}
           </div>
 
           <div fxFlex="50%" *ngIf="accountingRule.description">
@@ -36,7 +36,7 @@
           </div>
 
           <div fxFlex="50%" class="header">
-            Multiple Debit Entries Allowed
+            {{"labels.inputs.Multiple Debit Entries Allowed" |translate}}
           </div>
 
           <div fxFlex="50%">
@@ -44,7 +44,7 @@
           </div>
 
           <div fxFlex="50%" class="header">
-            Multiple Credit Entries Allowed
+            {{"labels.inputs.Multiple Credit Entries Allowed" |translate}}
           </div>
 
           <div fxFlex="50%">
@@ -69,7 +69,7 @@
 
           <div fxFlex="50%" fxLayout="column" *ngIf="accountingRule.debitTags">
             <div class="header">
-              Debit Tags
+              {{"labels.inputs.Debit Tags" |translate}}
             </div>
             <div *ngFor="let debitTag of accountingRule.debitTags">
               {{ debitTag.tag.name }}
@@ -78,7 +78,7 @@
 
           <div fxFlex="50%" fxLayout="column" *ngIf="accountingRule.debitAccounts">
             <div class="header">
-              Debit Account Name
+              {{"labels.inputs.Debit Account Name" |translate}}
             </div>
             <div *ngFor="let debitAccount of accountingRule.debitAccounts">
               {{ debitAccount.name + ' (' + debitAccount.glCode + ')' }}
@@ -87,7 +87,7 @@
 
           <div fxFlex="50%" fxLayout="column" *ngIf="accountingRule.creditTags">
             <div class="header">
-              Credit Tags
+              {{"labels.inputs.Credit Tags" |translate}}
             </div>
             <div *ngFor="let creditTag of accountingRule.creditTags">
               {{ creditTag.tag.name }}
@@ -96,7 +96,7 @@
 
           <div fxFlex="50%" fxLayout="column" *ngIf="accountingRule.creditAccounts">
             <div class="header">
-              Credit Account Name
+              {{"labels.inputs.Credit Account Name" |translate}}
             </div>
             <div *ngFor="let creditAccount of accountingRule.creditAccounts">
               {{ creditAccount.name + ' (' + creditAccount.glCode + ')' }}
diff --git a/src/app/accounting/accounting.component.html b/src/app/accounting/accounting.component.html
index 8ff4a63f1..e73f6c6a4 100644
--- a/src/app/accounting/accounting.component.html
+++ b/src/app/accounting/accounting.component.html
@@ -12,8 +12,8 @@
             <mat-icon matListIcon>
               <fa-icon icon="sync" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>Frequent Postings</h4>
-            <p matLine>These are predefined postings</p>
+            <h4 matLine>{{"labels.heading.Frequent Postings" |translate}}</h4>
+            <p matLine>{{"labels.text.These are predefined postings" |translate}}</p>
           </mat-list-item>
 
           <div #createJournalEntries>
@@ -21,8 +21,8 @@
               <mat-icon matListIcon>
                 <fa-icon icon="plus" size="sm"></fa-icon>
               </mat-icon>
-              <h4 matLine>Create Journal Entries</h4>
-              <p matLine>Manual journal entry transactions recorded in a journal</p>
+              <h4 matLine>{{"labels.heading.Create Journal Entries" |translate}}</h4>
+              <p matLine>{{"labels.text.Manual journal entry transactions recorded in a journal" |translate}}</p>
             </mat-list-item>
           </div>
 
@@ -30,8 +30,8 @@
             <mat-icon matListIcon>
               <fa-icon icon="search" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>Search Journal Entries</h4>
-            <p matLine>Advanced search option for journal entries</p>
+            <h4 matLine>{{"labels.heading.Search Journal Entries" |translate}}</h4>
+            <p matLine>{{"labels.text.Advanced search option for journal entries" |translate}}</p>
           </mat-list-item>
 
           <div #accountsLinked>
@@ -39,8 +39,8 @@
               <mat-icon matListIcon>
                 <fa-icon icon="link" size="sm"></fa-icon>
               </mat-icon>
-              <h4 matLine>Accounts Linked to Financial Activities</h4>
-              <p matLine>List of Financial Activities and GL Account Mappings</p>
+              <h4 matLine>{{"labels.heading.Accounts Linked to Financial Activities" |translate}}</h4>
+              <p matLine>{{"labels.text.List of Financial Activities and GL Account Mappings" |translate}}</p>
             </mat-list-item>
           </div>
 
@@ -49,8 +49,8 @@
               <mat-icon matListIcon>
                 <fa-icon icon="hand-holding-usd" size="sm"></fa-icon>
               </mat-icon>
-              <h4 matLine>Migrate Opening Balances (Office-wise)</h4>
-              <p matLine>Set or update office-level opening balances for GL accounts</p>
+              <h4 matLine>{{"labels.heading.Migrate Opening Balances (Office-wise)" |translate}}</h4>
+              <p matLine>{{"labels.text.Set or update office-level opening balances for GL accounts" |translate}}</p>
             </mat-list-item>
           </div>
 
@@ -67,8 +67,8 @@
               <mat-icon matListIcon>
                 <fa-icon icon="sitemap" size="sm"></fa-icon>
               </mat-icon>
-              <h4 matLine>Chart of Accounts</h4>
-              <p matLine>List of accounts used by the organization</p>
+              <h4 matLine>{{"labels.heading.Chart of Accounts" |translate}}</h4>
+              <p matLine>{{"labels.text.List of accounts used by the organization" |translate}}</p>
             </mat-list-item>
           </div>
 
@@ -77,8 +77,8 @@
               <mat-icon matListIcon>
                 <fa-icon icon="archive" size="sm"></fa-icon>
               </mat-icon>
-              <h4 matLine>Closing Entries</h4>
-              <p matLine>Journal entries made at the end of accounting period</p>
+              <h4 matLine>{{"labels.heading.Closing Entries" |translate}}</h4>
+              <p matLine>{{"labels.text.Journal entries made at the end of accounting period" |translate}}</p>
             </mat-list-item>
           </div>
 
@@ -86,24 +86,24 @@
             <mat-icon matListIcon>
               <fa-icon icon="list" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>Accounting Rules</h4>
-            <p matLine>List of all accounting rules</p>
+            <h4 matLine>{{"labels.heading.Accounting Rules" |translate}}</h4>
+            <p matLine>{{"labels.text.List of all accounting rules" |translate}}</p>
           </mat-list-item>
 
           <mat-list-item *mifosxHasPermission="'EXECUTE_PERIODICACCRUALACCOUNTING'" [routerLink]="['periodic-accruals']">
             <mat-icon matListIcon>
               <fa-icon icon="calendar" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>Accruals</h4>
-            <p matLine>Accrues income, expenses and liabilities as on the provided date</p>
+            <h4 matLine>{{"labels.heading.Accruals" |translate}}</h4>
+            <p matLine>{{"labels.text.Accrues income, expenses and liabilities" |translate}}</p>
           </mat-list-item>
 
           <mat-list-item *mifosxHasPermission="'VIEW_PROVISIONING_ENTRIES'" [routerLink]="['provisioning-entries']">
             <mat-icon matListIcon>
               <fa-icon icon="cogs" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>Provisioning Entries</h4>
-            <p matLine>Create provisioning entries</p>
+            <h4 matLine>{{"labels.heading.Provisioning Entries" |translate}}</h4>
+            <p matLine>{{"labels.text.Create provisioning entries" |translate}}</p>
           </mat-list-item>
 
         </mat-nav-list>
@@ -117,51 +117,51 @@
 </div>
 
 <ng-template #templateChartofAccounts let-popover="popover">
-  <h2>Chart of Accounts</h2>
-  <p class="mw300">The Chart of Accounts - General Ledger Setup allows you to organize your different accounts within Mifos X.</p>
+  <h2>{{"labels.heading.Chart of Accounts" |translate}}</h2>
+  <p class="mw300">{{"labels.text.The Chart of Accounts - General Ledger Setup" |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();previousStepChartofAccounts()">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStepChartofAccounts()">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();previousStepChartofAccounts()">{{"labels.buttons.Back" |translate}}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();nextStepChartofAccounts()">{{"labels.buttons.Next" |translate}}</button>
   </div>
 </ng-template>
 
 <ng-template #templateAccountsLinked let-popover="popover">
-  <h2>Accounts linked to Financial Activities</h2>
-  <p class="mw400">Accounts linked to Financial Activities are mapped accounts which are needed to do system generating accounting transaction.</p>
+  <h2>{{"labels.heading.Accounts Linked to Financial Activities" |translate}}</h2>
+  <p class="mw400">{{"labels.text.Accounts linked to Financial Activities" |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();previousStepAccountsLinked()">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStepAccountsLinked()">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();previousStepAccountsLinked()">{{"labels.buttons.Back" |translate}}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();nextStepAccountsLinked()">{{"labels.buttons.Next" |translate}}</button>
   </div>
 </ng-template>
 
 <ng-template #templateMigrateOpeningBalances let-popover="popover">
-  <h2>Migrate opening balances (Office-wise)</h2>
-  <p class="mw400">This makes it easier for an organization wanting to move to Mifos to transfer GL account balances (from their existing accounting application or manual system) to Mifos X Accounting.</p>
+  <h2>{{"labels.heading.Migrate Opening Balances (Office-wise)" |translate}}</h2>
+  <p class="mw400">{{"labels.text.GLAccount Balances Application" |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();previousStepMigrateOpeningBalances()">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStepMigrateOpeningBalances()">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();previousStepMigrateOpeningBalances()">{{"labels.buttons.Back" |translate}}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();nextStepMigrateOpeningBalances()">{{"labels.buttons.Next" |translate}}</button>
   </div>
 </ng-template>
 
 <ng-template #templateClosingEntries let-popover="popover">
-  <h2>Closing Entries</h2>
-  <p class="mw300">In Mifos X, you can close accounting to journal entries. Closures can be applied to all branches or to each branch separately. It is important for organizations to close accounting periodically to prevent transactions that affect the accounting books.</p>
+  <h2>{{"labels.heading.Closing Entries" |translate}}</h2>
+  <p class="mw300">{{"labels.text.Accounting to journal entries" |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();previousStepClosingEntries()">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStepClosingEntries()">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();previousStepClosingEntries()">{{"labels.buttons.Back" |translate}}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();nextStepClosingEntries()">{{"labels.buttons.Next" |translate}}</button>
   </div>
 </ng-template>
 
 <ng-template #templateCreateJournalEntries let-popover="popover">
-  <h2>Create Journal Entries</h2>
-  <p class="mw300">Journal Entries are essentially logs of all the transactions in your organization that have accounting implications.</p>
+  <h2>{{"labels.heading.Create Journal Entries" |translate}}</h2>
+  <p class="mw300">{{"labels.text.Journal Entries Transactions" |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();previousStepCreateJournalEntries()">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStepCreateJournalEntries()">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();previousStepCreateJournalEntries()">{{"labels.buttons.Back" |translate}}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();nextStepCreateJournalEntries()">{{"labels.buttons.Next" |translate}}</button>
   </div>
 </ng-template>
diff --git a/src/app/accounting/chart-of-accounts/chart-of-accounts.component.html b/src/app/accounting/chart-of-accounts/chart-of-accounts.component.html
index 6ce7af794..65051cfa6 100644
--- a/src/app/accounting/chart-of-accounts/chart-of-accounts.component.html
+++ b/src/app/accounting/chart-of-accounts/chart-of-accounts.component.html
@@ -12,7 +12,7 @@
   <div #buttonAddAccount>
     <button mat-raised-button color="primary" [routerLink]="['gl-accounts/create']" *mifosxHasPermission="'CREATE_GLACCOUNT'">
       <fa-icon icon="plus" class="m-r-10"></fa-icon>
-      Add Account
+      {{"labels.buttons.Add Account" |translate}}
     </button>
   </div>
 </div>
@@ -33,22 +33,22 @@
     <table mat-table [dataSource]="tableDataSource" matSort>
 
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Account </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Account" |translate}} </th>
         <td mat-cell *matCellDef="let glAccount"> {{ glAccount.name }} </td>
       </ng-container>
 
       <ng-container matColumnDef="glCode">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> GL Code </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.GL Code" |translate}} </th>
         <td mat-cell *matCellDef="let glAccount"> {{ glAccount.glCode }} </td>
       </ng-container>
 
       <ng-container matColumnDef="glAccountType">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Type </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Type" |translate}} </th>
         <td mat-cell *matCellDef="let glAccount"> {{ glAccount.type.value }} </td>
       </ng-container>
 
       <ng-container matColumnDef="disabled">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Disabled </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Disabled" |translate}} </th>
         <td mat-cell *matCellDef="let glAccount">
           <div [className]="glAccount.disabled === true ? 'disabled' : 'enabled'">
             <fa-icon matTooltip="{{ glAccount.disabled === true ? 'Disabled' : 'Enabled' }}" matTooltipPosition="right" icon="circle" size="lg"></fa-icon>
@@ -57,15 +57,15 @@
       </ng-container>
 
       <ng-container matColumnDef="manualEntriesAllowed">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Manual Entries Allowed </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Manual Entries Allowed" |translate}} </th>
         <td mat-cell *matCellDef="let glAccount">
-          <fa-icon *ngIf="glAccount.manualEntriesAllowed" class="manual-entries-allowed" matTooltip="Allowed" matTooltipPosition="right" icon="check-circle" size="lg"></fa-icon>
-          <fa-icon *ngIf="!glAccount.manualEntriesAllowed" class="manual-entries-not-allowed" matTooltip="Not Allowed" matTooltipPosition="right" icon="times-circle" size="lg"></fa-icon>
+          <fa-icon *ngIf="glAccount.manualEntriesAllowed" class="manual-entries-allowed" matTooltip="{{ 'tooltips.Allowed' | translate }}" matTooltipPosition="right" icon="check-circle" size="lg"></fa-icon>
+          <fa-icon *ngIf="!glAccount.manualEntriesAllowed" class="manual-entries-not-allowed" matTooltip="{{ 'tooltips.' | translate }}" matTooltipPosition="right" icon="times-circle" size="lg"></fa-icon>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="usedAs">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Used as </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Used as" |translate}} </th>
         <td mat-cell *matCellDef="let glAccount"> {{ glAccount.usage.value }} </td>
       </ng-container>
 
@@ -87,10 +87,10 @@
 
   <div class="m-b-20"  fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
     <button mat-raised-button (click)="nestedTreeControl.expandAll()">  <!-- Bug(angular-material): https://github.com/angular/material2/issues/12170 -->
-      Expand All
+      {{"labels.buttons.Expand All" |translate}}
     </button>
     <button mat-raised-button (click)="nestedTreeControl.collapseAll()">
-      Collapse All
+      {{"labels.buttons.Collapse All" |translate}}
     </button>
   </div>
 
@@ -140,7 +140,7 @@
           <div fxLayout="row wrap" class="content">
 
             <div fxFlex="50%" class="header">
-              Account Name
+              {{"labels.inputs.Account Name" |translate}}
             </div>
 
             <div fxFlex="50%">
@@ -148,7 +148,7 @@
             </div>
 
             <div fxFlex="50%" class="header">
-              GL Code
+              {{"labels.inputs.GL Code" |translate}}
             </div>
 
             <div fxFlex="50%">
@@ -156,7 +156,7 @@
             </div>
 
             <div fxFlex="50%" class="header">
-              Account Type
+              {{"labels.inputs.Account Type" |translate}}
             </div>
 
             <div fxFlex="50%">
@@ -164,7 +164,7 @@
             </div>
 
             <div fxFlex="50%" class="header">
-              Account Usage
+              {{"labels.inputs.Account Usage" |translate}}
             </div>
 
             <div fxFlex="50%">
@@ -172,7 +172,7 @@
             </div>
 
             <div fxFlex="50%" class="header">
-              Manual Entries Allowed
+              {{"labels.inputs.Manual Entries Allowed" |translate}}
             </div>
 
             <div fxFlex="50%">
@@ -180,7 +180,7 @@
             </div>
 
             <div fxFlex="50%" class="header">
-              Description
+              {{"labels.inputs.Description" |translate}}
             </div>
 
             <div fxFlex="50%">
@@ -200,39 +200,39 @@
 </div>
 
 <ng-template #templateButtonTreeView let-popover="popover">
-  <h2>Tree View</h2>
-  <p class="mw300">There is an alternative way to view your accounts - using the Tree View.</p>
+  <h2>{{"labels.heading.Tree View" |translate}}</h2>
+  <p class="mw300">{{"labels.text.Alternative way-Tree view" |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( templateButtonAddAccount, buttonAddAccount, '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( templateButtonAddAccount, buttonAddAccount, 'bottom', true);">{{"labels.buttons.Next" |translate}}</button>
   </div>
 </ng-template>
 
 <ng-template #templateButtonAddAccount let-popover="popover">
-  <h2>Add Account</h2>
-  <p class="mw300">This option allows you to create new GL accounts.</p>
+  <h2>{{"labels.heading.Add Account" |translate}}</h2>
+  <p class="mw300">{{"labels.text.Create New GL Account"|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();showPopover(templateButtonTreeView, buttonTreeView , 'bottom', true);">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();showPopover(templateButtonTreeView, buttonTreeView , 'bottom', true);">{{"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 GL accounts.</h4>
+  <h4>{{"labels.heading.Search bar to filter GL accounts." |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( templateButtonAddAccount, buttonAddAccount, 'bottom', true);">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateAccountsTable, accountsTable, '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( templateButtonAddAccount, buttonAddAccount, 'bottom', true);">{{"labels.buttons.Back" |translate}}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateAccountsTable, accountsTable, 'top', true);">{{"labels.buttons.Next" |translate}}</button>
   </div>
 </ng-template>
 
 <ng-template #templateAccountsTable let-popover="popover">
-  <h4 class="mw300">List of chart of all the accounts being used by your organization.</h4>
+  <h4 class="mw300">{{ "labels.heading.List of chart of all the accounts being used by your organization." |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>
diff --git a/src/app/accounting/chart-of-accounts/create-gl-account/create-gl-account.component.html b/src/app/accounting/chart-of-accounts/create-gl-account/create-gl-account.component.html
index 28599f007..0cc6bd643 100644
--- a/src/app/accounting/chart-of-accounts/create-gl-account/create-gl-account.component.html
+++ b/src/app/accounting/chart-of-accounts/create-gl-account/create-gl-account.component.html
@@ -9,47 +9,47 @@
         <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Account Type</mat-label>
+            <mat-label>{{"labels.inputs.Account Type" |translate}}</mat-label>
             <mat-select required formControlName="type">
               <mat-option *ngFor="let accountType of accountTypeData" [value]="accountType.id">
                 {{ accountType.value }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="glAccountForm.controls.type.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 fxFlex="48%">
-            <mat-label>Account Name</mat-label>
+            <mat-label>{{"labels.inputs.Account Name" |translate}}</mat-label>
             <input matInput required formControlName="name">
             <mat-error *ngIf="glAccountForm.controls.name.hasError('required')">
-              Account Name is <strong>required</strong>
+              {{"labels.inputs.Account Name" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Account Usage</mat-label>
+            <mat-label>{{"labels.inputs.Account Usage" |translate}}</mat-label>
             <mat-select required formControlName="usage">
               <mat-option *ngFor="let accountUsage of accountUsageData" [value]="accountUsage.id">
                 {{ accountUsage.value }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="glAccountForm.controls.usage.hasError('required')">
-              Account Usage is <strong>required</strong>
+              {{"labels.inputs.Account Usage" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>GL Code</mat-label>
+            <mat-label>{{"labels.inputs.GL Code" |translate}}</mat-label>
             <input matInput required formControlName="glCode">
             <mat-error *ngIf="glAccountForm.controls.glCode.hasError('required')">
-              GL Code is <strong>required</strong>
+              {{"labels.inputs.GL Code" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Parent</mat-label>
+            <mat-label>{{"labels.inputs.Parent" |translate}}</mat-label>
             <mat-select formControlName="parentId">
               <mat-option *ngFor="let parent of parentData" [value]="parent.id">
                 ({{ parent.glCode }}) {{ parent.name }}
@@ -58,7 +58,7 @@
           </mat-form-field>
 
           <mat-form-field fxFlex="28%">
-            <mat-label>Tag</mat-label>
+            <mat-label>{{"labels.inputs.Tag" |translate}}</mat-label>
             <mat-select formControlName="tagId">
               <mat-option *ngFor="let tag of tagData" [value]="tag.id">
                 {{ tag.name }}
@@ -68,12 +68,12 @@
 
           <div fxFlex="18%" class="manual-entries-allowed-wrapper">
             <mat-checkbox labelPosition="before" required formControlName="manualEntriesAllowed" class="manual-entries-allowed">
-              Manual Entries Allowed
+              {{"labels.inputs.Manual Entries Allowed" |translate}}
             </mat-checkbox>
           </div>
 
           <mat-form-field fxFlex="98%">
-            <mat-label>Description</mat-label>
+            <mat-label>{{"labels.inputs.Description" |translate}}</mat-label>
             <textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
 
@@ -82,8 +82,8 @@
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="[cancelRoute]">Cancel</button>
-        <button mat-raised-button color="primary" [disabled]="!glAccountForm.valid" *mifosxHasPermission="'CREATE_GLACCOUNT'">Submit</button>
+        <button type="button" mat-raised-button [routerLink]="[cancelRoute]">{{ "labels.buttons.Cancel" | translate}}</button>
+        <button mat-raised-button color="primary" [disabled]="!glAccountForm.valid" *mifosxHasPermission="'CREATE_GLACCOUNT'">{{"labels.buttons.Submit" | translate}}</button>
       </mat-card-actions>
 
     </form>
@@ -93,12 +93,12 @@
 </div>
 
 <ng-template #templateAccountFormRef let-popover="popover">
-  <h2>Create GL account</h2>
-  <p class="mw400">Click to start filling the details. * mark fields are neccessary. For more details click: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67141745/Chart+of+Accounts+-+General+Ledger+Setup" target="_blank">Chart of Accounts</a></p>
+  <h2>{{"labels.heading.Create GL account" |translate}}</h2>
+  <p class="mw400">{{"labels.text.Filling Details" |translate}} <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67141745/Chart+of+Accounts+-+General+Ledger+Setup" target="_blank">{{"labels.inputs.Chart of Accounts" |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 GL Account</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 GL Account" |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>
diff --git a/src/app/accounting/chart-of-accounts/edit-gl-account/edit-gl-account.component.html b/src/app/accounting/chart-of-accounts/edit-gl-account/edit-gl-account.component.html
index 163acd10f..501c4f6c0 100644
--- a/src/app/accounting/chart-of-accounts/edit-gl-account/edit-gl-account.component.html
+++ b/src/app/accounting/chart-of-accounts/edit-gl-account/edit-gl-account.component.html
@@ -9,47 +9,47 @@
         <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Account Type</mat-label>
+            <mat-label>{{"labels.inputs.Account Type" |translate}}</mat-label>
             <mat-select required formControlName="type">
               <mat-option *ngFor="let accountType of accountTypeData" [value]="accountType.id">
                 {{ accountType.value }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="glAccountForm.controls.type.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 fxFlex="48%">
-            <mat-label>Account Name</mat-label>
+            <mat-label>{{"labels.inputs.Account Name" |translate}}</mat-label>
             <input matInput required formControlName="name">
             <mat-error *ngIf="glAccountForm.controls.name.hasError('required')">
-              Account Name is <strong>required</strong>
+              {{"labels.inputs.Account Name" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Account Usage</mat-label>
+            <mat-label>{{"labels.inputs.Account Usage" |translate}}</mat-label>
             <mat-select required formControlName="usage">
               <mat-option *ngFor="let accountUsage of accountUsageData" [value]="accountUsage.id">
                 {{ accountUsage.value }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="glAccountForm.controls.usage.hasError('required')">
-              Account Usage is <strong>required</strong>
+              {{"labels.inputs.Account Usage" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>GL Code</mat-label>
+            <mat-label>{{"labels.inputs.GL Code" |translate}}</mat-label>
             <input matInput required formControlName="glCode">
             <mat-error *ngIf="glAccountForm.controls.glCode.hasError('required')">
-              GL Code is <strong>required</strong>
+              {{"labels.inputs.GL Code" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Parent</mat-label>
+            <mat-label>{{"labels.inputs.Parent" |translate}}</mat-label>
             <mat-select formControlName="parentId">
               <mat-option *ngFor="let parent of parentData" [value]="parent.id">
                 ({{ parent.glCode }}) {{ parent.name }}
@@ -58,7 +58,7 @@
           </mat-form-field>
 
           <mat-form-field fxFlex="28%">
-            <mat-label>Tag</mat-label>
+            <mat-label>{{"labels.inputs.Tag" |translate}}</mat-label>
             <mat-select formControlName="tagId">
               <mat-option *ngFor="let tag of tagData" [value]="tag.id">
                 {{ tag.name }}
@@ -68,12 +68,12 @@
 
           <div fxFlex="18%" class="manual-entries-allowed-wrapper">
             <mat-checkbox labelPosition="before" required formControlName="manualEntriesAllowed" class="manual-entries-allowed">
-              Manual Entries Allowed
+              {{"labels.inputs.Manual Entries Allowed" |translate}}
             </mat-checkbox>
           </div>
 
           <mat-form-field fxFlex="98%">
-            <mat-label>Description</mat-label>
+            <mat-label>{{"labels.inputs.Description" |translate}}</mat-label>
             <textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
 
@@ -82,8 +82,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]="glAccountForm.pristine" *mifosxHasPermission="'UPDATE_GLACCOUNT'">Submit</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">{{ "labels.buttons.Cancel" | translate}}</button>
+        <button mat-raised-button color="primary" [disabled]="glAccountForm.pristine" *mifosxHasPermission="'UPDATE_GLACCOUNT'">{{"labels.buttons.Submit" | translate}}</button>
       </mat-card-actions>
 
     </form>
diff --git a/src/app/accounting/chart-of-accounts/view-gl-account/view-gl-account.component.html b/src/app/accounting/chart-of-accounts/view-gl-account/view-gl-account.component.html
index 52e9c1bb1..a103877a3 100644
--- a/src/app/accounting/chart-of-accounts/view-gl-account/view-gl-account.component.html
+++ b/src/app/accounting/chart-of-accounts/view-gl-account/view-gl-account.component.html
@@ -2,30 +2,30 @@
   <span *mifosxHasPermission="'CREATE_GLACCOUNT'">
     <button mat-raised-button color="primary" *ngIf="glAccount.usage.value === 'HEADER'" [routerLink]="['/accounting/chart-of-accounts/gl-accounts/create']" [queryParams]="{ parent: glAccount.id, accountType: glAccount.type.id }">
       <fa-icon icon="plus" class="m-r-10"></fa-icon>
-      Subledger Account
+      {{"labels.buttons.Subledger Account" |translate}}
     </button>
   </span>
   <span *mifosxHasPermission="'UPDATE_GLACCOUNT'">
     <button mat-raised-button color="primary" [routerLink]="['edit']">
       <fa-icon icon="edit" class="m-r-10"></fa-icon>
-      Edit
+      {{"labels.buttons.Edit" |translate}}
     </button>
   </span>
   <span *mifosxHasPermission="'UPDATE_GLACCOUNT'">
     <button mat-raised-button color="warn" *ngIf="!glAccount.disabled" (click)="changeGlAccountState()">
       <fa-icon icon="lock" class="m-r-10"></fa-icon>
-      Disable
+      {{"labels.buttons.Disable" |translate}}
     </button>
   </span>
   <span *mifosxHasPermission="'UPDATE_GLACCOUNT'">
     <button mat-raised-button color="accent" *ngIf="glAccount.disabled" (click)="changeGlAccountState()">
       <fa-icon icon="lock-open" class="m-r-10"></fa-icon>
-      Enable
+      {{"labels.buttons.Enable" |translate}}
     </button>
   </span>
   <button mat-raised-button color="warn" (click)="deleteGlAccount()" *mifosxHasPermission="'DELETE_GLACCOUNT'">
     <fa-icon icon="trash" class="m-r-10"></fa-icon>
-    Delete
+    {{"labels.buttons.Delete" |translate}}
   </button>
 </div>
 
@@ -38,7 +38,7 @@
       <div fxLayout="row wrap" class="content">
 
         <div fxFlex="50%" class="header">
-          Account Type
+          {{"labels.inputs.Account Type" |translate}}
         </div>
 
         <div fxFlex="50%">
@@ -46,7 +46,7 @@
         </div>
 
         <div fxFlex="50%" class="header">
-          GL Code
+          {{"labels.inputs.GL Code" |translate}}        
         </div>
 
         <div fxFlex="50%">
@@ -54,7 +54,7 @@
         </div>
 
         <div fxFlex="50%" class="header" *ngIf="glAccount.parent">
-          Parent Account Name
+          {{"labels.inputs.Parent Account Name" |translate}}
         </div>
 
         <div fxFlex="50%" *ngIf="glAccount.parent">
@@ -64,7 +64,7 @@
         </div>
 
         <div fxFlex="50%" class="header" *ngIf="glAccount.tagId.id">
-          Tag
+           {{"labels.inputs.Tag" |translate}}
         </div>
 
         <div fxFlex="50%" *ngIf="glAccount.tagId.id">
@@ -72,7 +72,7 @@
         </div>
 
         <div fxFlex="50%" class="header">
-          Account Usage
+          {{"labels.inputs.Account Usage" |translate}}
         </div>
 
         <div fxFlex="50%">
@@ -80,7 +80,7 @@
         </div>
 
         <div fxFlex="50%" class="header">
-          Manual Entries Allowed
+          {{"labels.inputs.Manual Entries Allowed" |translate}}
         </div>
 
         <div fxFlex="50%">
@@ -88,7 +88,7 @@
         </div>
 
         <div fxFlex="50%" class="header" *ngIf="glAccount.description">
-          Description
+          {{"labels.inputs.Description" |translate}}
         </div>
 
         <div fxFlex="50%" *ngIf="glAccount.description">
diff --git a/src/app/accounting/closing-entries/closing-entries.component.html b/src/app/accounting/closing-entries/closing-entries.component.html
index afe57e4d8..719916383 100644
--- a/src/app/accounting/closing-entries/closing-entries.component.html
+++ b/src/app/accounting/closing-entries/closing-entries.component.html
@@ -2,14 +2,14 @@
   <div #buttonCreateClosure>
     <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_GLCLOSURE'">
       <fa-icon icon="plus" class="m-r-10"></fa-icon>
-      Create Closure
+      {{"labels.buttons.Create Closure" |translate}}
     </button>
   </div>
 </div>
 
 <div #filter class="container" fxLayout="row">
   <mat-form-field fxFlex>
-    <mat-label>Office Name</mat-label>
+    <mat-label>{{"labels.inputs.Office Name" |translate}}</mat-label>
     <input matInput [formControl]="officeName" [matAutocomplete]="officeNameAutocomplete">
   </mat-form-field>
 </div>
@@ -28,22 +28,22 @@
     <table mat-table [dataSource]="dataSource" matSort>
 
       <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 glAccountClosure"> {{ glAccountClosure.officeName }} </td>
       </ng-container>
 
       <ng-container matColumnDef="closingDate">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Closure Date </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ "labels.inputs.Closure Date"| translate}} </th>
         <td mat-cell *matCellDef="let glAccountClosure"> {{ glAccountClosure.closingDate }} </td>
       </ng-container>
 
       <ng-container matColumnDef="comments">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Comments </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ "labels.inputs.Comments" |translate}} </th>
         <td mat-cell *matCellDef="let glAccountClosure"> {{ glAccountClosure.comments }} </td>
       </ng-container>
 
       <ng-container matColumnDef="createdByUsername">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Created By </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ "labels.inputs.Created By" |translate}} </th>
         <td mat-cell *matCellDef="let glAccountClosure">{{ glAccountClosure.createdByUsername }}</td>
       </ng-container>
 
@@ -59,29 +59,29 @@
 </div>
 
 <ng-template #templateButtonCreateClosure let-popover="popover">
-  <h2>Create Closure</h2>
-  <p class="mw300">This option allows you to create new closure.</p>
+  <h2>{{"labels.heading.Create Closure" |translate}}</h2>
+  <p class="mw300">{{"labels.text.Create new closure" |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 closures by office.</h4>
+  <h4>{{"labels.heading.Search bar to filter closures by office."|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(templateButtonCreateClosure, buttonCreateClosure, 'bottom', true);">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateClosuresTable,closuresTable, '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(templateButtonCreateClosure, buttonCreateClosure, 'bottom', true);">{{"labels.buttons.Back" |translate}}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateClosuresTable,closuresTable, 'top', true);">{{"labels.buttons.Next" |translate}}</button>
   </div>
 </ng-template>
 
 <ng-template #templateClosuresTable let-popover="popover">
-  <h4>List of closures. To know more click: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67895316/Closing+Entries" target="_blank">Closing Entries</a></h4>
+  <h4>{{"labels.heading.List of closures. To know more click" |translate}}: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67895316/Closing+Entries" target="_blank">{{"labels.inputs.Closing Entries" |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>
diff --git a/src/app/accounting/closing-entries/create-closure/create-closure.component.html b/src/app/accounting/closing-entries/create-closure/create-closure.component.html
index 012c36d10..dd8f18632 100644
--- a/src/app/accounting/closing-entries/create-closure/create-closure.component.html
+++ b/src/app/accounting/closing-entries/create-closure/create-closure.component.html
@@ -9,29 +9,29 @@
         <div fxLayout="column">
 
           <mat-form-field>
-            <mat-label>Office</mat-label>
+            <mat-label>{{"labels.inputs.Office" |translate}}</mat-label>
             <mat-select required formControlName="officeId">
               <mat-option *ngFor="let office of officeData" [value]="office.id">
                 {{ office.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="accountingClosureForm.controls.officeId.hasError('required')">
-              Office is <strong>required</strong>
+              {{"labels.inputs.Office" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field (click)="closingDatePicker.open()">
-            <mat-label>Closing Date</mat-label>
+            <mat-label>{{ "labels.inputs.Closing Date" |translate}}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="closingDatePicker" required formControlName="closingDate">
             <mat-datepicker-toggle matSuffix [for]="closingDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #closingDatePicker></mat-datepicker>
             <mat-error *ngIf="accountingClosureForm.controls.closingDate.hasError('required')">
-              Closing Date is <strong>required</strong>
+              {{ "labels.inputs.Closing Date" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Comments</mat-label>
+            <mat-label>{{ "labels.inputs.Comments" |translate}}</mat-label>
             <textarea matInput formControlName="comments" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
 
@@ -40,8 +40,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]="!accountingClosureForm.valid" *mifosxHasPermission="'CREATE_GLCLOSURE'">Submit</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">{{ "labels.buttons.Cancel" | translate}}</button>
+        <button mat-raised-button color="primary" [disabled]="!accountingClosureForm.valid" *mifosxHasPermission="'CREATE_GLCLOSURE'">{{"labels.buttons.Submit" | translate}}</button>
       </mat-card-actions>
 
     </form>
diff --git a/src/app/accounting/closing-entries/edit-closure/edit-closure.component.html b/src/app/accounting/closing-entries/edit-closure/edit-closure.component.html
index 1ea4236b1..0d8f0966c 100644
--- a/src/app/accounting/closing-entries/edit-closure/edit-closure.component.html
+++ b/src/app/accounting/closing-entries/edit-closure/edit-closure.component.html
@@ -9,7 +9,7 @@
         <div fxLayout="column">
 
           <mat-form-field>
-            <mat-label>Office</mat-label>
+            <mat-label>{{"labels.inputs.Office" |translate}}</mat-label>
             <mat-select required formControlName="officeId">
               <mat-option *ngFor="let office of officeData" [value]="office.id">
                 {{ office.name }}
@@ -18,14 +18,14 @@
           </mat-form-field>
 
           <mat-form-field (click)="closingDatePicker.open()">
-            <mat-label>Closing Date</mat-label>
+            <mat-label>{{ "labels.inputs.Closing Date" |translate}}</mat-label>
             <input matInput [matDatepicker]="closingDatePicker" required formControlName="closingDate">
             <mat-datepicker-toggle matSuffix [for]="closingDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #closingDatePicker></mat-datepicker>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Comments</mat-label>
+            <mat-label>{{ "labels.inputs.Comments" |translate}}</mat-label>
             <textarea matInput formControlName="comments" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
 
@@ -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]="accountingClosureForm.pristine">Submit</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">{{ "labels.buttons.Cancel" | translate}}</button>
+        <button mat-raised-button color="primary" [disabled]="accountingClosureForm.pristine">{{"labels.buttons.Submit" | translate}}</button>
       </mat-card-actions>
 
     </form>
diff --git a/src/app/accounting/closing-entries/view-closure/view-closure.component.html b/src/app/accounting/closing-entries/view-closure/view-closure.component.html
index b9e6ad0a4..9b972e8e9 100644
--- a/src/app/accounting/closing-entries/view-closure/view-closure.component.html
+++ b/src/app/accounting/closing-entries/view-closure/view-closure.component.html
@@ -1,11 +1,11 @@
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
   <button mat-raised-button color="primary" [routerLink]="['edit']">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    Edit
+    {{"labels.buttons.Edit" |translate}}
   </button>
   <button mat-raised-button color="warn" (click)="deleteAccountingClosure()" *mifosxHasPermission="'DELETE_GLCLOSURE'">
     <fa-icon icon="trash" class="m-r-10"></fa-icon>
-    Delete
+    {{"labels.buttons.Delete" |translate}}
   </button>
 </div>
 
@@ -18,7 +18,7 @@
       <div fxLayout="row wrap" class="content">
 
         <div fxFlex="50%" class="header">
-          Office
+         {{"labels.inputs.Office" |translate}}
         </div>
 
         <div fxFlex="50%">
@@ -26,7 +26,7 @@
         </div>
 
         <div fxFlex="50%" class="header">
-          Closure Date
+          {{ "labels.inputs.Closure Date"| translate}}
         </div>
 
         <div fxFlex="50%">
@@ -34,7 +34,7 @@
         </div>
 
         <div fxFlex="50%" class="header">
-          Closed By
+          {{ "labels.inputs.Closed By" |translate}}
         </div>
 
         <div fxFlex="50%">
@@ -42,7 +42,7 @@
         </div>
 
         <div fxFlex="50%" class="header">
-          Updated By
+          {{ "labels.inputs.Updated By" |translate}}
         </div>
 
         <div fxFlex="50%">
@@ -50,7 +50,7 @@
         </div>
 
         <div fxFlex="50%" class="header">
-          Updated On
+          {{ "labels.inputs.Updated On"|translate}}
         </div>
 
         <div fxFlex="50%">
@@ -58,7 +58,7 @@
         </div>
 
         <div fxFlex="50%" class="header">
-          Closure Creation Date
+          {{ "labels.inputs.Closure Creation Date"|translate}}
         </div>
 
         <div fxFlex="50%">
@@ -66,7 +66,7 @@
         </div>
 
         <div fxFlex="50%" class="header">
-          Comments
+          {{ "labels.inputs.Comments" |translate}}
         </div>
 
         <div fxFlex="50%">
diff --git a/src/app/accounting/create-journal-entry/create-journal-entry.component.html b/src/app/accounting/create-journal-entry/create-journal-entry.component.html
index 7c328d4ad..cfe7dfb5d 100644
--- a/src/app/accounting/create-journal-entry/create-journal-entry.component.html
+++ b/src/app/accounting/create-journal-entry/create-journal-entry.component.html
@@ -9,26 +9,26 @@
         <div #createJournalFormRef fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Office</mat-label>
+            <mat-label>{{"labels.inputs.Office" |translate}}</mat-label>
             <mat-select required formControlName="officeId">
               <mat-option *ngFor="let office of officeData" [value]="office.id">
                 {{ office.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="journalEntryForm.controls.officeId.hasError('required')">
-              Office is <strong>required</strong>
+              {{"labels.inputs.Office" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Currency</mat-label>
+            <mat-label>{{"labels.inputs.Currency" |translate}}</mat-label>
             <mat-select required formControlName="currencyCode">
               <mat-option *ngFor="let currency of currencyData" [value]="currency.code">
                 {{ currency.displayLabel }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="journalEntryForm.controls.currencyCode.hasError('required')">
-              Currency is <strong>required</strong>
+              {{"labels.inputs.Currency" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -38,22 +38,22 @@
             <div fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" [formGroupName]="i">
 
               <mat-form-field fxFlex="48%">
-                <mat-label>Affected GL Entry (Debit)</mat-label>
+                <mat-label>{{"labels.inputs.Affected GL Entry (Debit)" |translate}}</mat-label>
                 <mat-select required formControlName="glAccountId">
                   <mat-option *ngFor="let affectedGLEntryDebit of glAccountData" [value]="affectedGLEntryDebit.id">
                     {{ affectedGLEntryDebit.name + ' (' + affectedGLEntryDebit.glCode + ')' }}
                   </mat-option>
                 </mat-select>
                 <mat-error *ngIf="debits.at(i).controls.glAccountId.hasError('required')">
-                  Affected GL Entry (Debit) is <strong>required</strong>
+                  {{"labels.inputs.Affected GL Entry (Debit)" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
                 </mat-error>
               </mat-form-field>
 
               <mat-form-field fxFlex="43%">
-                <mat-label>Debit Amount</mat-label>
+                <mat-label>{{"labels.inputs.Debit Amount" |translate}}</mat-label>
                 <input type="number" matInput required formControlName="amount">
                 <mat-error *ngIf="debits.at(i).controls.amount.hasError('required')">
-                  Debit Amount is <strong>required</strong>
+                  {{"labels.inputs.Debit Amount" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
                 </mat-error>
               </mat-form-field>
 
@@ -76,22 +76,22 @@
             <div fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" [formGroupName]="i">
 
               <mat-form-field fxFlex="48%">
-                <mat-label>Affected GL Entry (Credit)</mat-label>
+                <mat-label>{{"labels.inputs.Affected GL Entry (Credit)" |translate}}</mat-label>
                 <mat-select required formControlName="glAccountId">
                   <mat-option *ngFor="let affectedGLEntryCredit of glAccountData" [value]="affectedGLEntryCredit.id">
                     {{ affectedGLEntryCredit.name + ' (' + affectedGLEntryCredit.glCode + ')' }}
                   </mat-option>
                 </mat-select>
                 <mat-error *ngIf="credits.at(i).controls.glAccountId.hasError('required')">
-                  Affected GL Entry (Credit) is <strong>required</strong>
+                  {{"labels.inputs.Affected GL Entry (Credit)" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
                 </mat-error>
               </mat-form-field>
 
               <mat-form-field fxFlex="43%">
-                <mat-label>Credit Amount</mat-label>
+                <mat-label>{{"labels.inputs.Credit Amount"|translate}}</mat-label>
                 <input type="number" matInput required formControlName="amount">
                 <mat-error *ngIf="credits.at(i).controls.amount.hasError('required')">
-                  Credit Amount is <strong>required</strong>
+                  {{"labels.inputs.Credit Amount"|translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
                 </mat-error>
               </mat-form-field>
 
@@ -109,22 +109,22 @@
           </div>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Reference Number</mat-label>
+            <mat-label>{{"labels.inputs.Reference Number"|translate}}</mat-label>
             <input matInput formControlName="referenceNumber">
           </mat-form-field>
 
           <mat-form-field fxFlex="48%" (click)="transactionDatePicker.open()">
-            <mat-label>Transaction Date</mat-label>
+            <mat-label>{{"labels.inputs.Transaction Date"|translate}}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transactionDatePicker" required formControlName="transactionDate">
             <mat-datepicker-toggle matSuffix [for]="transactionDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #transactionDatePicker></mat-datepicker>
             <mat-error *ngIf="journalEntryForm.controls.transactionDate.hasError('required')">
-              Transaction Date is <strong>required</strong>
+              {{"labels.inputs.Transaction Date"|translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Payment Type</mat-label>
+            <mat-label>{{"labels.inputs.Payment Type"|translate}}</mat-label>
             <mat-select formControlName="paymentTypeId">
               <mat-option *ngFor="let paymentType of paymentTypeData" [value]="paymentType.id">
                 {{ paymentType.name }}
@@ -133,32 +133,32 @@
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Account Number</mat-label>
+            <mat-label>{{"labels.inputs.Account Number"|translate}}</mat-label>
             <input matInput formControlName="accountNumber">
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Cheque Number</mat-label>
+            <mat-label>{{"labels.inputs.Cheque Number"|translate}}</mat-label>
             <input matInput formControlName="checkNumber">
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Routing Code</mat-label>
+            <mat-label>{{"labels.inputs.Routing Code"|translate}}</mat-label>
             <input matInput formControlName="routingCode">
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Receipt Number</mat-label>
+            <mat-label>{{"labels.inputs.Receipt Number"|translate}}</mat-label>
             <input matInput formControlName="receiptNumber">
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Bank Number</mat-label>
+            <mat-label>{{"labels.inputs.Bank Number"|translate}}</mat-label>
             <input matInput formControlName="bankNumber">
           </mat-form-field>
 
           <mat-form-field fxFlex="98%">
-            <mat-label>Comments</mat-label>
+            <mat-label>{{"labels.inputs.Comments"|translate}}</mat-label>
             <textarea matInput formControlName="comments" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
 
@@ -167,8 +167,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]="!journalEntryForm.valid" *mifosxHasPermission="'CREATE_JOURNALENTRY'">Submit</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{ "labels.buttons.Cancel" | translate}}</button>
+        <button mat-raised-button color="primary" [disabled]="!journalEntryForm.valid" *mifosxHasPermission="'CREATE_JOURNALENTRY'">{{"labels.buttons.Submit" | translate}}</button>
       </mat-card-actions>
 
     </form>
@@ -178,11 +178,11 @@
 </div>
 
 <ng-template #templateCreateJournalFormRef let-popover="popover">
-  <h2>Add Journal Entry Form</h2>
-  <p class="mw300">Fields with a red asterisk (*) are required. To know more click: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67895310/Add+Journal+Entries" target="_blank">Add Journal Entries</a></p>
+  <h2>{{"labels.heading.Add Journal Entry Form" |translate}}</h2>
+  <p class="mw300">{{"labels.text.Red asterisk field" |translate}} <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67895310/Add+Journal+Entries" target="_blank">{{ "labels.inputs.Add Journal Entries" |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();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();previousStep()">{{"labels.buttons.Back" |translate}}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">{{"labels.buttons.Next" |translate}}</button>
   </div>
 </ng-template>
diff --git a/src/app/accounting/financial-activity-mappings/create-financial-activity-mapping/create-financial-activity-mapping.component.html b/src/app/accounting/financial-activity-mappings/create-financial-activity-mapping/create-financial-activity-mapping.component.html
index cdc8f20ef..37bc9a36b 100644
--- a/src/app/accounting/financial-activity-mappings/create-financial-activity-mapping/create-financial-activity-mapping.component.html
+++ b/src/app/accounting/financial-activity-mappings/create-financial-activity-mapping/create-financial-activity-mapping.component.html
@@ -9,26 +9,26 @@
         <div fxLayout="column">
 
           <mat-form-field>
-            <mat-label>Financial Activity</mat-label>
+            <mat-label>{{"labels.inputs.Financial Activity" |translate}}</mat-label>
             <mat-select required formControlName="financialActivityId">
               <mat-option *ngFor="let financialActivity of financialActivityData" [value]="financialActivity.id">
                 {{ financialActivity.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="financialActivityMappingForm.controls.financialActivityId.hasError('required')">
-              Financial Activity is <strong>required</strong>
+              {{"labels.inputs.Financial Activity" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Account</mat-label>
+            <mat-label>{{"labels.inputs.Account"|translate}}</mat-label>
             <mat-select required formControlName="glAccountId">
               <mat-option *ngFor="let glAccount of glAccountData" [value]="glAccount.id">
                 {{ glAccount.name + ' (' + glAccount.glCode + ')' }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="financialActivityMappingForm.controls.glAccountId.hasError('required')">
-              Account is <strong>required</strong>
+              {{"labels.inputs.Account"|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]="!financialActivityMappingForm.valid" *mifosxHasPermission="'CREATE_FINANCIALACTIVITYACCOUNT'">Submit</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">{{ "labels.buttons.Cancel" | translate}}</button>
+        <button mat-raised-button color="primary" [disabled]="!financialActivityMappingForm.valid" *mifosxHasPermission="'CREATE_FINANCIALACTIVITYACCOUNT'">{{"labels.buttons.Submit" | translate}}</button>
       </mat-card-actions>
 
     </form>
diff --git a/src/app/accounting/financial-activity-mappings/edit-financial-activity-mapping/edit-financial-activity-mapping.component.html b/src/app/accounting/financial-activity-mappings/edit-financial-activity-mapping/edit-financial-activity-mapping.component.html
index c7c1064b0..d8225fbc6 100644
--- a/src/app/accounting/financial-activity-mappings/edit-financial-activity-mapping/edit-financial-activity-mapping.component.html
+++ b/src/app/accounting/financial-activity-mappings/edit-financial-activity-mapping/edit-financial-activity-mapping.component.html
@@ -9,7 +9,7 @@
         <div fxLayout="column">
 
           <mat-form-field>
-            <mat-label>Financial Activity</mat-label>
+            <mat-label>{{"labels.inputs.Financial Activity" |translate}}</mat-label>
             <mat-select required formControlName="financialActivityId">
               <mat-option *ngFor="let financialActivity of financialActivityData" [value]="financialActivity.id">
                 {{ financialActivity.name }}
@@ -18,7 +18,7 @@
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Account</mat-label>
+            <mat-label>{{"labels.inputs.Account"|translate}}</mat-label>
             <mat-select required formControlName="glAccountId">
               <mat-option *ngFor="let glAccount of glAccountData" [value]="glAccount.id">
                 {{ glAccount.name + ' (' + glAccount.glCode + ')' }}
@@ -31,8 +31,8 @@
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
-        <button mat-raised-button color="primary" [disabled]="financialActivityMappingForm.pristine" *mifosxHasPermission="'UPDATE_FINANCIALACTIVITYACCOUNT'">Submit</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">{{ "labels.buttons.Cancel" | translate}}</button>
+        <button mat-raised-button color="primary" [disabled]="financialActivityMappingForm.pristine" *mifosxHasPermission="'UPDATE_FINANCIALACTIVITYACCOUNT'">{{"labels.buttons.Submit" | translate}}</button>
       </mat-card-actions>
 
     </form>
diff --git a/src/app/accounting/financial-activity-mappings/financial-activity-mappings.component.html b/src/app/accounting/financial-activity-mappings/financial-activity-mappings.component.html
index e37aa8304..7c73028ef 100644
--- a/src/app/accounting/financial-activity-mappings/financial-activity-mappings.component.html
+++ b/src/app/accounting/financial-activity-mappings/financial-activity-mappings.component.html
@@ -1,7 +1,8 @@
 <div fxLayout="row" fxLayoutAlign="end" class="container m-b-20">
   <div #buttonDefineMapping>
     <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_FINANCIALACTIVITYACCOUNT'">
-      <fa-icon icon="plus" class="m-r-10"></fa-icon>Define New Mapping
+      <fa-icon icon="plus" class="m-r-10"></fa-icon>
+      {{"labels.buttons.Define New Mapping" |translate}}
     </button>
   </div>
 </div>
@@ -11,17 +12,17 @@
   <table mat-table [dataSource]="dataSource" matSort>
 
     <ng-container matColumnDef="financialActivity">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Financial Activity </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Financial Activity" |translate}} </th>
       <td mat-cell *matCellDef="let financialActivityAccount"> {{ financialActivityAccount.financialActivityData.name }} </td>
     </ng-container>
 
     <ng-container matColumnDef="glAccountName">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Account Name </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Account Name" |translate}} </th>
       <td mat-cell *matCellDef="let financialActivityAccount"> {{ financialActivityAccount.glAccountData.name }} </td>
     </ng-container>
 
     <ng-container matColumnDef="glAccountCode">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Account Code </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Account Code" |translate}} </th>
       <td mat-cell *matCellDef="let financialActivityAccount"> {{ financialActivityAccount.glAccountData.glCode }} </td>
     </ng-container>
 
@@ -35,20 +36,20 @@
 </div>
 
 <ng-template #templateButtonDefineMapping let-popover="popover">
-  <h2>Define New Mapping</h2>
-  <p class="mw300">To define new mapping.</p>
+  <h2>{{"labels.heading.Define New Mapping"|translate}}</h2>
+  <p class="mw300">{{"labels.text.To define new mapping." |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(templateActivitiesTable, activitiesTable, '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(templateActivitiesTable, activitiesTable, 'top', true)">{{"labels.buttons.Next" |translate}}</button>
   </div>
 </ng-template>
 
 <ng-template #templateActivitiesTable let-popover="popover">
-  <h4 class="mw300">List of accounts linked to different financial activities. To know more click: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/106430472/Accounts+linked+to+Financial+Activities" target="_blank">Accounts linked to Financial Activities</a> </h4>
+  <h4 class="mw300">{{"labels.heading.Account Linked Financial" |translate}} <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/106430472/Accounts+linked+to+Financial+Activities" target="_blank">{{"labels.heading.Accounts linked to Financial Activities" |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(templateButtonDefineMapping, buttonDefineMapping , '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(templateButtonDefineMapping, buttonDefineMapping , '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>
diff --git a/src/app/accounting/financial-activity-mappings/view-financial-activity-mapping/view-financial-activity-mapping.component.html b/src/app/accounting/financial-activity-mappings/view-financial-activity-mapping/view-financial-activity-mapping.component.html
index ff048fc99..1bc9e8a74 100644
--- a/src/app/accounting/financial-activity-mappings/view-financial-activity-mapping/view-financial-activity-mapping.component.html
+++ b/src/app/accounting/financial-activity-mappings/view-financial-activity-mapping/view-financial-activity-mapping.component.html
@@ -1,11 +1,11 @@
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" class="container m-b-20">
   <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_FINANCIALACTIVITYACCOUNT'">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    Edit
+    {{"labels.buttons.Edit" |translate}}
   </button>
   <button mat-raised-button color="warn" (click)="deleteFinancialActivityAccount()" *mifosxHasPermission="'DELETE_FINANCIALACTIVITYACCOUNT'">
     <fa-icon icon="trash" class="m-r-10"></fa-icon>
-    Delete
+    {{"labels.buttons.Delete" |translate}}
   </button>
 </div>
 
@@ -18,7 +18,7 @@
       <div fxLayout="row wrap" class="content">
 
         <div fxFlex="50%" class="header">
-          Financial Activity
+          {{"labels.inputs.Financial Activity" |translate}}
         </div>
 
         <div fxFlex="50%">
@@ -26,7 +26,7 @@
         </div>
 
         <div fxFlex="50%" class="header">
-          Account Name
+          {{"labels.inputs.Account Name" |translate}}
         </div>
 
         <div fxFlex="50%">
diff --git a/src/app/accounting/frequent-postings/frequent-postings.component.html b/src/app/accounting/frequent-postings/frequent-postings.component.html
index 525621370..9985728ae 100644
--- a/src/app/accounting/frequent-postings/frequent-postings.component.html
+++ b/src/app/accounting/frequent-postings/frequent-postings.component.html
@@ -9,38 +9,38 @@
         <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Office</mat-label>
+            <mat-label>{{"labels.inputs.Office" |translate}}</mat-label>
             <mat-select required formControlName="officeId">
               <mat-option *ngFor="let office of officeData" [value]="office.id">
                 {{ office.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="frequentPostingsForm.controls.officeId.hasError('required')">
-              Office is <strong>required</strong>
+              {{"labels.inputs.Office" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Accounting Rule</mat-label>
+            <mat-label>{{"labels.inputs.Accounting Rule" |translate}}</mat-label>
             <mat-select required formControlName="accountingRule">
               <mat-option *ngFor="let accountingRule of accountingRuleData" [value]="accountingRule">
                 {{ accountingRule.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="frequentPostingsForm.controls.accountingRule.hasError('required')">
-              Accounting Rule is <strong>required</strong>
+              {{"labels.inputs.Accounting Rule" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Currency</mat-label>
+            <mat-label>{{"labels.inputs.Currency" |translate}}</mat-label>
             <mat-select required formControlName="currencyCode">
               <mat-option *ngFor="let currency of currencyData" [value]="currency.code">
                 {{ currency.displayLabel }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="frequentPostingsForm.controls.currencyCode.hasError('required')">
-              Currency is <strong>required</strong>
+              {{"labels.inputs.Currency" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -52,22 +52,22 @@
             <div fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" [formGroupName]="i">
 
               <mat-form-field fxFlex="48%">
-                <mat-label>Affected GL Entry (Debit)</mat-label>
+                <mat-label>{{"labels.inputs.Affected GL Entry (Debit)" |translate}}</mat-label>
                 <mat-select required formControlName="glAccountId">
                   <mat-option *ngFor="let affectedGLEntryDebit of debitAccountData" [value]="affectedGLEntryDebit.id">
                     {{ affectedGLEntryDebit.name }}
                   </mat-option>
                 </mat-select>
                 <mat-error *ngIf="debits.at(i).controls.glAccountId.hasError('required')">
-                  Affected GL Entry (Debit) is <strong>required</strong>
+                  {{"labels.inputs.Affected GL Entry (Debit)" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
                 </mat-error>
               </mat-form-field>
 
               <mat-form-field fxFlex="43%">
-                <mat-label>Debit Amount</mat-label>
+                <mat-label>{{"labels.inputs.Debit Amount" |translate}}</mat-label>
                 <input type="number" matInput required formControlName="amount">
                 <mat-error *ngIf="debits.at(i).controls.amount.hasError('required')">
-                  Debit Amount is <strong>required</strong>
+                  {{"labels.inputs.Debit Amount" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
                 </mat-error>
               </mat-form-field>
 
@@ -90,22 +90,22 @@
             <div fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" [formGroupName]="i">
 
               <mat-form-field fxFlex="48%">
-                <mat-label>Affected GL Entry (Credit)</mat-label>
+                <mat-label>{{"labels.inputs.Affected GL Entry (Credit)" |translate}}</mat-label>
                 <mat-select required formControlName="glAccountId">
                   <mat-option *ngFor="let affectedGLEntryCredit of creditAccountData" [value]="affectedGLEntryCredit.id">
                     {{ affectedGLEntryCredit.name }}
                   </mat-option>
                 </mat-select>
                 <mat-error *ngIf="credits.at(i).controls.glAccountId.hasError('required')">
-                  Affected GL Entry (Credit) is <strong>required</strong>
+                  {{"labels.inputs.Affected GL Entry (Credit)" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
                 </mat-error>
               </mat-form-field>
 
               <mat-form-field fxFlex="43%">
-                <mat-label>Credit Amount</mat-label>
+                <mat-label>{{"labels.inputs.Credit Amount"|translate}}</mat-label>
                 <input type="number" matInput required formControlName="amount">
                 <mat-error *ngIf="credits.at(i).controls.amount.hasError('required')">
-                  Credit Amount is <strong>required</strong>
+                  {{"labels.inputs.Credit Amount"|translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
                 </mat-error>
               </mat-form-field>
 
@@ -123,22 +123,22 @@
           </div>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Reference Number</mat-label>
+            <mat-label>{{"labels.inputs.Reference Number"|translate}}</mat-label>
             <input matInput formControlName="referenceNumber">
           </mat-form-field>
 
           <mat-form-field fxFlex="48%" (click)="transactionDatePicker.open()">
-            <mat-label>Transaction Date</mat-label>
+            <mat-label>{{"labels.inputs.Transaction Date"|translate}}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transactionDatePicker" required formControlName="transactionDate">
             <mat-datepicker-toggle matSuffix [for]="transactionDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #transactionDatePicker></mat-datepicker>
             <mat-error *ngIf="frequentPostingsForm.controls.transactionDate.hasError('required')">
-              Transaction Date is <strong>required</strong>
+              {{"labels.inputs.Transaction Date"|translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Payment Type</mat-label>
+            <mat-label>{{"labels.inputs.Payment Type"|translate}}</mat-label>
             <mat-select formControlName="paymentTypeId">
               <mat-option *ngFor="let paymentType of paymentTypeData" [value]="paymentType.id">
                 {{ paymentType.name }}
@@ -147,32 +147,32 @@
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Account Number</mat-label>
+            <mat-label>{{"labels.inputs.Account Number"|translate}}</mat-label>
             <input matInput formControlName="accountNumber">
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Cheque Number</mat-label>
+            <mat-label>{{"labels.inputs.Cheque Number"|translate}}</mat-label>
             <input matInput formControlName="checkNumber">
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Routing Code</mat-label>
+            <mat-label>{{"labels.inputs.Routing Code"|translate}}</mat-label>
             <input matInput formControlName="routingCode">
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Receipt Number</mat-label>
+            <mat-label>{{"labels.inputs.Receipt Number"|translate}}</mat-label>
             <input matInput formControlName="receiptNumber">
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Bank Number</mat-label>
+            <mat-label>{{"labels.inputs.Bank Number"|translate}}</mat-label>
             <input matInput formControlName="bankNumber">
           </mat-form-field>
 
           <mat-form-field fxFlex="98%">
-            <mat-label>Comments</mat-label>
+            <mat-label>{{"labels.inputs.Comments"|translate}}</mat-label>
             <textarea matInput formControlName="comments" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
 
@@ -181,8 +181,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]="!frequentPostingsForm.valid" *mifosxHasPermission="'CREATE_JOURNALENTRY'">Submit</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{ "labels.buttons.Cancel" | translate}}</button>
+        <button mat-raised-button color="primary" [disabled]="!frequentPostingsForm.valid" *mifosxHasPermission="'CREATE_JOURNALENTRY'">{{"labels.buttons.Submit" | translate}}</button>
       </mat-card-actions>
 
     </form>
diff --git a/src/app/accounting/migrate-opening-balances/migrate-opening-balances.component.html b/src/app/accounting/migrate-opening-balances/migrate-opening-balances.component.html
index 50f56d4d0..e8970c536 100644
--- a/src/app/accounting/migrate-opening-balances/migrate-opening-balances.component.html
+++ b/src/app/accounting/migrate-opening-balances/migrate-opening-balances.component.html
@@ -10,69 +10,70 @@
         <div #searchFormRef fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
           <mat-form-field fxFlex="88%">
-            <mat-label>Office</mat-label>
+            <mat-label>{{"labels.inputs.Office" |translate}}</mat-label>
             <mat-select required formControlName="officeId">
               <mat-option *ngFor="let office of officeData" [value]="office.id">
                 {{ office.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="openingBalancesForm.controls.officeId.hasError('required')">
-              Office is <strong>required</strong>
+              {{"labels.inputs.Office" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <div>
-            <button mat-button type="button" color="primary" fxFlex="8%" (click)="retrieveOpeningBalances()">Retrieve</button>
+            <button mat-button type="button" color="primary" fxFlex="8%" (click)="retrieveOpeningBalances()">{{ "labels.buttons.Retrieve" | translate}}</button>
           </div>
 
         </div>
 
         <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" *ngIf="openingBalancesData">
 
-          <label fxFlex="98%" class="content"><span class="header">Opening Balances Contra Account:</span>&nbsp;&nbsp;{{ openingBalancesData.contraAccount.name + ' (' + openingBalancesData.contraAccount.glCode + ')' }}</label>
+          <label fxFlex="98%" class="content"><span class="header">{{"labels.inputs.Opening Balances Contra Account:" |translate}}</span>&nbsp;&nbsp;{{ openingBalancesData.contraAccount.name + ' (' + openingBalancesData.contraAccount.glCode + ')' }}</label>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Currency</mat-label>
+            <mat-label>{{"labels.inputs.Currency" |translate}}</mat-label>
             <mat-select required formControlName="currencyCode">
               <mat-option *ngFor="let currency of currencyData" [value]="currency.code">
                 {{ currency.displayLabel }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="openingBalancesForm.controls.currencyCode.hasError('required')">
-              Currency is <strong>required</strong>
+              {{"labels.inputs.Currency" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%" (click)="openingBalancesDatePicker.open()">
-            <mat-label>Opening Balances Date</mat-label>
+            <mat-label>{{"labels.inputs.Opening Balances Date" |translate}}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="openingBalancesDatePicker" required formControlName="transactionDate">
             <mat-datepicker-toggle matSuffix [for]="openingBalancesDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #openingBalancesDatePicker></mat-datepicker>
             <mat-error *ngIf="openingBalancesForm.controls.transactionDate.hasError('required')">
-              Opening Balances Date is <strong>required</strong>
+              {{"labels.inputs.Opening Balances Date" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" class="content" fxFlex="100%">
 
             <div class="header" fxFlex="8%">
-              Type
+              {{"labels.inputs.Type" |translate}}
             </div>
 
             <div class="header" fxFlex="18%">
-              GL Code
+              {{"labels.inputs.GL Code" |translate}}
             </div>
 
             <div class="header" fxFlex="18%">
-              Account
+              {{"labels.inputs.Account" |translate}}
+              
             </div>
 
             <div class="header" fxFlex="23%">
-              Total Debit: {{ debitsSum }}
+              {{"labels.inputs.Total Debit" |translate}}: {{ debitsSum }}
             </div>
 
             <div class="header" fxFlex="23%">
-              Total Credit: {{ creditsSum }}
+              {{"labels.inputs.Total Credit" |translate}}: {{ creditsSum }}
             </div>
 
           </div>
@@ -96,14 +97,14 @@
 
               <div fxFlex="23%">
                 <mat-form-field>
-                  <mat-label>Debit</mat-label>
+                  <mat-label>{{"labels.inputs.Debit" |translate}}</mat-label>
                   <input matInput type="number" formControlName="debit">
                 </mat-form-field>
               </div>
 
               <div fxFlex="23%">
                 <mat-form-field>
-                  <mat-label>Credit</mat-label>
+                  <mat-label>{{"labels.inputs.Credit" |translate}}</mat-label>
                   <input matInput type="number" formControlName="credit">
                 </mat-form-field>
               </div>
@@ -117,8 +118,8 @@
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px" *ngIf="openingBalancesData">
-        <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
-        <button mat-raised-button color="primary" [disabled]="!openingBalancesForm.valid" *mifosxHasPermission="'DEFINEOPENINGBALANCE_JOURNALENTRY'">Submit</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">{{ "labels.buttons.Cancel" | translate}}</button>
+        <button mat-raised-button color="primary" [disabled]="!openingBalancesForm.valid" *mifosxHasPermission="'DEFINEOPENINGBALANCE_JOURNALENTRY'">{{"labels.buttons.Submit | translate}}</button>
       </mat-card-actions>
 
     </form>
@@ -128,11 +129,11 @@
 </div>
 
 <ng-template #templateSearchFormRef let-popover="popover">
-  <h2>Migrate opening balances (Office-wise)</h2>
-  <p class="mw300">This form will be used to migrate opening balances. To know more click: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/90243328/Migrate+opening+balances+Office-wise" target="_blank">Migrate opening balances (Office-wise)</a></p>
+  <h2>{{"labels.heading.Migrate opening balances (Office-wise)" |translate}}</h2>
+  <p class="mw300">{{"labels.text.Migrate Opening Balances" |translate}} <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/90243328/Migrate+opening+balances+Office-wise" target="_blank">{{"labels.inputs.Migrate opening balances (Office-wise)" |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();popover.close();previousStep();">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();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();popover.close();previousStep();">{{"labels.buttons.Back" |translate}}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();popover.close();nextStep();">{{"labels.buttons.Next" |translate}}</button>
   </div>
 </ng-template>
diff --git a/src/app/accounting/periodic-accruals/periodic-accruals.component.html b/src/app/accounting/periodic-accruals/periodic-accruals.component.html
index 127180244..a8b5ff9d4 100644
--- a/src/app/accounting/periodic-accruals/periodic-accruals.component.html
+++ b/src/app/accounting/periodic-accruals/periodic-accruals.component.html
@@ -9,12 +9,12 @@
         <div fxLayout="row">
 
           <mat-form-field fxFlex (click)="tillDatePicker.open()">
-            <mat-label>Accrue Till Date</mat-label>
+            <mat-label>{{"labels.inputs.Accrue Till Date" |translate}}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="tillDatePicker" required formControlName="tillDate">
             <mat-datepicker-toggle matSuffix [for]="tillDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #tillDatePicker></mat-datepicker>
             <mat-error *ngIf="periodicAccrualsForm.controls.tillDate.hasError('required')">
-              Accrue Date is <strong>required</strong>
+              {{"labels.inputs.Accrue Date" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -23,10 +23,10 @@
       </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]="!periodicAccrualsForm.valid" *mifosxHasPermission="'EXECUTE_PERIODICACCRUALACCOUNTING'">
           <fa-icon icon="play" class="m-r-10"></fa-icon>
-          Run Periodic Accruals
+          {{ "labels.buttons.Run Periodic Accruals" | translate}}
         </button>
       </mat-card-actions>
 
diff --git a/src/app/accounting/provisioning-entries/create-provisioning-entry/create-provisioning-entry.component.html b/src/app/accounting/provisioning-entries/create-provisioning-entry/create-provisioning-entry.component.html
index c9255e39d..47a4df2b9 100644
--- a/src/app/accounting/provisioning-entries/create-provisioning-entry/create-provisioning-entry.component.html
+++ b/src/app/accounting/provisioning-entries/create-provisioning-entry/create-provisioning-entry.component.html
@@ -9,18 +9,18 @@
         <div fxLayout="column">
 
           <mat-form-field fxFlex (click)="datePicker.open()">
-            <mat-label>Date</mat-label>
+            <mat-label>{{"labels.inputs.Date" |translate}}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="datePicker" required formControlName="date">
             <mat-datepicker-toggle matSuffix [for]="datePicker"></mat-datepicker-toggle>
             <mat-datepicker #datePicker></mat-datepicker>
             <mat-error *ngIf="provisioningEntryForm.controls.date.hasError('required')">
-              Date is <strong>required</strong>
+              {{"labels.inputs.Date" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <div fxFlex>
             <mat-checkbox labelPosition="before" formControlName="createjournalentries">
-              Create Journal Entries
+              {{"labels.inputs.Create Journal Entries" |translate}}
             </mat-checkbox>
           </div>
 
@@ -29,8 +29,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]="!provisioningEntryForm.valid" *mifosxHasPermission="'CREATE_PROVISIONING_ENTRIES'">Submit</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">{{ "labels.buttons.Cancel" | translate}}</button>
+        <button mat-raised-button color="primary" [disabled]="!provisioningEntryForm.valid" *mifosxHasPermission="'CREATE_PROVISIONING_ENTRIES'">{{"labels.buttons.Submit" | translate}}</button>
       </mat-card-actions>
 
     </form>
diff --git a/src/app/accounting/provisioning-entries/provisioning-entries.component.html b/src/app/accounting/provisioning-entries/provisioning-entries.component.html
index 39f928c23..649d0551e 100644
--- a/src/app/accounting/provisioning-entries/provisioning-entries.component.html
+++ b/src/app/accounting/provisioning-entries/provisioning-entries.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="'VIEW_ALL_PROVISIONING_ENTRIES'">
     <fa-icon icon="plus" class="m-r-10"></fa-icon>
-    Create Provisioning Entry
+    {{"labels.buttons.Create Provisioning Entry" |translate}}
   </button>
 </div>
 
@@ -19,45 +19,45 @@
     <table mat-table [dataSource]="dataSource" matSort>
 
       <ng-container matColumnDef="createdUser">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Created By </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Created By" |translate}} </th>
         <td mat-cell *matCellDef="let provisioningEntry"> {{ provisioningEntry.createdUser }} </td>
       </ng-container>
 
       <ng-container matColumnDef="createdDate">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Created On </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Created On" |translate}} </th>
         <td mat-cell *matCellDef="let provisioningEntry"> {{ provisioningEntry.createdDate }} </td>
       </ng-container>
 
       <ng-container matColumnDef="journalEntry">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Journal Entry Created </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Journal Entry Created" |translate}} </th>
         <td mat-cell *matCellDef="let provisioningEntry">
           <mat-checkbox [disabled]="true" [checked]="provisioningEntry.journalEntry"></mat-checkbox>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="viewReport">
-        <th mat-header-cell *matHeaderCellDef> View Report </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.View Report" |translate}} </th>
         <td mat-cell *matCellDef="let provisioningEntry">
           <button mat-button color="primary" [routerLink]="['view', provisioningEntry.id]">
-            <fa-icon icon="eye" class="m-r-10"></fa-icon>View
+            <fa-icon icon="eye" class="m-r-10"></fa-icon>{{"labels.buttons.View" |translate}}
           </button>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="recreateProvisioning">
-        <th mat-header-cell *matHeaderCellDef> Recreate Provisioning </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Recreate Provisioning" |translate}} </th>
         <td mat-cell *matCellDef="let provisioningEntry">
           <button mat-button (click)="recreateProvisioning($event, provisioningEntry.id)" [disabled]="provisioningEntry.journalEntry" color="primary">
-            <fa-icon icon="edit" class="m-r-10"></fa-icon>Recreate
+            <fa-icon icon="edit" class="m-r-10"></fa-icon>{{"labels.buttons.Recreate" |translate}}
           </button>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="viewJournalEntry">
-        <th mat-header-cell *matHeaderCellDef> View Journal Entry </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.View Journal Entry" |translate}} </th>
         <td mat-cell *matCellDef="let provisioningEntry">
           <button mat-button (click)="viewJournalEntry($event, provisioningEntry.id)" [disabled]="!provisioningEntry.journalEntry" color="primary">
-            <fa-icon icon="eye" class="m-r-10"></fa-icon>View
+            <fa-icon icon="eye" class="m-r-10"></fa-icon>{{"labels.buttons.View" |translate}}
           </button>
         </td>
       </ng-container>
diff --git a/src/app/accounting/provisioning-entries/view-provisioning-entry/view-provisioning-entry.component.html b/src/app/accounting/provisioning-entries/view-provisioning-entry/view-provisioning-entry.component.html
index d8ec54358..57da0dfdb 100644
--- a/src/app/accounting/provisioning-entries/view-provisioning-entry/view-provisioning-entry.component.html
+++ b/src/app/accounting/provisioning-entries/view-provisioning-entry/view-provisioning-entry.component.html
@@ -3,7 +3,7 @@
   <div class="m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
     <button mat-raised-button color="primary" (click)="createProvisioningJournalEntries()" [disabled]="provisioningEntry.journalEntry" *mifosxHasPermission="'CREATE_JOURNAL_ENTRY'">
       <fa-icon icon="plus" class="m-r-10"></fa-icon>
-      Create Journal Entries
+      {{"labels.buttons.Create Journal Entries" |translate}}
     </button>
   </div>
 
@@ -14,7 +14,7 @@
       <div fxLayout="row wrap" class="content" fxLayout.lt-md="column">
 
         <div fxFlex="16%" class="header">
-          Created By
+          {{"labels.inputs.Created By" |translate}}
         </div>
 
         <div fxFlex="16%">
@@ -22,7 +22,7 @@
         </div>
 
         <div fxFlex="16%" class="header">
-          Created On
+          {{"labels.inputs.Created On" |translate}}
         </div>
 
         <div fxFlex="16%">
@@ -30,7 +30,7 @@
         </div>
 
         <div fxFlex="18%" class="header">
-          Amount to be Reserved
+          {{"labels.inputs.Amount to be Reserved" |translate}}
         </div>
 
         <div fxFlex="18%">
@@ -49,17 +49,17 @@
 <div class="container m-t-20" fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
   <mat-form-field fxFlex="31%">
-    <mat-label>Office Name</mat-label>
+    <mat-label>{{"labels.inputs.Office Name" |translate}}</mat-label>
     <input matInput [formControl]="officeName" [matAutocomplete]="officeNameAutocomplete">
   </mat-form-field>
 
   <mat-form-field fxFlex="31%">
-    <mat-label>Loan Product</mat-label>
+    <mat-label>{{"labels.inputs.Loan Product" |translate}}</mat-label>
     <input matInput [formControl]="loanProduct" [matAutocomplete]="loanProductAutocomplete">
   </mat-form-field>
 
   <mat-form-field fxFlex="31%">
-    <mat-label>Provisioning Category</mat-label>
+    <mat-label>{{"labels.inputs.Provisioning Category" |translate}}</mat-label>
     <input matInput [formControl]="provisioningCategory" [matAutocomplete]="provisioningCategoryAutocomplete">
   </mat-form-field>
 
@@ -91,37 +91,37 @@
   <table mat-table [dataSource]="dataSource" matSort>
 
     <ng-container matColumnDef="officeName">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Office Name </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Office Name" |translate}} </th>
       <td mat-cell *matCellDef="let provisioningEntry"> {{ provisioningEntry.officeName }} </td>
     </ng-container>
 
     <ng-container matColumnDef="productName">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Product Name </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Product Name" |translate}}</th>
       <td mat-cell *matCellDef="let provisioningEntry"> {{ provisioningEntry.productName }} </td>
     </ng-container>
 
     <ng-container matColumnDef="currencyCode">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Currency Code </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Currency Code" |translate}} </th>
       <td mat-cell *matCellDef="let provisioningEntry"> {{ provisioningEntry.currencyCode }} </td>
     </ng-container>
 
     <ng-container matColumnDef="categoryName">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Category Name </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Category Name" |translate}} </th>
       <td mat-cell *matCellDef="let provisioningEntry"> {{ provisioningEntry.categoryName }} </td>
     </ng-container>
 
     <ng-container matColumnDef="amountreserved">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Provisioning Amount </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Provisioning Amount" |translate}} </th>
       <td mat-cell *matCellDef="let provisioningEntry"> {{ provisioningEntry.amountreserved }} </td>
     </ng-container>
 
     <ng-container matColumnDef="liabilityAccountName">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Liability Account (CR) </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Liability Account (CR)" |translate}} </th>
       <td mat-cell *matCellDef="let provisioningEntry"> {{ provisioningEntry.liabilityAccountName }} </td>
     </ng-container>
 
     <ng-container matColumnDef="expenseAccountName">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Expense Account (DR) </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Expense Account (DR)" |translate}} </th>
       <td mat-cell *matCellDef="let provisioningEntry"> {{ provisioningEntry.expenseAccountName }} </td>
     </ng-container>
 
diff --git a/src/app/accounting/provisioning-entries/view-provisioning-journal-entries/view-provisioning-journal-entries.component.html b/src/app/accounting/provisioning-entries/view-provisioning-journal-entries/view-provisioning-journal-entries.component.html
index b4b49bfdf..d3068672e 100644
--- a/src/app/accounting/provisioning-entries/view-provisioning-journal-entries/view-provisioning-journal-entries.component.html
+++ b/src/app/accounting/provisioning-entries/view-provisioning-journal-entries/view-provisioning-journal-entries.component.html
@@ -12,52 +12,52 @@
     <table mat-table [dataSource]="dataSource" matSort>
 
       <ng-container matColumnDef="id">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Entry ID </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Entry ID" |translate}} </th>
         <td mat-cell *matCellDef="let provisioningJournalEntry"> {{ provisioningJournalEntry.id }} </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 provisioningJournalEntry"> {{ provisioningJournalEntry.officeName }} </td>
       </ng-container>
 
       <ng-container matColumnDef="transactionDate">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Transaction Date </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Transaction Date" |translate}} </th>
         <td mat-cell *matCellDef="let provisioningJournalEntry"> {{ provisioningJournalEntry.transactionDate }} </td>
       </ng-container>
 
       <ng-container matColumnDef="transactionId">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Transaction ID </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Transaction ID" |translate}} </th>
         <td mat-cell *matCellDef="let provisioningJournalEntry"> {{ provisioningJournalEntry.transactionId }} </td>
       </ng-container>
 
       <ng-container matColumnDef="glAccountType">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Type </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Type" |translate}} </th>
         <td mat-cell *matCellDef="let provisioningJournalEntry"> {{ provisioningJournalEntry.glAccountType.value }} </td>
       </ng-container>
 
       <ng-container matColumnDef="createdByUserName">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Type </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Type" |translate}} </th>
         <td mat-cell *matCellDef="let provisioningJournalEntry"> {{ provisioningJournalEntry.createdByUserName }} </td>
       </ng-container>
 
       <ng-container matColumnDef="glAccountCode">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Account Code </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Account Code" |translate}} </th>
         <td mat-cell *matCellDef="let provisioningJournalEntry"> {{ provisioningJournalEntry.glAccountCode }} </td>
       </ng-container>
 
       <ng-container matColumnDef="glAccountName">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Account Name </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Account Name" |translate}} </th>
         <td mat-cell *matCellDef="let provisioningJournalEntry"> {{ provisioningJournalEntry.glAccountName }} </td>
       </ng-container>
 
       <ng-container matColumnDef="debit">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Debit </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Debit" |translate}} </th>
         <td mat-cell *matCellDef="let provisioningJournalEntry"><span *ngIf="provisioningJournalEntry.entryType.value === 'DEBIT'"> {{ (provisioningJournalEntry.currency.displaySymbol || provisioningJournalEntry.currency.code) + ' ' + provisioningJournalEntry.amount }} </span></td>
       </ng-container>
 
       <ng-container matColumnDef="credit">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Credit </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Credit" |translate}} </th>
         <td mat-cell *matCellDef="let provisioningJournalEntry"><span *ngIf="provisioningJournalEntry.entryType.value === 'CREDIT'"> {{ (provisioningJournalEntry.currency.displaySymbol || provisioningJournalEntry.currency.code) + ' ' + provisioningJournalEntry.amount }} </span></td>
       </ng-container>
 
diff --git a/src/app/accounting/revert-transaction/revert-transaction.component.html b/src/app/accounting/revert-transaction/revert-transaction.component.html
index aee7eba5f..4296a6ec2 100644
--- a/src/app/accounting/revert-transaction/revert-transaction.component.html
+++ b/src/app/accounting/revert-transaction/revert-transaction.component.html
@@ -1,31 +1,31 @@
 <div *ngIf="!data.reverted; else reverted">
 
-  <h1 mat-dialog-title>Revert Transaction</h1>
+  <h1 mat-dialog-title>{{ "labels.heading.Revert Transaction" |translate}}</h1>
   <div mat-dialog-content>
-    <p>Are you sure you want to revert this transaction?</p>
+    <p>{{"labels.text.Revert this transaction?" |translate}}</p>
     <mat-form-field fxFlexFill>
-      <mat-label>Comments</mat-label>
+      <mat-label>{{"labels.inputs.Comments" |translate}}</mat-label>
       <textarea matInput [formControl]="comments"></textarea>
     </mat-form-field>
   </div>
   <mat-dialog-actions align="end">
-    <button mat-button mat-dialog-close>No</button>
-    <button mat-button [mat-dialog-close]="{ revert: true, comments: comments.value }">Yes</button>
+    <button mat-button mat-dialog-close>{{"labels.buttons.No" |translate}}</button>
+    <button mat-button [mat-dialog-close]="{ revert: true, comments: comments.value }">{{"labels.buttons.Yes" |translate}}</button>
   </mat-dialog-actions>
 
 </div>
 
 <ng-template #reverted>
 
-    <h1 mat-dialog-title>Transaction Reverted</h1>
+    <h1 mat-dialog-title>{{ "labels.heading.Transaction Reverted" |translate}}</h1>
     <div mat-dialog-content>
-      <h4>Success!</h4>
-      <p>A new journal entry has been created to reverse this transaction:</p>
-      <p>Transaction ID: {{ data.transactionId }}</p>
+      <h4>{{ "labels.heading.Success!" |translate}}</h4>
+      <p>{{"labels.text.Journal entry reverse transaction" |translate}}</p>
+      <p>{{"labels.text.Transaction ID" |translate}}: {{ data.transactionId }}</p>
     </div>
     <mat-dialog-actions align="end">
-      <button mat-button mat-dialog-close>Close</button>
-      <button mat-button [mat-dialog-close]="{ redirect: true }">Redirect to New Transaction</button>
+      <button mat-button mat-dialog-close>{{"labels.buttons.Close" |translate}}</button>
+      <button mat-button [mat-dialog-close]="{ redirect: true }">{{"labels.buttons.Redirect to New Transaction" |translate}}</button>
     </mat-dialog-actions>
 
 </ng-template>
diff --git a/src/app/accounting/search-journal-entry/search-journal-entry.component.html b/src/app/accounting/search-journal-entry/search-journal-entry.component.html
index 21cf2fa34..67d1e3050 100644
--- a/src/app/accounting/search-journal-entry/search-journal-entry.component.html
+++ b/src/app/accounting/search-journal-entry/search-journal-entry.component.html
@@ -1,12 +1,12 @@
 <div class="container" fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
   <mat-form-field fxFlex="31%">
-    <mat-label>Office Name</mat-label>
+    <mat-label>{{"labels.inputs.Office Name" |translate}}</mat-label>
     <input matInput [formControl]="officeName" [matAutocomplete]="officeNameAutocomplete">
   </mat-form-field>
 
   <mat-form-field fxFlex="31%">
-    <mat-label>GL Account Name or Code</mat-label>
+    <mat-label>{{"labels.inputs.GL Account Name or Code" |translate}}</mat-label>
     <input matInput [formControl]="glAccount" [matAutocomplete]="glAccountAutocomplete">
   </mat-form-field>
 
@@ -20,33 +20,33 @@
   </mat-form-field>
 
   <mat-form-field fxFlex="31%" (click)="transactionDateFromPicker.open()">
-    <mat-label>Transaction Date From</mat-label>
+    <mat-label>{{"labels.inputs.Transaction Date From" |translate}}</mat-label>
     <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transactionDateFromPicker" [formControl]="transactionDateFrom">
     <mat-datepicker-toggle matSuffix [for]="transactionDateFromPicker"></mat-datepicker-toggle>
     <mat-datepicker #transactionDateFromPicker></mat-datepicker>
   </mat-form-field>
 
   <mat-form-field fxFlex="31%" (click)="transactionDateToPicker.open()">
-    <mat-label>Transaction Date To</mat-label>
+    <mat-label>{{"labels.inputs.Transaction Date To" |translate}}</mat-label>
     <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transactionDateToPicker" [formControl]="transactionDateTo">
     <mat-datepicker-toggle matSuffix [for]="transactionDateToPicker"></mat-datepicker-toggle>
     <mat-datepicker #transactionDateToPicker></mat-datepicker>
   </mat-form-field>
 
   <mat-form-field fxFlex="31%">
-    <mat-label>Transaction ID</mat-label>
+    <mat-label>{{"labels.inputs.Transaction ID" |translate}}</mat-label>
     <input matInput [formControl]="transactionId">
   </mat-form-field>
 
   <mat-form-field fxFlex="31%" (click)="submittedOnDateFromPicker.open()">
-    <mat-label>Submitted on Date From</mat-label>
+    <mat-label>{{"labels.inputs.Submitted on Date From" |translate}}</mat-label>
     <input matInput [max]="submittedOnDateTo.value" [matDatepicker]="submittedOnDateFromPicker" [formControl]="submittedOnDateFrom">
     <mat-datepicker-toggle matSuffix [for]="submittedOnDateFromPicker"></mat-datepicker-toggle>
     <mat-datepicker #submittedOnDateFromPicker></mat-datepicker>
   </mat-form-field>
 
   <mat-form-field fxFlex="31%" (click)="submittedOnDateToPicker.open()">
-    <mat-label>Submitted on Date To</mat-label>
+    <mat-label>{{"labels.inputs.Submitted on Date To" |translate}} </mat-label>
     <input matInput [min]="submittedOnDateFrom.value"  [matDatepicker]="submittedOnDateToPicker" [formControl]="submittedOnDateTo">
     <mat-datepicker-toggle matSuffix [for]="submittedOnDateToPicker"></mat-datepicker-toggle>
     <mat-datepicker #submittedOnDateToPicker></mat-datepicker>
@@ -74,62 +74,62 @@
   <table mat-table [dataSource]="dataSource" matSort>
 
     <ng-container matColumnDef="id">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Entry ID </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>  {{"labels.inputs.Entry ID" |translate}} </th>
       <td mat-cell *matCellDef="let journalEntry"> {{ journalEntry.id }} </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 journalEntry"> {{ journalEntry.officeName }} </td>
     </ng-container>
 
     <ng-container matColumnDef="transactionId">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Transaction ID </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Transaction ID" |translate}} </th>
       <td mat-cell *matCellDef="let journalEntry"> {{ journalEntry.transactionId }} </td>
     </ng-container>
 
     <ng-container matColumnDef="transactionDate">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Transaction Date </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Transaction Date" |translate}} </th>
       <td mat-cell *matCellDef="let journalEntry"> {{ journalEntry.transactionDate | dateFormat }} </td>
     </ng-container>
 
     <ng-container matColumnDef="glAccountType">
-      <th mat-header-cell *matHeaderCellDef> Type </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Type" |translate}} </th>
       <td mat-cell *matCellDef="let journalEntry"> {{ journalEntry.glAccountType.value }} </td>
     </ng-container>
 
     <ng-container matColumnDef="createdByUserName">
-      <th mat-header-cell *matHeaderCellDef> Created by </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Created By" |translate}} </th>
       <td mat-cell *matCellDef="let journalEntry"> {{ journalEntry.createdByUserName }} </td>
     </ng-container>
 
     <ng-container matColumnDef="submittedOnDate">
-      <th mat-header-cell *matHeaderCellDef> Submitted on date </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Submitted on date" |translate}}  </th>
       <td mat-cell *matCellDef="let journalEntry"> {{ journalEntry.submittedOnDate | datetimeFormat }} </td>
     </ng-container>
 
     <ng-container matColumnDef="glAccountCode">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Account Code </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Account Code" |translate}} </th>
       <td mat-cell *matCellDef="let journalEntry"> {{ journalEntry.glAccountCode }} </td>
     </ng-container>
 
     <ng-container matColumnDef="glAccountName">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Account Name </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Account Name" |translate}} </th>
       <td mat-cell *matCellDef="let journalEntry"> {{ journalEntry.glAccountName }} </td>
     </ng-container>
 
     <ng-container matColumnDef="currency">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Currency </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Currency" |translate}} </th>
       <td mat-cell *matCellDef="let journalEntry">{{ journalEntry.currency.code }}</td>
     </ng-container>
 
     <ng-container matColumnDef="debit">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Debit </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Debit" |translate}} </th>
       <td mat-cell *matCellDef="let journalEntry"><span *ngIf="journalEntry.entryType.value === 'DEBIT'"> {{ journalEntry.amount | formatNumber }} </span></td>
     </ng-container>
 
     <ng-container matColumnDef="credit">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Credit </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Credit" |translate}} </th>
       <td mat-cell *matCellDef="let journalEntry"><span *ngIf="journalEntry.entryType.value === 'CREDIT'"> {{ journalEntry.amount | formatNumber }} </span></td>
     </ng-container>