i18n: Adding new languages: Part 2 (#1885)

Co-authored-by: radhathakare <radhathakare322@gmail.com>

src/app/deposits/fixed-deposits/create-fixed-deposit-account/create-fixed-deposit-account.component.html

@@ -24,7 +24,7 @@
 
     <mat-step [stepControl]="fixedDepositAccountDetailsForm">
 
-      <ng-template matStepLabel>DETAILS</ng-template>
+      <ng-template matStepLabel>{{"labels.inputs.DETAILS" | translate }}</ng-template>
 
       <mifosx-fixed-deposit-account-details-step
         [fixedDepositsAccountTemplate]="fixedDepositsAccountTemplate"
@@ -35,7 +35,7 @@
 
     <mat-step [stepControl]="fixedDepositAccountDetailsForm.get('productId')">
 
-      <ng-template matStepLabel>CURRENCY</ng-template>
+      <ng-template matStepLabel>{{"labels.inputs.CURRENCY" | translate }}</ng-template>
 
       <mifosx-fixed-deposit-account-currency-step
         [fixedDepositsAccountTemplate]="fixedDepositsAccountTemplate"
@@ -46,7 +46,7 @@
 
     <mat-step [stepControl]="fixedDepositAccountTermsForm">
 
-      <ng-template matStepLabel>TERMS</ng-template>
+      <ng-template matStepLabel>{{"labels.inputs.TERMS" | translate }}</ng-template>
 
       <mifosx-fixed-deposit-account-terms-step
         [fixedDepositsAccountTemplate]="fixedDepositsAccountTemplate"
@@ -57,7 +57,7 @@
 
     <mat-step [stepControl]="fixedDepositAccountSettingsForm">
 
-      <ng-template matStepLabel>SETTINGS</ng-template>
+      <ng-template matStepLabel>{{"labels.inputs.SETTINGS" | translate }}</ng-template>
 
       <mifosx-fixed-deposit-account-settings-step
         [fixedDepositsAccountTemplate]="fixedDepositsAccountTemplate"
@@ -68,7 +68,7 @@
 
     <mat-step>
 
-      <ng-template matStepLabel>INTEREST RATE CHART</ng-template>
+      <ng-template matStepLabel>{{"labels.inputs.INTEREST RATE CHART" | translate }}</ng-template>
 
       <mifosx-fixed-deposit-account-interest-rate-chart-step
         [fixedDepositsAccountTemplate]="fixedDepositsAccountTemplate"
@@ -79,7 +79,7 @@
 
     <mat-step>
 
-      <ng-template matStepLabel>CHARGES</ng-template>
+      <ng-template matStepLabel>{{"labels.inputs.CHARGES" | translate }}</ng-template>
 
       <mifosx-fixed-deposit-account-charges-step
         [fixedDepositsAccountTemplate]="fixedDepositsAccountTemplate"
@@ -92,7 +92,7 @@
 
     <mat-step state="preview" *ngIf="fixedDepositAccountFormValid" completed>
 
-      <ng-template matStepLabel>PREVIEW</ng-template>
+      <ng-template matStepLabel>{{"labels.inputs.PREVIEW" | translate }}</ng-template>
 
       <mifosx-fixed-deposit-account-preview-step
         [fixedDepositsAccountTemplate]="fixedDepositsAccountTemplate"

src/app/deposits/fixed-deposits/edit-fixed-deposit-account/edit-fixed-deposit-account.component.html

@@ -24,7 +24,7 @@
 
     <mat-step [stepControl]="fixedDepositAccountDetailsForm">
 
-      <ng-template matStepLabel>DETAILS</ng-template>
+      <ng-template matStepLabel>{{"labels.inputs.DETAILS" | translate }}</ng-template>
 
       <mifosx-fixed-deposit-account-details-step
         [fixedDepositsAccountTemplate]="fixedDepositsAccountAndTemplate"
@@ -35,7 +35,7 @@
 
     <mat-step [stepControl]="fixedDepositAccountDetailsForm.get('productId')">
 
-      <ng-template matStepLabel>CURRENCY</ng-template>
+      <ng-template matStepLabel>{{"labels.inputs.CURRENCY" | translate }}</ng-template>
 
       <mifosx-fixed-deposit-account-currency-step
         [fixedDepositsAccountTemplate]="fixedDepositsAccountAndTemplate"
@@ -46,7 +46,7 @@
 
     <mat-step [stepControl]="fixedDepositAccountTermsForm">
 
-      <ng-template matStepLabel>TERMS</ng-template>
+      <ng-template matStepLabel>{{"labels.inputs.TERMS" | translate }}</ng-template>
 
       <mifosx-fixed-deposit-account-terms-step
         [fixedDepositsAccountTemplate]="fixedDepositsAccountAndTemplate"
@@ -57,7 +57,7 @@
 
     <mat-step [stepControl]="fixedDepositAccountSettingsForm">
 
-      <ng-template matStepLabel>SETTINGS</ng-template>
+      <ng-template matStepLabel>{{"labels.inputs.SETTINGS" | translate }}</ng-template>
 
       <mifosx-fixed-deposit-account-settings-step
         [fixedDepositsAccountTemplate]="fixedDepositsAccountAndTemplate"
@@ -68,7 +68,7 @@
 
     <mat-step>
 
-      <ng-template matStepLabel>INTEREST RATE CHART</ng-template>
+      <ng-template matStepLabel>{{"labels.inputs.INTEREST RATE CHART" | translate }}</ng-template>
 
       <mifosx-fixed-deposit-account-interest-rate-chart-step
         [fixedDepositsAccountTemplate]="fixedDepositsAccountAndTemplate"
@@ -79,7 +79,7 @@
 
     <mat-step>
 
-      <ng-template matStepLabel>CHARGES</ng-template>
+      <ng-template matStepLabel>{{"labels.inputs.CHARGES" | translate }}</ng-template>
 
       <mifosx-fixed-deposit-account-charges-step
         [fixedDepositsAccountTemplate]="fixedDepositsAccountAndTemplate"
@@ -92,7 +92,7 @@
 
     <mat-step state="preview" *ngIf="fixedDepositAccountFormValidAndNotPristine" completed>
 
-      <ng-template matStepLabel>PREVIEW</ng-template>
+      <ng-template matStepLabel>{{"labels.inputs.PREVIEW" | translate }}</ng-template>
 
       <mifosx-fixed-deposit-account-preview-step
         [fixedDepositsAccountTemplate]="fixedDepositsAccountAndTemplate"

src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-charges-step/fixed-deposit-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">
@@ -13,28 +13,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 }}
         <button mat-icon-button color="primary" (click)="editChargeAmount(charge)">
@@ -44,14 +44,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="date">
-      <th mat-header-cell *matHeaderCellDef> Date </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Date" | translate }} </th>
       <td mat-cell *matCellDef="let charge">
         <span *ngIf="charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee'">
           {{(charge.dueDate | dateFormat) || 'Unassigned*'}}
@@ -61,7 +61,7 @@
         </span>
         <span *ngIf="!(charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'
                 || charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee')">
-          N/A
+                {{"labels.inputs.N/A" | translate }}
         </span>
         <button mat-icon-button color="primary" *ngIf="charge.chargeTimeType.value === 'Weekly Fee' || charge.chargeTimeType.value === 'Annual Fee'
                       || charge.chargeTimeType.value === 'Specified due date'" (click)="editChargeDate(charge)">
@@ -71,7 +71,7 @@
     </ng-container>
 
     <ng-container matColumnDef="repaymentsEvery">
-      <th mat-header-cell *matHeaderCellDef> Repayments Every </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Repayments Every" | translate }} </th>
       <td mat-cell *matCellDef="let charge">
         {{ charge.feeInterval || 'Not Provided' }}
         <button mat-icon-button color="primary"
@@ -83,7 +83,7 @@
     </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>
@@ -101,10 +101,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 [disabled]="!fixedDepositAccountFormValid">
-    Next
+    {{"labels.buttons.Next" | translate }}
     <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
   </button>
 </div>

src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-currency-step/fixed-deposit-account-currency-step.component.html

@@ -3,17 +3,17 @@
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Currency</mat-label>
+      <mat-label>{{"labels.inputs.Currency" | translate }}</mat-label>
       <input type="text" 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="decimalPlaces"  >
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Currency Multiple</mat-label>
+      <mat-label>{{"labels.inputs.Currency Multiple" | translate }}</mat-label>
       <input type="number" matInput formControlName="currencyMultiple">
     </mat-form-field>
 
@@ -22,10 +22,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>

src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-details-step/fixed-deposit-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="submittedOnDate" 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>Field Officer</mat-label>
+      <mat-label>{{"labels.inputs.Field Officer" | translate }}</mat-label>
       <mat-select formControlName="fieldOfficerId">
         <mat-option *ngFor="let officer of fieldOfficerData" [value]="officer.id">
           {{ officer.displayName }}
@@ -39,10 +39,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>

src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-interest-rate-chart-step/fixed-deposit-account-interest-rate-chart-step.component.html

@@ -1,64 +1,64 @@
 <div fxLayout="column" fxLayoutGap="2%">
 
   <div fxFlexFill *ngIf="fixedDepositsAccountProductTemplate?.accountChart.name">
-    <span fxFlex="40%">Name:</span>
+    <span fxFlex="40%">{{"labels.inputs.name" | translate }}:</span>
     <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate.accountChart.name }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Valid from Date:</span>
-    <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate?.accountChart.fromDate | dateFormat }}</span>
+    <span fxFlex="40%">{{"labels.inputs.Valid from Date" | translate }}:</span>
+    <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate?.accountChart.fromDate  | dateFormat }}</span>
   </div>
 
   <div fxFlexFill *ngIf="fixedDepositsAccountProductTemplate?.accountChart.endDate">
-    <span fxFlex="40%">End Date:</span>
-    <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate?.accountChart.endDate | dateFormat }}</span>
+    <span fxFlex="40%">{{"labels.inputs.End Date" | translate }}:</span>
+    <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate?.accountChart.endDate  | dateFormat }}</span>
   </div>
 
   <div fxFlexFill *ngIf="fixedDepositsAccountProductTemplate?.accountChart.description">
-    <span fxFlex="40%">Description:</span>
+    <span fxFlex="40%">{{"labels.inputs.Description" | translate }}:</span>
     <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate?.accountChart.description }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Primary Grouping by Amount:</span>
-    <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate?.accountChart.isPrimaryGroupingByAmount | yesNo }}</span>
+    <span fxFlex="40%">{{"labels.inputs.Primary Grouping by Amount" | translate }}:</span>
+    <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate?.accountChart.isPrimaryGroupingByAmount ? 'Yes' : 'No' }}</span>
   </div>
 
   <table class="mat-elevation-z1" mat-table [dataSource]="interestRateChartData" #chartsTable multiTemplateDataRows>
 
     <ng-container matColumnDef="period">
-      <th mat-header-cell *matHeaderCellDef> Period </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Period" | translate }} </th>
       <td mat-cell *matCellDef="let chartSlab">
         {{chartSlab.fromPeriod}}-{{chartSlab.toPeriod}}&nbsp;{{chartSlab.periodType.value}}</td>
     </ng-container>
 
     <ng-container matColumnDef="amountRange">
-      <th mat-header-cell *matHeaderCellDef> Amount Range </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Amount Range" | translate }} </th>
       <td mat-cell *matCellDef="let chartSlab">{{chartSlab.amountRangeFrom}}-{{chartSlab.amountRangeTo}}</td>
     </ng-container>
 
     <ng-container matColumnDef="interest">
-      <th mat-header-cell *matHeaderCellDef> Interest </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Interest" | translate }} </th>
       <td mat-cell *matCellDef="let chartSlab"> {{ chartSlab.annualInterestRate }} </td>
     </ng-container>
 
     <ng-container matColumnDef="description">
-      <th mat-header-cell *matHeaderCellDef> Description </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Description" | translate }} </th>
       <td mat-cell *matCellDef="let chartSlab"> {{ chartSlab.description }} </td>
     </ng-container>
 
     <ng-container matColumnDef="actions">
-      <th mat-header-cell *matHeaderCellDef> Actions </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Actions" | translate }} </th>
       <td mat-cell *matCellDef="let chartSlab; let chartSlabIndex = dataIndex">
         <button mat-button color="primary" (click)="expandChartSlabIndex = expandChartSlabIndex === chartSlabIndex ? null : chartSlabIndex">
           <span *ngIf="expandChartSlabIndex !== chartSlabIndex">
             <fa-icon icon="eye" class="m-r-10"></fa-icon>
-            View Incentives
+            {{"labels.buttons.View Incentives" | translate }}
           </span>
           <span *ngIf="expandChartSlabIndex === chartSlabIndex">
             <fa-icon icon="eye-slash" class="m-r-10"></fa-icon>
-            Hide Incentives
+            {{"labels.buttons.Hide Incentives" | translate }}
           </span>
         </button>
       </td>
@@ -72,48 +72,48 @@
           <mat-card fxLayout="row wrap" fxFlexFill>
 
             <h4 class="m-b-10" fxFlex="13%">
-              Incentives
+              {{"labels.heading.Incentives" | translate }}
             </h4>
 
             <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="chartSlab.incentives" *ngIf="chartSlab.incentives.length">
 
               <ng-container matColumnDef="entityType">
-                <th mat-header-cell *matHeaderCellDef> Entity Type </th>
+                <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Entity Type" | translate }} </th>
                 <td mat-cell *matCellDef="let incentive">
                   {{ incentive.entityType.value }}
                 </td>
               </ng-container>
 
               <ng-container matColumnDef="attributeName">
-                <th mat-header-cell *matHeaderCellDef> Attribute Name </th>
+                <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Attribute Name" | translate }} </th>
                 <td mat-cell *matCellDef="let incentive">
                   {{ incentive.attributeName.value }}
                 </td>
               </ng-container>
 
               <ng-container matColumnDef="conditionType">
-                <th mat-header-cell *matHeaderCellDef> Condition Type </th>
+                <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Condition Type" | translate }} </th>
                 <td mat-cell *matCellDef="let incentive">
                   {{ incentive.conditionType.value | titlecase }}
                 </td>
               </ng-container>
 
               <ng-container matColumnDef="attributeValue">
-                <th mat-header-cell *matHeaderCellDef> Attribute Value </th>
+                <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Attribute Value" | translate }} </th>
                 <td mat-cell *matCellDef="let incentive" [ngSwitch]="incentive.attributeName">
                   {{ incentive.attributeValueDesc }}
                 </td>
               </ng-container>
 
               <ng-container matColumnDef="incentiveType">
-                <th mat-header-cell *matHeaderCellDef> Incentive Type </th>
+                <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Incentive Type" | translate }} </th>
                 <td mat-cell *matCellDef="let incentive">
                   {{ incentive.incentiveType.value }}
                 </td>
               </ng-container>
 
               <ng-container matColumnDef="amount">
-                <th mat-header-cell *matHeaderCellDef> Interest </th>
+                <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Interest" | translate }} </th>
                 <td mat-cell *matCellDef="let incentive">
                   {{ incentive.amount }}
                 </td>
@@ -140,10 +140,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>

src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-preview-step/fixed-deposit-account-preview-step.component.html

@@ -1,191 +1,191 @@
 <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%">{{ fixedDepositAccountData.productId | find:fixedDepositsAccountTemplate.productOptions:'id':'name' }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Submitted On</span>
-    <span fxFlex="60%">{{ fixedDepositAccountData.submittedOnDate | dateFormat }}</span>
+    <span fxFlex="40%">{{"labels.inputs.Submitted On" | translate }}</span>
+    <span fxFlex="60%">{{ fixedDepositAccountData.submittedOnDate  | dateFormat }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Field Officer</span>
+    <span fxFlex="40%">{{"labels.inputs.Field Officer" | translate }}</span>
     <span fxFlex="60%">{{ (fixedDepositAccountData.fieldOfficerId | find:fixedDepositsAccountProductTemplate.fieldOfficerOptions:'id':'displayName') || 'Unassigned' }}</span>
   </div>
 
-  <h3 class="mat-h3" fxFlexFill>Currency</h3>
+  <h3 class="mat-h3" fxFlexFill>{{"labels.heading.Currency" | 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%">{{ fixedDepositsAccountProductTemplate.currency.code }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Currency Multiple</span>
+    <span fxFlex="40%">{{"labels.inputs.Currency Multiple" | translate }}</span>
     <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate.currency.inMultiplesOf }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Decimal Places</span>
+    <span fxFlex="40%">{{"labels.inputs.Decimal Places" | translate }}</span>
     <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate.currency.decimalPlaces }}</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%">Fixed Deposit Amount:</span>
+    <span fxFlex="40%">{{"labels.inputs.Fixed Deposit Amount" | translate }}:</span>
     <span fxFlex="60%">{{ fixedDepositAccountData.depositAmount }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Deposit Period:</span>
+    <span fxFlex="40%">{{"labels.inputs.Deposit Period" | translate }}:</span>
     <span fxFlex="60%">{{ fixedDepositAccountData.depositPeriod + ' ' + (fixedDepositAccountData.depositPeriodFrequencyId | find:fixedDepositsAccountProductTemplate.periodFrequencyTypeOptions:'id':'value') }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Interest Compounding Period:</span>
+    <span fxFlex="40%">{{"labels.inputs.Interest Compounding Period" | translate }}:</span>
     <span fxFlex="60%">{{ fixedDepositAccountData.interestCompoundingPeriodType | find:fixedDepositsAccountProductTemplate.interestCompoundingPeriodTypeOptions:'id':'value' }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Interest Posting Period:</span>
+    <span fxFlex="40%">{{"labels.inputs.Interest Posting Period" | translate }}:</span>
     <span fxFlex="60%">{{ fixedDepositAccountData.interestPostingPeriodType | find:fixedDepositsAccountProductTemplate.interestPostingPeriodTypeOptions:'id':'value' }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Interest Calculated using:</span>
+    <span fxFlex="40%">{{"labels.inputs.Interest Calculated using" | translate }}:</span>
     <span fxFlex="60%">{{ fixedDepositAccountData.interestCalculationType | find:fixedDepositsAccountProductTemplate.interestCalculationTypeOptions:'id':'value' }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Days in Year:</span>
+    <span fxFlex="40%">{{"labels.inputs.Days in Year" | translate }}:</span>
     <span fxFlex="60%">{{ fixedDepositAccountData.interestCalculationDaysInYearType | find:fixedDepositsAccountProductTemplate.interestCalculationDaysInYearTypeOptions:'id':'value' }}</span>
   </div>
 
-  <h3 class="mat-h3" fxFlexFill>Settings</h3>
+  <h3 class="mat-h3" fxFlexFill>{{"labels.heading.Settings" | translate }}</h3>
 
   <mat-divider fxFlexFill></mat-divider>
 
   <div fxFlexFill *ngIf="fixedDepositAccountData.lockinPeriodFrequency">
-    <span fxFlex="40%">Lock-in Period:</span>
+    <span fxFlex="40%">{{"labels.inputs.Lock-in Period" | translate }}:</span>
     <span fxFlex="60%">{{ fixedDepositAccountData.lockinPeriodFrequency + ' ' + (fixedDepositAccountData.lockinPeriodFrequencyType | find:fixedDepositsAccountProductTemplate.lockinPeriodFrequencyTypeOptions:'id':'value') }}</span>
   </div>
 
   <div fxFlexFill *ngIf="fixedDepositsAccountProductTemplate.minDepositTerm">
-    <span fxFlex="40%">Minimum Deposit Term:</span>
+    <span fxFlex="40%">{{"labels.inputs.Minimum Deposit Term" | translate }}:</span>
     <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate.minDepositTerm + ' ' + (fixedDepositsAccountProductTemplate.minDepositTermType?.value || '') }}</span>
   </div>
 
   <div fxFlexFill *ngIf="fixedDepositsAccountProductTemplate.inMultiplesOfDepositTerm">
-    <span fxFlex="40%">In Multiples Of:</span>
+    <span fxFlex="40%">{{"labels.inputs.In Multiples Of" | translate }}:</span>
     <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate.inMultiplesOfDepositTerm + ' ' + (fixedDepositsAccountProductTemplate.inMultiplesOfDepositTermType?.value || '') }}</span>
   </div>
 
   <div fxFlexFill *ngIf="fixedDepositsAccountProductTemplate.maxDepositTerm">
-    <span fxFlex="40%">Maximum Deposit Term</span>
+    <span fxFlex="40%">{{"labels.inputs.Maximum Deposit Term" | translate }}</span>
     <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate.maxDepositTerm + ' ' + (fixedDepositsAccountProductTemplate.maxDepositTermType?.value || '') }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Transfer Interest to Savings Account?</span>
-    <span fxFlex="60%">{{ fixedDepositAccountData.transferInterestToSavings | yesNo }}</span>
+    <span fxFlex="40%">{{"labels.inputs.Transfer Interest to Savings Account" | translate }}?</span>
+    <span fxFlex="60%">{{ fixedDepositAccountData.transferInterestToSavings ? 'Yes' : 'No' }}</span>
   </div>
 
   <div fxFlexFill *ngIf="fixedDepositAccountData.transferInterestToSavings">
-    <span fxFlex="40%">Linked Savings Account</span>
+    <span fxFlex="40%">{{"labels.inputs.Linked Savings Account" | translate }}</span>
     <span fxFlex="60%">{{ fixedDepositAccountData.linkAccountId | find:fixedDepositsAccountProductTemplate.savingsAccounts:'id':'accountNo' }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Apply Penal Interest (less):</span>
-    <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate.preClosurePenalApplicable | yesNo }}</span>
+    <span fxFlex="40%">{{"labels.inputs.Apply Penal Interest (less)" | translate }}:</span>
+    <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate.preClosurePenalApplicable ? 'Yes' : 'No' }}</span>
   </div>
 
   <div fxFlexFill *ngIf="fixedDepositsAccountProductTemplate.preClosurePenalApplicable">
-    <span fxFlex="40%">Penal Interest (%):</span>
+    <span fxFlex="40%">{{"labels.inputs.Penal Interest" | translate }} (%):</span>
     <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate.preClosurePenalInterest + '% (' + (fixedDepositsAccountProductTemplate.preClosurePenalInterestOnType?.id) + ')' }}</span>
   </div>
 
   <div fxFlexFill *ngIf="fixedDepositsAccountProductTemplate.withHoldTax">
