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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

src/app/savings/savings-account-stepper/savings-account-preview-step/savings-account-preview-step.component.html

@@ -11,7 +11,7 @@
 
   <div fxFlexFill>
     <span fxFlex="40%">Submitted On</span>
-    <span fxFlex="60%">{{ savingsAccount.submittedOnDate  | dateFormat }}</span>
+    <span fxFlex="60%">{{ savingsAccount.submittedOnDate | dateFormat }}</span>
   </div>
 
   <div fxFlexFill>
@@ -146,10 +146,10 @@
         <th mat-header-cell *matHeaderCellDef> Date </th>
         <td mat-cell *matCellDef="let charge">
           <span *ngIf="charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee'">
-            {{(charge.dueDate  | dateFormat) || 'Unassigned'}}
+            {{(charge.dueDate | dateFormat) || 'Unassigned'}}
           </span>
           <span *ngIf="charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'">
-            {{(charge.feeOnMonthDay  | dateFormat) || 'Unassigned'}}
+            {{(charge.feeOnMonthDay | dateFormat) || 'Unassigned'}}
           </span>
           <span
             *ngIf="!(charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'

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

@@ -31,7 +31,7 @@
 
       <ng-container matColumnDef="dueAsOf">
         <th mat-header-cell *matHeaderCellDef> Due As Of </th>
-        <td mat-cell *matCellDef="let charge"> {{ charge.dueDate  | dateFormat }} </td>
+        <td mat-cell *matCellDef="let charge"> {{ charge.dueDate | dateFormat }} </td>
       </ng-container>
 
       <ng-container matColumnDef="repeatsOn">

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

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

src/app/savings/savings-account-view/standing-instructions-tab/standing-instructions-tab.component.html

@@ -35,7 +35,7 @@
 
       <ng-container matColumnDef="validity">
         <th mat-header-cell *matHeaderCellDef> Validity </th>
-        <td mat-cell *matCellDef="let instruction">{{instruction.validFrom  | dateFormat}} to {{instruction.validTill  | dateFormat}}</td>
+        <td mat-cell *matCellDef="let instruction">{{instruction.validFrom | dateFormat}} to {{instruction.validTill | dateFormat}}</td>
       </ng-container>
 
       <ng-container matColumnDef="actions">

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

@@ -21,7 +21,7 @@
 
       <ng-container matColumnDef="date">
         <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header> Transaction Date </th>
-        <td mat-cell *matCellDef="let transaction"> {{ transaction.date  | dateFormat }} </td>
+        <td mat-cell *matCellDef="let transaction"> {{ transaction.date | dateFormat }} </td>
       </ng-container>
 
       <ng-container matColumnDef="transactionType">

src/app/savings/savings-account-view/transactions/view-transaction/savings-transaction-general-tab/savings-transaction-general-tab.component.html

@@ -81,7 +81,7 @@
       </div>
 
       <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="2%" fxLayout.lt-md="column">
-        <button type="button" mat-raised-button color="primary" [routerLink]="['../']">{{ 'Back' | translate }}</button>
+        <button type="button" mat-raised-button color="primary" [routerLink]="['../']">{{ 'Back' | translate}}</button>
       </div>
     </mat-card-content>
 

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

@@ -75,7 +75,7 @@
         </div>
 
         <div fxFlex="50%">
-          {{ chargeData.dueDate  | dateFormat }}
+          {{ chargeData.dueDate | dateFormat }}
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
@@ -121,7 +121,7 @@
       </div>
 
       <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="2%" fxLayout.lt-md="column">
-        <button type="button" mat-raised-button color="primary" [routerLink]="['../']">{{ 'Back' | translate }}</button>
+        <button type="button" mat-raised-button color="primary" [routerLink]="['../']">{{ 'Back' | translate}}</button>
       </div>
     </mat-card-content>
 

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

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