From c483e015f4d65794275096002a0b0ec5429015ba Mon Sep 17 00:00:00 2001
From: RADHA THAKARE <67684749+radhathakare@users.noreply.github.com>
Date: Sat, 16 Sep 2023 01:48:01 +0530
Subject: [PATCH] feat:Shares Translate Module (#1815)

---
 .../create-shares-account.component.html      |  8 ++--
 .../edit-shares-account.component.html        |  8 ++--
 .../activate-shares-account.component.html    |  8 ++--
 .../apply-shares/apply-shares.component.html  | 14 +++---
 .../approve-shares-account.component.html     | 10 ++--
 .../approve-share-dialog.component.html       |  8 ++--
 .../approve-shares.component.html             | 12 ++---
 .../close-shares-account.component.html       | 10 ++--
 .../redeem-shares.component.html              | 14 +++---
 .../reject-shares-account.component.html      | 10 ++--
 .../reject-share-dialog.component.html        |  8 ++--
 .../reject-shares.component.html              | 12 ++---
 ...ndo-approval-shares-account.component.html |  6 +--
 ...shares-account-charges-step.component.html | 18 +++----
 ...shares-account-details-step.component.html | 14 +++---
 ...shares-account-preview-step.component.html | 48 +++++++++----------
 .../shares-account-terms-step.component.html  | 38 +++++++--------
 .../charges-tab/charges-tab.component.html    | 18 +++----
 .../dividends-tab.component.html              | 10 ++--
 .../shares-account-view.component.html        | 38 +++++++--------
 .../transactions-tab.component.html           | 14 +++---
 21 files changed, 163 insertions(+), 163 deletions(-)

diff --git a/src/app/shares/create-shares-account/create-shares-account.component.html b/src/app/shares/create-shares-account/create-shares-account.component.html
index 8322c89bd..357e5353c 100644
--- a/src/app/shares/create-shares-account/create-shares-account.component.html
+++ b/src/app/shares/create-shares-account/create-shares-account.component.html
@@ -24,7 +24,7 @@
 
     <mat-step [stepControl]="sharesAccountDetailsForm">
 
-      <ng-template matStepLabel>DETAILS</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.DETAILS'  |translate}}</ng-template>
 
       <mifosx-shares-account-details-step
         [sharesAccountTemplate]="sharesAccountTemplate" 
@@ -36,7 +36,7 @@
 
     <mat-step [stepControl]="sharesAccountTermsForm">
 
-      <ng-template matStepLabel>TERMS</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.TERMS'  |translate}}</ng-template>
 
       <mifosx-shares-account-terms-step [sharesAccountProductTemplate]="sharesAccountProductTemplate"></mifosx-shares-account-terms-step>
 
@@ -44,7 +44,7 @@
 
     <mat-step>
 
-      <ng-template matStepLabel>CHARGES</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.CHARGES'  |translate}}</ng-template>
 
       <mifosx-shares-account-charges-step
         [sharesAccountProductTemplate]="sharesAccountProductTemplate"
@@ -57,7 +57,7 @@
 
     <mat-step *ngIf="sharesAccountFormValid" completed>
 
-      <ng-template matStepLabel>PREVIEW</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.PREVIEW'  |translate}}</ng-template>
 
       <mifosx-shares-account-preview-step
         [sharesAccountProductTemplate]="sharesAccountProductTemplate"
diff --git a/src/app/shares/edit-shares-account/edit-shares-account.component.html b/src/app/shares/edit-shares-account/edit-shares-account.component.html
index dee1f3272..7c32d0e82 100644
--- a/src/app/shares/edit-shares-account/edit-shares-account.component.html
+++ b/src/app/shares/edit-shares-account/edit-shares-account.component.html
@@ -24,7 +24,7 @@
 
     <mat-step [stepControl]="sharesAccountDetailsForm">
 
-      <ng-template matStepLabel>DETAILS</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.DETAILS'  |translate}}</ng-template>
 
       <mifosx-shares-account-details-step
         [sharesAccountTemplate]="sharesAccountAndTemplate" 
@@ -36,7 +36,7 @@
 
     <mat-step [stepControl]="sharesAccountTermsForm">
 
-      <ng-template matStepLabel>TERMS</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.TERMS'  |translate}}</ng-template>
 
       <mifosx-shares-account-terms-step 
         [sharesAccountProductTemplate]="sharesAccountProductTemplate"
@@ -47,7 +47,7 @@
 
     <mat-step>
 
-      <ng-template matStepLabel>CHARGES</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.CHARGES'  |translate}}</ng-template>
 
       <mifosx-shares-account-charges-step
         [sharesAccountProductTemplate]="sharesAccountProductTemplate"
@@ -60,7 +60,7 @@
 
     <mat-step *ngIf="sharesAccountFormValidAndNotPristine" completed>
 
-      <ng-template matStepLabel>PREVIEW</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.PREVIEW'  |translate}}</ng-template>
 
       <mifosx-shares-account-preview-step
         [sharesAccountProductTemplate]="sharesAccountProductTemplate"
diff --git a/src/app/shares/shares-account-actions/activate-shares-account/activate-shares-account.component.html b/src/app/shares/shares-account-actions/activate-shares-account/activate-shares-account.component.html
index e186b2784..9eebf4671 100644
--- a/src/app/shares/shares-account-actions/activate-shares-account/activate-shares-account.component.html
+++ b/src/app/shares/shares-account-actions/activate-shares-account/activate-shares-account.component.html
@@ -7,20 +7,20 @@
       <mat-card-content>
 
           <mat-form-field fxFlex (click)="activatedDatePicker.open()">
-            <mat-label>Activated On Date</mat-label>
+            <mat-label>{{ 'labels.inputs.Activated On Date'  |translate}}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="activatedDatePicker" required formControlName="activatedDate">
             <mat-datepicker-toggle matSuffix [for]="activatedDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #activatedDatePicker></mat-datepicker>
             <mat-error *ngIf="activateSharesAccountForm.controls.activatedDate.hasError('required')">
-              Activated On Date is <strong>required</strong>
+              {{ 'labels.inputs.Activated On Date'  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
-        <button mat-raised-button  [disabled]="!activateSharesAccountForm.valid">Confirm</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{'labels.buttons.Cancel'  |translate}}</button>
+        <button mat-raised-button  [disabled]="!activateSharesAccountForm.valid">{{'labels.buttons.Confirm'  |translate}}</button>
       </mat-card-actions>
 
     </form>
diff --git a/src/app/shares/shares-account-actions/apply-shares/apply-shares.component.html b/src/app/shares/shares-account-actions/apply-shares/apply-shares.component.html
index 42658aa54..d6503cd14 100644
--- a/src/app/shares/shares-account-actions/apply-shares/apply-shares.component.html
+++ b/src/app/shares/shares-account-actions/apply-shares/apply-shares.component.html
@@ -9,25 +9,25 @@
         <div fxLayout="column">
 
           <mat-form-field (click)="requestedDatePicker.open()">
-            <mat-label>Request Date</mat-label>
+            <mat-label>{{ 'labels.inputs.Request Date'  |translate}}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="requestedDatePicker" required formControlName="requestedDate">
             <mat-datepicker-toggle matSuffix [for]="requestedDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #requestedDatePicker></mat-datepicker>
             <mat-error *ngIf="applySharesForm.controls.requestedDate.hasError('required')">
-              Request Date is <strong>required</strong>
+              {{ 'labels.inputs.Request Date'  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Total No. of Shares</mat-label>
+            <mat-label>{{ 'labels.inputs.Total No. of Shares'  |translate}}</mat-label>
             <input matInput required formControlName="requestedShares">
             <mat-error *ngIf="applySharesForm.controls.requestedShares.hasError('required')">
-              Requested Shares is <strong>required</strong>
+              {{ 'labels.inputs.Requested Shares'  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Today's Price</mat-label>
+            <mat-label>{{ 'labels.inputs.Today's Price'  |translate}}</mat-label>
             <input matInput required formControlName="unitPrice">
           </mat-form-field>
 
@@ -36,8 +36,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  [disabled]="!applySharesForm.valid">Confirm</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{'labels.buttons.Cancel'  |translate}}</button>
+        <button mat-raised-button  [disabled]="!applySharesForm.valid">{{'labels.buttons.Confirm'  |translate}}</button>
       </mat-card-actions>
 
     </form>
diff --git a/src/app/shares/shares-account-actions/approve-shares-account/approve-shares-account.component.html b/src/app/shares/shares-account-actions/approve-shares-account/approve-shares-account.component.html
index 488631491..c65f35ab1 100644
--- a/src/app/shares/shares-account-actions/approve-shares-account/approve-shares-account.component.html
+++ b/src/app/shares/shares-account-actions/approve-shares-account/approve-shares-account.component.html
@@ -9,17 +9,17 @@
         <div fxLayout="column">
 
           <mat-form-field (click)="approvedDatePicker.open()">
-            <mat-label>Approved On Date</mat-label>
+            <mat-label>{{ 'labels.inputs.Approved On Date'  |translate}}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="approvedDatePicker" required formControlName="approvedDate">
             <mat-datepicker-toggle matSuffix [for]="approvedDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #approvedDatePicker></mat-datepicker>
             <mat-error *ngIf="approveSharesAccountForm.controls.approvedDate.hasError('required')">
-              Approved On Date is <strong>required</strong>
+              {{ 'labels.inputs.Approved On Date'  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Note</mat-label>
+            <mat-label>{{ 'labels.inputs.Note'  |translate}}</mat-label>
             <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
 
@@ -28,8 +28,8 @@
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
-        <button mat-raised-button  [disabled]="!approveSharesAccountForm.valid">Confirm</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{'labels.buttons.Cancel'  |translate}}</button>
+        <button mat-raised-button  [disabled]="!approveSharesAccountForm.valid">{{'labels.buttons.Confirm'  |translate}}</button>
       </mat-card-actions>
 
     </form>
diff --git a/src/app/shares/shares-account-actions/approve-shares/approve-share-dialog/approve-share-dialog.component.html b/src/app/shares/shares-account-actions/approve-shares/approve-share-dialog/approve-share-dialog.component.html
index 5a074beed..dc9fa8b79 100644
--- a/src/app/shares/shares-account-actions/approve-shares/approve-share-dialog/approve-share-dialog.component.html
+++ b/src/app/shares/shares-account-actions/approve-shares/approve-share-dialog/approve-share-dialog.component.html
@@ -1,8 +1,8 @@
-<h1 mat-dialog-title>Approve Share</h1>
+<h1 mat-dialog-title>{{'labels.heading.Approve Share'  |translate}}</h1>
 <div mat-dialog-content>
-  <p>Are you sure you want to approve share with id: {{ data.shareId }} ?</p>
+  <p>{{'labels.text.Are you sure you want to approve share with id'  |translate}}: {{ data.shareId }} ?</p>
 </div>
 <mat-dialog-actions align="end">
-  <button mat-raised-button mat-dialog-close>Cancel</button>
-  <button mat-raised-button  [mat-dialog-close]="{ approve: true }">Confirm</button>
+  <button mat-raised-button mat-dialog-close>{{'labels.buttons.Cancel'  |translate}}</button>
+  <button mat-raised-button  [mat-dialog-close]="{ approve: true }">{{'labels.buttons.Confirm'  |translate}}</button>
 </mat-dialog-actions>
diff --git a/src/app/shares/shares-account-actions/approve-shares/approve-shares.component.html b/src/app/shares/shares-account-actions/approve-shares/approve-shares.component.html
index c3dfe3d71..d2482ea77 100644
--- a/src/app/shares/shares-account-actions/approve-shares/approve-shares.component.html
+++ b/src/app/shares/shares-account-actions/approve-shares/approve-shares.component.html
@@ -5,31 +5,31 @@
     <table #sharesTable mat-table [dataSource]="dataSource" matSort>
 
       <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 share"> {{ share.purchasedDate  | dateFormat }}</td>
       </ng-container>
 
       <ng-container matColumnDef="totalShares">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Total Shares </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Total Shares'  |translate}} </th>
         <td mat-cell *matCellDef="let share"> {{ share.numberOfShares }} </td>
       </ng-container>
 
       <ng-container matColumnDef="redeemedPrice">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Purchased/Redeemed Price </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Purchased/Redeemed Price'  |translate}} </th>
         <td mat-cell *matCellDef="let share"> {{ share.purchasedPrice }} </td>
       </ng-container>
 
       <ng-container matColumnDef="status">
-        <th mat-header-cell *matHeaderCellDef> Status </th>
+        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Status'  |translate}} </th>
         <td mat-cell *matCellDef="let share">
           <i class="fa fa-stop" [ngClass]="share.status.code|statusLookup" [matTooltip]="share.status.value"></i>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="approve">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Confirm Approve </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Confirm Approve'  |translate}} </th>
         <td mat-cell *matCellDef="let share">
-          <button class="share-action-button" mat-raised-button color="accent" matTooltip="Approve Share"
+          <button class="share-action-button" mat-raised-button color="accent" matTooltip="{{ 'tooltips.Approve Share'  |translate}}"
             (click)="approve(share.id)">
             <i class="fa fa-check"></i>
           </button>
diff --git a/src/app/shares/shares-account-actions/close-shares-account/close-shares-account.component.html b/src/app/shares/shares-account-actions/close-shares-account/close-shares-account.component.html
index ba030bbaf..c4554c1ca 100644
--- a/src/app/shares/shares-account-actions/close-shares-account/close-shares-account.component.html
+++ b/src/app/shares/shares-account-actions/close-shares-account/close-shares-account.component.html
@@ -9,17 +9,17 @@
         <div fxLayout="column">
 
           <mat-form-field (click)="closedDatePicker.open()">
-            <mat-label>Closed On Date</mat-label>
+            <mat-label>{{ 'labels.inputs.Closed On Date'  |translate}}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="closedDatePicker" required formControlName="closedDate">
             <mat-datepicker-toggle matSuffix [for]="closedDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #closedDatePicker></mat-datepicker>
             <mat-error *ngIf="closeSharesAccountForm.controls.closedDate.hasError('required')">
-              Closed On Date is <strong>required</strong>
+              {{ 'labels.inputs.Closed On Date'  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Note</mat-label>
+            <mat-label>{{ 'labels.inputs.Note'  |translate}}</mat-label>
             <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
 
@@ -28,8 +28,8 @@
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
-        <button mat-raised-button color="warn" [disabled]="!closeSharesAccountForm.valid">Confirm</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{'labels.buttons.Cancel'  |translate}}</button>
+        <button mat-raised-button color="warn" [disabled]="!closeSharesAccountForm.valid">{{'labels.buttons.Confirm'  |translate}}</button>
       </mat-card-actions>
 
     </form>
diff --git a/src/app/shares/shares-account-actions/redeem-shares/redeem-shares.component.html b/src/app/shares/shares-account-actions/redeem-shares/redeem-shares.component.html
index e630ecaa0..5523862de 100644
--- a/src/app/shares/shares-account-actions/redeem-shares/redeem-shares.component.html
+++ b/src/app/shares/shares-account-actions/redeem-shares/redeem-shares.component.html
@@ -9,25 +9,25 @@
         <div fxLayout="column">
 
           <mat-form-field (click)="requestedDatePicker.open()">
-            <mat-label>Request Date</mat-label>
+            <mat-label>{{ 'labels.inputs.Request Date'  |translate}}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="requestedDatePicker" required formControlName="requestedDate">
             <mat-datepicker-toggle matSuffix [for]="requestedDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #requestedDatePicker></mat-datepicker>
             <mat-error *ngIf="redeemSharesForm.controls.requestedDate.hasError('required')">
-              Request Date is <strong>required</strong>
+              {{ 'labels.inputs.Request Date'  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Total No. of Shares</mat-label>
+            <mat-label>{{ 'labels.inputs.Total No. of Shares'  |translate}}</mat-label>
             <input matInput required formControlName="requestedShares">
             <mat-error *ngIf="redeemSharesForm.controls.requestedShares.hasError('required')">
-              Requested Shares is <strong>required</strong>
+              {{ 'labels.inputs.Requested Shares'  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Today's Price</mat-label>
+            <mat-label>{{ 'labels.inputs.Today's Price'  |translate}}</mat-label>
             <input matInput required formControlName="unitPrice">
           </mat-form-field>
 
@@ -36,8 +36,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="warn" [disabled]="!redeemSharesForm.valid">Confirm</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{'labels.buttons.Cancel'  |translate}}</button>
+        <button mat-raised-button color="warn" [disabled]="!redeemSharesForm.valid">{{'labels.buttons.Confirm'  |translate}}</button>
       </mat-card-actions>
 
     </form>
diff --git a/src/app/shares/shares-account-actions/reject-shares-account/reject-shares-account.component.html b/src/app/shares/shares-account-actions/reject-shares-account/reject-shares-account.component.html
index cb22e8aa9..7d2795f4b 100644
--- a/src/app/shares/shares-account-actions/reject-shares-account/reject-shares-account.component.html
+++ b/src/app/shares/shares-account-actions/reject-shares-account/reject-shares-account.component.html
@@ -9,17 +9,17 @@
         <div fxLayout="column">
 
           <mat-form-field (click)="rejectedDatePicker.open()">
-            <mat-label>Rejected On Date</mat-label>
+            <mat-label>{{ 'labels.inputs.Rejected On Date'  |translate}}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="rejectedDatePicker" required formControlName="rejectedDate">
             <mat-datepicker-toggle matSuffix [for]="rejectedDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #rejectedDatePicker></mat-datepicker>
             <mat-error *ngIf="rejectSharesAccountForm.controls.rejectedDate.hasError('required')">
-              Rejected On Date is <strong>required</strong>
+              {{ 'labels.inputs.Rejected On Date'  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Note</mat-label>
+            <mat-label>{{ 'labels.inputs.Note'  |translate}}</mat-label>
             <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
 
@@ -28,8 +28,8 @@
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
-        <button mat-raised-button color="warn" [disabled]="!rejectSharesAccountForm.valid">Confirm</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{'labels.buttons.Cancel'  |translate}}</button>
+        <button mat-raised-button color="warn" [disabled]="!rejectSharesAccountForm.valid">{{'labels.buttons.Confirm'  |translate}}</button>
       </mat-card-actions>
 
     </form>
diff --git a/src/app/shares/shares-account-actions/reject-shares/reject-share-dialog/reject-share-dialog.component.html b/src/app/shares/shares-account-actions/reject-shares/reject-share-dialog/reject-share-dialog.component.html
index 89fb620ac..c183bdccc 100644
--- a/src/app/shares/shares-account-actions/reject-shares/reject-share-dialog/reject-share-dialog.component.html
+++ b/src/app/shares/shares-account-actions/reject-shares/reject-share-dialog/reject-share-dialog.component.html
@@ -1,8 +1,8 @@
-<h1 mat-dialog-title>Reject Share</h1>
+<h1 mat-dialog-title>{{ 'labels.heading.Reject Share'  |translate}}</h1>
 <div mat-dialog-content>
-  <p>Are you sure you want to reject share with id: {{ data.shareId }} ?</p>
+  <p>{{'labels.text.Are you sure you want to reject share with id'  |translate}}: {{ data.shareId }} ?</p>
 </div>
 <mat-dialog-actions align="end">
-  <button mat-raised-button mat-dialog-close>Cancel</button>
-  <button mat-raised-button color="warn" [mat-dialog-close]="{ reject: true }">Confirm</button>
+  <button mat-raised-button mat-dialog-close>{{'labels.buttons.Cancel'  |translate}}</button>
+  <button mat-raised-button color="warn" [mat-dialog-close]="{ reject: true }">{{'labels.buttons.Confirm'  |translate}}</button>
 </mat-dialog-actions>
diff --git a/src/app/shares/shares-account-actions/reject-shares/reject-shares.component.html b/src/app/shares/shares-account-actions/reject-shares/reject-shares.component.html
index 5ce8add1c..335dfdc17 100644
--- a/src/app/shares/shares-account-actions/reject-shares/reject-shares.component.html
+++ b/src/app/shares/shares-account-actions/reject-shares/reject-shares.component.html
@@ -5,31 +5,31 @@
     <table #sharesTable mat-table [dataSource]="dataSource" matSort>
 
       <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 share"> {{ share.purchasedDate  | dateFormat }}</td>
       </ng-container>
 
       <ng-container matColumnDef="totalShares">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Total Shares </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Total Shares'  |translate}} </th>
         <td mat-cell *matCellDef="let share"> {{ share.numberOfShares }} </td>
       </ng-container>
 
       <ng-container matColumnDef="redeemedPrice">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Purchased/Redeemed Price </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Purchased/Redeemed Price'  |translate}} </th>
         <td mat-cell *matCellDef="let share"> {{ share.purchasedPrice }} </td>
       </ng-container>
 
       <ng-container matColumnDef="status">
-        <th mat-header-cell *matHeaderCellDef> Status </th>
+        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Status'  |translate}} </th>
         <td mat-cell *matCellDef="let share">
           <i class="fa fa-stop" [ngClass]="share.status.code|statusLookup" [matTooltip]="share.status.value"></i>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="reject">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Confirm Reject </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Confirm Reject'  |translate}}t </th>
         <td mat-cell *matCellDef="let share">
-          <button class="share-action-button" mat-raised-button color="warn" matTooltip="Reject Share"
+          <button class="share-action-button" mat-raised-button color="warn" matTooltip="{{ 'tooltips.Reject Share'  |translate}}"
             (click)="reject(share.id)">
             <i class="fa fa-times"></i>
           </button>
diff --git a/src/app/shares/shares-account-actions/undo-approval-shares-account/undo-approval-shares-account.component.html b/src/app/shares/shares-account-actions/undo-approval-shares-account/undo-approval-shares-account.component.html
index 15d939e5c..2d37bd72e 100644
--- a/src/app/shares/shares-account-actions/undo-approval-shares-account/undo-approval-shares-account.component.html
+++ b/src/app/shares/shares-account-actions/undo-approval-shares-account/undo-approval-shares-account.component.html
@@ -9,7 +9,7 @@
         <div>
 
           <p class="mat-typography confirm-text">
-            Are you sure you want to undo approval of shares account with ID: {{accountId}} ?
+            {{'labels.text.Undo approval of shares account with ID'  |translate}}: {{accountId}} ?
           </p>
 
         </div>
@@ -17,8 +17,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="warn">Confirm</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{'labels.buttons.Cancel'  |translate}}</button>
+        <button mat-raised-button color="warn">{{'labels.buttons.Confirm'  |translate}}</button>
       </mat-card-actions>
 
     </form>
diff --git a/src/app/shares/shares-account-stepper/shares-account-charges-step/shares-account-charges-step.component.html b/src/app/shares/shares-account-stepper/shares-account-charges-step/shares-account-charges-step.component.html
index 3f25e6a83..b1598cac9 100644
--- a/src/app/shares/shares-account-stepper/shares-account-charges-step/shares-account-charges-step.component.html
+++ b/src/app/shares/shares-account-stepper/shares-account-charges-step/shares-account-charges-step.component.html
@@ -1,7 +1,7 @@
 <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
   <mat-form-field fxFlex="48%">
-    <mat-label>Charge</mat-label>
+    <mat-label>{{ 'labels.inputs.Charge'  |translate}}</mat-label>
     <mat-select #charge>
       <mat-option *ngFor="let charge of chargeData | chargesFilter:chargesDataSource:currencyCode.value" [value]="charge">
         {{ charge.name }}
@@ -12,28 +12,28 @@
   <div fxFlex="48%" fxFlexAlign="center">
     <button type="button" mat-raised-button color="primary" (click)="addCharge(charge)" [disabled]="!charge.value">
       <fa-icon icon="plus" class="m-r-10"></fa-icon>
-      Add
+      {{'labels.buttons.Add'  |translate}}
     </button>
   </div>
 
   <table fxFlex="98%" class="mat-elevation-z1" mat-table [dataSource]="chargesDataSource" [hidden]="chargesDataSource.length === 0">
 
     <ng-container matColumnDef="name">
-      <th mat-header-cell *matHeaderCellDef> Name </th>
+      <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.name'  |translate}} </th>
       <td mat-cell *matCellDef="let charge">
         {{ charge.name + ', ' + charge.currency.displaySymbol }}
       </td>
     </ng-container>
 
     <ng-container matColumnDef="chargeCalculationType">
-      <th mat-header-cell *matHeaderCellDef> Type </th>
+      <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Type'  |translate}} </th>
       <td mat-cell *matCellDef="let charge">
         {{ charge.chargeCalculationType.value }}
       </td>
     </ng-container>
 
     <ng-container matColumnDef="amount">
-      <th mat-header-cell *matHeaderCellDef> Amount </th>
+      <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Amount'  |translate}} </th>
       <td mat-cell *matCellDef="let charge">
         {{ charge.amount || charge.amountOrPercentage }}
         <button mat-icon-button color="primary" (click)="editCharge(charge)">
@@ -43,14 +43,14 @@
     </ng-container>
 
     <ng-container matColumnDef="chargeTimeType">
-      <th mat-header-cell *matHeaderCellDef> Collected On </th>
+      <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Collected On'  |translate}} </th>
       <td mat-cell *matCellDef="let charge">
         {{ charge.chargeTimeType.value }}
       </td>
     </ng-container>
 
     <ng-container matColumnDef="action">
-      <th mat-header-cell *matHeaderCellDef> Actions </th>
+      <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Actions'  |translate}} </th>
       <td mat-cell *matCellDef="let charge">
         <button mat-icon-button color="warn" (click)="deleteCharge(charge)">
           <fa-icon icon="trash"></fa-icon>
@@ -68,10 +68,10 @@
 <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
   <button mat-raised-button matStepperPrevious>
     <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
-    Previous
+    {{'labels.buttons.Previous'  |translate}}
   </button>
   <button mat-raised-button matStepperNext>
-    Next
+    {{'labels.buttons.Next'  |translate}}
     <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
   </button>
 </div>
diff --git a/src/app/shares/shares-account-stepper/shares-account-details-step/shares-account-details-step.component.html b/src/app/shares/shares-account-stepper/shares-account-details-step/shares-account-details-step.component.html
index 241d0e42a..82b8b7365 100644
--- a/src/app/shares/shares-account-stepper/shares-account-details-step/shares-account-details-step.component.html
+++ b/src/app/shares/shares-account-stepper/shares-account-details-step/shares-account-details-step.component.html
@@ -3,30 +3,30 @@
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Product Name</mat-label>
+      <mat-label>{{ 'labels.inputs.Product Name'  |translate}}</mat-label>
       <mat-select formControlName="productId" required>
         <mat-option *ngFor="let product of productData" [value]="product.id">
           {{ product.name }}
         </mat-option>
       </mat-select>
       <mat-error>
-        Product Name is <strong>required</strong>
+        {{ 'labels.inputs.Product Name'  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%" (click)="submittedOnDatePicker.open()">
-      <mat-label>Submitted On</mat-label>
+      <mat-label>{{ 'labels.inputs.Submitted On'  |translate}}</mat-label>
       <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="submittedOnDatePicker"
         formControlName="submittedDate" required>
       <mat-datepicker-toggle matSuffix [for]="submittedOnDatePicker"></mat-datepicker-toggle>
       <mat-datepicker #submittedOnDatePicker></mat-datepicker>
       <mat-error>
-        Submission Date is <strong>required</strong>
+        {{ 'labels.inputs.Submission Date'  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>External ID</mat-label>
+      <mat-label>{{ 'labels.inputs.External ID'  |translate}}</mat-label>
       <input matInput formControlName="externalId">
     </mat-form-field>
 
@@ -35,10 +35,10 @@
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious disabled>
       <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
-      Previous
+      {{'labels.buttons.Previous'  |translate}}
     </button>
     <button mat-raised-button matStepperNext>
-      Next
+      {{'labels.buttons.Next'  |translate}}
       <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
     </button>
   </div>
diff --git a/src/app/shares/shares-account-stepper/shares-account-preview-step/shares-account-preview-step.component.html b/src/app/shares/shares-account-stepper/shares-account-preview-step/shares-account-preview-step.component.html
index b8f9e74e6..ef0174eb4 100644
--- a/src/app/shares/shares-account-stepper/shares-account-preview-step/shares-account-preview-step.component.html
+++ b/src/app/shares/shares-account-stepper/shares-account-preview-step/shares-account-preview-step.component.html
@@ -1,114 +1,114 @@
 <div fxLayout="row wrap" fxLayout.lt-md="column">
 
-  <h3 class="mat-h3" fxFlexFill>Details</h3>
+  <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Details'  |translate}}</h3>
 
   <mat-divider fxFlexFill></mat-divider>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Product</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Product'  |translate}}</span>
     <span fxFlex="60%">{{ sharesAccount.productId | find:sharesAccountTemplate.productOptions:'id':'name' }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Submitted On</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Submitted On'  |translate}}</span>
     <span fxFlex="60%">{{ sharesAccount.submittedDate  | dateFormat }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">External Id</span>
+    <span fxFlex="40%">{{ 'labels.inputs.External Id'  |translate}}</span>
     <span fxFlex="60%" *ngIf="sharesAccount.externalId">
       <mifosx-external-identifier externalId="{{sharesAccount.externalId}}"></mifosx-external-identifier>
     </span>
     <span fxFlex="60%" *ngIf="!sharesAccount.externalId">
-      Unassigned
+      {{ 'labels.inputs.Unassigned'  |translate}}
     </span>
   </div>
 
-  <h3 class="mat-h3" fxFlexFill>Terms</h3>
+  <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Terms'  |translate}}</h3>
 
   <mat-divider fxFlexFill></mat-divider>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Currency</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Currency'  |translate}}</span>
     <span fxFlex="60%">{{ sharesAccountTermsForm.get('currencyCode').value | find:[sharesAccountProductTemplate.currency]:'code':'displayLabel' }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Decimal Places</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Decimal Places'  |translate}}</span>
     <span fxFlex="60%">{{ sharesAccountTermsForm.get('decimal').value }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Total Number of Shares</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Total Number of Shares'  |translate}}</span>
     <span fxFlex="60%">{{ sharesAccount.requestedShares }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Today's Price</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Today's Price'  |translate}}</span>
     <span fxFlex="60%">{{ sharesAccountTermsForm.get('unitPrice').value }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Currency in multiples of</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Currency in multiples of'  |translate}}</span>
     <span fxFlex="60%">{{ sharesAccountTermsForm.get('currencyMultiple').value }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Default Savings Account</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Default Savings Account'  |translate}}</span>
     <span fxFlex="60%">{{ sharesAccount.savingsAccountId | find:sharesAccountProductTemplate.clientSavingsAccounts:'id':'accountNo' }}</span>
   </div>
 
   <div fxFlexFill *ngIf="sharesAccount.minimumActivePeriod">
-    <span fxFlex="40%">Minimum Active Period</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Minimum Active Period'  |translate}}</span>
     <span fxFlex="60%">{{sharesAccount.minimumActivePeriod}}&nbsp;{{sharesAccount.minimumActivePeriodFrequencyType | find:sharesAccountProductTemplate.minimumActivePeriodFrequencyTypeOptions:'id':'value'}}</span>
   </div>
 
   <div fxFlexFill *ngIf="sharesAccount.lockinPeriodFrequency">
-    <span fxFlex="40%">Lock-in Period</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Lock-in Period'  |translate}}</span>
     <span fxFlex="60%">{{sharesAccount.lockinPeriodFrequency}}&nbsp;{{sharesAccount.lockinPeriodFrequencyType | find:sharesAccountProductTemplate.lockinPeriodFrequencyTypeOptions:'id':'value'}}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Application Date</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Application Date'  |translate}}</span>
     <span fxFlex="60%">{{ sharesAccount.applicationDate  | dateFormat }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Allow dividends for inactive clients</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Allow dividends for inactive clients'  |translate}}</span>
     <span fxFlex="60%">{{ sharesAccount.allowDividendCalculationForInactiveClients }}</span>
   </div>
 
   <div fxFlexFill *ngIf="sharesAccount.charges.length" fxLayout="row wrap" fxLayout.lt-md="column">
 
-    <h3 class="mat-h3" fxFlexFill>Charges</h3>
+    <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Charges'  |translate}}</h3>
 
     <mat-divider fxFlexFill></mat-divider>
 
     <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="sharesAccount.charges">
 
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef> Name </th>
+        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.name'  |translate}} </th>
         <td mat-cell *matCellDef="let charge">
           {{ charge.name + ', ' + charge.currency.displaySymbol }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="chargeCalculationType">
-        <th mat-header-cell *matHeaderCellDef> Type </th>
+        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Type'  |translate}} </th>
         <td mat-cell *matCellDef="let charge">
           {{ charge.chargeCalculationType.value }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="amount">
-        <th mat-header-cell *matHeaderCellDef> Amount </th>
+        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Amount'  |translate}} </th>
         <td mat-cell *matCellDef="let charge">
           {{ charge.amount || charge.amountOrPercentage }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="chargeTimeType">
-        <th mat-header-cell *matHeaderCellDef> Collected On </th>
+        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Collected On'  |translate}} </th>
         <td mat-cell *matCellDef="let charge">
           {{ charge.chargeTimeType.value }}
         </td>
@@ -126,12 +126,12 @@
 <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
   <button mat-raised-button matStepperPrevious>
     <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
-    Previous
+    {{'labels.buttons.Previous'  |translate}}
   </button>
   <button mat-raised-button [routerLink]="['../']">
-    Cancel
+    {{'labels.buttons.Cancel'  |translate}}
   </button>
   <button mat-raised-button color="primary" (click)="submit.emit()">
-    Submit
+    {{'labels.buttons.Submit'  |translate}}
   </button>
 </div>
diff --git a/src/app/shares/shares-account-stepper/shares-account-terms-step/shares-account-terms-step.component.html b/src/app/shares/shares-account-stepper/shares-account-terms-step/shares-account-terms-step.component.html
index 8eab76305..7c1dc4f4d 100644
--- a/src/app/shares/shares-account-stepper/shares-account-terms-step/shares-account-terms-step.component.html
+++ b/src/app/shares/shares-account-stepper/shares-account-terms-step/shares-account-terms-step.component.html
@@ -3,69 +3,69 @@
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" fxLayoutAlign.gt-sm="start center">
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Currency</mat-label>
+      <mat-label>{{ 'labels.inputs.Currency'  |translate}}</mat-label>
       <input matInput formControlName="currencyCode">
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Decimal Places</mat-label>
+      <mat-label>{{ 'labels.inputs.Decimal Places'  |translate}}</mat-label>
       <input type="number" matInput formControlName="decimal">
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Total Number of Shares</mat-label>
+      <mat-label>{{ 'labels.inputs.Total Number of Shares'  |translate}}</mat-label>
       <input type="number" matInput formControlName="requestedShares" required>
       <mat-error>
-        Total Number of Shares is <strong>required</strong>
+        {{ 'labels.inputs.Total Number of Shares'  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Today's Price</mat-label>
+      <mat-label>{{ 'labels.inputs.Today's Price'  |translate}}</mat-label>
       <input type="number" matInput formControlName="unitPrice">
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Currency in multiples of</mat-label>
+      <mat-label>{{ 'labels.inputs.Currency in multiples of'  |translate}}</mat-label>
       <input type="number" matInput formControlName="currencyMultiple" >
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Default Savings Account</mat-label>
+      <mat-label>{{ 'labels.inputs.Default Savings Account'  |translate}}</mat-label>
       <mat-select formControlName="savingsAccountId" required>
         <mat-option *ngFor="let account of savingsAccountsData" [value]="account.id">
           {{ account.accountNo }}
         </mat-option>
       </mat-select>
       <mat-error>
-        Default Savings Account is <strong>required</strong>
+        {{ 'labels.inputs.Default Savings Account'  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%" (click)="applicationDatePicker.open()">
-      <mat-label>Application Date</mat-label>
+      <mat-label>{{ 'labels.inputs.Application Date'  |translate}}</mat-label>
       <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="applicationDatePicker"
         formControlName="applicationDate" required>
       <mat-datepicker-toggle matSuffix [for]="applicationDatePicker"></mat-datepicker-toggle>
       <mat-datepicker #applicationDatePicker></mat-datepicker>
       <mat-error>
-        Application Date is <strong>required</strong>
+        {{ 'labels.inputs.Application Date'  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-checkbox labelPosition="before" formControlName="allowDividendCalculationForInactiveClients" fxFlex="48%">
-      Allow dividends for inactive clients
+      {{ 'labels.inputs.Allow dividends for inactive clients'  |translate}}
     </mat-checkbox>
 
-    <h4 fxFlex="98%" class="mat-h4">Minimum Active Period</h4>
+    <h4 fxFlex="98%" class="mat-h4">{{ 'labels.heading.Minimum Active Period'  |translate}}</h4>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Frequency</mat-label>
+      <mat-label>{{ 'labels.inputs.Frequency'  |translate}}</mat-label>
       <input type="number" matInput formControlName="minimumActivePeriod">
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Type</mat-label>
+      <mat-label>{{ 'labels.inputs.Type'  |translate}}</mat-label>
       <mat-select formControlName="minimumActivePeriodFrequencyType">
         <mat-option *ngFor="let minimumActivePeriodFrequencyType of minimumActivePeriodFrequencyTypeData" [value]="minimumActivePeriodFrequencyType.id">
           {{ minimumActivePeriodFrequencyType.value }}
@@ -73,15 +73,15 @@
       </mat-select>
     </mat-form-field>
 
-    <h4 fxFlex="98%" class="mat-h4">Lock-in Period</h4>
+    <h4 fxFlex="98%" class="mat-h4">{{ 'labels.heading.Lock-in Period'  |translate}}</h4>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Frequency</mat-label>
+      <mat-label>{{ 'labels.inputs.Frequency'  |translate}}</mat-label>
       <input type="number" matInput formControlName="lockinPeriodFrequency">
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Type</mat-label>
+      <mat-label>{{ 'labels.inputs.Type'  |translate}}</mat-label>
       <mat-select formControlName="lockinPeriodFrequencyType">
         <mat-option *ngFor="let lockinPeriodFrequencyType of lockinPeriodFrequencyTypeData" [value]="lockinPeriodFrequencyType.id">
           {{ lockinPeriodFrequencyType.value }}
@@ -94,10 +94,10 @@
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious disabled>
       <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
-      Previous
+      {{'labels.buttons.Previous'  |translate}}
     </button>
     <button mat-raised-button matStepperNext>
-      Next
+      {{'labels.buttons.Next'  |translate}}
       <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
     </button>
   </div>
diff --git a/src/app/shares/shares-account-view/charges-tab/charges-tab.component.html b/src/app/shares/shares-account-view/charges-tab/charges-tab.component.html
index 51aec2e82..b2f40c4f4 100644
--- a/src/app/shares/shares-account-view/charges-tab/charges-tab.component.html
+++ b/src/app/shares/shares-account-view/charges-tab/charges-tab.component.html
@@ -1,7 +1,7 @@
 <div class="tab-container mat-typography">
 
   <div class="m-b-10">
-    <h3>All Charges</h3>
+    <h3>{{ 'labels.heading.All Charges'  |translate}}</h3>
   </div>
 
   <div class="mat-elevation-z1 m-b-25">
@@ -9,42 +9,42 @@
     <table mat-table [dataSource]="dataSource">
 
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef> Name </th>
+        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.name'  |translate}} </th>
         <td mat-cell *matCellDef="let charge"> {{ charge.name }} </td>
       </ng-container>
 
       <ng-container matColumnDef="feeOrPenalty">
-        <th mat-header-cell *matHeaderCellDef> Fee/Penalty </th>
+        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Fee/Penalty'  |translate}} </th>
         <td mat-cell *matCellDef="let charge"> {{ charge.penalty === true ? 'Penalty' : 'Fee' }} </td>
       </ng-container>
 
       <ng-container matColumnDef="paymentDueAt">
-        <th mat-header-cell *matHeaderCellDef> Payment Due At </th>
+        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Payment Due At'  |translate}} </th>
         <td mat-cell *matCellDef="let charge"> {{ charge.chargeTimeType.value }} </td>
       </ng-container>
 
       <ng-container matColumnDef="calculationType">
-        <th mat-header-cell *matHeaderCellDef> Calculation Type </th>
+        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Calculation Type'  |translate}} </th>
         <td mat-cell *matCellDef="let charge"> {{charge.chargeCalculationType.value}} </td>
       </ng-container>
 
       <ng-container matColumnDef="due">
-        <th mat-header-cell *matHeaderCellDef> Due </th>
+        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Due'  |translate}} </th>
         <td mat-cell *matCellDef="let charge"> {{charge.currency.displaySymbol}}&nbsp;{{charge.amount}} </td>
       </ng-container>
 
       <ng-container matColumnDef="paid">
-        <th mat-header-cell *matHeaderCellDef> Paid </th>
+        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Paid'  |translate}} </th>
         <td mat-cell *matCellDef="let charge"> {{charge.currency.displaySymbol}}&nbsp;{{charge.amountPaid}} </td>
       </ng-container>
 
       <ng-container matColumnDef="waived">
-        <th mat-header-cell *matHeaderCellDef> Waived </th>
+        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Waived'  |translate}} </th>
         <td mat-cell *matCellDef="let charge"> {{charge.currency.displaySymbol}}&nbsp;{{charge.amountWaived}} </td>
       </ng-container>
 
       <ng-container matColumnDef="outstanding">
-        <th mat-header-cell *matHeaderCellDef> Outstanding </th>
+        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Outstanding'  |translate}} </th>
         <td mat-cell *matCellDef="let charge"> {{charge.currency.displaySymbol}}&nbsp;{{charge.amountOutstanding}} </td>
       </ng-container>
 
diff --git a/src/app/shares/shares-account-view/dividends-tab/dividends-tab.component.html b/src/app/shares/shares-account-view/dividends-tab/dividends-tab.component.html
index 861cf9442..386494e21 100644
--- a/src/app/shares/shares-account-view/dividends-tab/dividends-tab.component.html
+++ b/src/app/shares/shares-account-view/dividends-tab/dividends-tab.component.html
@@ -1,7 +1,7 @@
 <div class="tab-container mat-typography">
 
   <div class="m-b-10">
-    <h3>All Dividends</h3>
+    <h3>{{ 'labels.inputs.All Dividends'  |translate}}</h3>
   </div>
 
   <div class="mat-elevation-z1 m-b-25">
@@ -9,22 +9,22 @@
     <table mat-table [dataSource]="dataSource" >
 
       <ng-container matColumnDef="transactionDate">
-        <th mat-header-cell *matHeaderCellDef> Transaction Date </th>
+        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Transaction Date'  |translate}} </th>
         <td mat-cell *matCellDef="let dividend"> {{dividend.postedDate  | dateFormat}} </td>
       </ng-container>
 
       <ng-container matColumnDef="amount">
-        <th mat-header-cell *matHeaderCellDef> Amount </th>
+        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Amount'  |translate}} </th>
         <td mat-cell *matCellDef="let dividend"> {{shareAccountData.currency.displaySymbol}}&nbsp;{{dividend.amount}} </td>
       </ng-container>
 
       <ng-container matColumnDef="transactionReference">
-        <th mat-header-cell *matHeaderCellDef> Transaction Reference </th>
+        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Transaction Reference'  |translate}} </th>
         <td mat-cell *matCellDef="let dividend"> {{dividend.savingsTransactionId}} </td>
       </ng-container>
 
       <ng-container matColumnDef="status">
-        <th mat-header-cell *matHeaderCellDef> status </th>
+        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Status'  |translate}} </th>
         <td mat-cell *matCellDef="let dividend"> {{dividend.status.value}} </td>
       </ng-container>
 
diff --git a/src/app/shares/shares-account-view/shares-account-view.component.html b/src/app/shares/shares-account-view/shares-account-view.component.html
index d2804b973..80ee43074 100644
--- a/src/app/shares/shares-account-view/shares-account-view.component.html
+++ b/src/app/shares/shares-account-view/shares-account-view.component.html
@@ -7,7 +7,7 @@
       <div class="profile-image-container">
         <div>
           <img mat-card-md-image class="profile-image"
-            matTooltip="Shares Account"
+            matTooltip="{{ 'tooltips.Shares Account'  |translate}}"
             src="assets/images/shares_account_placeholder.png">
         </div>
       </div>
@@ -16,14 +16,14 @@
         <mat-card-title>
           <h3>
             <i class="fa fa-stop" [ngClass]="sharesAccountData.status.code | statusLookup" [matTooltip]="sharesAccountData.status.value"></i>
-              Account Name : {{sharesAccountData.productName}}
+            {{ 'labels.heading.Account Name'  |translate}} : {{sharesAccountData.productName}}
           </h3>
         </mat-card-title>
         <mat-card-subtitle>
           <p>
-            Account #: {{sharesAccountData.accountNo}} | Client Name: {{sharesAccountData.clientName}}<br/>
-            Current Market Price: {{sharesAccountData.currency.displaySymbol}}&nbsp;{{sharesAccountData.currentMarketPrice}}<br/>
-            Lockin Period: {{sharesAccountData.lockinPeriod ? sharesAccountData.lockinPeriod : 'N/A'}}
+            {{ 'labels.inputs.Account'  |translate}} #: {{sharesAccountData.accountNo}} | {{ 'labels.inputs.Client Name'  |translate}}: {{sharesAccountData.clientName}}<br/>
+            {{ 'labels.inputs.Current Market Price'  |translate}}: {{sharesAccountData.currency.displaySymbol}}&nbsp;{{sharesAccountData.currentMarketPrice}}<br/>
+            {{ 'labels.inputs.Lockin Period'  |translate}}: {{sharesAccountData.lockinPeriod ? sharesAccountData.lockinPeriod : 'N/A'}}
             {{sharesAccountData.lockinPeriod ? sharesAccountData.lockPeriodTypeEnum.value : ''}}
           </p>
         </mat-card-subtitle>
@@ -39,7 +39,7 @@
       </ng-container>
 
       <ng-container *ngIf="buttonConfig.options.length">
-        <button mat-raised-button [matMenuTriggerFor]="More">More</button>
+        <button mat-raised-button [matMenuTriggerFor]="More">{{ 'labels.heading.More'  |translate}}</button>
         <mat-menu #More="matMenu">
         <span *ngFor="let option of buttonConfig.options">
           <button mat-menu-item *mifosxHasPermission="option.taskPermissionName" (click)="doAction(option.name)">{{option.name}}</button>
@@ -56,33 +56,33 @@
     <div class="shares-account-tables" fxLayout="row" fxLayoutGap="2%">
 
       <div fxFlex="49%">
-        <h4 class="table-headers">Shares Details</h4>
+        <h4 class="table-headers">{{ 'labels.heading.Shares Details'  |translate}}</h4>
         <table>
           <tbody>
             <tr>
-              <td>Activated On</td>
+              <td>{{ 'labels.inputs.Activated On'  |translate}}</td>
               <td>{{sharesAccountData.timeline.activatedOnDate ? (sharesAccountData.timeline.activatedOnDate  | dateFormat) : 'Not Activated'}}</td>
             </tr>
             <tr>
-              <td>Currency</td>
+              <td>{{ 'labels.inputs.Currency'  |translate}}</td>
               <td>{{sharesAccountData.currency.name}} [{{sharesAccountData.currency.code}}]</td>
             </tr>
             <tr>
-              <td>External Id</td>
+              <td>{{ 'labels.inputs.External Id'  |translate}}</td>
               <td *ngIf="sharesAccountData.externalId">
                 <mifosx-external-identifier externalId="{{sharesAccountData.externalId}}"></mifosx-external-identifier>
               </td>
               <td *ngIf="!sharesAccountData.externalId">
-                Unassigned
+                {{ 'labels.inputs.Unassigned'  |translate}}
               </td>
             </tr>
             <tr>
-              <td>Linked Savings Account(Dividend Posting)</td>
+              <td>{{ 'labels.inputs.Linked Savings Account(Dividend Posting)'  |translate}}</td>
               <td *ngIf="sharesAccountData.savingsAccountNumber">
                 <mifosx-account-number accountNo="{{sharesAccountData.savingsAccountNumber}}"></mifosx-account-number>
               </td>
               <td *ngIf="!sharesAccountData.savingsAccountNumber">
-                Unassigned
+                {{ 'labels.inputs.Unassigned'  |translate}}
               </td>
             </tr>
           </tbody>
@@ -90,15 +90,15 @@
       </div>
 
       <div fxFlex="49%">
-        <h4 class="table-headers">Account Summary</h4>
+        <h4 class="table-headers">{{ 'labels.heading.Account Summary'  |translate}}</h4>
         <table>
           <tbody>
             <tr>
-              <td>Approved Shares</td>
+              <td>{{ 'labels.inputs.Approved Shares'  |translate}}</td>
               <td>{{sharesAccountData.summary.totalApprovedShares}}</td>
             </tr>
             <tr>
-              <td>Pending for Approval Shares</td>
+              <td>{{ 'labels.inputs.Pending for Approval Shares'  |translate}}</td>
               <td>{{sharesAccountData.summary.totalPendingForApprovalShares}}</td>
             </tr>
           </tbody>
@@ -110,15 +110,15 @@
     <nav mat-tab-nav-bar class="navigation-tabs">
       <a mat-tab-link [routerLink]="['./transactions']" routerLinkActive #transactions="routerLinkActive"
       [active]="transactions.isActive" *mifosxHasPermission="'READ_SHAREACCOUNTPURCHASE'">
-        Transactions
+      {{ 'labels.inputs.Transactions'  |translate}}
       </a>
       <a mat-tab-link [routerLink]="['./charges']" routerLinkActive #charges="routerLinkActive"
       [active]="charges.isActive" *mifosxHasPermission="'READ_SHAREACCOUNTCHARGE'">
-        Charges
+      {{ 'labels.inputs.Charges'  |translate}}
       </a>
       <a mat-tab-link [routerLink]="['./dividends']" routerLinkActive #dividends="routerLinkActive"
       [active]="dividends.isActive" *mifosxHasPermission="'READ_SHAREACCOUNTDIVIDENDS'">
-        Dividends
+      {{ 'labels.inputs.Dividends'  |translate}}
       </a>
     </nav>
 
diff --git a/src/app/shares/shares-account-view/transactions-tab/transactions-tab.component.html b/src/app/shares/shares-account-view/transactions-tab/transactions-tab.component.html
index 364e33d15..6878869d7 100644
--- a/src/app/shares/shares-account-view/transactions-tab/transactions-tab.component.html
+++ b/src/app/shares/shares-account-view/transactions-tab/transactions-tab.component.html
@@ -1,7 +1,7 @@
 <div class="tab-container mat-typography">
 
   <div class="m-b-10">
-    <h3>All Transactions</h3>
+    <h3>{{ 'labels.heading.All Transactions'  |translate}}</h3>
   </div>
 
   <div class="mat-elevation-z1 m-b-25">
@@ -9,32 +9,32 @@
     <table mat-table [dataSource]="dataSource">
 
       <ng-container matColumnDef="transactionDate">
-        <th mat-header-cell *matHeaderCellDef> Transaction Date </th>
+        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Transaction Date'  |translate}} </th>
         <td mat-cell *matCellDef="let transaction"> {{transaction.purchasedDate  | dateFormat}} </td>
       </ng-container>
 
       <ng-container matColumnDef="transactionType">
-        <th mat-header-cell *matHeaderCellDef> Transaction Type </th>
+        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Transaction Type'  |translate}} </th>
         <td mat-cell *matCellDef="let transaction"> {{transaction.type.value}} {{transaction.type.value !== "Charge Payment" ? ('(' + transaction.status.value + ')') : ''}}</td>
       </ng-container>
 
       <ng-container matColumnDef="totalShares">
-        <th mat-header-cell *matHeaderCellDef> Total Shares </th>
+        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Total Shares'  |translate}} </th>
         <td mat-cell *matCellDef="let transaction"> {{transaction.numberOfShares}} </td>
       </ng-container>
 
       <ng-container matColumnDef="purchasedOrRedeemedPrice">
-        <th mat-header-cell *matHeaderCellDef> Purhcased/Redeemed Price </th>
+        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Purhcased/Redeemed Price'  |translate}} </th>
         <td mat-cell *matCellDef="let transaction">{{shareAccountData.currency.displaySymbol}}&nbsp;{{transaction.purchasedPrice}}</td>
       </ng-container>
 
       <ng-container matColumnDef="chargeAmount">
-        <th mat-header-cell *matHeaderCellDef> Charge Amount </th>
+        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Charge Amount'  |translate}} </th>
         <td mat-cell *matCellDef="let transaction">{{shareAccountData.currency.displaySymbol}}&nbsp;{{transaction.type.value === "Charge Payment" ? transaction.amount : transaction.chargeAmount}}</td>
       </ng-container>
 
       <ng-container matColumnDef="amountRecievedOrReturned">
-        <th mat-header-cell *matHeaderCellDef> Amount Recieved/Returned </th>
+        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Amount Recieved/Returned'  |translate}} </th>
         <td mat-cell *matCellDef="let transaction">{{shareAccountData.currency.displaySymbol}}&nbsp;{{transaction.amount}}</td>
       </ng-container>