-    <span fxFlex="40%">Withhold Tax is Applicable:</span>
-    <span fxFlex="60%">{{ fixedDepositAccountData.withHoldTax | yesNo }}</span>
+    <span fxFlex="40%">{{"labels.inputs.Withhold Tax is Applicable" | translate }}:</span>
+    <span fxFlex="60%">{{ fixedDepositAccountData.withHoldTax ? 'Yes' : 'No' }}</span>
   </div>
 
-  <h3 class="mat-h3" fxFlexFill>Interest Rate Chart</h3>
+  <h3 class="mat-h3" fxFlexFill>{{"labels.heading.Interest Rate Chart" | translate }}</h3>
 
   <mat-divider fxFlexFill></mat-divider>
 
   <div class="margin-b" fxFlexFill fxLayout="column">
 
     <div fxFlexFill *ngIf="fixedDepositsAccountProductTemplate?.accountChart.name">
-      <span fxFlex="40%">Name:</span>
+      <span fxFlex="40%">{{"labels.inputs.name" | translate }}:</span>
       <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate?.accountChart.name }}</span>
     </div>
 
     <div fxFlexFill>
-      <span fxFlex="40%">Valid from Date:</span>
-      <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate?.accountChart.fromDate | dateFormat }}</span>
+      <span fxFlex="40%">{{"labels.inputs.Valid from Date" | translate }}:</span>
+      <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate?.accountChart.fromDate  | dateFormat }}</span>
     </div>
 
     <div fxFlexFill *ngIf="fixedDepositsAccountProductTemplate?.accountChart.endDate">
-      <span fxFlex="40%">End Date:</span>
-      <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate?.accountChart.endDate | dateFormat }}</span>
+      <span fxFlex="40%">{{"labels.inputs.End Date" | translate }}:</span>
+      <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate?.accountChart.endDate  | dateFormat }}</span>
     </div>
 
     <div fxFlexFill *ngIf="fixedDepositsAccountProductTemplate?.accountChart.description">
-      <span fxFlex="40%">Description:</span>
+      <span fxFlex="40%">{{"labels.inputs.Description" | translate }}:</span>
       <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate?.accountChart.description }}</span>
     </div>
 
     <div fxFlexFill>
-      <span fxFlex="40%">Primary Grouping by Amount:</span>
-      <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate?.accountChart.isPrimaryGroupingByAmount | yesNo }}</span>
+      <span fxFlex="40%">{{"labels.inputs.Primary Grouping by Amount" | translate }}:</span>
+      <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate?.accountChart.isPrimaryGroupingByAmount ? 'Yes' : 'No' }}</span>
     </div>
 
     <table class="mat-elevation-z1 irc-table" mat-table [dataSource]="interestRateChartData" multiTemplateDataRows>
 
       <ng-container matColumnDef="period">
-        <th mat-header-cell *matHeaderCellDef> Period </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Period" | translate }} </th>
         <td mat-cell *matCellDef="let chartSlab">
           {{chartSlab.fromPeriod}}-{{chartSlab.toPeriod}}&nbsp;{{chartSlab.periodType.value}}</td>
       </ng-container>
 
       <ng-container matColumnDef="amountRange">
-        <th mat-header-cell *matHeaderCellDef> Amount Range </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Amount Range" | translate }} </th>
         <td mat-cell *matCellDef="let chartSlab">{{chartSlab.amountRangeFrom}}-{{chartSlab.amountRangeTo}}</td>
       </ng-container>
 
       <ng-container matColumnDef="interest">
-        <th mat-header-cell *matHeaderCellDef> Interest </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Interest" | translate }} </th>
         <td mat-cell *matCellDef="let chartSlab"> {{ chartSlab.annualInterestRate }} </td>
       </ng-container>
 
       <ng-container matColumnDef="description">
-        <th mat-header-cell *matHeaderCellDef> Description </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Description" | translate }} </th>
         <td mat-cell *matCellDef="let chartSlab"> {{ chartSlab.description }} </td>
       </ng-container>
 
       <ng-container matColumnDef="actions">
-        <th mat-header-cell *matHeaderCellDef> Actions </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Actions" | translate }} </th>
         <td mat-cell *matCellDef="let chartSlab; let chartSlabIndex = dataIndex">
           <button mat-button color="primary" (click)="expandChartSlabIndex = expandChartSlabIndex === chartSlabIndex ? null : chartSlabIndex">
             <span *ngIf="expandChartSlabIndex !== chartSlabIndex">
               <fa-icon icon="eye" class="m-r-10"></fa-icon>
-              View Incentives
+              {{"labels.buttons.View Incentives" | translate }}
             </span>
             <span *ngIf="expandChartSlabIndex === chartSlabIndex">
               <fa-icon icon="eye-slash" class="m-r-10"></fa-icon>
-              Hide Incentives
+              {{"labels.buttons.Hide Incentives" | translate }}
             </span>
           </button>
         </td>
@@ -199,48 +199,48 @@
             <mat-card fxLayout="row wrap" fxFlexFill>
 
               <h4 class="m-b-10" fxFlex="13%">
-                Incentives
+                {{"labels.heading.Incentives" | translate }}
               </h4>
 
               <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="chartSlab.incentives" *ngIf="chartSlab.incentives.length">
 
                 <ng-container matColumnDef="entityType">
-                  <th mat-header-cell *matHeaderCellDef> Entity Type </th>
+                  <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Entity Type" | translate }} </th>
                   <td mat-cell *matCellDef="let incentive">
                     {{ incentive.entityType.value }}
                   </td>
                 </ng-container>
 
                 <ng-container matColumnDef="attributeName">
-                  <th mat-header-cell *matHeaderCellDef> Attribute Name </th>
+                  <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Attribute Name" | translate }} </th>
                   <td mat-cell *matCellDef="let incentive">
                     {{ incentive.attributeName.value }}
                   </td>
                 </ng-container>
 
                 <ng-container matColumnDef="conditionType">
-                  <th mat-header-cell *matHeaderCellDef> Condition Type </th>
+                  <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Condition Type" | translate }} </th>
                   <td mat-cell *matCellDef="let incentive">
                     {{ incentive.conditionType.value | titlecase }}
                   </td>
                 </ng-container>
 
                 <ng-container matColumnDef="attributeValue">
-                  <th mat-header-cell *matHeaderCellDef> Attribute Value </th>
+                  <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Attribute Value" | translate }} </th>
                   <td mat-cell *matCellDef="let incentive" [ngSwitch]="incentive.attributeName">
                     {{ incentive.attributeValueDesc }}
                   </td>
                 </ng-container>
 
                 <ng-container matColumnDef="incentiveType">
-                  <th mat-header-cell *matHeaderCellDef> Incentive Type </th>
+                  <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Incentive Type" | translate }} </th>
                   <td mat-cell *matCellDef="let incentive">
                     {{ incentive.incentiveType.value }}
                   </td>
                 </ng-container>
 
                 <ng-container matColumnDef="amount">
-                  <th mat-header-cell *matHeaderCellDef> Interest </th>
+                  <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Interest" | translate }} </th>
                   <td mat-cell *matCellDef="let incentive">
                     {{ incentive.amount }}
                   </td>
@@ -266,35 +266,35 @@
 
   <div fxFlexFill *ngIf="fixedDepositAccountData.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]="fixedDepositAccountData.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 }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="date">
-        <th mat-header-cell *matHeaderCellDef> Date </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Date" | translate }} </th>
         <td mat-cell *matCellDef="let charge">
           <span
             *ngIf="charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee'">
@@ -306,20 +306,20 @@
           <span
             *ngIf="!(charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'
               || charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee')">
-            N/A
+              {{"labels.inputs.N/A" | translate }}
           </span>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="repaymentsEvery">
-        <th mat-header-cell *matHeaderCellDef> Repayments Every </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Repayments Every" | translate }} </th>
         <td mat-cell *matCellDef="let charge">
           {{ charge.feeInterval || 'Not Provided' }}
         </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>
@@ -337,12 +337,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>

src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-settings-step/fixed-deposit-account-settings-step.component.html

@@ -2,15 +2,15 @@
 
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
-    <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">
@@ -19,37 +19,37 @@
       </mat-select>
     </mat-form-field>
 
-    <h4 fxFlex="98%" class="mat-h4">Minimum Deposit Term</h4>
+    <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.Minimum Deposit Term" | 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="minDepositTerm" required>
       <mat-error>
-        Minimum Deposit Term Frequency is <strong>required</strong>
+        {{"labels.inputs.Minimum Deposit Term Frequency" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Frequency Type</mat-label>
+      <mat-label>{{"labels.inputs.Frequency Type" | translate }}</mat-label>
       <mat-select formControlName="minDepositTermTypeId" required>
         <mat-option *ngFor="let periodFrequencyType of periodFrequencyTypeData" [value]="periodFrequencyType.id">
           {{ periodFrequencyType.value }}
         </mat-option>
       </mat-select>
       <mat-error>
-        Minimum Deposit Term Frequency Type is <strong>required</strong>
+        {{"labels.inputs.Minimum Deposit Term Frequency Type" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
       </mat-error>
     </mat-form-field>
 
-    <h4 fxFlex="98%" class="mat-h4">And thereafter, in Multiples of</h4>
+    <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.And thereafter, in Multiples of" | 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="inMultiplesOfDepositTerm">
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Type</mat-label>
+      <mat-label>{{"labels.inputs.Type" | translate }}</mat-label>
       <mat-select formControlName="inMultiplesOfDepositTermTypeId">
         <mat-option *ngFor="let periodFrequencyType of periodFrequencyTypeData" [value]="periodFrequencyType.id">
           {{ periodFrequencyType.value }}
@@ -57,15 +57,15 @@
       </mat-select>
     </mat-form-field>
 
-    <h4 fxFlex="98%" class="mat-h4">Maximum Deposit Term</h4>
+    <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.Maximum Deposit Term" | 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="maxDepositTerm">
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Type</mat-label>
+      <mat-label>{{"labels.inputs.Type" | translate }}</mat-label>
       <mat-select formControlName="maxDepositTermTypeId">
         <mat-option *ngFor="let periodFrequencyType of periodFrequencyTypeData" [value]="periodFrequencyType.id">
           {{ periodFrequencyType.value }}
@@ -75,39 +75,39 @@
 
     <mat-divider fxFlex="98%"></mat-divider>
 
-    <h3 fxFlex="23%" class="mat-h3">Interest Transfer</h3>
+    <h3 fxFlex="23%" class="mat-h3">{{"labels.heading.Interest Transfer" | translate }}</h3>
 
     <mat-checkbox fxFlex="32%" labelPosition="before" formControlName="transferInterestToSavings" class="margin-b">
-      Transfer Interest to Linked Savings Account?
+      {{"labels.inputs.Transfer Interest to Linked Savings Account" | translate }}?
     </mat-checkbox>
 
     <mat-form-field fxFlex="48%" *ngIf="fixedDepositAccountSettingsForm.contains('linkAccountId')" class="margin-b">
-      <mat-label>Link Savings Account</mat-label>
+      <mat-label>{{"labels.inputs.Link Savings Account" | translate }}</mat-label>
       <mat-select formControlName="linkAccountId" required>
         <mat-option *ngFor="let account of savingsAccountsData" [value]="account.id">
           {{ account.accountNo }}
         </mat-option>
       </mat-select>
       <mat-error>
-        Linked Savings Account is <strong>required</strong>
+        {{"labels.inputs.Linked Savings Account" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-divider fxFlex="98%"></mat-divider>
 
-    <h4 fxFlex="23%" class="mat-h4">For Pre-mature closure</h4>
+    <h4 fxFlex="23%" class="mat-h4">{{"labels.heading.For Pre-mature closure" | translate }}</h4>
 
     <mat-checkbox fxFlex="73%" labelPosition="before" formControlName="preClosurePenalApplicable" class="margin-v">
-      Apply Penal Interest (less)
+      {{"labels.inputs.Apply Penal Interest (less)" | translate }}
     </mat-checkbox>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Penal Interest (%)</mat-label>
+      <mat-label>{{"labels.inputs.Penal Interest" | translate }} (%)</mat-label>
       <input type="number" matInput formControlName="preClosurePenalInterest">
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Period</mat-label>
+      <mat-label>{{"labels.inputs.Period" | translate }}</mat-label>
       <mat-select formControlName="preClosurePenalInterestOnTypeId">
         <mat-option *ngFor="let preClosurePenalInterestOnType of preClosurePenalInterestOnTypeData"
           [value]="preClosurePenalInterestOnType.id">
@@ -121,11 +121,11 @@
       <mat-divider fxFlex="98%"></mat-divider>
 
       <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="withHoldTax" class="margin-p">
-        Is Withhold Tax Applicable?
+        {{"labels.inputs.Is Withhold Tax Applicable" | translate }}?
       </mat-checkbox>
 
       <mat-form-field fxFlex="48%" *ngIf="fixedDepositAccountSettingsForm.controls.taxGroupId" class="p-b-25">
-        <mat-label>Tax Group</mat-label>
+        <mat-label>{{"labels.inputs.Tax Group" | translate }}</mat-label>
         <input matInput formControlName="taxGroupId">
       </mat-form-field>
 
@@ -136,10 +136,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>

src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-terms-step/fixed-deposit-account-terms-step.component.html

@@ -3,39 +3,39 @@
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Deposit Amount</mat-label>
+      <mat-label>{{"labels.inputs.Deposit Amount" | translate }}</mat-label>
       <input type="number" matInput formControlName="depositAmount" required>
       <mat-error>
-        Fixed Deposit Amount is <strong>required</strong>
+        {{"labels.inputs.Fixed Deposit Amount" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
       </mat-error>
     </mat-form-field>
 
     <span fxFlex="48%" fxHide.lt-md></span>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Deposit Period Frequency</mat-label>
+      <mat-label>{{"labels.inputs.Deposit Period Frequency" | translate }}</mat-label>
       <input type="number" matInput formControlName="depositPeriod" required>
       <mat-error>
-        Deposit Period Frequency is <strong>required</strong>
+        {{"labels.inputs.Deposit Period Frequency" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Deposit Period Type</mat-label>
+      <mat-label>{{"labels.inputs.Deposit Period Type" | translate }}</mat-label>
       <mat-select formControlName="depositPeriodFrequencyId" required>
         <mat-option *ngFor="let periodFrequencyType of periodFrequencyTypeData" [value]="periodFrequencyType.id">
           {{ periodFrequencyType.value }}
         </mat-option>
       </mat-select>
       <mat-error>
-        Deposit Period Type is <strong>required</strong>
+        {{"labels.inputs.Deposit Period Type" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-divider fxFlex="98%"></mat-divider>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Interest Compounding Period</mat-label>
+      <mat-label>{{"labels.inputs.Interest Compounding Period" | translate }}</mat-label>
       <mat-select formControlName="interestCompoundingPeriodType" required>
         <mat-option *ngFor="let interestCompoundingPeriodType of interestCompoundingPeriodTypeData"
           [value]="interestCompoundingPeriodType.id">
@@ -43,12 +43,12 @@
         </mat-option>
       </mat-select>
       <mat-error>
-        Interest Compounding Period is <strong>required</strong>
+        {{"labels.inputs.Interest Compounding Period" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Interest Posting Period</mat-label>
+      <mat-label>{{"labels.inputs.Interest Posting Period" | translate }}</mat-label>
       <mat-select formControlName="interestPostingPeriodType" required>
         <mat-option *ngFor="let interestPostingPeriodType of interestPostingPeriodTypeData"
           [value]="interestPostingPeriodType.id">
@@ -56,12 +56,12 @@
         </mat-option>
       </mat-select>
       <mat-error>
-        Interest Posting Period is <strong>required</strong>
+        {{"labels.inputs.Interest Posting Period" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Interest Calculated using</mat-label>
+      <mat-label>{{"labels.inputs.Interest Calculated using" | translate }}</mat-label>
       <mat-select formControlName="interestCalculationType" required>
         <mat-option *ngFor="let interestCalculationType of interestCalculationTypeData"
           [value]="interestCalculationType.id">
@@ -69,12 +69,12 @@
         </mat-option>
       </mat-select>
       <mat-error>
-        Interest Calculated using is <strong>required</strong>
+        {{"labels.inputs.Interest Calculated using" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Days in Year</mat-label>
+      <mat-label>{{"labels.inputs.Days in Year" | translate }}</mat-label>
       <mat-select formControlName="interestCalculationDaysInYearType" required>
         <mat-option *ngFor="let interestCalculationDaysInYearType of interestCalculationDaysInYearTypeData"
           [value]="interestCalculationDaysInYearType.id">
@@ -82,7 +82,7 @@
         </mat-option>
       </mat-select>
       <mat-error>
-        Days in Year is <strong>required</strong>
+        {{"labels.inputs.Days in Year" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
       </mat-error>
     </mat-form-field>
 
@@ -91,10 +91,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>

src/app/deposits/fixed-deposits/fixed-deposit-account-view/charges-tab/charges-tab.component.html

@@ -2,7 +2,7 @@
 
   <div fxLayout="row" fxLayoutAlign="start">
     <div class="m-b-10">
-      <h3>All Charges</h3>
+      <h3>{{"labels.heading.All Charges" | translate }}</h3>
     </div>
     <div class="action-button m-b-20" *ngIf="this.chargesData">
       <button mat-raised-button color="primary" (click)="toggleCharges()">
@@ -15,79 +15,79 @@
     <table mat-table #chargesTable [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="dueAsOf">
-        <th mat-header-cell *matHeaderCellDef> Due As Of </th>
-        <td mat-cell *matCellDef="let charge"> {{ charge.dueDate | dateFormat }} </td>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Due As Of" | translate }} </th>
+        <td mat-cell *matCellDef="let charge"> {{ charge.dueDate  | dateFormat }} </td>
       </ng-container>
 
       <ng-container matColumnDef="repeatsOn">
-        <th mat-header-cell *matHeaderCellDef> Repeats On </th>
-        <td mat-cell *matCellDef="let charge"> {{charge.feeOnMonthDay ? ([2000].concat(charge.feeOnMonthDay) | dateFormat: 'dd MMMM') : 'Unassigned'}} </td>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Repeats On" | translate }} </th>
+        <td mat-cell *matCellDef="let charge"> {{charge.feeOnMonthDay ? ([2000].concat(charge.feeOnMonthDay)  | dateFormat: 'dd MMMM') : 'Unassigned'}} </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>
 
       <ng-container matColumnDef="actions">
-        <th mat-header-cell *matHeaderCellDef> Actions </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Actions" | translate }} </th>
         <td mat-cell *matCellDef="let charge">
           <span *ngIf="fixedDepositsAccountData.status.value === 'Submitted and pending approval'">
-            <button class="account-action-button" mat-raised-button color="primary" matTooltip="Edit Charge"
+            <button class="account-action-button" mat-raised-button color="primary" matTooltip="{{ 'tooltips.Edit Charge' | translate }}"
               *mifosxHasPermission="'UPDATE_SAVINGSACCOUNTCHARGE'" (click)="routeEdit($event); editCharge(charge)">
               <i class="fa fa-pencil"></i>
             </button>
-            <button class="account-action-button" mat-raised-button color="warn" matTooltip="Delete Charge"
+            <button class="account-action-button" mat-raised-button color="warn" matTooltip="{{ 'tooltips.Delete Charge' | translate }}"
               *mifosxHasPermission="'DELETE_SAVINGSACCOUNTCHARGE'" (click)="routeEdit($event); deleteCharge(charge.id)">
               <i class="fa fa-trash"></i>
             </button>
           </span>
           <span *ngIf="fixedDepositsAccountData.status.value === 'Active' && charge.amountOutstanding !== 0">
-            <button class="account-action-button" mat-raised-button color="primary" matTooltip="Pay Charge"
+            <button class="account-action-button" mat-raised-button color="primary" matTooltip="{{ 'tooltips.Pay Charge' | translate }}"
               *mifosxHasPermission="'PAY_SAVINGSACCOUNTCHARGE'" (click)="routeEdit($event); payCharge(charge.id)">
               <i class="fa fa-dollar"></i>
             </button>
-            <button class="account-action-button" mat-raised-button color="primary" matTooltip="Waive Charge"
+            <button class="account-action-button" mat-raised-button color="primary" matTooltip="{{ 'tooltips.Waive Charge' | translate }}"
               *mifosxHasPermission="'WAIVE_SAVINGSACCOUNTCHARGE'" (click)="routeEdit($event); waiveCharge(charge.id)">
               <i class="fa fa-flag"></i>
             </button>
             <ng-container *ngIf="isRecurringCharge(charge)">
-              <button class="account-action-button" mat-raised-button color="primary" matTooltip="Inactivate Charge"
+              <button class="account-action-button" mat-raised-button color="primary" matTooltip="{{ 'tooltips.Inactivate Charge' | translate }}"
                 *mifosxHasPermission="'INACTIVATE_SAVINGSACCOUNTCHARGE'" (click)="routeEdit($event); inactivateCharge(charge.id)">
                 <i class="fa fa-ban"></i>
               </button>

src/app/deposits/fixed-deposits/fixed-deposit-account-view/custom-dialogs/calculate-interest-dialog/calculate-interest-dialog.component.html

@@ -1,8 +1,8 @@
-<h1 mat-dialog-title>Calculate Interest</h1>
+<h1 mat-dialog-title>{{"labels.heading.Calculate Interest" | translate }}</h1>
 <div mat-dialog-content>
-  <p>Are you sure you want to calculate interest ?</p>
+  <p>{{"labels.text.Are you sure you want to calculate interest" | translate }} ?</p>
 </div>
 <mat-dialog-actions align="end">
-  <button mat-raised-button mat-dialog-close>Cancel</button>
-  <button mat-raised-button color="primary" [mat-dialog-close]="{ confirm: true }">Confirm</button>
+  <button mat-raised-button mat-dialog-close>{{"labels.buttons.Cancel" | translate }}</button>
+  <button mat-raised-button color="primary" [mat-dialog-close]="{ confirm: true }">{{"labels.buttons.Confirm" | translate }}</button>
 </mat-dialog-actions>

src/app/deposits/fixed-deposits/fixed-deposit-account-view/custom-dialogs/inactivate-charge-dialog/inactivate-charge-dialog.component.html

@@ -1,8 +1,8 @@
-<h1 mat-dialog-title>Inactivate Charge</h1>
+<h1 mat-dialog-title>{{"labels.heading.Inactivate Charge" | translate }}</h1>
 <div mat-dialog-content>
-  <p>Are you sure you want to inactivate charge with id: {{ data.id }} ?</p>
+  <p>{{"labels.text.Are you sure you want to inactivate charge with id" | translate }}: {{ data.id }} ?</p>
 </div>
 <mat-dialog-actions align="end">
-  <button mat-raised-button mat-dialog-close>Cancel</button>
-  <button mat-raised-button color="primary" [mat-dialog-close]="{ confirm: true }">Confirm</button>
+  <button mat-raised-button mat-dialog-close>{{"labels.buttons.Cancel" | translate }}</button>
+  <button mat-raised-button color="primary" [mat-dialog-close]="{ confirm: true }">{{"labels.buttons.Confirm" | translate }}</button>
 </mat-dialog-actions>

src/app/deposits/fixed-deposits/fixed-deposit-account-view/custom-dialogs/post-interest-dialog/post-interest-dialog.component.html

@@ -1,8 +1,8 @@
-<h1 mat-dialog-title>Post Interest</h1>
+<h1 mat-dialog-title>{{"labels.heading.Post Interest" | translate }}</h1>
 <div mat-dialog-content>
-  <p>Are you sure you want to post interest ?</p>
+  <p>{{"labels.text.Are you sure you want to post interest" | translate }} ?</p>
 </div>
 <mat-dialog-actions align="end">
-  <button mat-raised-button mat-dialog-close>Cancel</button>
-  <button mat-raised-button color="primary" [mat-dialog-close]="{ confirm: true }">Confirm</button>
+  <button mat-raised-button mat-dialog-close>{{"labels.buttons.Cancel" | translate }}</button>
+  <button mat-raised-button color="primary" [mat-dialog-close]="{ confirm: true }">{{"labels.buttons.Confirm" | translate }}</button>
 </mat-dialog-actions>

src/app/deposits/fixed-deposits/fixed-deposit-account-view/custom-dialogs/toggle-withhold-tax-dialog/toggle-withhold-tax-dialog.component.html

@@ -1,8 +1,8 @@
-<h1 mat-dialog-title>{{ data.isEnable ? 'Enable' : 'Disable' }} Withhold Tax</h1>
+<h1 mat-dialog-title>{{ data.isEnable ? 'Enable' : 'Disable' }} {{"labels.heading.Withhold Tax" | translate }}</h1>
 <div mat-dialog-content>
-  <p>Are you sure you want to {{ data.isEnable ? 'enable' : 'disable' }} withhold tax for this account ?</p>
+  <p>{{"labels.text.Are you sure you want to" | translate }} {{ data.isEnable ? 'enable' : 'disable' }} {{"labels.text.withhold tax for this account" | translate }} ?</p>
 </div>
 <mat-dialog-actions align="end">
-  <button mat-raised-button mat-dialog-close>Cancel</button>
-  <button mat-raised-button color="{{ data.isEnable ? 'accent' : 'warn' }}" [mat-dialog-close]="{ confirm: true }">Confirm</button>
+  <button mat-raised-button mat-dialog-close>{{"labels.buttons.Cancel" | translate }}</button>
+  <button mat-raised-button color="{{ data.isEnable ? 'accent' : 'warn' }}" [mat-dialog-close]="{ confirm: true }">{{"labels.buttons.Confirm" | translate }}</button>
 </mat-dialog-actions>

src/app/deposits/fixed-deposits/fixed-deposit-account-view/custom-dialogs/waive-charge-dialog/waive-charge-dialog.component.html

@@ -1,8 +1,8 @@
-<h1 mat-dialog-title>Waive Charge</h1>
+<h1 mat-dialog-title>{{"labels.heading.Waive Charge" | translate }}</h1>
 <div mat-dialog-content>
-  <p>Are you sure you want to waive charge with id: {{ data.id }} ?</p>
+  <p>{{"labels.text.Are you sure you want to waive charge with id" | translate }}: {{ data.id }} ?</p>
 </div>
 <mat-dialog-actions align="end">
-  <button mat-raised-button mat-dialog-close>Cancel</button>
-  <button mat-raised-button color="primary" [mat-dialog-close]="{ confirm: true }">Confirm</button>
+  <button mat-raised-button mat-dialog-close>{{"labels.buttons.Cancel" | translate }}</button>
+  <button mat-raised-button color="primary" [mat-dialog-close]="{ confirm: true }">{{"labels.buttons.Confirm" | translate }}</button>
 </mat-dialog-actions>

src/app/deposits/fixed-deposits/fixed-deposit-account-view/fixed-deposit-account-view.component.html

@@ -6,18 +6,17 @@
 
       <div class="profile-image-container">
         <div>
-          <img mat-card-md-image class="profile-image" matTooltip="Fixed Deposits Account"
+          <img mat-card-md-image class="profile-image"
+            matTooltip="{{ 'tooltips.Fixed Deposits Account' | translate }}"
             [src]="'assets/images/fd_account_placeholder.png'">
         </div>
       </div>
 
       <div class="mat-typography account-card-title">
         <mat-card-title>
-          <h3 fxFlex="95%">
-            <i class="fa fa-stop" [ngClass]="fixedDepositsAccountData.status.code | statusLookup"
-              [matTooltip]="fixedDepositsAccountData.status.value"></i>
-            Fixed Deposit Product : {{fixedDepositsAccountData.fixedDepositsAccountData}}<span class="m-l-10">
-              <mifosx-account-number accountNo="{{fixedDepositsAccountData.accountNo}}"></mifosx-account-number></span>
+          <h3>
+            <i class="fa fa-stop" [ngClass]="fixedDepositsAccountData.status.code | statusLookup" [matTooltip]="fixedDepositsAccountData.status.value"></i>
+            {{"labels.inputs.Account Name" | translate }} : {{fixedDepositsAccountData.depositProductName}}
           </h3>
           <div fxFlex="5%">
             <button mat-icon-button [matMenuTriggerFor]="accountMenu" aria-label="Loan account actions"
@@ -30,14 +29,10 @@
         </mat-card-title>
         <mat-card-subtitle>
           <p>
-            {{entityType}} Name: {{fixedDepositsAccountData.clientName || fixedDepositsAccountData.groupName}}
-            <span class="m-l-10" *ngIf="fixedDepositsAccountData.clientAccountNo">({{fixedDepositsAccountData.clientAccountNo}})</span><br />
-            <span
-              *ngIf="!fixedDepositsAccountData.status.rejected && !fixedDepositsAccountData.status.submittedAndPendingApproval">
-              Current Balance:
-              {{fixedDepositsAccountData.summary.accountBalance | currency:currencyCode:'symbol-narrow':'1.2-2'}}<br />
-              Deposit Amount:
-              {{fixedDepositsAccountData.depositAmount | currency:currencyCode:'symbol-narrow':'1.2-2'}}<br />
+            {{"labels.inputs.Account" | translate }} #: {{fixedDepositsAccountData.accountNo}} | {{"labels.inputs.Client Name" | translate }}: {{fixedDepositsAccountData.clientName}}<br/>
+            <span *ngIf="!fixedDepositsAccountData.status.rejected && !fixedDepositsAccountData.status.submittedAndPendingApproval">
+              {{"labels.inputs.Current Balance" | translate }}: {{fixedDepositsAccountData.currency.displaySymbol}}&nbsp;{{fixedDepositsAccountData.summary.accountBalance}}<br/>
+              {{"labels.inputs.Deposit Amount" | translate }}: {{fixedDepositsAccountData.currency.displaySymbol}}&nbsp;{{fixedDepositsAccountData.depositAmount}}<br/>
             </span>
           </p>
         </mat-card-subtitle>
@@ -61,6 +56,24 @@
 
     </mat-card-title-group>
 
+    <mat-card-actions class="account-actions">
+
+      <ng-container *ngFor="let button of buttonConfig.singleButtons">
+        <button mat-raised-button (click)="doAction(button.name)">
+          <i ngClass="{{button.icon}}"></i> {{button.name}}</button>
+      </ng-container>
+
+      <ng-container *ngIf="buttonConfig.options.length">
+        <button mat-raised-button [matMenuTriggerFor]="More">{{"labels.buttons.More" | translate }}</button>
+        <mat-menu #More="matMenu">
+        <span *ngFor="let option of buttonConfig.options">
+          <button mat-menu-item (click)="doAction(option.name)">{{option.name}}</button>
+        </span>
+        </mat-menu>
+      </ng-container>
+
+    </mat-card-actions>
+
   </mat-card-header>
 
   <mat-card-content class="content">
@@ -70,36 +83,31 @@
       <div fxFlex="49%" fxLayout="column" fxLayoutGap="4%">
 
         <div>
-          <h4 class="table-headers">Fixed Deposit Details</h4>
+          <h4 class="table-headers">{{"labels.heading.Fixed Deposit Details" | translate }}</h4>
           <table>
             <tbody>
               <tr>
-                <td>Activated On</td>
-                <td>{{fixedDepositsAccountData.timeline.activatedOnDate ?
-                  (fixedDepositsAccountData.timeline.activatedOnDate | dateFormat) : 'Not Activated'}}</td>
+                <td>{{"labels.inputs.Activated On" | translate }}</td>
+                <td>{{fixedDepositsAccountData.timeline.activatedOnDate ? (fixedDepositsAccountData.timeline.activatedOnDate  | dateFormat) : 'Not Activated'}}</td>
               </tr>
               <tr *ngIf="fixedDepositsAccountData.timeline.closedOnDate">
-                <td>Closed On</td>
-                <td>{{fixedDepositsAccountData.timeline.closedOnDate | dateFormat}}</td>
+                <td>{{"labels.inputs.Closed On" | translate }}</td>
+                <td>{{fixedDepositsAccountData.timeline.closedOnDate  | dateFormat}}</td>
               </tr>
               <tr>
-                <td>Field Officer</td>
-                <td>{{fixedDepositsAccountData.fieldOfficerName ? fixedDepositsAccountData.fieldOfficerName :
-                  'Unassigned'}}</td>
+                <td>{{"labels.inputs.Field Officer" | translate }}</td>
+                <td>{{fixedDepositsAccountData.fieldOfficerName ? fixedDepositsAccountData.fieldOfficerName : 'Unassigned'}}</td>
               </tr>
               <tr>
-                <td>Maturity Date</td>
-                <td>{{fixedDepositsAccountData.maturityDate ? (fixedDepositsAccountData.maturityDate | dateFormat) :
-                  'N/A'}}</td>
+                <td>{{"labels.inputs.Maturity Date" | translate }}</td>
+                <td>{{fixedDepositsAccountData.maturityDate ? (fixedDepositsAccountData.maturityDate  | dateFormat) : 'N/A'}}</td>
               </tr>
               <tr>
-                <td>Deposit Period</td>
-                <td>
-                  {{fixedDepositsAccountData.depositPeriod}}&nbsp;{{fixedDepositsAccountData.depositPeriodFrequency.value}}
-                </td>
+                <td>{{"labels.inputs.Deposit Period" | translate }}</td>
+                <td>{{fixedDepositsAccountData.depositPeriod}}&nbsp;{{fixedDepositsAccountData.depositPeriodFrequency.value}}</td>
               </tr>
               <tr *ngIf="fixedDepositsAccountData.withHoldTax">
-                <td>Tax Group</td>
+                <td>{{"labels.inputs.Tax Group" | translate }}</td>
                 <td>{{fixedDepositsAccountData.taxGroup.name}}</td>
               </tr>
             </tbody>
@@ -107,33 +115,32 @@
         </div>
 
         <div>
-          <h4 class="table-headers">Interest Details</h4>
+          <h4 class="table-headers">{{"labels.heading.Interest Details" | translate }}</h4>
           <table>
             <tbody>
               <tr>
-                <td>Interest Rate</td>
+                <td>{{"labels.inputs.Interest Rate" | translate }}</td>
                 <td>{{fixedDepositsAccountData.nominalAnnualInterestRate}}%</td>
               </tr>
               <tr>
-                <td>Interest Compounding Period</td>
+                <td>{{"labels.inputs.Interest Compounding Period" | translate }}</td>
                 <td>{{fixedDepositsAccountData.interestCompoundingPeriodType.value}}</td>
               </tr>
               <tr>
-                <td>Interest Posting Period</td>
+                <td>{{"labels.inputs.Interest Posting Period" | translate }}</td>
                 <td>{{fixedDepositsAccountData.interestPostingPeriodType.value}}</td>
               </tr>
               <tr>
-                <td>Interest Calculated Using</td>
+                <td>{{"labels.inputs.Interest Calculated Using" | translate }}</td>
                 <td>{{fixedDepositsAccountData.interestCalculationType.value}}</td>
               </tr>
               <tr>
-                <td>No. of Days in Year</td>
+                <td>{{"labels.inputs.No. of Days in Year" | translate }}</td>
                 <td>{{fixedDepositsAccountData.interestCalculationDaysInYearType.value}}</td>
               </tr>
               <tr *ngIf="fixedDepositsAccountData.preClosurePenalApplicable">
-                <td>Pre-cloure Penal</td>
-                <td>{{fixedDepositsAccountData.preClosurePenalInterest}} % on
-                  {{fixedDepositsAccountData.preClosurePenalInterestOnType.value}}</td>
+                <td>{{"labels.inputs.Pre-cloure Penal" | translate }}</td>
+                <td>{{fixedDepositsAccountData.preClosurePenalInterest}} % on {{fixedDepositsAccountData.preClosurePenalInterestOnType.value}}</td>
               </tr>
             </tbody>
           </table>
@@ -143,38 +150,29 @@
 
       <div fxFlex="49%">
 
-        <div
-          *ngIf="!fixedDepositsAccountData.status.rejected && !fixedDepositsAccountData.status.submittedAndPendingApproval; else otherDetails">
-          <h4 class="table-headers">Performance History</h4>
+        <div *ngIf="!fixedDepositsAccountData.status.rejected && !fixedDepositsAccountData.status.submittedAndPendingApproval; else otherDetails">
+          <h4 class="table-headers">{{"labels.heading.Performance History" | translate }}</h4>
           <table>
             <tbody>
               <tr>
-                <td>Principal Amount</td>
-                <td class="r-amount">{{fixedDepositsAccountData.depositAmount | currency:currencyCode:'symbol-narrow':'1.2-2'}}
-                </td>
+                <td>{{"labels.inputs.Principal Amount" | translate }}</td>
+                <td>{{fixedDepositsAccountData.currency.displaySymbol}}&nbsp;{{fixedDepositsAccountData.depositAmount}}</td>
               </tr>
               <tr>
-                <td>Maturity Amount</td>
-                <td class="r-amount">{{fixedDepositsAccountData.maturityAmount | currency:currencyCode:'symbol-narrow':'1.2-2'}}
-                </td>
+                <td>{{"labels.inputs.Maturity Amount" | translate }}</td>
+                <td>{{fixedDepositsAccountData.currency.displaySymbol}}&nbsp;{{fixedDepositsAccountData.maturityAmount}}</td>
               </tr>
               <tr *ngIf="fixedDepositsAccountData.summary.totalDeposits">
-                <td>Total Deposits</td>
-                <td class="r-amount">
-                  {{fixedDepositsAccountData.summary.totalDeposits | currency:currencyCode:'symbol-narrow':'1.2-2'}}
-                </td>
+                <td>{{"labels.inputs.Total Deposits" | translate }}</td>
+                <td>{{fixedDepositsAccountData.currency.displaySymbol}}&nbsp;{{fixedDepositsAccountData.summary.totalDeposits}}</td>
               </tr>
               <tr *ngIf="fixedDepositsAccountData.summary.totalWithdrawals">
-                <td>Total Withdrawals</td>
-                <td class="r-amount">
-                  {{fixedDepositsAccountData.summary.totalWithdrawals | currency:currencyCode:'symbol-narrow':'1.2-2'}}
-                </td>
+                <td>{{"labels.inputs.Total Withdrawals" | translate }}</td>
+                <td>{{fixedDepositsAccountData.currency.displaySymbol}}&nbsp;{{fixedDepositsAccountData.summary.totalWithdrawals}}</td>
               </tr>
               <tr *ngIf="fixedDepositsAccountData.summary.totalInterestEarned >= 0">
-                <td>Total Interest Earned</td>
-                <td class="r-amount">
-                  {{fixedDepositsAccountData.summary.totalInterestEarned | currency:currencyCode:'symbol-narrow':'1.2-2'}}
-                </td>
+                <td>{{"labels.inputs.Total Interest Earned" | translate }}</td>
+                <td>{{fixedDepositsAccountData.currency.displaySymbol}}&nbsp;{{fixedDepositsAccountData.summary.totalInterestEarned}}</td>
               </tr>
             </tbody>
           </table>
@@ -182,20 +180,16 @@
 
         <ng-template #otherDetails>
           <div>
-            <h4 class="table-headers">Other Details</h4>
+            <h4 class="table-headers">{{"labels.heading.Other Details" | translate }}</h4>
             <table>
               <tbody>
                 <tr>
-                  <td>Principal Amount</td>
-                  <td>
-                    {{fixedDepositsAccountData.depositAmount | currency:currencyCode:'symbol-narrow':'1.2-2'}}
-                  </td>
+                  <td>{{"labels.inputs.Principal Amount" | translate }}</td>
+                  <td>{{fixedDepositsAccountData.currency.displaySymbol}}&nbsp;{{fixedDepositsAccountData.depositAmount}}</td>
                 </tr>
                 <tr>
-                  <td>Maturity Amount</td>
-                  <td>
-                    {{fixedDepositsAccountData.maturityAmount | currency:currencyCode:'symbol-narrow':'1.2-2'}}
-                  </td>
+                  <td>{{"labels.inputs.Maturity Amount" | translate }}</td>
+                  <td>{{fixedDepositsAccountData.currency.displaySymbol}}&nbsp;{{fixedDepositsAccountData.maturityAmount}}</td>
                 </tr>
               </tbody>
             </table>
@@ -208,21 +202,20 @@
 
     <nav mat-tab-nav-bar class="navigation-tabs">
       <a mat-tab-link [routerLink]="['./interest-rate-chart']" routerLinkActive #IRC="routerLinkActive"
-        [active]="IRC.isActive">
-        Interest Rate Chart
+      [active]="IRC.isActive">
+      {{"labels.inputs.Interest Rate Chart" | translate }}
       </a>
       <a mat-tab-link [routerLink]="['./transactions']" routerLinkActive #transactions="routerLinkActive"
-        [active]="transactions.isActive">
-        Transactions
+      [active]="transactions.isActive">
+      {{"labels.inputs.Transactions" | translate }}
       </a>
       <a mat-tab-link [routerLink]="['./charges']" routerLinkActive #charges="routerLinkActive"
-        [active]="charges.isActive">
-        Charges
+      [active]="charges.isActive">
+      {{"labels.inputs.Charges" | translate }}
       </a>
-      <a mat-tab-link [routerLink]="['./standing-instructions']" routerLinkActive
-        #standingInstructions="routerLinkActive" [active]="standingInstructions.isActive"
-        *ngIf="fixedDepositsAccountData.clientId">
-        Standing Instructions
+      <a mat-tab-link [routerLink]="['./standing-instructions']" routerLinkActive #standingInstructions="routerLinkActive"
+        [active]="standingInstructions.isActive" *ngIf="fixedDepositsAccountData.clientId">
+        {{"labels.inputs.Standing Instructions" | translate }}
       </a>
       <ng-container *ngFor="let savingsDatatable of savingsDatatables">
         <a mat-tab-link *mifosxHasPermission="'READ_' + savingsDatatable.registeredTableName"

src/app/deposits/fixed-deposits/fixed-deposit-account-view/interest-rate-chart-tab/interest-rate-chart-tab.component.html

@@ -2,7 +2,7 @@
 
   <div fxLayoutAlign="start">
     <div class="m-b-20">
-      <h3>All Interest Rates</h3>
+      <h3>{{"labels.heading.All Interest Rates" | translate }}</h3>
     </div>
   </div>
 
@@ -11,37 +11,37 @@
     <table mat-table [dataSource]="interestRateChartData" #chartsTable multiTemplateDataRows>
 
       <ng-container matColumnDef="period">
-        <th mat-header-cell *matHeaderCellDef> Period </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Period" | translate }} </th>
         <td mat-cell *matCellDef="let chartSlab">
           {{chartSlab.fromPeriod}}-{{chartSlab.toPeriod}}&nbsp;{{chartSlab.periodType.value}}</td>
       </ng-container>
 
       <ng-container matColumnDef="amountRange">
-        <th mat-header-cell *matHeaderCellDef> Amount Range </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Amount Range" | translate }} </th>
         <td mat-cell *matCellDef="let chartSlab">{{chartSlab.amountRangeFrom}}-{{chartSlab.amountRangeTo}}</td>
       </ng-container>
 
       <ng-container matColumnDef="interest">
-        <th mat-header-cell *matHeaderCellDef> Interest </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Interest" | translate }} </th>
         <td mat-cell *matCellDef="let chartSlab"> {{ chartSlab.annualInterestRate }} </td>
       </ng-container>
 
       <ng-container matColumnDef="description">
-        <th mat-header-cell *matHeaderCellDef> Description </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Description" | translate }} </th>
         <td mat-cell *matCellDef="let chartSlab"> {{ chartSlab.description }} </td>
       </ng-container>
 
       <ng-container matColumnDef="actions">
-        <th mat-header-cell *matHeaderCellDef> Actions </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Actions" | translate }} </th>
         <td mat-cell *matCellDef="let chartSlab; let chartSlabIndex = dataIndex">
           <button mat-button color="primary" (click)="expandChartSlabIndex = expandChartSlabIndex === chartSlabIndex ? null : chartSlabIndex">
             <span *ngIf="expandChartSlabIndex !== chartSlabIndex">
               <fa-icon icon="eye" class="m-r-10"></fa-icon>
-              View Incentives
+              {{"labels.buttons.View Incentives" | translate }}
             </span>
             <span *ngIf="expandChartSlabIndex === chartSlabIndex">
               <fa-icon icon="eye-slash" class="m-r-10"></fa-icon>
-              Hide Incentives
+              {{"labels.buttons.Hide Incentives" | translate }}
             </span>
           </button>
         </td>
@@ -55,48 +55,48 @@
             <mat-card fxLayout="row wrap" fxFlexFill>
 
               <h4 class="m-b-10" fxFlex="13%">
-                Incentives
+                {{"labels.heading.Incentives" | translate }}
               </h4>
 
               <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="chartSlab.incentives" *ngIf="chartSlab.incentives?.length">
 
                 <ng-container matColumnDef="entityType">
-                  <th mat-header-cell *matHeaderCellDef> Entity Type </th>
+                  <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Entity Type" | translate }} </th>
                   <td mat-cell *matCellDef="let incentive">
                     {{ incentive.entityType.value }}
                   </td>
                 </ng-container>
 
                 <ng-container matColumnDef="attributeName">
-                  <th mat-header-cell *matHeaderCellDef> Attribute Name </th>
+                  <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Attribute Name" | translate }} </th>
                   <td mat-cell *matCellDef="let incentive">
                     {{ incentive.attributeName.value }}
                   </td>
                 </ng-container>
 
                 <ng-container matColumnDef="conditionType">
-                  <th mat-header-cell *matHeaderCellDef> Condition Type </th>
+                  <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Condition Type" | translate }} </th>
                   <td mat-cell *matCellDef="let incentive">
                     {{ incentive.conditionType.value | titlecase }}
                   </td>
                 </ng-container>
 
                 <ng-container matColumnDef="attributeValue">
-                  <th mat-header-cell *matHeaderCellDef> Attribute Value </th>
+                  <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Attribute Value" | translate }} </th>
                   <td mat-cell *matCellDef="let incentive" [ngSwitch]="incentive.attributeName">
                     {{ incentive.attributeValueDesc }}
                   </td>
                 </ng-container>
 
                 <ng-container matColumnDef="incentiveType">
-                  <th mat-header-cell *matHeaderCellDef> Incentive Type </th>
+                  <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Incentive Type" | translate }} </th>
                   <td mat-cell *matCellDef="let incentive">
                     {{ incentive.incentiveType.value }}
                   </td>
                 </ng-container>
 
                 <ng-container matColumnDef="amount">
-                  <th mat-header-cell *matHeaderCellDef> Interest </th>
+                  <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Interest" | translate }} </th>
                   <td mat-cell *matCellDef="let incentive">
                     {{ incentive.amount }}
                   </td>

src/app/deposits/fixed-deposits/fixed-deposit-account-view/standing-instructions-tab/standing-instructions-tab.component.html

@@ -1,7 +1,7 @@
 <div class="tab-container mat-typography">
 
   <div class="m-b-10">
-    <h3>All Standing Instructions</h3>
+    <h3>{{"labels.heading.All Standing Instructions" | translate }}</h3>
   </div>
 
   <div class="mat-elevation-z1 m-b-25">
@@ -9,51 +9,51 @@
     <table mat-table #instructionsTable [dataSource]="dataSource">
 
       <ng-container matColumnDef="client">
-        <th mat-header-cell *matHeaderCellDef> Client </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Client" | translate }} </th>
         <td mat-cell *matCellDef="let instruction">{{instruction.fromClient.displayName}}-{{instruction.fromClient.id}}</td>
       </ng-container>
 
       <ng-container matColumnDef="fromAccount">
-        <th mat-header-cell *matHeaderCellDef> From Account </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.From Account" | translate }} </th>
         <td mat-cell *matCellDef="let instruction">{{instruction.fromAccount.accountNo}} ({{instruction.fromAccountType.value}})</td>
       </ng-container>
 
       <ng-container matColumnDef="beneficiary">
-        <th mat-header-cell *matHeaderCellDef> Beneficiary </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Beneficiary" | translate }} </th>
         <td mat-cell *matCellDef="let instruction">{{instruction.toClient.displayName}}</td>
       </ng-container>
 
       <ng-container matColumnDef="toAccount">
-        <th mat-header-cell *matHeaderCellDef> To Account </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.To Account" | translate }} </th>
         <td mat-cell *matCellDef="let instruction">{{instruction.toAccount.accountNo}} ({{instruction.toAccountType.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 instruction">{{instruction.instructionType.value}}/{{instruction.amount}}</td>
       </ng-container>
 
       <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>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Validity" | translate }} </th>
+        <td mat-cell *matCellDef="let instruction">{{instruction.validFrom  | dateFormat}} to {{instruction.validTill  | dateFormat}}</td>
       </ng-container>
 
       <ng-container matColumnDef="actions">
-        <th mat-header-cell *matHeaderCellDef> Actions </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Actions" | translate }} </th>
         <td mat-cell *matCellDef="let instruction">
           <span *ngIf="instruction.status.value!=='Deleted'">
-            <button class="account-action-button" mat-raised-button color="primary" matTooltip="Edit Standing Instruction"
+            <button class="account-action-button" mat-raised-button color="primary" matTooltip="{{ 'tooltips.Edit Standing Instruction' | translate }}"
               *mifosxHasPermission="'UPDATE_STANDINGINSTRUCTION'">
               <i class="fa fa-edit"></i>
             </button>
           </span>
           <span *ngIf="instruction.status.value!=='Deleted'">
-            <button class="account-action-button" mat-raised-button color="warn" matTooltip="Delete Standing Instruction"
+            <button class="account-action-button" mat-raised-button color="warn" matTooltip="{{ 'tooltips.Delete Standing Instruction' | translate }}"
               *mifosxHasPermission="'DELETE_STANDINGINSTRUCTION'" (click)="deleteStandingInstruction(instruction.id)">
               <i class="fa fa-times"></i>
             </button>
           </span>
-          <button class="account-action-button" mat-raised-button color="primary" matTooltip="View Standing Instruction"
+          <button class="account-action-button" mat-raised-button color="primary" matTooltip="{{ 'tooltips.View Standing Instruction' | translate }}"
             *mifosxHasPermission="'READ_STANDINGINSTRUCTION'">
             <i class="fa fa-eye"></i>
           </button>

src/app/deposits/fixed-deposits/fixed-deposit-account-view/transactions-tab/transactions-tab.component.html

@@ -2,7 +2,7 @@
 
   <div fxLayoutAlign="start">
     <div class="m-b-20">
-      <h3>All Transactions</h3>
+      <h3>{{"labels.heading.All Transactions" | translate }}</h3>
     </div>
   </div>
 
@@ -11,44 +11,33 @@
     <table mat-table [dataSource]="dataSource">
 
       <ng-container matColumnDef="id">
-        <th mat-header-cell *matHeaderCellDef> ID </th>
-        <td mat-cell *matCellDef="let transaction" [ngClass]="transactionColor(transaction)"> {{ transaction.id }} </td>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.ID" | translate }} </th>
+        <td mat-cell *matCellDef="let transaction"> {{ transaction.id }} </td>
       </ng-container>
 
       <ng-container matColumnDef="transactionDate">
-        <th mat-header-cell *matHeaderCellDef> Transaction Date </th>
-        <td mat-cell *matCellDef="let transaction" [ngClass]="transactionColor(transaction)"> {{ transaction.date | dateFormat }} </td>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Transaction Date" | translate }} </th>
+        <td mat-cell *matCellDef="let transaction"> {{ transaction.date  | dateFormat }} </td>
       </ng-container>
 
       <ng-container matColumnDef="transactionType">
-        <th mat-header-cell *matHeaderCellDef> Transaction Type </th>
-        <td mat-cell *matCellDef="let transaction" [ngClass]="transactionColor(transaction)"> {{ transaction.transactionType.value }} </td>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Transaction Type" | translate }} </th>
+        <td mat-cell *matCellDef="let transaction"> {{ transaction.transactionType.value  }} </td>
       </ng-container>
 
       <ng-container matColumnDef="debit">
-        <th mat-header-cell *matHeaderCellDef> Debit </th>
-        <td mat-cell *matCellDef="let transaction" [ngClass]="transactionColor(transaction)"> {{ isDebit(transaction.transactionType) ? transaction.amount : 'N/A'}} </td>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Debit" | translate }} </th>
+        <td mat-cell *matCellDef="let transaction"> {{ isDebit(transaction.transactionType) ? transaction.amount : 'N/A'}} </td>
       </ng-container>
 
       <ng-container matColumnDef="credit">
-        <th mat-header-cell *matHeaderCellDef> Credit </th>
-        <td mat-cell *matCellDef="let transaction" [ngClass]="transactionColor(transaction)"> {{ !isDebit(transaction.transactionType) ? transaction.amount : 'N/A' }} </td>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Credit" | translate }} </th>
+        <td mat-cell *matCellDef="let transaction"> {{ !isDebit(transaction.transactionType) ? transaction.amount : 'N/A' }} </td>
       </ng-container>
 
       <ng-container matColumnDef="balance">
-        <th mat-header-cell *matHeaderCellDef> Balance </th>
-        <td mat-cell *matCellDef="let transaction" [ngClass]="transactionColor(transaction)"> {{ transaction.runningBalance | number }} </td>
-      </ng-container>
-
-      <ng-container matColumnDef="actions">
-        <th mat-header-cell *matHeaderCellDef> Actions </th>
-        <td mat-cell *matCellDef="let transaction">
-          <button class="account-action-button" mat-raised-button color="primary" matTooltip="View Journal Entries"
-          matTooltipPosition="left" (click)="routeEdit($event)"
-          [routerLink]="['/','journal-entry', 'view', 'S'+transaction.id ]">
-          <i class="fa fa-arrow-circle-right"></i>
-        </button>
-        </td>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Balance" | translate }} </th>
+        <td mat-cell *matCellDef="let transaction"> {{ transaction.runningBalance }} </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>

src/app/deposits/fixed-deposits/fixed-deposit-account-view/view-transaction/view-transaction.component.html

@@ -9,7 +9,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Transaction Id
+          {{"labels.inputs.Transaction Id" | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -17,7 +17,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Type
+          {{"labels.inputs.Type" | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -25,7 +25,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Transaction Date
+          {{"labels.inputs.Transaction Date" | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -33,7 +33,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Currency
+          {{"labels.inputs.Currency" | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -41,7 +41,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Amount
+          {{"labels.inputs.Amount" | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -49,7 +49,7 @@
         </div>
 
         <div fxFlex="50%" *ngIf="transactionData.note" class="mat-body-strong">
-          Note
+          {{"labels.inputs.Note" | translate }}
         </div>
 
         <div fxFlex="50%" *ngIf="transactionData.note">
@@ -59,7 +59,7 @@
         <ng-container *ngIf="transactionData.paymentDetailData">
 
           <div *ngIf="transactionData.paymentDetailData.paymentType" fxFlex="50%" class="mat-body-strong">
-            Payment Type
+            {{"labels.inputs.Payment Type" | translate }}
           </div>
 
           <div *ngIf="transactionData.paymentDetailData.paymentType" fxFlex="50%">
@@ -67,7 +67,7 @@
           </div>
 
           <div *ngIf="transactionData.paymentDetailData.accountNumber" fxFlex="50%" class="mat-body-strong">
-            Account No.
+            {{"labels.inputs.Account No" | translate }}.
           </div>
 
           <div *ngIf="transactionData.paymentDetailData.accountNumber" fxFlex="50%">
@@ -75,7 +75,7 @@
           </div>
 
           <div *ngIf="transactionData.paymentDetailData.checkNumber" fxFlex="50%" class="mat-body-strong">
-            Cheque Number
+            {{"labels.inputs.Cheque Number" | translate }}
           </div>
 
           <div *ngIf="transactionData.paymentDetailData.checkNumber" fxFlex="50%">
@@ -83,7 +83,7 @@
           </div>
 
           <div *ngIf="transactionData.paymentDetailData.routingCode" fxFlex="50%" class="mat-body-strong">
-            Routing Code
+            {{"labels.inputs.Routing Code" | translate }}
           </div>
 
           <div *ngIf="transactionData.paymentDetailData.routingCode" fxFlex="50%">
@@ -91,7 +91,7 @@
           </div>
 
           <div *ngIf="transactionData.paymentDetailData.receiptNumber" fxFlex="50%" class="mat-body-strong">
-            Receipt No.
+            {{"labels.inputs.Receipt No" | translate }}.
           </div>
 
           <div *ngIf="transactionData.paymentDetailData.receiptNumber" fxFlex="50%">
@@ -99,7 +99,7 @@
           </div>
 
           <div *ngIf="transactionData.paymentDetailData.bankNumber" fxFlex="50%" class="mat-body-strong">
-            Bank No.
+            {{"labels.inputs.Bank No" | translate }}.
           </div>
 
           <div *ngIf="transactionData.paymentDetailData.bankNumber" fxFlex="50%">

src/app/deposits/fixed-deposits/fixed-deposits-account-actions/activate-fixed-deposits-account/activate-fixed-deposits-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="activateFixedDepositsAccountForm.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]="['../../']">Cancel</button>
-        <button mat-raised-button color="primary" [disabled]="!activateFixedDepositsAccountForm.valid">Confirm</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate }}</button>
+        <button mat-raised-button color="primary" [disabled]="!activateFixedDepositsAccountForm.valid">{{"labels.buttons.Confirm" | translate }}</button>
       </mat-card-actions>
 
     </form>

src/app/deposits/fixed-deposits/fixed-deposits-account-actions/add-charge-fixed-deposits-account/add-charge-fixed-deposits-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="fixedDepositsChargeForm.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="fixedDepositsChargeForm.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="fixedDepositsChargeForm.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="fixedDepositsChargeForm.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="fixedDepositsChargeForm.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="fixedDepositsChargeForm.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="fixedDepositsChargeForm.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]="['../../']">Cancel</button>
-          <button mat-raised-button color="primary" [disabled]="!fixedDepositsChargeForm.valid">Submit</button>
+          <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate }}</button>
+          <button mat-raised-button color="primary" [disabled]="!fixedDepositsChargeForm.valid">{{"labels.buttons.Submit" | translate }}</button>
         </mat-card-actions>
 
       </mat-card-content>

src/app/deposits/fixed-deposits/fixed-deposits-account-actions/approve-fixed-deposits-account/approve-fixed-deposits-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="approveFixedDepositsAccountForm.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]="!approveFixedDepositsAccountForm">Confirm</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate }}</button>
+        <button mat-raised-button color="primary" [disabled]="!approveFixedDepositsAccountForm">{{"labels.buttons.Confirm" | translate }}</button>
       </mat-card-actions>
 
     </form>

src/app/deposits/fixed-deposits/fixed-deposits-account-actions/close-fixed-deposits-account/close-fixed-deposits-account.component.html

@@ -9,51 +9,51 @@
         <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="closeOnMaturityAccountForm.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-form-field>
-            <mat-label>Maturity Amount</mat-label>
+            <mat-label>{{"labels.inputs.Maturity Amount" | translate }}</mat-label>
             <input type="number" matInput formControlName="maturityAmount"/>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Action</mat-label>
+            <mat-label>{{"labels.inputs.Action" | translate }}</mat-label>
             <mat-select required formControlName="onAccountClosureId">
               <mat-option *ngFor="let closureOption of onAccountClosureOptions" [value]="closureOption.id">
                 {{ closureOption.value }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="closeOnMaturityAccountForm.controls.onAccountClosureId.hasError('required')">
-              Account action is <strong>required</strong>
+              {{"labels.inputs.Account action" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field *ngIf="closeOnMaturityAccountForm.contains('toSavingsAccountId')">
-            <mat-label>Transfer to Savings</mat-label>
+            <mat-label>{{"labels.inputs.Transfer to Savings" | translate }}</mat-label>
             <mat-select required formControlName="toSavingsAccountId">
               <mat-option *ngFor="let account of savingsAccountsData" [value]="account.id">
                 {{ account.accountNo }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="closeOnMaturityAccountForm.controls.toSavingsAccountId.hasError('required')">
-              Transfer to savings account is <strong>required</strong>
+              {{"labels.inputs.Transfer to savings account" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field *ngIf="closeOnMaturityAccountForm.contains('transferDescription')">
-            <mat-label>Transfer Description</mat-label>
+            <mat-label>{{"labels.inputs.Transfer Description" | translate }}</mat-label>
             <input matInput formControlName="transferDescription"/>
           </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>
 
@@ -62,8 +62,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]="!closeOnMaturityAccountForm.valid">Confirm</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate }}</button>
+        <button mat-raised-button color="warn" [disabled]="!closeOnMaturityAccountForm.valid">{{"labels.buttons.Confirm" | translate }}</button>
       </mat-card-actions>
 
     </form>

src/app/deposits/fixed-deposits/fixed-deposits-account-actions/premature-close-fixed-deposits-account/premature-close-fixed-deposits-account.component.html

@@ -9,51 +9,51 @@
         <div fxLayout="column">
 
           <mat-form-field (click)="closedOnDatePicker.open()">
-            <mat-label>Premature Close Date</mat-label>
+            <mat-label>{{"labels.inputs.Premature Close 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="prematureCloseAccountForm.controls.closedOnDate.hasError('required')">
-              Premature Close Date is <strong>required</strong>
+              {{"labels.inputs.Premature Close Date" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field *ngIf="prematureCloseAccountForm.controls.maturityAmount">
-            <mat-label>Maturity Amount</mat-label>
+            <mat-label>{{"labels.inputs.Maturity Amount" | translate }}</mat-label>
             <input type="number" matInput formControlName="maturityAmount"/>
           </mat-form-field>
 
           <mat-form-field *ngIf="prematureCloseAccountForm.contains('onAccountClosureId')">
-            <mat-label>Action</mat-label>
+            <mat-label>{{"labels.inputs.Action" | translate }}</mat-label>
             <mat-select required formControlName="onAccountClosureId">
               <mat-option *ngFor="let closureOption of onAccountClosureOptions" [value]="closureOption.id">
                 {{ closureOption.value }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="prematureCloseAccountForm.controls.onAccountClosureId.hasError('required')">
-              Account action is <strong>required</strong>
+              {{"labels.inputs.Account action" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field *ngIf="prematureCloseAccountForm.contains('toSavingsAccountId')">
-            <mat-label>Transfer to Savings</mat-label>
+            <mat-label>{{"labels.inputs.Transfer to Savings" | translate }}</mat-label>
             <mat-select required formControlName="toSavingsAccountId">
               <mat-option *ngFor="let account of savingsAccountsData" [value]="account.id">
                 {{ account.accountNo }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="prematureCloseAccountForm.controls.toSavingsAccountId.hasError('required')">
-              Transfer to savings account is <strong>required</strong>
+              {{"labels.inputs.Transfer to savings account" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field *ngIf="prematureCloseAccountForm.contains('transferDescription')">
-            <mat-label>Transfer Description</mat-label>
+            <mat-label>{{"labels.inputs.Transfer Description" | translate }}</mat-label>
             <input matInput formControlName="transferDescription"/>
           </mat-form-field>
 
           <mat-form-field *ngIf="prematureCloseAccountForm.contains('note')">
-            <mat-label>Note</mat-label>
+            <mat-label>{{"labels.inputs.Note" | translate }}</mat-label>
             <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
 
@@ -62,8 +62,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]="!prematureCloseAccountForm.valid">Confirm</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate }}</button>
+        <button mat-raised-button color="warn" [disabled]="!prematureCloseAccountForm.valid">{{"labels.buttons.Confirm" | translate }}</button>
       </mat-card-actions>
 
     </form>

src/app/deposits/fixed-deposits/fixed-deposits-account-actions/reject-fixed-deposits-account/reject-fixed-deposits-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="rejectFixedDepositsAccountForm.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]="!rejectFixedDepositsAccountForm.valid">Confirm</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate }}</button>
+        <button mat-raised-button color="warn" [disabled]="!rejectFixedDepositsAccountForm.valid">{{"labels.buttons.Confirm" | translate }}</button>
       </mat-card-actions>
 
     </form>

src/app/deposits/fixed-deposits/fixed-deposits-account-actions/undo-approval-fixed-deposits-account/undo-approval-fixed-deposits-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]="!undoApprovalFixedDepositsAccountForm.valid">Confirm</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate }}</button>
+        <button mat-raised-button color="warn" [disabled]="!undoApprovalFixedDepositsAccountForm.valid">{{"labels.buttons.Confirm" | translate }}</button>
       </mat-card-actions>
 
     </form>

src/app/deposits/fixed-deposits/fixed-deposits-account-actions/withdraw-by-client-fixed-deposits-account/withdraw-by-client-fixed-deposits-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="withdrawFixedDepositsAccountForm.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]="!withdrawFixedDepositsAccountForm.valid">Confirm</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate }}</button>
+        <button mat-raised-button color="primary" [disabled]="!withdrawFixedDepositsAccountForm.valid">{{"labels.buttons.Confirm" | translate }}</button>
       </mat-card-actions>
 
     </form>

src/app/deposits/recurring-deposits/create-recurring-deposits-account/create-recurring-deposits-account.component.html

@@ -23,7 +23,7 @@
 
     <mat-step [stepControl]="recurringDepositAccountDetailsForm">
 
-      <ng-template matStepLabel>DETAILS</ng-template>
+      <ng-template matStepLabel>{{"labels.inputs.DETAILS" | translate }}</ng-template>
 
       <mifosx-recurring-deposits-account-details-step
         [recurringDepositsAccountTemplate]="recurringDepositsAccountTemplate"
@@ -34,7 +34,7 @@
 
     <mat-step [stepControl]="recurringDepositAccountCurrencyForm">
 
-      <ng-template matStepLabel>CURRENCY</ng-template>
+      <ng-template matStepLabel>{{"labels.inputs.CURRENCY" | translate }}</ng-template>
 
       <mifosx-recurring-deposits-account-currency-step
         [recurringDepositsAccountTemplate]="recurringDepositsAccountTemplate"
@@ -45,7 +45,7 @@
 
     <mat-step [stepControl]="recurringDepositAccountTermsForm">
 
-      <ng-template matStepLabel>TERMS</ng-template>
+      <ng-template matStepLabel>{{"labels.inputs.TERMS" | translate }}</ng-template>
 
       <mifosx-recurring-deposits-account-terms-step
         [recurringDepositsAccountTemplate]="recurringDepositsAccountTemplate"
@@ -56,7 +56,7 @@
 
     <mat-step [stepControl]="recurringDepositAccountSettingsForm">
 
-      <ng-template matStepLabel>SETTINGS</ng-template>
+      <ng-template matStepLabel>{{"labels.inputs.SETTINGS" | translate }}</ng-template>
 
       <mifosx-recurring-deposits-account-settings-step
         [recurringDepositsAccountTemplate]="recurringDepositsAccountTemplate"
@@ -67,7 +67,7 @@
 
     <mat-step>
 
-      <ng-template matStepLabel>INTEREST RATE CHART</ng-template>
+      <ng-template matStepLabel>{{"labels.inputs.INTEREST RATE CHART" | translate }}</ng-template>
 
       <mifosx-recurring-deposits-account-interest-rate-chart-step
         [recurringDepositsAccountTemplate]="recurringDepositsAccountTemplate"
@@ -78,7 +78,7 @@
 
     <mat-step>
 
-      <ng-template matStepLabel>CHARGES</ng-template>
+      <ng-template matStepLabel>{{"labels.inputs.CHARGES" | translate }}</ng-template>
 
       <mifosx-recurring-deposits-account-charges-step
         [recurringDepositsAccountTemplate]="recurringDepositsAccountTemplate"
@@ -91,7 +91,7 @@
 
     <mat-step state="preview" *ngIf="recurringDepositAccountFormValid" completed>
 
-      <ng-template matStepLabel>PREVIEW</ng-template>
+      <ng-template matStepLabel>{{"labels.inputs.PREVIEW" | translate }}</ng-template>
 
       <mifosx-recurring-deposits-account-preview-step
         [recurringDepositsAccountTemplate]="recurringDepositsAccountTemplate"

src/app/deposits/recurring-deposits/edit-recurring-deposit-account/edit-recurring-deposit-account.component.html

@@ -23,7 +23,7 @@
 
     <mat-step [stepControl]="recurringDepositAccountDetailsForm">
 
-      <ng-template matStepLabel>DETAILS</ng-template>
+      <ng-template matStepLabel>{{"labels.inputs.DETAILS" | translate }}</ng-template>
 
       <mifosx-recurring-deposits-account-details-step
         [recurringDepositsAccountTemplate]="recurringDepositsAccountAndTemplate"
@@ -34,7 +34,7 @@
 
     <mat-step [stepControl]="recurringDepositAccountCurrencyForm">
 
-      <ng-template matStepLabel>CURRENCY</ng-template>
+      <ng-template matStepLabel>{{"labels.inputs.CURRENCY" | translate }}</ng-template>
 
       <mifosx-recurring-deposits-account-currency-step
         [recurringDepositsAccountTemplate]="recurringDepositsAccountAndTemplate"
@@ -45,7 +45,7 @@
 
     <mat-step [stepControl]="recurringDepositAccountTermsForm">
 
-      <ng-template matStepLabel>TERMS</ng-template>
+      <ng-template matStepLabel>{{"labels.inputs.TERMS" | translate }}</ng-template>
 
       <mifosx-recurring-deposits-account-terms-step
         [recurringDepositsAccountTemplate]="recurringDepositsAccountAndTemplate"
@@ -56,7 +56,7 @@
 
     <mat-step [stepControl]="recurringDepositAccountSettingsForm">
 
-      <ng-template matStepLabel>SETTINGS</ng-template>
+      <ng-template matStepLabel>{{"labels.inputs.SETTINGS" | translate }}</ng-template>
 
       <mifosx-recurring-deposits-account-settings-step
         [recurringDepositsAccountTemplate]="recurringDepositsAccountAndTemplate"
@@ -67,7 +67,7 @@
 
     <mat-step>
 
-      <ng-template matStepLabel>INTEREST RATE CHART</ng-template>
+      <ng-template matStepLabel>{{"labels.inputs.INTEREST RATE CHART" | translate }}</ng-template>
 
       <mifosx-recurring-deposits-account-interest-rate-chart-step
         [recurringDepositsAccountTemplate]="recurringDepositsAccountAndTemplate"
@@ -78,7 +78,7 @@
 
     <mat-step>
 
-      <ng-template matStepLabel>CHARGES</ng-template>
+      <ng-template matStepLabel>{{"labels.inputs.CHARGES" | translate }}</ng-template>
 
       <mifosx-recurring-deposits-account-charges-step
         [recurringDepositsAccountTemplate]="recurringDepositsAccountAndTemplate"
@@ -91,7 +91,7 @@
 
     <mat-step state="preview" *ngIf="recurringDepositAccountFormValidAndNotPristine" completed>
 
-      <ng-template matStepLabel>PREVIEW</ng-template>
+      <ng-template matStepLabel>{{"labels.inputs.PREVIEW" | translate }}</ng-template>
 
       <mifosx-recurring-deposits-account-preview-step
         [recurringDepositsAccountTemplate]="recurringDepositsAccountAndTemplate"

src/app/deposits/recurring-deposits/recurring-deposits-account-actions/activate-recurring-deposits-account/activate-recurring-deposits-account.component.html

@@ -7,21 +7,21 @@
       <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="activateRecurringDepositsAccountForm.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]="['../../']">Cancel</button>
-        <button mat-raised-button color="primary" [disabled]="!activateRecurringDepositsAccountForm.valid">Confirm</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate }}</button>
+        <button mat-raised-button color="primary" [disabled]="!activateRecurringDepositsAccountForm.valid">{{"labels.buttons.Confirm" | translate }}</button>
       </mat-card-actions>
 
     </form>

src/app/deposits/recurring-deposits/recurring-deposits-account-actions/add-charge-recurring-deposits-account/add-charge-recurring-deposits-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="recurringDepositsChargeForm.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="recurringDepositsChargeForm.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="recurringDepositsChargeForm.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="recurringDepositsChargeForm.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="recurringDepositsChargeForm.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="recurringDepositsChargeForm.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="recurringDepositsChargeForm.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]="['../../']">Cancel</button>
-          <button mat-raised-button color="primary" [disabled]="!recurringDepositsChargeForm.valid">Submit</button>
+          <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate }}</button>
+          <button mat-raised-button color="primary" [disabled]="!recurringDepositsChargeForm.valid">{{"labels.buttons.Submit" | translate }}</button>
         </mat-card-actions>
 
       </mat-card-content>

src/app/deposits/recurring-deposits/recurring-deposits-account-actions/approve-recurring-deposits-account/approve-recurring-deposits-account.component.html

@@ -9,18 +9,18 @@
         <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="approveRecurringDepositsAccountForm.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>
 
@@ -29,8 +29,8 @@
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
-        <button mat-raised-button color="primary" [disabled]="!approveRecurringDepositsAccountForm">Confirm</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate }}</button>
+        <button mat-raised-button color="primary" [disabled]="!approveRecurringDepositsAccountForm">{{"labels.buttons.Confirm" | translate }}</button>
       </mat-card-actions>
 
     </form>

src/app/deposits/recurring-deposits/recurring-deposits-account-actions/close-recurring-deposits-account/close-recurring-deposits-account.component.html

@@ -11,26 +11,26 @@
           <h3 class="mat-h3" fxFlexFill>{{title}}</h3>
 
           <mat-form-field (click)="closedOnDatePicker.open()">
-            <mat-label>Closed On</mat-label>
+            <mat-label>{{"labels.inputs.Closed On" | 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="closeRecurringDepositForm.controls.closedOnDate.hasError('required')">
-              Closed On <strong>is required</strong>
+              {{"labels.inputs.Closed On" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Maturity Amount</mat-label>
+            <mat-label>{{"labels.inputs.Maturity Amount" | translate }}</mat-label>
             <input matInput required formControlName="maturityAmount">
             <mat-error *ngIf="closeRecurringDepositForm.controls.maturityAmount.hasError('required')">
-              Maturity Amount <strong>is required</strong>
+              {{"labels.inputs.Maturity Amount" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Action</mat-label>
+            <mat-label>{{"labels.inputs.Action" | translate }}</mat-label>
             <mat-select formControlName="onAccountClosureId" required>
               <mat-option *ngFor="let onAccountClosureOption of onAccountClosureOptions"
                 [value]="onAccountClosureOption.id">
@@ -38,24 +38,24 @@
               </mat-option>
             </mat-select>
             <mat-error *ngIf="closeRecurringDepositForm.controls.onAccountClosureId.hasError('required')">
-              Action <strong>is required</strong>
+              {{"labels.inputs.Action" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Payment Type Id</mat-label>
+            <mat-label>{{"labels.inputs.Payment Type Id" | translate }}</mat-label>
             <mat-select formControlName="paymentTypeId" required>
               <mat-option *ngFor="let paymentType of paymentTypes" [value]="paymentType.id">
                 {{ paymentType.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="closeRecurringDepositForm.controls.paymentTypeId.hasError('required')">
-              Payment Type <strong>is required</strong>
+              {{"labels.inputs.Payment Type" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <div fxFlexFill>
-            <span fxFlex="25%">Show Payment Details</span>
+            <span fxFlex="25%">{{"labels.inputs.Show Payment Details" | translate }}</span>
             <span fxFlex="75%" class="expandcollapsebutton" (click)="toggleDisplay()">
               <button mat-raised-button color="primary" *ngIf="showPaymentDetails">
                 <i class="fa fa-minus"></i>
@@ -68,33 +68,33 @@
 
           <ng-container *ngIf="showPaymentDetails">
             <mat-form-field>
-              <mat-label> Account #</mat-label>
+              <mat-label> {{"labels.inputs.Account" | translate }} #</mat-label>
               <input matInput formControlName="accountNumber">
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>Cheque #</mat-label>
+              <mat-label>{{"labels.inputs.Cheque" | translate }} #</mat-label>
               <input matInput formControlName="chequeNumber">
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>Routing Code</mat-label>
+              <mat-label>{{"labels.inputs.Routing Code" | translate }}</mat-label>
               <input matInput formControlName="routingCode">
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>Reciept #</mat-label>
+              <mat-label>{{"labels.inputs.Reciept" | translate }} #</mat-label>
               <input matInput formControlName="receiptNumber">
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>Bank #</mat-label>
+              <mat-label>{{"labels.inputs.Bank" | translate }} #</mat-label>
               <input matInput formControlName="bankNumber">
             </mat-form-field>
           </ng-container>
 
           <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>
 
@@ -103,8 +103,8 @@
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../general']">Cancel</button>
-        <button mat-raised-button color="primary" [disabled]="!closeRecurringDepositForm.valid">Submit</button>
+        <button type="button" mat-raised-button [routerLink]="['../general']">{{"labels.buttons.Cancel" | translate }}</button>
+        <button mat-raised-button color="primary" [disabled]="!closeRecurringDepositForm.valid">{{"labels.buttons.Submit" | translate }}</button>
       </mat-card-actions>
 
     </form>

src/app/deposits/recurring-deposits/recurring-deposits-account-actions/deposit-recurring-deposits-account/deposit-recurring-deposits-account.component.html

@@ -9,38 +9,38 @@
         <div fxLayout="column">
 
           <mat-form-field (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="depositRecurringDepositForm.controls.transactionDate.hasError('required')">
-              Transaction Date <strong>is 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>
-            <mat-label>Transaction Amount</mat-label>
+            <mat-label>{{"labels.inputs.Transaction Amount" | translate }}</mat-label>
             <input matInput required formControlName="transactionAmount">
             <mat-error *ngIf="depositRecurringDepositForm.controls.transactionAmount.hasError('required')">
-              Transaction Amount <strong>is 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 Id</mat-label>
+            <mat-label>{{"labels.inputs.Payment Type Id" | translate }}</mat-label>
             <mat-select formControlName="paymentTypeId" required>
               <mat-option *ngFor="let paymentType of paymentTypes" [value]="paymentType.id">
                 {{ paymentType.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="depositRecurringDepositForm.controls.paymentTypeId.hasError('required')">
-              Payment Type <strong>is required</strong>
+              {{"labels.inputs.Payment Type" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <div fxFlexFill>
-            <span fxFlex="25%">Show Payment Details</span>
+            <span fxFlex="25%">{{"labels.inputs.Show Payment Details" | translate }}</span>
             <span fxFlex="75%" class="expandcollapsebutton" (click)="toggleDisplay()">
               <button mat-raised-button color="primary" *ngIf="showPaymentDetails">
                 <i class="fa fa-minus"></i>
@@ -53,33 +53,33 @@
 
           <ng-container *ngIf="showPaymentDetails">
             <mat-form-field>
-              <mat-label> Account #</mat-label>
+              <mat-label> {{"labels.inputs.Account" | translate }} #</mat-label>
               <input matInput formControlName="accountNumber">
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>Cheque #</mat-label>
+              <mat-label>{{"labels.inputs.Cheque" | translate }} #</mat-label>
               <input matInput formControlName="chequeNumber">
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>Routing Code</mat-label>
+              <mat-label>{{"labels.inputs.Routing Code" | translate }}</mat-label>
               <input matInput formControlName="routingCode">
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>Reciept #</mat-label>
+              <mat-label>{{"labels.inputs.Reciept" | translate }} #</mat-label>
               <input matInput formControlName="receiptNumber">
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>Bank #</mat-label>
+              <mat-label>{{"labels.inputs.Bank" | translate }} #</mat-label>
               <input matInput formControlName="bankNumber">
             </mat-form-field>
           </ng-container>
 
           <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>
 
@@ -88,8 +88,8 @@
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../general']">Cancel</button>
-        <button mat-raised-button color="primary" [disabled]="!depositRecurringDepositForm.valid">Submit</button>
+        <button type="button" mat-raised-button [routerLink]="['../general']">{{"labels.buttons.Cancel" | translate }}</button>
+        <button mat-raised-button color="primary" [disabled]="!depositRecurringDepositForm.valid">{{"labels.buttons.Submit" | translate }}</button>
       </mat-card-actions>
 
     </form>

src/app/deposits/recurring-deposits/recurring-deposits-account-actions/premature-close-recurring-deposit-account/premature-close-recurring-deposit-account.component.html

@@ -9,13 +9,13 @@
         <div fxLayout="column">
 
           <mat-form-field (click)="closedOnDatePicker.open()">
-            <mat-label>Closed On</mat-label>
+            <mat-label>{{"labels.inputs.Closed On" | 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="prematureCloseRecurringDepositsAccountForm.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>
 
@@ -24,8 +24,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]="!prematureCloseRecurringDepositsAccountForm">Confirm</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate }}</button>
+        <button mat-raised-button color="primary" [disabled]="!prematureCloseRecurringDepositsAccountForm">{{"labels.buttons.Confirm" | translate }}</button>
       </mat-card-actions>
 
     </form>

src/app/deposits/recurring-deposits/recurring-deposits-account-actions/reject-recurring-deposits-account/reject-recurring-deposits-account.component.html

@@ -9,18 +9,18 @@
         <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="rejectRecurringDepositsAccountForm.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>
 
@@ -29,8 +29,8 @@
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
-        <button mat-raised-button color="primary" [disabled]="!rejectRecurringDepositsAccountForm">Confirm</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate }}</button>
+        <button mat-raised-button color="primary" [disabled]="!rejectRecurringDepositsAccountForm">{{"labels.buttons.Confirm" | translate }}</button>
       </mat-card-actions>
 
     </form>

src/app/deposits/recurring-deposits/recurring-deposits-account-actions/undo-approval-recurring-deposits-account/undo-approval-recurring-deposits-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]="!undoApprovalRecurringDepositsAccountForm.valid">Confirm</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate }}</button>
+        <button mat-raised-button color="warn" [disabled]="!undoApprovalRecurringDepositsAccountForm.valid">{{"labels.buttons.Confirm" | translate }}</button>
       </mat-card-actions>
 
     </form>

src/app/deposits/recurring-deposits/recurring-deposits-account-actions/withdraw-by-client-recurring-deposits-account/withdraw-by-client-recurring-deposits-account.component.html

@@ -9,18 +9,18 @@
         <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="withdrawRecurringDepositsAccountForm.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>
 
@@ -29,8 +29,8 @@
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
-        <button mat-raised-button color="primary" [disabled]="!withdrawRecurringDepositsAccountForm.valid">Confirm</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate }}</button>
+        <button mat-raised-button color="primary" [disabled]="!withdrawRecurringDepositsAccountForm.valid">{{"labels.buttons.Confirm" | translate }}</button>
       </mat-card-actions>
 
     </form>

src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-charges-step/recurring-deposits-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">
@@ -13,7 +13,7 @@
   <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>
 
@@ -21,21 +21,21 @@
     [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 }}
         <button mat-icon-button color="primary" (click)="editChargeAmount(charge)">
@@ -45,14 +45,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="date">
-      <th mat-header-cell *matHeaderCellDef> Date </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Date" | translate }} </th>
       <td mat-cell *matCellDef="let charge">
         <span *ngIf="charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee'">
           {{(charge.dueDate | dateFormat) || 'Unassigned'}}
@@ -62,7 +62,7 @@
         </span>
         <span *ngIf="!(charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'
                 || charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee')">
-          N/A
+                {{"labels.inputs.N/A" | translate }}
         </span>
         <button mat-icon-button color="primary" *ngIf="charge.chargeTimeType.value === 'Weekly Fee' || charge.chargeTimeType.value === 'Annual Fee'
                       || charge.chargeTimeType.value === 'Specified due date'" (click)="editChargeDate(charge)">
@@ -72,7 +72,7 @@
     </ng-container>
 
     <ng-container matColumnDef="repaymentsEvery">
-      <th mat-header-cell *matHeaderCellDef> Repayments Every </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Repayments Every" | translate }} </th>
       <td mat-cell *matCellDef="let charge">
         {{ charge.feeInterval || 'Not Provided' }}
         <button mat-icon-button color="primary"
@@ -84,7 +84,7 @@
     </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>
@@ -102,10 +102,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 [disabled]="!recurringDepositAccountFormValid">
-    Next
+    {{"labels.buttons.Next" | translate }}
     <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
   </button>
 </div>

src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-currency-step/recurring-deposits-account-currency-step.component.html

@@ -3,13 +3,13 @@
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Currency</mat-label>
+      <mat-label>{{"labels.inputs.Currency" | translate }}</mat-label>
       <input type="text" matInput formControlName="currencyCode" matTooltip="Add Currency" matTooltipPosition="above" required>
 
     </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="decimalPlaces" required matTooltip="Add Decimal Places" matTooltipPosition="above">
     </mat-form-field>
 
@@ -18,10 +18,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>

src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-details-step/recurring-deposits-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="submittedOnDate" 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>Field Officer</mat-label>
+      <mat-label>{{"labels.inputs.Field Officer" | translate }}</mat-label>
       <mat-select formControlName="fieldOfficerId">
         <mat-option *ngFor="let officer of fieldOfficerData" [value]="officer.id">
           {{ officer.displayName }}
@@ -39,10 +39,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>

src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-interest-rate-chart-step/recurring-deposits-account-interest-rate-chart-step.component.html

@@ -1,27 +1,27 @@
 <div fxLayout="column" fxLayoutGap="2%">
 
   <div fxFlexFill *ngIf="recurringDepositsAccountProductTemplate?.accountChart.name">
-    <span fxFlex="40%">Name:</span>
+    <span fxFlex="40%">{{"labels.inputs.name" | translate }}:</span>
     <span fxFlex="60%">{{ recurringDepositsAccountProductTemplate.accountChart.name }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Valid from Date:</span>
-    <span fxFlex="60%">{{ recurringDepositsAccountProductTemplate?.accountChart.fromDate | dateFormat }}</span>
+    <span fxFlex="40%">{{"labels.inputs.Valid from Date" | translate }}:</span>
+    <span fxFlex="60%">{{ recurringDepositsAccountProductTemplate?.accountChart.fromDate  | dateFormat }}</span>
   </div>
 
   <div fxFlexFill *ngIf="recurringDepositsAccountProductTemplate?.accountChart.endDate">
-    <span fxFlex="40%">End Date:</span>
-    <span fxFlex="60%">{{ recurringDepositsAccountProductTemplate?.accountChart.endDate | dateFormat }}</span>
+    <span fxFlex="40%">{{"labels.inputs.End Date" | translate }}:</span>
+    <span fxFlex="60%">{{ recurringDepositsAccountProductTemplate?.accountChart.endDate  | dateFormat }}</span>
   </div>
 
   <div fxFlexFill *ngIf="recurringDepositsAccountProductTemplate?.accountChart.description">
-    <span fxFlex="40%">Description:</span>
+    <span fxFlex="40%">{{"labels.inputs.Description" | translate }}:</span>
     <span fxFlex="60%">{{ recurringDepositsAccountProductTemplate?.accountChart.description }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Primary Grouping by Amount:</span>
+    <span fxFlex="40%">{{"labels.inputs.Primary Grouping by Amount" | translate }}:</span>
     <span
       fxFlex="60%">{{ recurringDepositsAccountProductTemplate?.accountChart.isPrimaryGroupingByAmount | yesNo }}</span>
   </div>
@@ -29,38 +29,38 @@
   <table class="mat-elevation-z1" mat-table [dataSource]="interestRateChartData" #chartsTable multiTemplateDataRows>
 
     <ng-container matColumnDef="period">
-      <th mat-header-cell *matHeaderCellDef> Period </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Period" | translate }} </th>
       <td mat-cell *matCellDef="let chartSlab">
         {{chartSlab.fromPeriod}}-{{chartSlab.toPeriod}}&nbsp;{{chartSlab.periodType.value}}</td>
     </ng-container>
 
     <ng-container matColumnDef="amountRange">
-      <th mat-header-cell *matHeaderCellDef> Amount Range </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Amount Range" | translate }} </th>
       <td mat-cell *matCellDef="let chartSlab">{{chartSlab.amountRangeFrom}}-{{chartSlab.amountRangeTo}}</td>
     </ng-container>
 
     <ng-container matColumnDef="interest">
-      <th mat-header-cell *matHeaderCellDef> Interest </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Interest" | translate }} </th>
       <td mat-cell *matCellDef="let chartSlab"> {{ chartSlab.annualInterestRate }} </td>
     </ng-container>
 
     <ng-container matColumnDef="description">
-      <th mat-header-cell *matHeaderCellDef> Description </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Description" | translate }} </th>
       <td mat-cell *matCellDef="let chartSlab"> {{ chartSlab.description }} </td>
     </ng-container>
 
     <ng-container matColumnDef="actions">
-      <th mat-header-cell *matHeaderCellDef> Actions </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Actions" | translate }} </th>
       <td mat-cell *matCellDef="let chartSlab; let chartSlabIndex = dataIndex">
         <button mat-button color="primary"
           (click)="expandChartSlabIndex = expandChartSlabIndex === chartSlabIndex ? null : chartSlabIndex">
           <span *ngIf="expandChartSlabIndex !== chartSlabIndex">
             <fa-icon icon="eye" class="m-r-10"></fa-icon>
-            View Incentives
+            {{"labels.buttons.View Incentives" | translate }}
           </span>
           <span *ngIf="expandChartSlabIndex === chartSlabIndex">
             <fa-icon icon="eye-slash" class="m-r-10"></fa-icon>
-            Hide Incentives
+            {{"labels.buttons.Hide Incentives" | translate }}
           </span>
         </button>
       </td>
@@ -76,49 +76,49 @@
           <mat-card fxLayout="row wrap" fxFlexFill>
 
             <h4 class="m-b-10" fxFlex="13%">
-              Incentives
+              {{"labels.heading.Incentives" | translate }}
             </h4>
 
             <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="chartSlab.incentives"
               *ngIf="chartSlab.incentives.length">
 
               <ng-container matColumnDef="entityType">
-                <th mat-header-cell *matHeaderCellDef> Entity Type </th>
+                <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Entity Type" | translate }} </th>
                 <td mat-cell *matCellDef="let incentive">
                   {{ incentive.entityType.value }}
                 </td>
               </ng-container>
 
               <ng-container matColumnDef="attributeName">
-                <th mat-header-cell *matHeaderCellDef> Attribute Name </th>
+                <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Attribute Name" | translate }} </th>
                 <td mat-cell *matCellDef="let incentive">
                   {{ incentive.attributeName.value }}
                 </td>
               </ng-container>
 
               <ng-container matColumnDef="conditionType">
-                <th mat-header-cell *matHeaderCellDef> Condition Type </th>
+                <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Condition Type" | translate }} </th>
                 <td mat-cell *matCellDef="let incentive">
                   {{ incentive.conditionType.value | titlecase }}
                 </td>
               </ng-container>
 
               <ng-container matColumnDef="attributeValue">
-                <th mat-header-cell *matHeaderCellDef> Attribute Value </th>
+                <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Attribute Value" | translate }} </th>
                 <td mat-cell *matCellDef="let incentive" [ngSwitch]="incentive.attributeName">
                   {{ incentive.attributeValueDesc }}
                 </td>
               </ng-container>
 
               <ng-container matColumnDef="incentiveType">
-                <th mat-header-cell *matHeaderCellDef> Incentive Type </th>
+                <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Incentive Type" | translate }} </th>
                 <td mat-cell *matCellDef="let incentive">
                   {{ incentive.incentiveType.value }}
                 </td>
               </ng-container>
 
               <ng-container matColumnDef="amount">
-                <th mat-header-cell *matHeaderCellDef> Interest </th>
+                <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Interest" | translate }} </th>
                 <td mat-cell *matCellDef="let incentive">
                   {{ incentive.amount }}
                 </td>
@@ -145,10 +145,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>

src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-preview-step/recurring-deposits-account-preview-step.component.html

@@ -1,106 +1,106 @@
 <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%">{{ recurringDepositAccountData.productId | find:recurringDepositsAccountTemplate.productOptions:'id':'name' }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Submitted On</span>
-    <span fxFlex="60%">{{ recurringDepositAccountData.submittedOnDate | dateFormat }}</span>
+    <span fxFlex="40%">{{"labels.inputs.Submitted On" | translate }}</span>
+    <span fxFlex="60%">{{ recurringDepositAccountData.submittedOnDate  | dateFormat }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Field Officer</span>
+    <span fxFlex="40%">{{"labels.inputs.Field Officer" | translate }}</span>
     <span
       fxFlex="60%">{{ recurringDepositAccountData.fieldOfficerId | find:recurringDepositsAccountProductTemplate.fieldOfficerOptions:'id':'displayName' }}</span>
   </div>
 
-  <h3 class="mat-h3" fxFlexFill>Currency</h3>
+  <h3 class="mat-h3" fxFlexFill>{{"labels.heading.Currency" | 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%">{{ recurringDepositsAccountProductTemplate.currency.code  }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Decimal Places</span>
+    <span fxFlex="40%">{{"labels.inputs.Decimal Places" | translate }}</span>
     <span fxFlex="60%">{{ recurringDepositsAccountProductTemplate.currency.decimalPlaces }}</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%">{{ recurringDepositsAccountProductTemplate.currency.inMultiplesOf }}</span>
   </div>
 
-  <h3 class="mat-h3" fxFlexFill>Terms</h3>
+  <h3 class="mat-h3" fxFlexFill>{{"labels.inputs.Terms" | translate }}</h3>
   <mat-divider fxFlexFill></mat-divider>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Interest Compounding Period:</span>
+    <span fxFlex="40%">{{"labels.inputs.Interest Compounding Period" | translate }}:</span>
     <span
       fxFlex="60%">{{ recurringDepositAccountData.interestCompoundingPeriodType | find:recurringDepositsAccountProductTemplate.interestCompoundingPeriodTypeOptions:'id':'value' }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Interest Posting Period:</span>
+    <span fxFlex="40%">{{"labels.inputs.Interest Posting Period" | translate }}:</span>
     <span
       fxFlex="60%">{{ recurringDepositAccountData.interestPostingPeriodType | find:recurringDepositsAccountProductTemplate.interestPostingPeriodTypeOptions:'id':'value' }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Interest Calculated using:</span>
+    <span fxFlex="40%">{{"labels.inputs.Interest Calculated using" | translate }}:</span>
     <span
       fxFlex="60%">{{ recurringDepositAccountData.interestCalculationType | find:recurringDepositsAccountProductTemplate.interestCalculationTypeOptions:'id':'value' }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Days in Year:</span>
+    <span fxFlex="40%">{{"labels.inputs.Days in Year" | translate }}:</span>
     <span
       fxFlex="60%">{{ recurringDepositAccountData.interestCalculationDaysInYearType | find:recurringDepositsAccountProductTemplate.interestCalculationDaysInYearTypeOptions:'id':'value' }}</span>
   </div>
 
-  <h3 class="mat-h3" fxFlexFill>Settings</h3>
+  <h3 class="mat-h3" fxFlexFill>{{"labels.inputs.Settings" | translate }}</h3>
 
   <mat-divider fxFlexFill></mat-divider>
 
   <div fxFlexFill *ngIf="recurringDepositAccountData.lockinPeriodFrequency">
-    <span fxFlex="40%">Lock-in Period:</span>
+    <span fxFlex="40%">{{"labels.inputs.Lock-in Period" | translate }}:</span>
     <span
       fxFlex="60%">{{ recurringDepositAccountData.lockinPeriodFrequency + ' ' + (recurringDepositAccountData.lockinPeriodFrequencyType | find:recurringDepositsAccountProductTemplate.lockinPeriodFrequencyTypeOptions:'id':'value') }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Recurring Deposit Amount:</span>
+    <span fxFlex="40%">{{"labels.inputs.Recurring Deposit Amount" | translate }}:</span>
     <span fxFlex="60%">{{ recurringDepositAccountData?.mandatoryRecommendedDepositAmount}}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Deposit Period:</span>
+    <span fxFlex="40%">{{"labels.inputs.Deposit Period" | translate }}:</span>
     <span
       fxFlex="60%">{{ recurringDepositAccountData.depositPeriod + ' ' + (recurringDepositAccountData.depositPeriodFrequencyId | find:recurringDepositsAccountProductTemplate.periodFrequencyTypeData:'id':'value') }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Deposit Frequency Same as Group/Center meeting:</span>
-    <span fxFlex="60%">{{ recurringDepositsAccountProductTemplate.isCalendarInherited === true | yesNo  }}</span>
+    <span fxFlex="40%">{{"labels.inputs.Deposit Frequency Same as Group/Center meeting" | translate }}:</span>
+    <span fxFlex="60%">{{ recurringDepositsAccountProductTemplate.isCalendarInherited === true ? 'Yes' : 'No'  }}</span>
   </div>
 
   <ng-container *ngIf="!recurringDepositsAccountProductTemplate.isCalendarInherited">
     <div fxFlexFill>
-      <span fxFlex="40%">Deposit Start Date:</span>
-      <span fxFlex="60%">{{ recurringDepositAccountData.expectedFirstDepositOnDate | dateFormat}}</span>
+      <span fxFlex="40%">{{"labels.inputs.Deposit Start Date" | translate }}:</span>
+      <span fxFlex="60%">{{ recurringDepositAccountData.expectedFirstDepositOnDate  | dateFormat}}</span>
     </div>
 
     <div fxFlexFill>
-      <span fxFlex="40%">Deposit Frequency:</span>
+      <span fxFlex="40%">{{"labels.inputs.Deposit Frequency" | translate }}:</span>
       <span *ngIf="recurringDepositAccountData.recurringFrequency"
         fxFlex="60%">{{ recurringDepositAccountData.recurringFrequency + ' ' + (recurringDepositAccountData.recurringFrequencyType | find:recurringDepositsAccountProductTemplate.periodFrequencyTypeData:'id':'value')}}</span>
     </div>
@@ -108,52 +108,52 @@
 
 
   <div fxFlexFill>
-    <span fxFlex="40%">Minimum Deposit Term:</span>
+    <span fxFlex="40%">{{"labels.inputs.Minimum Deposit Term" | translate }}:</span>
     <span
       fxFlex="60%">{{ (recurringDepositsAccountProductTemplate.minDepositTerm ? recurringDepositsAccountProductTemplate.minDepositTerm: '') + ' ' + (this.recurringDepositsAccountProductTemplate.minDepositTermType ? this.recurringDepositsAccountProductTemplate.minDepositTermType.value: '') }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">In Multiples Of:</span>
+    <span fxFlex="40%">{{"labels.inputs.In Multiples Of" | translate }}:</span>
     <span
       fxFlex="60%">{{ (recurringDepositsAccountProductTemplate.inMultiplesOfDepositTerm ? recurringDepositsAccountProductTemplate.inMultiplesOfDepositTerm: '') + ' ' + (this.recurringDepositsAccountProductTemplate.inMultiplesOfDepositTermType ? this.recurringDepositsAccountProductTemplate.inMultiplesOfDepositTermType.value: '') }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Maximum Deposit Term</span>
+    <span fxFlex="40%">{{"labels.inputs.Maximum Deposit Term" | translate }}</span>
     <span
       fxFlex="60%">{{ (recurringDepositsAccountProductTemplate.maxDepositTerm ? recurringDepositsAccountProductTemplate.maxDepositTerm: '') + ' ' + (this.recurringDepositsAccountProductTemplate.maxDepositTermType ? this.recurringDepositsAccountProductTemplate.maxDepositTermType.value: '') }}</span>
   </div>
 
 
-  <h3 class="mat-h3" fxFlexFill>Interest Rate Chart</h3>
+  <h3 class="mat-h3" fxFlexFill>{{"labels.inputs.Interest Rate Chart" | translate }}</h3>
 
   <mat-divider fxFlexFill></mat-divider>
 
   <div class="margin-b" fxFlexFill fxLayout="column">
 
     <div fxFlexFill *ngIf="recurringDepositsAccountProductTemplate?.accountChart.name">
-      <span fxFlex="40%">Name:</span>
+      <span fxFlex="40%">{{"labels.inputs.name" | translate }}:</span>
       <span fxFlex="60%">{{ recurringDepositsAccountProductTemplate?.accountChart.name }}</span>
     </div>
 
     <div fxFlexFill>
-      <span fxFlex="40%">Valid from Date:</span>
-      <span fxFlex="60%">{{ recurringDepositsAccountProductTemplate?.accountChart.fromDate | dateFormat }}</span>
+      <span fxFlex="40%">{{"labels.inputs.Valid from Date" | translate }}:</span>
+      <span fxFlex="60%">{{ recurringDepositsAccountProductTemplate?.accountChart.fromDate  | dateFormat }}</span>
     </div>
 
     <div fxFlexFill *ngIf="recurringDepositsAccountProductTemplate?.accountChart.endDate">
-      <span fxFlex="40%">End Date:</span>
-      <span fxFlex="60%">{{ recurringDepositsAccountProductTemplate?.accountChart.endDate | dateFormat }}</span>
+      <span fxFlex="40%">{{"labels.inputs.End Date" | translate }}:</span>
+      <span fxFlex="60%">{{ recurringDepositsAccountProductTemplate?.accountChart.endDate  | dateFormat }}</span>
     </div>
 
     <div fxFlexFill *ngIf="recurringDepositsAccountProductTemplate?.accountChart.description">
-      <span fxFlex="40%">Description:</span>
+      <span fxFlex="40%">{{"labels.inputs.Description" | translate }}:</span>
       <span fxFlex="60%">{{ recurringDepositsAccountProductTemplate?.accountChart.description }}</span>
     </div>
 
     <div fxFlexFill>
-      <span fxFlex="40%">Primary Grouping by Amount:</span>
+      <span fxFlex="40%">{{"labels.inputs.Primary Grouping by Amount" | translate }}:</span>
       <span
         fxFlex="60%">{{ recurringDepositsAccountProductTemplate?.accountChart.isPrimaryGroupingByAmount | yesNo }}</span>
     </div>
@@ -161,38 +161,38 @@
     <table class="mat-elevation-z1 irc-table" mat-table [dataSource]="interestRateChartData" multiTemplateDataRows>
 
       <ng-container matColumnDef="period">
-        <th mat-header-cell *matHeaderCellDef> Period </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Period" | translate }} </th>
         <td mat-cell *matCellDef="let chartSlab">
           {{chartSlab.fromPeriod}}-{{chartSlab.toPeriod}}&nbsp;{{chartSlab.periodType.value}}</td>
       </ng-container>
 
       <ng-container matColumnDef="amountRange">
-        <th mat-header-cell *matHeaderCellDef> Amount Range </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Amount Range" | translate }} </th>
         <td mat-cell *matCellDef="let chartSlab">{{chartSlab.amountRangeFrom}}-{{chartSlab.amountRangeTo}}</td>
       </ng-container>
 
       <ng-container matColumnDef="interest">
-        <th mat-header-cell *matHeaderCellDef> Interest </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Interest" | translate }} </th>
         <td mat-cell *matCellDef="let chartSlab"> {{ chartSlab.annualInterestRate }} </td>
       </ng-container>
 
       <ng-container matColumnDef="description">
-        <th mat-header-cell *matHeaderCellDef> Description </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Description" | translate }} </th>
         <td mat-cell *matCellDef="let chartSlab"> {{ chartSlab.description }} </td>
       </ng-container>
 
       <ng-container matColumnDef="actions">
-        <th mat-header-cell *matHeaderCellDef> Actions </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Actions" | translate }} </th>
         <td mat-cell *matCellDef="let chartSlab; let chartSlabIndex = dataIndex">
           <button mat-button color="primary"
             (click)="expandChartSlabIndex = expandChartSlabIndex === chartSlabIndex ? null : chartSlabIndex">
             <span *ngIf="expandChartSlabIndex !== chartSlabIndex">
               <fa-icon icon="eye" class="m-r-10"></fa-icon>
-              View Incentives
+              {{"labels.buttons.View Incentives" | translate }}
             </span>
             <span *ngIf="expandChartSlabIndex === chartSlabIndex">
               <fa-icon icon="eye-slash" class="m-r-10"></fa-icon>
-              Hide Incentives
+              {{"labels.buttons.Hide Incentives" | translate }}
             </span>
           </button>
         </td>
@@ -208,49 +208,49 @@
             <mat-card fxLayout="row wrap" fxFlexFill>
 
               <h4 class="m-b-10" fxFlex="13%">
-                Incentives
+                {{"labels.heading.Incentives" | translate }}
               </h4>
 
               <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="chartSlab.incentives"
                 *ngIf="chartSlab.incentives.length">
 
                 <ng-container matColumnDef="entityType">
-                  <th mat-header-cell *matHeaderCellDef> Entity Type </th>
+                  <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Entity Type" | translate }} </th>
                   <td mat-cell *matCellDef="let incentive">
                     {{ incentive.entityType.value }}
                   </td>
                 </ng-container>
 
                 <ng-container matColumnDef="attributeName">
-                  <th mat-header-cell *matHeaderCellDef> Attribute Name </th>
+                  <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Attribute Name" | translate }} </th>
                   <td mat-cell *matCellDef="let incentive">
                     {{ incentive.attributeName.value }}
                   </td>
                 </ng-container>
 
                 <ng-container matColumnDef="conditionType">
-                  <th mat-header-cell *matHeaderCellDef> Condition Type </th>
+                  <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Condition Type" | translate }} </th>
                   <td mat-cell *matCellDef="let incentive">
                     {{ incentive.conditionType.value | titlecase }}
                   </td>
                 </ng-container>
 
                 <ng-container matColumnDef="attributeValue">
-                  <th mat-header-cell *matHeaderCellDef> Attribute Value </th>
+                  <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Attribute Value" | translate }} </th>
                   <td mat-cell *matCellDef="let incentive" [ngSwitch]="incentive.attributeName">
                     {{ incentive.attributeValueDesc }}
                   </td>
                 </ng-container>
 
                 <ng-container matColumnDef="incentiveType">
-                  <th mat-header-cell *matHeaderCellDef> Incentive Type </th>
+                  <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Incentive Type" | translate }} </th>
                   <td mat-cell *matCellDef="let incentive">
                     {{ incentive.incentiveType.value }}
                   </td>
                 </ng-container>
 
                 <ng-container matColumnDef="amount">
-                  <th mat-header-cell *matHeaderCellDef> Interest </th>
+                  <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Interest" | translate }} </th>
                   <td mat-cell *matCellDef="let incentive">
                     {{ incentive.amount }}
                   </td>
@@ -276,35 +276,35 @@
 
   <div fxFlexFill *ngIf="recurringDepositAccountData.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]="recurringDepositAccountData.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 }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="date">
-        <th mat-header-cell *matHeaderCellDef> Date </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Date" | translate }} </th>
         <td mat-cell *matCellDef="let charge">
           <span
             *ngIf="charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee'">
@@ -316,20 +316,20 @@
           <span
             *ngIf="!(charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'
               || charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee')">
-            N/A
+              {{"labels.inputs.N/A" | translate }}
           </span>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="repaymentsEvery">
-        <th mat-header-cell *matHeaderCellDef> Repayments Every </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Repayments Every" | translate }} </th>
         <td mat-cell *matCellDef="let charge">
           {{ charge.feeInterval || 'Not Provided' }}
         </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>
@@ -347,12 +347,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>

src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-settings-step/recurring-deposits-account-settings-step.component.html

@@ -3,27 +3,27 @@
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
     <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="isMandatoryDeposit" class="margin-v">
-      Is Mandatory Deposit?
+      {{"labels.inputs.Is Mandatory Deposit" | translate }}?
     </mat-checkbox>
 
     <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="adjustAdvanceTowardsFuturePayments"
       class="margin-v">
-      Adjust advance payments toward future installments?
+      {{"labels.inputs.Adjust advance payments toward future installments" | translate }}?
     </mat-checkbox>
 
     <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="allowWithdrawal" class="margin-v">
-      Allow Withdrawals?
+      {{"labels.inputs.Allow Withdrawals" | translate }}?
     </mat-checkbox>
 
-    <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">
@@ -32,25 +32,25 @@
       </mat-select>
     </mat-form-field>
 
-    <h4 fxFlex="98%" class="mat-h4">Recurring Deposit Details</h4>
+    <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.Recurring Deposit Details" | translate }}</h4>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Recurring Deposit Amount</mat-label>
+      <mat-label>{{"labels.inputs.Recurring Deposit Amount" | translate }}</mat-label>
       <input type="number" matInput formControlName="mandatoryRecommendedDepositAmount" required>
       <mat-error>
-        Recurring Deposit Amount is <strong>required</strong>
+        {{"labels.inputs.Recurring Deposit Amount" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
       </mat-error>
     </mat-form-field>
 
-    <h4 fxFlex="98%" class="mat-h4">Deposit Period</h4>
+    <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.Deposit Period" | translate }}</h4>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Deposit Period</mat-label>
+      <mat-label>{{"labels.inputs.Deposit Period" | translate }}</mat-label>
       <input type="number" matInput formControlName="depositPeriod" required>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Type</mat-label>
+      <mat-label>{{"labels.inputs.Type" | translate }}</mat-label>
       <mat-select formControlName="depositPeriodFrequencyId" required>
         <mat-option *ngFor="let periodFrequencyType of periodFrequencyTypeData" [value]="periodFrequencyType.id">
           {{ periodFrequencyType.value }}
@@ -59,37 +59,37 @@
     </mat-form-field>
 
     <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="isCalendarInherited" class="margin-v">
-      Deposit Frequency Same as Group/Center meeting
+      {{"labels.inputs.Deposit Frequency Same as Group/Center meeting" | translate }}
     </mat-checkbox>
 
     <ng-container *ngIf="!recurringDepositAccountSettingsForm.value.isCalendarInherited">
       <mat-form-field fxFlex="48%" (click)="expectedFirstDepositOnDatePicker.open()">
-        <mat-label>Deposit Start Date</mat-label>
+        <mat-label>{{"labels.inputs.Deposit Start Date" | translate }}</mat-label>
         <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="expectedFirstDepositOnDatePicker"
           formControlName="expectedFirstDepositOnDate" required>
         <mat-datepicker-toggle matSuffix [for]="expectedFirstDepositOnDatePicker"></mat-datepicker-toggle>
         <mat-datepicker #expectedFirstDepositOnDatePicker></mat-datepicker>
       </mat-form-field>
 
-      <h4 fxFlex="98%" class="mat-h4">Deposit Frequency</h4>
+      <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.Deposit Frequency" | translate }}</h4>
 
       <mat-form-field fxFlex="48%">
-        <mat-label>Deposit Frequency</mat-label>
+        <mat-label>{{"labels.inputs.Deposit Frequency" | translate }}</mat-label>
         <input type="number" matInput formControlName="recurringFrequency" required>
         <mat-error>
-          Deposit Frequency is <strong>required</strong>
+          {{"labels.inputs.Deposit Frequency" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
         </mat-error>
       </mat-form-field>
 
       <mat-form-field fxFlex="48%">
-        <mat-label>Type</mat-label>
+        <mat-label>{{"labels.inputs.Type" | translate }}</mat-label>
         <mat-select formControlName="recurringFrequencyType" required>
           <mat-option *ngFor="let periodFrequencyType of periodFrequencyTypeData" [value]="periodFrequencyType.id">
             {{ periodFrequencyType.value }}
           </mat-option>
         </mat-select>
         <mat-error>
-          Deposit Frequency Type is <strong>required</strong>
+          {{"labels.inputs.Deposit Frequency Type" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
         </mat-error>
       </mat-form-field>
     </ng-container>
@@ -97,37 +97,37 @@
 
     <mat-divider fxFlex="98%"></mat-divider>
 
-    <h4 fxFlex="98%" class="mat-h4">Minimum Deposit Term</h4>
+    <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.Minimum Deposit Term" | 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="minDepositTerm" required>
       <mat-error>
-        Minimum Deposit Term Frequency is <strong>required</strong>
+        {{"labels.inputs.Minimum Deposit Term Frequency" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Frequency Type</mat-label>
+      <mat-label>{{"labels.inputs.Frequency Type" | translate }}</mat-label>
       <mat-select formControlName="minDepositTermTypeId" required>
         <mat-option *ngFor="let periodFrequencyType of periodFrequencyTypeData" [value]="periodFrequencyType.id">
           {{ periodFrequencyType.value }}
         </mat-option>
       </mat-select>
       <mat-error>
-        Minimum Deposit Term Frequency Type is <strong>required</strong>
+        {{"labels.inputs.Minimum Deposit Term Frequency Type" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
       </mat-error>
     </mat-form-field>
 
-    <h4 fxFlex="98%" class="mat-h4">And thereafter, in Multiples of</h4>
+    <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.And thereafter, in Multiples of" | 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="inMultiplesOfDepositTerm">
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Type</mat-label>
+      <mat-label>{{"labels.inputs.Type" | translate }}</mat-label>
       <mat-select formControlName="inMultiplesOfDepositTermTypeId">
         <mat-option *ngFor="let periodFrequencyType of periodFrequencyTypeData" [value]="periodFrequencyType.id">
           {{ periodFrequencyType.value }}
@@ -135,15 +135,15 @@
       </mat-select>
     </mat-form-field>
 
-    <h4 fxFlex="98%" class="mat-h4">Maximum Deposit Term</h4>
+    <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.Maximum Deposit Term" | 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="maxDepositTerm">
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Type</mat-label>
+      <mat-label>{{"labels.inputs.Type" | translate }}</mat-label>
       <mat-select formControlName="maxDepositTermTypeId">
         <mat-option *ngFor="let periodFrequencyType of periodFrequencyTypeData" [value]="periodFrequencyType.id">
           {{ periodFrequencyType.value }}
@@ -153,19 +153,19 @@
 
     <mat-divider fxFlex="98%"></mat-divider>
 
-    <h4 fxFlex="98%" class="mat-h4">For Pre-mature closure</h4>
+    <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.For Pre-mature closure" | translate }}</h4>
 
     <mat-checkbox fxFlex="73%" labelPosition="before" formControlName="preClosurePenalApplicable" class="margin-v">
-      Apply Penal Interest (less)
+      {{"labels.inputs.Apply Penal Interest (less)" | translate }}
     </mat-checkbox>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Penal Interest (%)</mat-label>
+      <mat-label>{{"labels.inputs.Penal Interest" | translate }} (%)</mat-label>
       <input type="number" matInput formControlName="preClosurePenalInterest">
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Period</mat-label>
+      <mat-label>{{"labels.inputs.Period" | translate }}</mat-label>
       <mat-select formControlName="preClosurePenalInterestOnTypeId">
         <mat-option *ngFor="let preClosurePenalInterestOnType of preClosurePenalInterestOnTypeData"
           [value]="preClosurePenalInterestOnType.id">
@@ -177,19 +177,19 @@
     <!-- <mat-divider fxFlex="98%"></mat-divider> -->
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Minimum Balance For Interest Calculation</mat-label>
+      <mat-label>{{"labels.inputs.Minimum Balance For Interest Calculation" | translate }}</mat-label>
       <input type="number" matInput formControlName="minBalanceForInterestCalculation">
     </mat-form-field>
 
     <ng-container *ngIf="taxGroup">
-      <h4 fxFlex="98%" class="mat-h4">Tax Group</h4>
+      <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.Tax Group" | translate }}</h4>
 
       <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="withHoldTax" class="margin-v">
-        Is Withhold Tax Applicable?
+        {{"labels.inputs.Is Withhold Tax Applicable" | translate }}?
       </mat-checkbox>
 
       <mat-form-field fxFlex="48%" *ngIf="recurringDepositAccountSettingsForm.controls.taxGroupId">
-        <mat-label>Tax Group</mat-label>
+        <mat-label>{{"labels.inputs.Tax Group" | translate }}</mat-label>
         <input type="text" matInput formControlName="taxGroupId">
       </mat-form-field>
     </ng-container>
@@ -199,10 +199,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>

src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-terms-step/recurring-deposits-account-terms-step.component.html

@@ -3,7 +3,7 @@
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Interest Compounding Period</mat-label>
+      <mat-label>{{"labels.inputs.Interest Compounding Period" | translate }}</mat-label>
       <mat-select formControlName="interestCompoundingPeriodType" required>
         <mat-option *ngFor="let interestCompoundingPeriodType of interestCompoundingPeriodTypeData"
           [value]="interestCompoundingPeriodType.id">
@@ -11,12 +11,12 @@
         </mat-option>
       </mat-select>
       <mat-error>
-        Interest Compounding Period is <strong>required</strong>
+        {{"labels.inputs.Interest Compounding Period" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Interest Posting Period</mat-label>
+      <mat-label>{{"labels.inputs.Interest Posting Period" | translate }}</mat-label>
       <mat-select formControlName="interestPostingPeriodType" required>
         <mat-option *ngFor="let interestPostingPeriodType of interestPostingPeriodTypeData"
           [value]="interestPostingPeriodType.id">
@@ -24,12 +24,12 @@
         </mat-option>
       </mat-select>
       <mat-error>
-        Interest Posting Period is <strong>required</strong>
+        {{"labels.inputs.Interest Posting Period" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Interest Calculated using</mat-label>
+      <mat-label>{{"labels.inputs.Interest Calculated using" | translate }}</mat-label>
       <mat-select formControlName="interestCalculationType" required>
         <mat-option *ngFor="let interestCalculationType of interestCalculationTypeData"
           [value]="interestCalculationType.id">
@@ -37,12 +37,12 @@
         </mat-option>
       </mat-select>
       <mat-error>
-        Interest Calculated using is <strong>required</strong>
+        {{"labels.inputs.Interest Calculated using" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Days in Year</mat-label>
+      <mat-label>{{"labels.inputs.Days in Year" | translate }}</mat-label>
       <mat-select formControlName="interestCalculationDaysInYearType" required>
         <mat-option *ngFor="let interestCalculationDaysInYearType of interestCalculationDaysInYearTypeData"
           [value]="interestCalculationDaysInYearType.id">
@@ -50,7 +50,7 @@
         </mat-option>
       </mat-select>
       <mat-error>
-        Days in Year is <strong>required</strong>
+        {{"labels.inputs.Days in Year" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
       </mat-error>
     </mat-form-field>
 
@@ -59,10 +59,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>

src/app/deposits/recurring-deposits/recurring-deposits-account-view/charges-tab/charges-tab.component.html

@@ -2,7 +2,7 @@
 
   <div fxLayout="row" fxLayoutAlign="start">
     <div class="m-b-10">
-      <h3>All Charges</h3>
+      <h3>{{"labels.heading.All Charges" | translate }}</h3>
     </div>
   </div>
 
@@ -11,58 +11,58 @@
     <table mat-table #chargesTable [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="dueAsOf">
-        <th mat-header-cell *matHeaderCellDef> Due As Of </th>
-        <td mat-cell *matCellDef="let charge"> {{ charge.dueDate | dateFormat }} </td>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Due As Of" | translate }} </th>
+        <td mat-cell *matCellDef="let charge"> {{ charge.dueDate  | dateFormat }} </td>
       </ng-container>
 
       <ng-container matColumnDef="repeatsOn">
-        <th mat-header-cell *matHeaderCellDef> Repeats On </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Repeats On" | translate }} </th>
         <td mat-cell *matCellDef="let charge">
           {{charge.feeOnMonthDay ? ([2000].concat(charge.feeOnMonthDay) | dateFormat: 'dd MMMM') : 'Unassigned'}} </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>
 
       <ng-container matColumnDef="actions">
-        <th mat-header-cell *matHeaderCellDef> Actions </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Actions" | translate }} </th>
         <td mat-cell *matCellDef="let charge">
           <span *ngIf="recurringDepositsAccountData.status.value === 'Submitted and pending approval'">
             <button class="account-action-button" mat-raised-button color="primary" matTooltip="Edit Charge"

src/app/deposits/recurring-deposits/recurring-deposits-account-view/custom-dialogs/recurring-deposit-confirmation-dialog/recurring-deposit-confirmation-dialog.component.html

@@ -3,6 +3,6 @@
   <p>{{ data.dialogContext }}</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]="{ confirm: true }">Confirm</button>
+  <button mat-raised-button mat-dialog-close>{{"labels.buttons.Cancel" | translate }}</button>
+  <button mat-raised-button color="warn" [mat-dialog-close]="{ confirm: true }">{{"labels.buttons.Confirm" | translate }}</button>
 </mat-dialog-actions>

src/app/deposits/recurring-deposits/recurring-deposits-account-view/interest-rate-chart-tab/interest-rate-chart-tab.component.html

@@ -2,7 +2,7 @@
 
   <div fxLayoutAlign="start">
     <div class="m-b-20">
-      <h3>All Interest Rates</h3>
+      <h3>{{"labels.heading.All Interest Rates" | translate }}</h3>
     </div>
   </div>
 
@@ -11,38 +11,38 @@
     <table mat-table [dataSource]="interestRateChartData" #chartsTable multiTemplateDataRows>
 
       <ng-container matColumnDef="period">
-        <th mat-header-cell *matHeaderCellDef> Period </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Period" | translate }} </th>
         <td mat-cell *matCellDef="let chartSlab">
           {{chartSlab.fromPeriod}}-{{chartSlab.toPeriod}}&nbsp;{{chartSlab.periodType.value}}</td>
       </ng-container>
 
       <ng-container matColumnDef="amountRange">
-        <th mat-header-cell *matHeaderCellDef> Amount Range </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Amount Range" | translate }} </th>
         <td mat-cell *matCellDef="let chartSlab">{{chartSlab.amountRangeFrom}}-{{chartSlab.amountRangeTo}}</td>
       </ng-container>
 
       <ng-container matColumnDef="interest">
-        <th mat-header-cell *matHeaderCellDef> Interest </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Interest" | translate }} </th>
         <td mat-cell *matCellDef="let chartSlab"> {{ chartSlab.annualInterestRate }} </td>
       </ng-container>
 
       <ng-container matColumnDef="description">
-        <th mat-header-cell *matHeaderCellDef> Description </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Description" | translate }} </th>
         <td mat-cell *matCellDef="let chartSlab"> {{ chartSlab.description }} </td>
       </ng-container>
 
       <ng-container matColumnDef="actions">
-        <th mat-header-cell *matHeaderCellDef> Actions </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Actions" | translate }} </th>
         <td mat-cell *matCellDef="let chartSlab; let chartSlabIndex = dataIndex">
           <button mat-button color="primary"
             (click)="expandChartSlabIndex = expandChartSlabIndex === chartSlabIndex ? null : chartSlabIndex">
             <span *ngIf="expandChartSlabIndex !== chartSlabIndex">
               <fa-icon icon="eye" class="m-r-10"></fa-icon>
-              View Incentives
+              {{"labels.buttons.View Incentives" | translate }}
             </span>
             <span *ngIf="expandChartSlabIndex === chartSlabIndex">
               <fa-icon icon="eye-slash" class="m-r-10"></fa-icon>
-              Hide Incentives
+              {{"labels.buttons.Hide Incentives" | translate }}
             </span>
           </button>
         </td>
@@ -58,49 +58,49 @@
             <mat-card fxLayout="row wrap" fxFlexFill>
 
               <h4 class="m-b-10" fxFlex="13%">
-                Incentives
+                {{"labels.heading.Incentives" | translate }}
               </h4>
 
               <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="chartSlab.incentives"
                 *ngIf="chartSlab.incentives?.length">
 
                 <ng-container matColumnDef="entityType">
-                  <th mat-header-cell *matHeaderCellDef> Entity Type </th>
+                  <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Entity Type" | translate }} </th>
                   <td mat-cell *matCellDef="let incentive">
                     {{ incentive.entityType.value }}
                   </td>
                 </ng-container>
 
                 <ng-container matColumnDef="attributeName">
-                  <th mat-header-cell *matHeaderCellDef> Attribute Name </th>
+                  <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Attribute Name" | translate }} </th>
                   <td mat-cell *matCellDef="let incentive">
                     {{ incentive.attributeName.value }}
                   </td>
                 </ng-container>
 
                 <ng-container matColumnDef="conditionType">
-                  <th mat-header-cell *matHeaderCellDef> Condition Type </th>
+                  <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Condition Type" | translate }} </th>
                   <td mat-cell *matCellDef="let incentive">
                     {{ incentive.conditionType.value | titlecase }}
                   </td>
                 </ng-container>
 
                 <ng-container matColumnDef="attributeValue">
-                  <th mat-header-cell *matHeaderCellDef> Attribute Value </th>
+                  <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Attribute Value" | translate }} </th>
                   <td mat-cell *matCellDef="let incentive" [ngSwitch]="incentive.attributeName">
                     {{ incentive.attributeValueDesc }}
                   </td>
                 </ng-container>
 
                 <ng-container matColumnDef="incentiveType">
-                  <th mat-header-cell *matHeaderCellDef> Incentive Type </th>
+                  <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Incentive Type" | translate }} </th>
                   <td mat-cell *matCellDef="let incentive">
                     {{ incentive.incentiveType.value }}
                   </td>
                 </ng-container>
 
                 <ng-container matColumnDef="amount">
-                  <th mat-header-cell *matHeaderCellDef> Interest </th>
+                  <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Interest" | translate }} </th>
                   <td mat-cell *matCellDef="let incentive">
                     {{ incentive.amount }}
                   </td>

src/app/deposits/recurring-deposits/recurring-deposits-account-view/recurring-deposits-account-view.component.html

@@ -16,7 +16,7 @@
           <h3 fxFlex="95%">
             <i class="fa fa-stop" [ngClass]="recurringDepositsAccountData.status.code | statusLookup"
               [matTooltip]="recurringDepositsAccountData.status.value"></i>
-            Account Name : {{recurringDepositsAccountData.depositProductName}}
+              {{"labels.inputs.Account Name" | translate }} : {{recurringDepositsAccountData.depositProductName}}
           </h3>
           <div fxFlex="5%">
             <button mat-icon-button [matMenuTriggerFor]="accountMenu" aria-label="Loan account actions"
@@ -29,14 +29,14 @@
         </mat-card-title>
         <mat-card-subtitle>
           <p>
-            Account #: {{recurringDepositsAccountData.accountNo}} | Client Name:
+            {{"labels.inputs.Account" | translate }} #: {{recurringDepositsAccountData.accountNo}} | {{"labels.inputs.Client Name" | translate }}:
             {{recurringDepositsAccountData.clientName}}<br />
             <span
               *ngIf="!recurringDepositsAccountData.status.rejected && !recurringDepositsAccountData.status.submittedAndPendingApproval">
-              Current Balance:
-              {{recurringDepositsAccountData.summary.accountBalance | currency:currencyCode:'symbol-narrow':'1.2-2'}}<br />
-              Available Balance:
-              {{recurringDepositsAccountData.summary.availableBalance | currency:currencyCode:'symbol-narrow':'1.2-2'}}<br />
+              {{"labels.inputs.Current Balance" | translate }}:
+              {{recurringDepositsAccountData.currency.displaySymbol}}&nbsp;{{recurringDepositsAccountData.summary.accountBalance}}<br />
+              {{"labels.inputs.Available Balance" | translate }}:
+              {{recurringDepositsAccountData.currency.displaySymbol}}&nbsp;{{recurringDepositsAccountData.summary.availableBalance}}<br />
             </span>
           </p>
         </mat-card-subtitle>
@@ -61,6 +61,24 @@
 
     </mat-card-title-group>
 
+    <mat-card-actions class="account-actions">
+
+      <ng-container *ngFor="let button of buttonConfig.singleButtons">
+        <button mat-raised-button (click)="doAction(button.name)">
+          <i ngClass="{{button.icon}}"></i> {{button.name}}</button>
+      </ng-container>
+
+      <ng-container *ngIf="buttonConfig.options.length">
+        <button mat-raised-button [matMenuTriggerFor]="More">{{"labels.buttons.More" | translate }}</button>
+        <mat-menu #More="matMenu">
+        <span *ngFor="let option of buttonConfig.options">
+          <button mat-menu-item (click)="doAction(option.name)">{{option.name}}</button>
+        </span>
+        </mat-menu>
+      </ng-container>
+
+    </mat-card-actions>
+
   </mat-card-header>
 
   <mat-card-content class="content">
@@ -69,46 +87,41 @@
 
       <div fxFlex="49%"
         *ngIf="!recurringDepositsAccountData.status.rejected && !recurringDepositsAccountData.status.submittedAndPendingApproval">
-        <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>{{recurringDepositsAccountData.fieldOfficerName}}<span
-                  *ngIf="!recurringDepositsAccountData.fieldOfficerName">Unassigned</span></td>
+                  *ngIf="!recurringDepositsAccountData.fieldOfficerName">{{"labels.inputs.Unassigned" | translate }}</span></td>
             </tr>
             <tr>
-              <td>Activation date</td>
-              <td>{{recurringDepositsAccountData.timeline.activatedOnDate | dateFormat}}</td>
+              <td>{{"labels.inputs.Activation date" | translate }}</td>
+              <td>{{recurringDepositsAccountData.timeline.activatedOnDate  | dateFormat}}</td>
             </tr>
             <tr>
-              <td>Maturity Date</td>
-              <td><span>{{recurringDepositsAccountData.maturityDate | dateFormat}}</span></td>
+              <td>{{"labels.inputs.Maturity Date" | translate }}</td>
+              <td><span>{{recurringDepositsAccountData.maturityDate  | dateFormat}}</span></td>
             </tr>
             <tr
               *ngIf="recurringDepositsAccountData.timeline.closedOnDate || recurringDepositsAccountData.summary.totalWitddrawals">
               <td *ngIf="recurringDepositsAccountData.timeline.closedOnDate">
-                Closed on Date</td>
-              <td><span>{{recurringDepositsAccountData.timeline.closedOnDate | dateFormat}}</span></td>
+                {{"labels.inputs.Closed on Date" | translate }}</td>
+              <td><span>{{recurringDepositsAccountData.timeline.closedOnDate  | dateFormat}}</span></td>
             </tr>
             <tr>
-              <td>Period</td>
-              <td>
-                <span>{{recurringDepositsAccountData.depositPeriod}}&nbsp;{{recurringDepositsAccountData.depositPeriodFrequency.value}}</span>
-              </td>
             </tr>
             <tr>
-              <td>Deposit Frequency</td>
               <td><span>{{recurringDepositsAccountData.recurringFrequency}}
                   &nbsp;{{recurringDepositsAccountData.recurringFrequencyType.value}}
                 </span></td>
             </tr>
             <tr *ngIf="recurringDepositsAccountData.minBalanceForInterestCalculation">
-              <td> Balance Required For Interest Calculation</td>
-              <td><span>{{recurringDepositsAccountData.minBalanceForInterestCalculation | number }}</span></td>
+              <td> {{"labels.inputs.Balance Required For Interest Calculation" | translate }}</td>
+              <td><span>{{recurringDepositsAccountData.minBalanceForInterestCalculation}}</span></td>
             </tr>
             <tr *ngIf="recurringDepositsAccountData.witdHoldTax">
-              <td> Witdhold Tax Group </td>
+              <td> {{"labels.inputs.Witdhold Tax Group" | translate }} </td>
               <td><span>{{recurringDepositsAccountData.taxGroup.name}}</span></td>
             </tr>
           </tbody>
@@ -117,29 +130,29 @@
 
       <div fxFlex="49%"
         *ngIf="!recurringDepositsAccountData.status.rejected && !recurringDepositsAccountData.status.submittedAndPendingApproval">
-        <h4 class="table-headers">Performance History</h4>
+        <h4 class="table-headers">{{"labels.heading.Performance History" | translate }}</h4>
         <table>
           <tbody>
             <tr>
-              <td>Principal Amount</td>
+              <td>{{"labels.inputs.Principal Amount" | translate }}</td>
               <td>
                 <span>{{recurringDepositsAccountData.depositAmount | currency:currencyCode:'symbol-narrow':'1.2-2'}}}</span>
               </td>
             </tr>
             <tr>
-              <td>Maturity Amount</td>
+              <td>{{"labels.inputs.Maturity Amount" | translate }}</td>
               <td>
                 <span>{{recurringDepositsAccountData.maturityAmount | currency:currencyCode:'symbol-narrow':'1.2-2'}}}</span>
               </td>
             </tr>
             <tr>
-              <td>Recurring Deposit Amount</td>
+              <td>{{"labels.inputs.Recurring Deposit Amount" | translate }}</td>
               <td>
                 <span>{{recurringDepositsAccountData?.mandatoryRecommendedDepositAmount | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span>
               </td>
             </tr>
             <tr>
-              <td>Deposits till Date</td>
+              <td>{{"labels.inputs.Deposits till Date" | translate }}</td>
               <td><span
                   *ngIf="recurringDepositsAccountData.summary.totalDeposits">{{recurringDepositsAccountData.summary.totalDeposits | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span>
                 <span
@@ -147,7 +160,7 @@
               </td>
             </tr>
             <tr>
-              <td>Withdrwals till Date</td>
+              <td>{{"labels.inputs.Withdrwals till Date" | translate }}</td>
               <td><span
                   *ngIf="recurringDepositsAccountData.summary.totalWithdrawals">{{recurringDepositsAccountData.summary.totalWithdrawals | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span>
                 <span
@@ -156,8 +169,8 @@
             </tr>
 
             <tr *ngIf="recurringDepositsAccountData.summary.totalInterestEarned >= 0">
-              <td >Interest Earned</td>
-              <td><span>{{recurringDepositsAccountData.summary.totalInterestEarned | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span>
+              <td >{{"labels.inputs.Interest Earned" | translate }}</td>
+              <td><span>{{recurringDepositsAccountData.currency.displaySymbol}}&nbsp;{{recurringDepositsAccountData.summary.totalInterestEarned| formatNumber}}</span>
               </td>
             </tr>
 
@@ -170,55 +183,55 @@
         <table>
           <tbody>
             <tr>
-              <td>Date of Deposit</td>
+              <td>{{"labels.inputs.Date of Deposit" | translate }}</td>
               <td>
-                <span *ngIf="!recurringDepositsAccountData.expectedFirstDepositOnDate">{{recurringDepositsAccountData.timeline.activatedOnDate | dateFormat}}
-                  <span *ngIf="!recurringDepositsAccountData.timeline.activatedOnDate">Not Activated</span>
+                <span *ngIf="!recurringDepositsAccountData.expectedFirstDepositOnDate">{{recurringDepositsAccountData.timeline.activatedOnDate  | dateFormat}}
+                  <span *ngIf="!recurringDepositsAccountData.timeline.activatedOnDate">{{"labels.inputs.Not Activated" | translate }}</span>
                 </span>
-                <span *ngIf="recurringDepositsAccountData.expectedFirstDepositOnDate" >{{recurringDepositsAccountData.expectedFirstDepositOnDate | dateFormat}}
-                  <span *ngIf="!recurringDepositsAccountData.expectedFirstDepositOnDate">Not Activated</span>
+                <span *ngIf="recurringDepositsAccountData.expectedFirstDepositOnDate" >{{recurringDepositsAccountData.expectedFirstDepositOnDate  | dateFormat}}
+                  <span *ngIf="!recurringDepositsAccountData.expectedFirstDepositOnDate">{{"labels.inputs.Not Activated" | translate }}</span>
                 </span>
               </td>
             </tr>
             <tr>
-              <td>Period</td>
+              <td>{{"labels.inputs.Period" | translate }}</td>
               <td>
                 <span>{{recurringDepositsAccountData.depositPeriod}}&nbsp;{{recurringDepositsAccountData.depositPeriodFrequency.value}}</span>
               </td>
             </tr>
             <tr *ngIf="recurringDepositsAccountData.maturityDate">
-              <td>Maturity Date</td>
-              <td><span>{{recurringDepositsAccountData.maturityDate | dateFormat}}</span></td>
+              <td>{{"labels.inputs.Maturity Date" | translate }}</td>
+              <td><span>{{recurringDepositsAccountData.maturityDate  | dateFormat}}</span></td>
             </tr>
             <tr>
-              <td>Total Deposits </td>
+              <td>{{"labels.inputs.Total Deposits" | translate }}</td>
               <td>
                 <span *ngIf="recurringDepositsAccountData.summary.totalDeposits">{{ recurringDepositsAccountData.summary.totalDeposits | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span>
                 <span *ngIf="!recurringDepositsAccountData.summary.totalDeposits">{{ 0 | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span>
               </td>
             </tr>
             <tr >
-              <td> Actual Available Balance</td>
-              <td>{{ recurringDepositsAccountData.summary.accountBalance | currency:currencyCode:'symbol-narrow':'1.2-2'}}</td>
+              <td> {{"labels.inputs.Actual Available Balance" | translate }}</td>
+              <td>{{ recurringDepositsAccountData.currency.displaySymbol }}&nbsp;{{ recurringDepositsAccountData.summary.accountBalance }}</td>
             </tr>
             <tr>
-              <td> Recurring Deposits Amount</td>
+              <td> {{"labels.inputs.Recurring Deposits Amount" | translate }}</td>
               <td>
                 {{ recurringDepositsAccountData.mandatoryRecommendedDepositAmount | currency:currencyCode:'symbol-narrow':'1.2-2'}}
               </td>
             </tr>
             <tr *ngIf="recurringDepositsAccountData.summary.totalInterestEarned">
-              <td> Interests Earned </td>
-              <td><span>{{ recurringDepositsAccountData.summary.totalInterestEarned | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span></td>
+              <td> {{"labels.inputs.Interests Earned" | translate }} </td>
+              <td><span>{{ recurringDepositsAccountData.currency.displaySymbol }}&nbsp;{{ recurringDepositsAccountData.summary.totalInterestEarned }}</span></td>
             </tr>
             <tr *ngIf="recurringDepositsAccountData.summary.totalWithdrawals">
-              <td> Total Withdrawls </td>
+              <td> {{"labels.inputs.Total Withdrawls" | translate }} </td>
               <td>
                 <span>{{ recurringDepositsAccountData.summary.totalWithdrawals | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span>
               </td>
             </tr>
             <tr *ngIf="recurringDepositsAccountData.minBalanceForInterestCalculation">
-              <td> Balance Required For Interest Calculation </td>
+              <td> {{"labels.inputs.Balance Required For Interest Calculation" | translate }} </td>
               <td>
                 <span>{{ recurringDepositsAccountData.minBalanceForInterestCalculation | number  }}</span>
               </td>
@@ -232,7 +245,7 @@
         <table>
           <tbody>
             <tr>
-              <td>Principal Amount</td>
+              <td>{{"labels.inputs.Principal Amount" | translate }}</td>
               <td><span
                   *ngIf="recurringDepositsAccountData.depositAmount">{{ recurringDepositsAccountData.depositAmount | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span>
                 <span
@@ -240,19 +253,19 @@
               </td>
             </tr>
             <tr>
-              <td>Rate of Interest</td>
+              <td>{{"labels.inputs.Rate of Interest" | translate }}</td>
               <td>
                 <span>{{recurringDepositsAccountData.nominalAnnualInterestRate}}</span>
               </td>
             </tr>
             <tr *ngIf="recurringDepositsAccountData.maturityDate">
-              <td>Maturity Amount</td>
+              <td>{{"labels.inputs.Maturity Amount" | translate }}</td>
               <td>
                 <span>{{ recurringDepositsAccountData.maturityAmount | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span>
               </td>
             </tr>
             <tr>
-              <td>Total Withdrawls </td>
+              <td>{{"labels.inputs.Total Withdrawls" | translate }} </td>
               <td>
                 <span
                   *ngIf="recurringDepositsAccountData.summary.totalWithdrawals">{{ recurringDepositsAccountData.summary.totalWithdrawals | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span>
@@ -261,19 +274,19 @@
               </td>
             </tr>
             <tr *ngIf="recurringDepositsAccountData.timeline.closedOnDate">
-              <td> Closed on Date </td>
+              <td> {{"labels.inputs.Closed on Date" | translate }} </td>
               <td>
                 {{ recurringDepositsAccountData.timeline.closedOnDate | dateFormat }}
               </td>
             </tr>
             <tr>
-              <td> Deposits Frequency </td>
+              <td> {{"labels.inputs.Deposits Frequency" | translate }} </td>
               <td>
                 {{ recurringDepositsAccountData.recurringFrequency }}&nbsp;{{ recurringDepositsAccountData.recurringFrequencyType.value }}
               </td>
             </tr>
             <tr *ngIf="recurringDepositsAccountData.summary.totalInterestEarned">
-              <td> Interests Posted </td>
+              <td> {{"labels.inputs.Interests Posted" | translate }} </td>
               <td>
                 <span
                   *ngIf="recurringDepositsAccountData.summary.totalInterestPosted">{{recurringDepositsAccountData.summary.totalInterestPosted | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span>
@@ -289,31 +302,31 @@
     <div class="recurring-deposits-account-tables" fxLayout="row" fxLayoutGap="2%">
       <div fxFlex="49%"
         *ngIf="!recurringDepositsAccountData.status.rejected && !recurringDepositsAccountData.status.submittedAndPendingApproval">
-        <h4 class="table-headers">Interest Details</h4>
+        <h4 class="table-headers">{{"labels.heading.Interest Details" | translate }}</h4>
         <table>
           <tbody>
             <tr>
-              <td >Interest Rate</td>
+              <td>{{"labels.inputs.Interest Rate" | translate }}</td>
               <td><span>{{recurringDepositsAccountData.nominalAnnualInterestRate}}%</span></td>
             </tr>
             <tr>
-              <td>Interest Compounding period</td>
+              <td>{{"labels.inputs.Interest Compounding period" | translate }}</td>
               <td><span>{{recurringDepositsAccountData.interestCompoundingPeriodType.value}}</span></td>
             </tr>
             <tr>
-              <td>Interest Posting period</td>
+              <td>{{"labels.inputs.Interest Posting period" | translate }}</td>
               <td><span>{{recurringDepositsAccountData.interestPostingPeriodType.value}}</span></td>
             </tr>
             <tr>
-              <td>Interest calculated using</td>
+              <td>{{"labels.inputs.Interest calculated using" | translate }}</td>
               <td><span>{{recurringDepositsAccountData.interestCalculationType.value}}</span></td>
             </tr>
             <tr>
-              <td># Days in Year</td>
+              <td># {{"labels.inputs.Days in Year" | translate }}</td>
               <td><span>{{recurringDepositsAccountData.interestCalculationDaysInYearType.value}}</span></td>
             </tr>
             <tr *ngIf="recurringDepositsAccountData.preClosurePenalApplicable">
-              <td>Pre-closure penal Interest (less)</td>
+              <td>{{"labels.inputs.Pre-closure penal Interest (less)" | translate }}</td>
               <td><span>{{recurringDepositsAccountData.preClosurePenalInterest}} % on
                   {{recurringDepositsAccountData.preClosurePenalInterestOnType.value}}</span></td>
             </tr>
@@ -326,28 +339,28 @@
         <table>
           <tbody>
             <tr>
-              <td>Interest Compounding Period</td>
+              <td>{{"labels.inputs.Interest Compounding Period" | translate }}</td>
               <td><span>{{recurringDepositsAccountData.interestCompoundingPeriodType.value}}</span></td>
             </tr>
             <tr>
-              <td>Interest Posting period</td>
+              <td>{{"labels.inputs.Interest Posting period" | translate }}</td>
               <td><span>{{recurringDepositsAccountData.interestPostingPeriodType.value}}</span></td>
             </tr>
             <tr>
-              <td>Interest calculated using</td>
+              <td>{{"labels.inputs.Interest calculated using" | translate }}</td>
               <td><span>{{recurringDepositsAccountData.interestCalculationType.value}}</span></td>
             </tr>
             <tr>
-              <td># Days in Year</td>
+              <td># {{"labels.inputs.Days in Year" | translate }}</td>
               <td><span>{{recurringDepositsAccountData.interestCalculationDaysInYearType.value}}</span></td>
             </tr>
             <tr *ngIf="recurringDepositsAccountData.preClosurePenalApplicable">
-              <td>Pre-closure penal Interest (less)</td>
+              <td>{{"labels.inputs.Pre-closure penal Interest (less)" | translate }}</td>
               <td><span>{{recurringDepositsAccountData.preClosurePenalInterest}} % on
                   {{recurringDepositsAccountData.preClosurePenalInterestOnType.value}}</span></td>
             </tr>
             <tr *ngIf="recurringDepositsAccountData.witdHoldTax">
-              <td> Witdhold Tax Group </td>
+              <td> {{"labels.inputs.Witdhold Tax Group" | translate }} </td>
               <td><span>{{recurringDepositsAccountData.taxGroup.name}}</span></td>
             </tr>
           </tbody>
@@ -359,21 +372,21 @@
     <nav mat-tab-nav-bar class="navigation-tabs">
         <a mat-tab-link [routerLink]="['./interest-rate-chart']" routerLinkActive #IRC="routerLinkActive"
           [active]="IRC.isActive">
-          Interest Rate Chart
+          {{"labels.inputs.Interest Rate Chart" | translate }}
         </a>
         <ng-container *ngIf="recurringDepositsAccountData.transactions">
           <a mat-tab-link [routerLink]="['./transactions']" routerLinkActive #transactions="routerLinkActive"
             [active]="transactions.isActive">
-            Transactions
+            {{"labels.inputs.Transactions" | translate }}
           </a>
         </ng-container>
         <a mat-tab-link [routerLink]="['./charges']" routerLinkActive #charges="routerLinkActive" [active]="charges.isActive">
-          Charges
+          {{"labels.inputs.Charges" | translate }}
         </a>
         <ng-container *ngIf="recurringDepositsAccountData.clientId">
           <a mat-tab-link [routerLink]="['./standing-instructions-tab']" routerLinkActive #standingInstructions="routerLinkActive"
             [active]="standingInstructions.isActive">
-            Standing Instructions
+            {{"labels.inputs.Standing Instructions" | translate }}
           </a>
         </ng-container>
         <ng-container *ngFor="let savingsDatatable of savingsDatatables">

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

@@ -1,7 +1,7 @@
 <div class="tab-container mat-typography">
 
   <div class="m-b-10">
-    <h3>All Standing Instructions</h3>
+    <h3>{{"labels.heading.All Standing Instructions" | translate }}</h3>
   </div>
 
   <div class="mat-elevation-z1 m-b-25">
@@ -9,41 +9,41 @@
     <table mat-table #instructionsTable [dataSource]="dataSource">
 
       <ng-container matColumnDef="client">
-        <th mat-header-cell *matHeaderCellDef> Client </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Client" | translate }} </th>
         <td mat-cell *matCellDef="let instruction">{{instruction.fromClient.displayName}}-{{instruction.fromClient.id}}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="fromAccount">
-        <th mat-header-cell *matHeaderCellDef> From Account </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.From Account" | translate }} </th>
         <td mat-cell *matCellDef="let instruction">{{instruction.fromAccount.accountNo}}
           ({{instruction.fromAccountType.value}})</td>
       </ng-container>
 
       <ng-container matColumnDef="beneficiary">
-        <th mat-header-cell *matHeaderCellDef> Beneficiary </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Beneficiary" | translate }} </th>
         <td mat-cell *matCellDef="let instruction">{{instruction.toClient.displayName}}</td>
       </ng-container>
 
       <ng-container matColumnDef="toAccount">
-        <th mat-header-cell *matHeaderCellDef> To Account </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.To Account" | translate }} </th>
         <td mat-cell *matCellDef="let instruction">{{instruction.toAccount.accountNo}}
           ({{instruction.toAccountType.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 instruction">{{instruction.instructionType.value}}/{{instruction.amount}}</td>
       </ng-container>
 
       <ng-container matColumnDef="validity">
-        <th mat-header-cell *matHeaderCellDef> Validity </th>
-        <td mat-cell *matCellDef="let instruction">{{instruction.validFrom | dateFormat}} to {{instruction.validTill | dateFormat}}
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Validity" | translate }} </th>
+        <td mat-cell *matCellDef="let instruction">{{instruction.validFrom  | dateFormat}} to {{instruction.validTill  | dateFormat}}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="actions">
-        <th mat-header-cell *matHeaderCellDef> Actions </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Actions" | translate }} </th>
         <td mat-cell *matCellDef="let instruction">
           <span *ngIf="instruction.status.value!=='Deleted'">
             <button class="account-action-button" mat-raised-button color="primary"

src/app/deposits/recurring-deposits/recurring-deposits-account-view/transactions-tab/edit-transaction/edit-transaction.component.html

@@ -7,26 +7,26 @@
       <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="editTransactionForm.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>
-          <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="editTransactionForm.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 formControlName="paymentTypeId">
             <mat-option *ngFor="let paymentType of paymentTypeOptions" [value]="paymentType.id">
               {{ paymentType.name }}
@@ -35,40 +35,40 @@
         </mat-form-field>
 
         <div fxLayoutGap="5px" fxLayout="row" fxLayout.xs="column">
-          <mat-label fxFlexAlign="center">Show Payment Details</mat-label>
+          <mat-label fxFlexAlign="center">{{"labels.inputs.Show Payment Details" | translate }}</mat-label>
           <button type="button" mat-mini-fab color="primary" (click)="addPaymentDetails()">
             <fa-icon [icon]="!addPaymentDetailsFlag ? 'plus-circle' : 'minus-circle'" size="lg"></fa-icon>
           </button>
         </div>
 
         <mat-form-field *ngIf="editTransactionForm.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="editTransactionForm.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="editTransactionForm.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="editTransactionForm.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="editTransactionForm.controls['bankNumber']">
-          <mat-label>Bank</mat-label>
+          <mat-label>{{"labels.inputs.Bank" | translate }}</mat-label>
           <input formControlName="bankNumber" matInput />
         </mat-form-field>
 
         <mat-card-actions fxLayoutGap="5px" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center">
-          <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
-          <button mat-raised-button color="primary" [disabled]="!editTransactionForm.valid">Submit</button>
+          <button type="button" mat-raised-button [routerLink]="['../']">{{"labels.buttons.Cancel" | translate }}</button>
+          <button mat-raised-button color="primary" [disabled]="!editTransactionForm.valid">{{"labels.buttons.Submit" | translate }}</button>
         </mat-card-actions>
 
       </mat-card-content>

src/app/deposits/recurring-deposits/recurring-deposits-account-view/transactions-tab/transactions-tab.component.html

@@ -5,34 +5,34 @@
     <table mat-table [dataSource]="dataSource">
 
       <ng-container matColumnDef="id">
-        <th mat-header-cell *matHeaderCellDef> ID </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.ID" | translate }} </th>
         <td mat-cell *matCellDef="let transaction" [ngClass]="{'strike': transaction.reversed}"> {{ transaction.id }} </td>
       </ng-container>
 
       <ng-container matColumnDef="transactionDate">
-        <th mat-header-cell *matHeaderCellDef> Transaction Date </th>
-        <td mat-cell *matCellDef="let transaction" [ngClass]="{'strike': transaction.reversed}"> {{ transaction.date | dateFormat }} </td>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Transaction Date" | translate }} </th>
+        <td mat-cell *matCellDef="let transaction" [ngClass]="{'strike': transaction.reversed}"> {{ transaction.date  | 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" [ngClass]="{'strike': transaction.reversed}"> {{ transaction.transactionType.value  }} </td>
       </ng-container>
 
       <ng-container matColumnDef="debit">
-        <th mat-header-cell *matHeaderCellDef> Debit </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Debit" | translate }} </th>
         <td mat-cell *matCellDef="let transaction" [ngClass]="{'strike': transaction.reversed}">
           {{ isDebit(transaction.transactionType) ? transaction.amount : 'N/A'}} </td>
       </ng-container>
 
       <ng-container matColumnDef="credit">
-        <th mat-header-cell *matHeaderCellDef> Credit </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Credit" | translate }} </th>
         <td mat-cell *matCellDef="let transaction" [ngClass]="{'strike': transaction.reversed}">
           {{ !isDebit(transaction.transactionType) ? transaction.amount : 'N/A' }} </td>
       </ng-container>
 
       <ng-container matColumnDef="balance">
-        <th mat-header-cell *matHeaderCellDef> Balance </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Balance" | translate }} </th>
         <td mat-cell *matCellDef="let transaction" [ngClass]="{'strike': transaction.reversed}"> {{ transaction.runningBalance }} </td>
       </ng-container>
 

src/app/deposits/recurring-deposits/recurring-deposits-account-view/transactions-tab/view-transaction/view-transaction.component.html

@@ -4,13 +4,13 @@
     <button mat-raised-button color="primary"
       *ngIf="!(transactionData.transactionType.value == 'Transfer' || transactionData.reversed == 'true')"
       [routerLink]="'edit'">
-      <fa-icon icon="edit" class="m-r-10"></fa-icon>Edit
+      <fa-icon icon="edit" class="m-r-10"></fa-icon>{{"labels.buttons.Edit" | translate }}
     </button>
   </span>
   <button mat-raised-button color="warn"
     *mifosxHasPermission="'UNDOTRANSACTION_SAVINGSACCOUNT'"
     (click)="undoTransaction()">
-    <fa-icon icon="undo" class="m-r-10"></fa-icon>Undo
+    <fa-icon icon="undo" class="m-r-10"></fa-icon>{{"labels.buttons.Undo" | translate }}
   </button>
 </div>
 
@@ -23,7 +23,7 @@
       <div fxLayout="row wrap" class="content">
 
         <div fxFlex="50%" class="mat-body-strong">
-          Transaction Id
+          {{"labels.inputs.Transaction Id" | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -31,7 +31,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Type
+          {{"labels.inputs.Type" | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -39,7 +39,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Transaction Date
+          {{"labels.inputs.Transaction Date" | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -47,7 +47,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Currency
+          {{"labels.inputs.Currency" | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -55,7 +55,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Amount
+          {{"labels.inputs.Amount" | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -63,7 +63,7 @@
         </div>
 
         <div fxFlex="50%" *ngIf="transactionData.note" class="mat-body-strong">
-          Note
+          {{"labels.inputs.Note" | translate }}
         </div>
 
         <div fxFlex="50%" *ngIf="transactionData.note">
@@ -73,7 +73,7 @@
         <ng-container *ngIf="transactionData.paymentDetailData">
 
           <div *ngIf="transactionData.paymentDetailData.paymentType" fxFlex="50%" class="mat-body-strong">
-            Payment Type
+            {{"labels.inputs.Payment Type" | translate }}
           </div>
 
           <div *ngIf="transactionData.paymentDetailData.paymentType" fxFlex="50%">
@@ -81,7 +81,7 @@
           </div>
 
           <div *ngIf="transactionData.paymentDetailData.accountNumber" fxFlex="50%" class="mat-body-strong">
-            Account No.
+            {{"labels.inputs.Account No" | translate }}.
           </div>
 
           <div *ngIf="transactionData.paymentDetailData.accountNumber" fxFlex="50%">
@@ -89,7 +89,7 @@
           </div>
 
           <div *ngIf="transactionData.paymentDetailData.checkNumber" fxFlex="50%" class="mat-body-strong">
-            Cheque Number
+            {{"labels.inputs.Cheque Number" | translate }}
           </div>
 
           <div *ngIf="transactionData.paymentDetailData.checkNumber" fxFlex="50%">
@@ -97,7 +97,7 @@
           </div>
 
           <div *ngIf="transactionData.paymentDetailData.routingCode" fxFlex="50%" class="mat-body-strong">
-            Routing Code
+            {{"labels.inputs.Routing Code" | translate }}
           </div>
 
           <div *ngIf="transactionData.paymentDetailData.routingCode" fxFlex="50%">
@@ -105,7 +105,7 @@
           </div>
 
           <div *ngIf="transactionData.paymentDetailData.receiptNumber" fxFlex="50%" class="mat-body-strong">
-            Receipt No.
+            {{"labels.inputs.Receipt No" | translate }}.
           </div>
 
           <div *ngIf="transactionData.paymentDetailData.receiptNumber" fxFlex="50%">
@@ -113,7 +113,7 @@
           </div>
 
           <div *ngIf="transactionData.paymentDetailData.bankNumber" fxFlex="50%" class="mat-body-strong">
-            Bank No.
+            {{"labels.inputs.Bank No" | translate }}.
           </div>
 
           <div *ngIf="transactionData.paymentDetailData.bankNumber" fxFlex="50%">