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

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

src/app/collaterals/edit-collateral/edit-collateral.component.html

@@ -11,25 +11,25 @@
                     <div fxLayout="column">
 
                         <mat-form-field>
-                            <mat-label>Name</mat-label>
+                            <mat-label>{{"labels.inputs.name" |translate}}</mat-label>
                             <input matInput required formControlName="name">
                         </mat-form-field>
 
                         <mat-form-field>
-                            <mat-label>Quantity</mat-label>
+                            <mat-label>{{"labels.inputs.Quantity" |translate}}</mat-label>
                             <input matInput required formControlName="quantity">
                             <mat-error *ngIf="clientCollateralForm.controls.quantity.hasError('required')">
-                                Quantity is <strong>required</strong>
+                                {{"labels.inputs.Quantity" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
                             </mat-error>
                         </mat-form-field>
 
                         <mat-form-field>
-                            <mat-label>Total</mat-label>
+                            <mat-label>{{"labels.inputs.Total" |translate}}</mat-label>
                             <input matInput required formControlName="total">
                         </mat-form-field>
 
                         <mat-form-field>
-                            <mat-label>Total Collateral Value</mat-label>
+                            <mat-label>{{"labels.inputs.Total Collateral Value" |translate}}</mat-label>
                             <input matInput required formControlName="totalCollateral">
                         </mat-form-field>
 
@@ -40,8 +40,8 @@
             </mat-card-content>
 
             <mat-card-actions fxLayoutGap="5px" fxLayout="row" fsLayout.xs="column" fxLayoutAlign="center">
-                <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
+                <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" |translate}}</button>
-                <button mat-raised-button color="primary" [disabled]="!clientCollateralForm.valid">Submit</button> 
+                <button mat-raised-button color="primary" [disabled]="!clientCollateralForm.valid">{{"labels.buttons.Submit" |translate}}</button> 
             </mat-card-actions>
 
         </form>

src/app/collaterals/view-collateral/view-collateral.component.html

@@ -1,11 +1,11 @@
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
     <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_CHARGE'">
       <fa-icon icon="edit" class="m-r-10"></fa-icon>
-      Edit
+      {{"labels.buttons.Edit" |translate}}
     </button>
     <button mat-raised-button color="warn" (click)="deleteCollateral()" *mifosxHasPermission="'DELETE_CHARGE'">
       <fa-icon icon="trash" class="m-r-10"></fa-icon>
-      Delete
+      {{"labels.buttons.Delete" |translate}}
     </button>
   </div>
 
@@ -15,43 +15,43 @@
 
         <div class="tab-container mat-typography">
 
-            <h3>Client Collateral Details</h3>
+            <h3>{{"labels.heading.Client Collateral Details" |translate}}</h3>
 
             <div fxLayout="row" fxLayoutGap="32px" class="group-details-container m-b-30">
               <p>
-                Name: {{ clientCollateralData.name }}<br/>
+                {{"labels.inputs.name" |translate}}: {{ clientCollateralData.name }}<br/>
-                Quantity: {{ clientCollateralData.quantity }}<br/>
+                {{"labels.inputs.Quantity" |translate}}: {{ clientCollateralData.quantity }}<br/>
-                Total Value: {{ clientCollateralData.total }}<br/>
+                {{"labels.inputs.Total Value" |translate}}: {{ clientCollateralData.total }}<br/>
-                Total Collateral Value: {{ clientCollateralData.totalCollateral }}<br/>
+                {{"labels.inputs.Total Collateral Value" |translate}}: {{ clientCollateralData.totalCollateral }}<br/>
               </p>
 
             </div>
 
 
-            <h3>Transaction Details</h3>
+            <h3>{{"labels.heading.Transaction Details" |translate}}</h3>
 
             <table mat-table [dataSource]="clientCollateralData.loanTransactionData"
             class="mat-elevation-z1 m-b-30">
 
             <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 element">
                 {{element.loanId}}
                 </td>
             </ng-container>
 
             <ng-container matColumnDef="Last Repayment">
-                <th mat-header-cell *matHeaderCellDef>Last Repayment</th>
+                <th mat-header-cell *matHeaderCellDef>{{"labels.inputs.Last Repayment" |translate}}</th>
                 <td mat-cell *matCellDef="let element"> {{element.lastRepayment}} </td>
             </ng-container>
 
             <ng-container matColumnDef="Remaining Amount">
-                <th mat-header-cell *matHeaderCellDef> Remaining Amount </th>
+                <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Remaining Amount" |translate}} </th>
                 <td mat-cell *matCellDef="let element"> {{element.remainingAmount}} </td>
             </ng-container>
 
             <ng-container matColumnDef="Last Repayment Date">
-                <th mat-header-cell *matHeaderCellDef> Last Repayment Date </th>
+                <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Last Repayment Date" |translate}} </th>
                 <td mat-cell *matCellDef="let element"> {{element.lastRepaymentDate | dateFormat}} </td>
 
             </ng-container>

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="40%">{{"labels.inputs.Valid from Date" | translate }}:</span>
-    <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate?.accountChart.fromDate | dateFormat }}</span>
+    <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate?.accountChart.fromDate  | dateFormat }}</span>
   </div>
 
   <div fxFlexFill *ngIf="fixedDepositsAccountProductTemplate?.accountChart.endDate">
-    <span fxFlex="40%">End Date:</span>
+    <span fxFlex="40%">{{"labels.inputs.End Date" | translate }}:</span>
-    <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate?.accountChart.endDate | dateFormat }}</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="40%">{{"labels.inputs.Primary Grouping by Amount" | translate }}:</span>
-    <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate?.accountChart.isPrimaryGroupingByAmount | yesNo }}</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="40%">{{"labels.inputs.Submitted On" | translate }}</span>
-    <span fxFlex="60%">{{ fixedDepositAccountData.submittedOnDate | dateFormat }}</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="40%">{{"labels.inputs.Transfer Interest to Savings Account" | translate }}?</span>
-    <span fxFlex="60%">{{ fixedDepositAccountData.transferInterestToSavings | yesNo }}</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="40%">{{"labels.inputs.Apply Penal Interest (less)" | translate }}:</span>
-    <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate.preClosurePenalApplicable | yesNo }}</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="40%">{{"labels.inputs.Withhold Tax is Applicable" | translate }}:</span>
-    <span fxFlex="60%">{{ fixedDepositAccountData.withHoldTax | yesNo }}</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="40%">{{"labels.inputs.Valid from Date" | translate }}:</span>
-      <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate?.accountChart.fromDate | dateFormat }}</span>
+      <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate?.accountChart.fromDate  | dateFormat }}</span>
     </div>
 
     <div fxFlexFill *ngIf="fixedDepositsAccountProductTemplate?.accountChart.endDate">
-      <span fxFlex="40%">End Date:</span>
+      <span fxFlex="40%">{{"labels.inputs.End Date" | translate }}:</span>
-      <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate?.accountChart.endDate | dateFormat }}</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="40%">{{"labels.inputs.Primary Grouping by Amount" | translate }}:</span>
-      <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate?.accountChart.isPrimaryGroupingByAmount | yesNo }}</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>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Due As Of" | translate }} </th>
-        <td mat-cell *matCellDef="let charge"> {{ charge.dueDate | dateFormat }} </td>
+        <td mat-cell *matCellDef="let charge"> {{ charge.dueDate  | dateFormat }} </td>
       </ng-container>
 
       <ng-container matColumnDef="repeatsOn">
-        <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>
+        <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 mat-dialog-close>{{"labels.buttons.Cancel" | translate }}</button>
-  <button mat-raised-button color="primary" [mat-dialog-close]="{ confirm: true }">Confirm</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 mat-dialog-close>{{"labels.buttons.Cancel" | translate }}</button>
-  <button mat-raised-button color="primary" [mat-dialog-close]="{ confirm: true }">Confirm</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 mat-dialog-close>{{"labels.buttons.Cancel" | translate }}</button>
-  <button mat-raised-button color="primary" [mat-dialog-close]="{ confirm: true }">Confirm</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 mat-dialog-close>{{"labels.buttons.Cancel" | translate }}</button>
-  <button mat-raised-button color="{{ data.isEnable ? 'accent' : 'warn' }}" [mat-dialog-close]="{ confirm: true }">Confirm</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 mat-dialog-close>{{"labels.buttons.Cancel" | translate }}</button>
-  <button mat-raised-button color="primary" [mat-dialog-close]="{ confirm: true }">Confirm</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%">
+          <h3>
-            <i class="fa fa-stop" [ngClass]="fixedDepositsAccountData.status.code | statusLookup"
+            <i class="fa fa-stop" [ngClass]="fixedDepositsAccountData.status.code | statusLookup" [matTooltip]="fixedDepositsAccountData.status.value"></i>
-              [matTooltip]="fixedDepositsAccountData.status.value"></i>
+            {{"labels.inputs.Account Name" | translate }} : {{fixedDepositsAccountData.depositProductName}}
-            Fixed Deposit Product : {{fixedDepositsAccountData.fixedDepositsAccountData}}<span class="m-l-10">
-              <mifosx-account-number accountNo="{{fixedDepositsAccountData.accountNo}}"></mifosx-account-number></span>
           </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}}
+            {{"labels.inputs.Account" | translate }} #: {{fixedDepositsAccountData.accountNo}} | {{"labels.inputs.Client Name" | translate }}: {{fixedDepositsAccountData.clientName}}<br/>
-            <span class="m-l-10" *ngIf="fixedDepositsAccountData.clientAccountNo">({{fixedDepositsAccountData.clientAccountNo}})</span><br />
+            <span *ngIf="!fixedDepositsAccountData.status.rejected && !fixedDepositsAccountData.status.submittedAndPendingApproval">
-            <span
+              {{"labels.inputs.Current Balance" | translate }}: {{fixedDepositsAccountData.currency.displaySymbol}}&nbsp;{{fixedDepositsAccountData.summary.accountBalance}}<br/>
-              *ngIf="!fixedDepositsAccountData.status.rejected && !fixedDepositsAccountData.status.submittedAndPendingApproval">
+              {{"labels.inputs.Deposit Amount" | translate }}: {{fixedDepositsAccountData.currency.displaySymbol}}&nbsp;{{fixedDepositsAccountData.depositAmount}}<br/>
-              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 />
             </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>{{"labels.inputs.Activated On" | translate }}</td>
-                <td>{{fixedDepositsAccountData.timeline.activatedOnDate ?
+                <td>{{fixedDepositsAccountData.timeline.activatedOnDate ? (fixedDepositsAccountData.timeline.activatedOnDate  | dateFormat) : 'Not Activated'}}</td>
-                  (fixedDepositsAccountData.timeline.activatedOnDate | dateFormat) : 'Not Activated'}}</td>
               </tr>
               <tr *ngIf="fixedDepositsAccountData.timeline.closedOnDate">
-                <td>Closed On</td>
+                <td>{{"labels.inputs.Closed On" | translate }}</td>
-                <td>{{fixedDepositsAccountData.timeline.closedOnDate | dateFormat}}</td>
+                <td>{{fixedDepositsAccountData.timeline.closedOnDate  | dateFormat}}</td>
               </tr>
               <tr>
-                <td>Field Officer</td>
+                <td>{{"labels.inputs.Field Officer" | translate }}</td>
-                <td>{{fixedDepositsAccountData.fieldOfficerName ? fixedDepositsAccountData.fieldOfficerName :
+                <td>{{fixedDepositsAccountData.fieldOfficerName ? fixedDepositsAccountData.fieldOfficerName : 'Unassigned'}}</td>
-                  'Unassigned'}}</td>
               </tr>
               <tr>
-                <td>Maturity Date</td>
+                <td>{{"labels.inputs.Maturity Date" | translate }}</td>
-                <td>{{fixedDepositsAccountData.maturityDate ? (fixedDepositsAccountData.maturityDate | dateFormat) :
+                <td>{{fixedDepositsAccountData.maturityDate ? (fixedDepositsAccountData.maturityDate  | dateFormat) : 'N/A'}}</td>
-                  'N/A'}}</td>
               </tr>
               <tr>
-                <td>Deposit Period</td>
+                <td>{{"labels.inputs.Deposit Period" | translate }}</td>
-                <td>
+                <td>{{fixedDepositsAccountData.depositPeriod}}&nbsp;{{fixedDepositsAccountData.depositPeriodFrequency.value}}</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>{{"labels.inputs.Pre-cloure Penal" | translate }}</td>
-                <td>{{fixedDepositsAccountData.preClosurePenalInterest}} % on
+                <td>{{fixedDepositsAccountData.preClosurePenalInterest}} % on {{fixedDepositsAccountData.preClosurePenalInterestOnType.value}}</td>
-                  {{fixedDepositsAccountData.preClosurePenalInterestOnType.value}}</td>
               </tr>
             </tbody>
           </table>
@@ -143,38 +150,29 @@
 
       <div fxFlex="49%">
 
-        <div
+        <div *ngIf="!fixedDepositsAccountData.status.rejected && !fixedDepositsAccountData.status.submittedAndPendingApproval; else otherDetails">
-          *ngIf="!fixedDepositsAccountData.status.rejected && !fixedDepositsAccountData.status.submittedAndPendingApproval; else otherDetails">
+          <h4 class="table-headers">{{"labels.heading.Performance History" | translate }}</h4>
-          <h4 class="table-headers">Performance History</h4>
           <table>
             <tbody>
               <tr>
-                <td>Principal Amount</td>
+                <td>{{"labels.inputs.Principal Amount" | translate }}</td>
-                <td class="r-amount">{{fixedDepositsAccountData.depositAmount | currency:currencyCode:'symbol-narrow':'1.2-2'}}
+                <td>{{fixedDepositsAccountData.currency.displaySymbol}}&nbsp;{{fixedDepositsAccountData.depositAmount}}</td>
-                </td>
               </tr>
               <tr>
-                <td>Maturity Amount</td>
+                <td>{{"labels.inputs.Maturity Amount" | translate }}</td>
-                <td class="r-amount">{{fixedDepositsAccountData.maturityAmount | currency:currencyCode:'symbol-narrow':'1.2-2'}}
+                <td>{{fixedDepositsAccountData.currency.displaySymbol}}&nbsp;{{fixedDepositsAccountData.maturityAmount}}</td>
-                </td>
               </tr>
               <tr *ngIf="fixedDepositsAccountData.summary.totalDeposits">
-                <td>Total Deposits</td>
+                <td>{{"labels.inputs.Total Deposits" | translate }}</td>
-                <td class="r-amount">
+                <td>{{fixedDepositsAccountData.currency.displaySymbol}}&nbsp;{{fixedDepositsAccountData.summary.totalDeposits}}</td>
-                  {{fixedDepositsAccountData.summary.totalDeposits | currency:currencyCode:'symbol-narrow':'1.2-2'}}
-                </td>
               </tr>
               <tr *ngIf="fixedDepositsAccountData.summary.totalWithdrawals">
-                <td>Total Withdrawals</td>
+                <td>{{"labels.inputs.Total Withdrawals" | translate }}</td>
-                <td class="r-amount">
+                <td>{{fixedDepositsAccountData.currency.displaySymbol}}&nbsp;{{fixedDepositsAccountData.summary.totalWithdrawals}}</td>
-                  {{fixedDepositsAccountData.summary.totalWithdrawals | currency:currencyCode:'symbol-narrow':'1.2-2'}}
-                </td>
               </tr>
               <tr *ngIf="fixedDepositsAccountData.summary.totalInterestEarned >= 0">
-                <td>Total Interest Earned</td>
+                <td>{{"labels.inputs.Total Interest Earned" | translate }}</td>
-                <td class="r-amount">
+                <td>{{fixedDepositsAccountData.currency.displaySymbol}}&nbsp;{{fixedDepositsAccountData.summary.totalInterestEarned}}</td>
-                  {{fixedDepositsAccountData.summary.totalInterestEarned | currency:currencyCode:'symbol-narrow':'1.2-2'}}
-                </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>{{"labels.inputs.Principal Amount" | translate }}</td>
-                  <td>
+                  <td>{{fixedDepositsAccountData.currency.displaySymbol}}&nbsp;{{fixedDepositsAccountData.depositAmount}}</td>
-                    {{fixedDepositsAccountData.depositAmount | currency:currencyCode:'symbol-narrow':'1.2-2'}}
-                  </td>
                 </tr>
                 <tr>
-                  <td>Maturity Amount</td>
+                  <td>{{"labels.inputs.Maturity Amount" | translate }}</td>
-                  <td>
+                  <td>{{fixedDepositsAccountData.currency.displaySymbol}}&nbsp;{{fixedDepositsAccountData.maturityAmount}}</td>
-                    {{fixedDepositsAccountData.maturityAmount | currency:currencyCode:'symbol-narrow':'1.2-2'}}
-                  </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">
+      [active]="IRC.isActive">
-        Interest Rate Chart
+      {{"labels.inputs.Interest Rate Chart" | translate }}
       </a>
       <a mat-tab-link [routerLink]="['./transactions']" routerLinkActive #transactions="routerLinkActive"
-        [active]="transactions.isActive">
+      [active]="transactions.isActive">
-        Transactions
+      {{"labels.inputs.Transactions" | translate }}
       </a>
       <a mat-tab-link [routerLink]="['./charges']" routerLinkActive #charges="routerLinkActive"
-        [active]="charges.isActive">
+      [active]="charges.isActive">
-        Charges
+      {{"labels.inputs.Charges" | translate }}
       </a>
-      <a mat-tab-link [routerLink]="['./standing-instructions']" routerLinkActive
+      <a mat-tab-link [routerLink]="['./standing-instructions']" routerLinkActive #standingInstructions="routerLinkActive"
-        #standingInstructions="routerLinkActive" [active]="standingInstructions.isActive"
+        [active]="standingInstructions.isActive" *ngIf="fixedDepositsAccountData.clientId">
-        *ngIf="fixedDepositsAccountData.clientId">
+        {{"labels.inputs.Standing Instructions" | translate }}
-        Standing Instructions
       </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>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Validity" | translate }} </th>
-        <td mat-cell *matCellDef="let instruction">{{instruction.validFrom | dateFormat}} to {{instruction.validTill | dateFormat}}</td>
+        <td mat-cell *matCellDef="let instruction">{{instruction.validFrom  | dateFormat}} to {{instruction.validTill  | dateFormat}}</td>
       </ng-container>
 
       <ng-container matColumnDef="actions">
-        <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>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.ID" | translate }} </th>
-        <td mat-cell *matCellDef="let transaction" [ngClass]="transactionColor(transaction)"> {{ transaction.id }} </td>
+        <td mat-cell *matCellDef="let transaction"> {{ transaction.id }} </td>
       </ng-container>
 
       <ng-container matColumnDef="transactionDate">
-        <th mat-header-cell *matHeaderCellDef> Transaction Date </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Transaction Date" | translate }} </th>
-        <td mat-cell *matCellDef="let transaction" [ngClass]="transactionColor(transaction)"> {{ transaction.date | dateFormat }} </td>
+        <td mat-cell *matCellDef="let transaction"> {{ 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]="transactionColor(transaction)"> {{ transaction.transactionType.value }} </td>
+        <td mat-cell *matCellDef="let transaction"> {{ 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]="transactionColor(transaction)"> {{ isDebit(transaction.transactionType) ? transaction.amount : 'N/A'}} </td>
+        <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>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Credit" | translate }} </th>
-        <td mat-cell *matCellDef="let transaction" [ngClass]="transactionColor(transaction)"> {{ !isDebit(transaction.transactionType) ? transaction.amount : 'N/A' }} </td>
+        <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>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Balance" | translate }} </th>
-        <td mat-cell *matCellDef="let transaction" [ngClass]="transactionColor(transaction)"> {{ transaction.runningBalance | number }} </td>
+        <td mat-cell *matCellDef="let transaction"> {{ transaction.runningBalance }} </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>
       </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 type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate }}</button>
-        <button mat-raised-button color="primary" [disabled]="!activateFixedDepositsAccountForm.valid">Confirm</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 type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate }}</button>
-          <button mat-raised-button color="primary" [disabled]="!fixedDepositsChargeForm.valid">Submit</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 type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate }}</button>
-        <button mat-raised-button color="primary" [disabled]="!approveFixedDepositsAccountForm">Confirm</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 type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate }}</button>
-        <button mat-raised-button color="warn" [disabled]="!closeOnMaturityAccountForm.valid">Confirm</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 type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate }}</button>
-        <button mat-raised-button color="warn" [disabled]="!prematureCloseAccountForm.valid">Confirm</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 type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate }}</button>
-        <button mat-raised-button color="warn" [disabled]="!rejectFixedDepositsAccountForm.valid">Confirm</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 type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate }}</button>
-        <button mat-raised-button color="warn" [disabled]="!undoApprovalFixedDepositsAccountForm.valid">Confirm</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 type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate }}</button>
-        <button mat-raised-button color="primary" [disabled]="!withdrawFixedDepositsAccountForm.valid">Confirm</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 type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate }}</button>
-        <button mat-raised-button color="primary" [disabled]="!activateRecurringDepositsAccountForm.valid">Confirm</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 type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate }}</button>
-          <button mat-raised-button color="primary" [disabled]="!recurringDepositsChargeForm.valid">Submit</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 type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate }}</button>
-        <button mat-raised-button color="primary" [disabled]="!approveRecurringDepositsAccountForm">Confirm</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 type="button" mat-raised-button [routerLink]="['../general']">{{"labels.buttons.Cancel" | translate }}</button>
-        <button mat-raised-button color="primary" [disabled]="!closeRecurringDepositForm.valid">Submit</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 type="button" mat-raised-button [routerLink]="['../general']">{{"labels.buttons.Cancel" | translate }}</button>
-        <button mat-raised-button color="primary" [disabled]="!depositRecurringDepositForm.valid">Submit</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 type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate }}</button>
-        <button mat-raised-button color="primary" [disabled]="!prematureCloseRecurringDepositsAccountForm">Confirm</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 type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate }}</button>
-        <button mat-raised-button color="primary" [disabled]="!rejectRecurringDepositsAccountForm">Confirm</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 type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate }}</button>
-        <button mat-raised-button color="warn" [disabled]="!undoApprovalRecurringDepositsAccountForm.valid">Confirm</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 type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate }}</button>
-        <button mat-raised-button color="primary" [disabled]="!withdrawRecurringDepositsAccountForm.valid">Confirm</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="40%">{{"labels.inputs.Valid from Date" | translate }}:</span>
-    <span fxFlex="60%">{{ recurringDepositsAccountProductTemplate?.accountChart.fromDate | dateFormat }}</span>
+    <span fxFlex="60%">{{ recurringDepositsAccountProductTemplate?.accountChart.fromDate  | dateFormat }}</span>
   </div>
 
   <div fxFlexFill *ngIf="recurringDepositsAccountProductTemplate?.accountChart.endDate">
-    <span fxFlex="40%">End Date:</span>
+    <span fxFlex="40%">{{"labels.inputs.End Date" | translate }}:</span>
-    <span fxFlex="60%">{{ recurringDepositsAccountProductTemplate?.accountChart.endDate | dateFormat }}</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="40%">{{"labels.inputs.Submitted On" | translate }}</span>
-    <span fxFlex="60%">{{ recurringDepositAccountData.submittedOnDate | dateFormat }}</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="40%">{{"labels.inputs.Deposit Frequency Same as Group/Center meeting" | translate }}:</span>
-    <span fxFlex="60%">{{ recurringDepositsAccountProductTemplate.isCalendarInherited === true | yesNo  }}</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="40%">{{"labels.inputs.Deposit Start Date" | translate }}:</span>
-      <span fxFlex="60%">{{ recurringDepositAccountData.expectedFirstDepositOnDate | dateFormat}}</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="40%">{{"labels.inputs.Valid from Date" | translate }}:</span>
-      <span fxFlex="60%">{{ recurringDepositsAccountProductTemplate?.accountChart.fromDate | dateFormat }}</span>
+      <span fxFlex="60%">{{ recurringDepositsAccountProductTemplate?.accountChart.fromDate  | dateFormat }}</span>
     </div>
 
     <div fxFlexFill *ngIf="recurringDepositsAccountProductTemplate?.accountChart.endDate">
-      <span fxFlex="40%">End Date:</span>
+      <span fxFlex="40%">{{"labels.inputs.End Date" | translate }}:</span>
-      <span fxFlex="60%">{{ recurringDepositsAccountProductTemplate?.accountChart.endDate | dateFormat }}</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>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Due As Of" | translate }} </th>
-        <td mat-cell *matCellDef="let charge"> {{ charge.dueDate | dateFormat }} </td>
+        <td mat-cell *matCellDef="let charge"> {{ charge.dueDate  | dateFormat }} </td>
       </ng-container>
 
       <ng-container matColumnDef="repeatsOn">
-        <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 mat-dialog-close>{{"labels.buttons.Cancel" | translate }}</button>
-  <button mat-raised-button color="warn" [mat-dialog-close]="{ confirm: true }">Confirm</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:
+              {{"labels.inputs.Current Balance" | translate }}:
-              {{recurringDepositsAccountData.summary.accountBalance | currency:currencyCode:'symbol-narrow':'1.2-2'}}<br />
+              {{recurringDepositsAccountData.currency.displaySymbol}}&nbsp;{{recurringDepositsAccountData.summary.accountBalance}}<br />
-              Available Balance:
+              {{"labels.inputs.Available Balance" | translate }}:
-              {{recurringDepositsAccountData.summary.availableBalance | currency:currencyCode:'symbol-narrow':'1.2-2'}}<br />
+              {{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>{{"labels.inputs.Activation date" | translate }}</td>
-              <td>{{recurringDepositsAccountData.timeline.activatedOnDate | dateFormat}}</td>
+              <td>{{recurringDepositsAccountData.timeline.activatedOnDate  | dateFormat}}</td>
             </tr>
             <tr>
-              <td>Maturity Date</td>
+              <td>{{"labels.inputs.Maturity Date" | translate }}</td>
-              <td><span>{{recurringDepositsAccountData.maturityDate | dateFormat}}</span></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>
+                {{"labels.inputs.Closed on Date" | translate }}</td>
-              <td><span>{{recurringDepositsAccountData.timeline.closedOnDate | dateFormat}}</span></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> {{"labels.inputs.Balance Required For Interest Calculation" | translate }}</td>
-              <td><span>{{recurringDepositsAccountData.minBalanceForInterestCalculation | number }}</span></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 >{{"labels.inputs.Interest Earned" | translate }}</td>
-              <td><span>{{recurringDepositsAccountData.summary.totalInterestEarned | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span>
+              <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.expectedFirstDepositOnDate">{{recurringDepositsAccountData.timeline.activatedOnDate  | dateFormat}}
-                  <span *ngIf="!recurringDepositsAccountData.timeline.activatedOnDate">Not Activated</span>
+                  <span *ngIf="!recurringDepositsAccountData.timeline.activatedOnDate">{{"labels.inputs.Not Activated" | translate }}</span>
                 </span>
-                <span *ngIf="recurringDepositsAccountData.expectedFirstDepositOnDate" >{{recurringDepositsAccountData.expectedFirstDepositOnDate | dateFormat}}
+                <span *ngIf="recurringDepositsAccountData.expectedFirstDepositOnDate" >{{recurringDepositsAccountData.expectedFirstDepositOnDate  | dateFormat}}
-                  <span *ngIf="!recurringDepositsAccountData.expectedFirstDepositOnDate">Not Activated</span>
+                  <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>{{"labels.inputs.Maturity Date" | translate }}</td>
-              <td><span>{{recurringDepositsAccountData.maturityDate | dateFormat}}</span></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> {{"labels.inputs.Actual Available Balance" | translate }}</td>
-              <td>{{ recurringDepositsAccountData.summary.accountBalance | currency:currencyCode:'symbol-narrow':'1.2-2'}}</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> {{"labels.inputs.Interests Earned" | translate }} </td>
-              <td><span>{{ recurringDepositsAccountData.summary.totalInterestEarned | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span></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>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Validity" | translate }} </th>
-        <td mat-cell *matCellDef="let instruction">{{instruction.validFrom | dateFormat}} to {{instruction.validTill | dateFormat}}
+        <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 type="button" mat-raised-button [routerLink]="['../']">{{"labels.buttons.Cancel" | translate }}</button>
-          <button mat-raised-button color="primary" [disabled]="!editTransactionForm.valid">Submit</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>
+        <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>
+        <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%">

src/app/groups/create-group/create-group.component.html

@@ -9,30 +9,30 @@
         <div fxLayout="column">
 
           <mat-form-field>
-            <mat-label>Name</mat-label>
+            <mat-label>{{"labels.inputs.name" | translate }}</mat-label>
             <input matInput required formControlName="name">
             <mat-error *ngIf="groupForm.controls.name.hasError('required')">
-              Group Name is <strong>required</strong>
+              {{"labels.inputs.Group Name" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
             <mat-error *ngIf="groupForm.controls.name.hasError('pattern')">
-              Group Name <strong>cannot</strong> begin with a special character or number
+              {{"labels.inputs.Group Name" | translate }} <strong>{{"labels.inputs.cannot" | translate }}</strong> {{ "labels.commons.begin with a special character or number" | translate }}
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Office</mat-label>
+            <mat-label>{{"labels.inputs.Office" | translate }}</mat-label>
             <mat-select required formControlName="officeId">
               <mat-option *ngFor="let office of officeData" [value]="office.id">
               {{ office.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="groupForm.controls.officeId.hasError('required')">
-              Office is <strong>required</strong>
+              {{"labels.inputs.Office" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Staff</mat-label>
+            <mat-label>{{"labels.inputs.Staff" | translate }}</mat-label>
             <mat-select formControlName="staffId">
               <mat-option *ngFor="let staff of staffData" [value]="staff.id">
               {{ staff.displayName }}
@@ -41,36 +41,36 @@
           </mat-form-field>
 
           <mat-form-field (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" required formControlName="submittedOnDate">
             <mat-datepicker-toggle matSuffix [for]="submittedOnDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #submittedOnDatePicker></mat-datepicker>
             <mat-error *ngIf="groupForm.controls.submittedOnDate.hasError('required')">
-              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-checkbox labelPosition="before" formControlName="active">
-            Active
+            {{"labels.inputs.Active" | translate }}
           </mat-checkbox>
 
           <mat-form-field *ngIf="groupForm.controls.active.value" (click)="activationDatePicker.open()">
-            <mat-label>Activation Date</mat-label>
+            <mat-label>{{"labels.inputs.Activation Date" | translate }}</mat-label>
             <input matInput [min]="groupForm.value.submittedOnDate" [max]="maxDate" [matDatepicker]="activationDatePicker" required formControlName="activationDate">
             <mat-datepicker-toggle matSuffix [for]="activationDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #activationDatePicker></mat-datepicker>
             <mat-error *ngIf="groupForm.controls.activationDate.hasError('required')">
-              Activation Date is <strong>required</strong>
+              {{"labels.inputs.Activation Date" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>External id</mat-label>
+            <mat-label>{{"labels.inputs.External id" | translate }}</mat-label>
             <input matInput formControlName="externalId">
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Add Clients</mat-label>
+            <mat-label>{{"labels.inputs.Add Clients" | translate }}</mat-label>
             <input matInput [formControl]="clientChoice" [matAutocomplete]="clientsAutocomplete">
           </mat-form-field>
 
@@ -86,27 +86,27 @@
 
           <div class="mat-table" *ngIf="clientChoice.value">
             <div class="mat-header-row">
-              <div class="mat-header-cell">Client Details</div>
+              <div class="mat-header-cell">{{"labels.inputs.Client Details" | translate }}</div>
               <button mat-icon-button (click)="addClient()">
                 <fa-icon icon="plus"></fa-icon>
               </button>
             </div>
             <div class="mat-row">
-              <div class="mat-cell">Name</div>
+              <div class="mat-cell">{{"labels.inputs.name" | translate }}</div>
               <div class="mat-cell">{{clientChoice.value.displayName}}</div>
             </div>
             <div class="mat-row">
-              <div class="mat-cell">Id</div>
+              <div class="mat-cell">{{"labels.inputs.Id" | translate }}</div>
               <div class="mat-cell">{{clientChoice.value.id}}</div>
             </div>
             <div class="mat-row">
-              <div class="mat-cell">Office</div>
+              <div class="mat-cell">{{"labels.inputs.Office" | translate }}</div>
               <div class="mat-cell">{{clientChoice.value.officeName}}</div>
             </div>
           </div>
 
           <mat-nav-list *ngIf="clientMembers.length">
-            <h3 matSubheader>Selected Clients</h3>
+            <h3 matSubheader>{{"labels.heading.Selected Clients" | translate }}</h3>
             <div mat-list-item *ngFor="let client of clientMembers index as i">
               <span matLine>{{client.displayName}}</span>
               <button mat-icon-button color="warn" (click)="removeClient(i)">
@@ -120,8 +120,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 type="button" mat-raised-button [routerLink]="['../']">{{"labels.buttons.Cancel" | translate }}</button>
-        <button mat-raised-button color="primary" [disabled]="!groupForm.valid" (click)="submit()">Submit</button>
+        <button mat-raised-button color="primary" [disabled]="!groupForm.valid" (click)="submit()">{{"labels.buttons.Submit" | translate }}</button>
       </mat-card-actions>
 
     </form>

src/app/groups/edit-group/edit-group.component.html

@@ -9,18 +9,18 @@
         <div fxLayout="column">
 
           <mat-form-field>
-            <mat-label>Name</mat-label>
+            <mat-label>{{"labels.inputs.name" | translate }}</mat-label>
             <input matInput required formControlName="name">
             <mat-error *ngIf="editGroupForm.controls.name.hasError('required')">
-              Group Name is <strong>required</strong>
+              {{"labels.inputs.Group Name" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
             <mat-error *ngIf="editGroupForm.controls.name.hasError('pattern')">
-              Group Name <strong>cannot</strong> begin with a special character or number
+              {{"labels.inputs.Group Name" | translate }} <strong>{{"labels.inputs.cannot" | translate }}</strong> {{ "labels.commons.begin with a special character or number" | translate }}
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Staff</mat-label>
+            <mat-label>{{"labels.inputs.Staff" | translate }}</mat-label>
             <mat-select formControlName="staffId">
               <mat-option *ngFor="let staff of staffData" [value]="staff.id">
               {{ staff.displayName }}
@@ -29,27 +29,27 @@
           </mat-form-field>
 
           <mat-form-field (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" required formControlName="submittedOnDate">
             <mat-datepicker-toggle matSuffix [for]="submittedOnDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #submittedOnDatePicker></mat-datepicker>
             <mat-error *ngIf="editGroupForm.controls.submittedOnDate.hasError('required')">
-              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 *ngIf="this.editGroupForm.contains('activationDate')" (click)="activationDatePicker.open()">
-            <mat-label>Activation Date</mat-label>
+            <mat-label>{{"labels.inputs.Activation Date" | translate }}</mat-label>
             <input matInput [min]="editGroupForm.value.submittedOnDate" [max]="maxDate" [matDatepicker]="activationDatePicker" required formControlName="activationDate">
             <mat-datepicker-toggle matSuffix [for]="activationDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #activationDatePicker></mat-datepicker>
             <mat-error *ngIf="editGroupForm.controls.activationDate.hasError('required')">
-              Activation Date is <strong>required</strong>
+              {{"labels.inputs.Activation Date" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>External id</mat-label>
+            <mat-label>{{"labels.inputs.External id" | translate }}</mat-label>
             <input matInput formControlName="externalId">
           </mat-form-field>
 
@@ -58,8 +58,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 type="button" mat-raised-button [routerLink]="['../']">{{"labels.buttons.Cancel" | translate }}</button>
-        <button mat-raised-button color="primary" [disabled]="!editGroupForm.valid" (click)="submit()">Submit</button>
+        <button mat-raised-button color="primary" [disabled]="!editGroupForm.valid" (click)="submit()">{{"labels.buttons.Submit" | translate }}</button>
       </mat-card-actions>
 
     </form>

src/app/groups/groups-view/add-role/add-role.component.html

@@ -9,26 +9,26 @@
         <div fxLayout="column">
 
           <mat-form-field>
-            <mat-label>Client</mat-label>
+            <mat-label>{{"labels.inputs.Client" | translate }}</mat-label>
             <mat-select formControlName="clientId">
               <mat-option *ngFor="let client of clientMemberData" [value]="client.id">
                 {{ client.displayName }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="groupsAddRoleForm.controls.clientId.hasError('required')">
-              Client Member is <strong>required</strong>
+              {{"labels.inputs.Client Member" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Role</mat-label>
+            <mat-label>{{"labels.inputs.Role" | translate }}</mat-label>
             <mat-select formControlName="role">
               <mat-option *ngFor="let role of roleData" [value]="role.id">
                 {{ role.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="groupsAddRoleForm.controls.role.hasError('required')">
-              Role is <strong>required</strong>
+              {{"labels.inputs.Role" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -37,9 +37,9 @@
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">{{"labels.buttons.Cancel" | translate }}</button>
         <button mat-raised-button color="primary" [disabled]="!groupsAddRoleForm.valid"
-          *mifosxHasPermission="'ASSIGNROLE_GROUP'">Confirm</button>
+          *mifosxHasPermission="'ASSIGNROLE_GROUP'">{{"labels.buttons.Confirm" | translate }}</button>
       </mat-card-actions>
 
     </form>

src/app/groups/groups-view/committee-tab/committee-tab.component.html

@@ -2,12 +2,12 @@
   
   <div fxLayout="row" fxLayoutAlign="start">
     <div class="m-b-10">
-      <h3>Client Members</h3>
+      <h3>{{"labels.heading.Client Members" | translate }}</h3>
     </div>
     <div class="action-button m-b-10" fxLayoutGap="25px" *ngIf="groupStatus !== 'Closed'">
       <button mat-raised-button class="f-right" color="primary"
       *mifosxHasPermission="'ASSIGNROLE_GROUP'" [routerLink]="['add-role']">
-        <i class="fa fa-plus"></i>&nbsp; Add</button>
+        <i class="fa fa-plus"></i>&nbsp; {{"labels.buttons.Add" | translate }}</button>
     </div>
   </div>
 
@@ -16,27 +16,27 @@
     <table #rolesTable mat-table [dataSource]="groupRolesData" class="mat-elevation-z1 m-b-25">
 
       <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 element"> {{element.clientName}} </td>
       </ng-container>
 
       <ng-container matColumnDef="Role">
-        <th mat-header-cell *matHeaderCellDef> Role </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Role" | translate }} </th>
         <td mat-cell *matCellDef="let element"> {{element.role.name}} </td>
       </ng-container>
 
       <ng-container matColumnDef="Client Id">
-        <th mat-header-cell *matHeaderCellDef> Client Id </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Client Id" | translate }} </th>
         <td mat-cell *matCellDef="let element"> {{element.clientId}} </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 element">
           <span *ngIf="groupStatus !== 'Closed'">
             <button class="account-action-button" mat-raised-button color="warn"
             *mifosxHasPermission="'UNASSIGNROLE_GROUP'" (click)="unassignRole(element.clientId, element.id)">
-            <i class="fa fa-ban" matTooltip="Unassign"></i>
+            <i class="fa fa-ban" matTooltip="{{ 'tooltips.Unassign' | translate }}"></i>
             </button>
           </span>
         </td>

src/app/groups/groups-view/custom-dialogs/unassign-role-dialog/unassign-role-dialog.component.html

@@ -1,8 +1,8 @@
-<h1 mat-dialog-title>Unassign Role</h1>
+<h1 mat-dialog-title>{{ "labels.heading.Unassign Role" | translate }}</h1>
 <div mat-dialog-content>
-  <p>Are you sure you want to unassign role for client member with id: {{ data.id }} ?</p>
+  <p>{{"labels.text.Unassign role for client member" |translate}}: {{ data.id }} ?</p>
 </div>
 <mat-dialog-actions align="end">
-  <button mat-raised-button mat-dialog-close>Cancel</button>
+  <button mat-raised-button mat-dialog-close>{{"labels.buttons.Cancel" | translate }}</button>
-  <button mat-raised-button color="warn" [mat-dialog-close]="{ confirm: true }">Confirm</button>
+  <button mat-raised-button color="warn" [mat-dialog-close]="{ confirm: true }">{{"labels.buttons.Confirm" | translate }}</button>
 </mat-dialog-actions>

src/app/groups/groups-view/custom-dialogs/unassign-staff-dialog/unassign-staff-dialog.component.html

@@ -1,8 +1,8 @@
-<h1 mat-dialog-title>Unassign Staff</h1>
+<h1 mat-dialog-title>{{ "labels.heading.Unassign Role" | translate }}</h1>
 <div mat-dialog-content>
-  <p>Are you sure you want to unassign staff for this group ?</p>
+  <p>{{"labels.text.Unassign staff for this group" |translate}} ?</p>
 </div>
 <mat-dialog-actions align="end">
-  <button mat-raised-button mat-dialog-close>Cancel</button>
+  <button mat-raised-button mat-dialog-close>{{"labels.buttons.Cancel" | translate }}</button>
-  <button mat-raised-button color="warn" [mat-dialog-close]="{ confirm: true }">Confirm</button>
+  <button mat-raised-button color="warn" [mat-dialog-close]="{ confirm: true }">{{"labels.buttons.Confirm" | translate }}</button>
 </mat-dialog-actions>

src/app/groups/groups-view/general-tab/general-tab.component.html

@@ -1,33 +1,33 @@
 <div class="tab-container mat-typography">
 
-  <h3>Group Details</h3>
+  <h3>{{"labels.heading.Group Details" | translate }}</h3>
 
   <div fxLayout="row" fxLayoutGap="32px" class="group-details-container m-b-30">
     <p>
-      Active Client Loans: {{groupSummary?.activeClientLoans}}<br/>
+      {{"labels.inputs.Active Client Loans" | translate }}: {{groupSummary?.activeClientLoans}}<br/>
-      Active Client Borrowers: {{groupSummary?.activeClientBorrowers}}<br/>
+      {{"labels.inputs.Active Client Borrowers" | translate }}: {{groupSummary?.activeClientBorrowers}}<br/>
-      Active Overdue Client Loans: {{groupSummary?.overdueClientLoans}}<br/>
+      {{"labels.inputs.Active Overdue Client Loans" | translate }}: {{groupSummary?.overdueClientLoans}}<br/>
     </p>
     <p>
-      Active Group Loans: {{groupSummary?.activeGroupLoans}}<br/>
+      {{"labels.inputs.Active Group Loans" | translate }}: {{groupSummary?.activeGroupLoans}}<br/>
-      Active Group Borrowers: {{groupSummary?.activeGroupBorrowers}}<br/>
+      {{"labels.inputs.Active Group Borrowers" | translate }}: {{groupSummary?.activeGroupBorrowers}}<br/>
-      Active Overdue Group Loans: {{groupSummary?.overdueGroupLoans}}<br/>
+      {{"labels.inputs.Active Overdue Group Loans" | translate }}: {{groupSummary?.overdueGroupLoans}}<br/>
     </p>
     <p>
-      Active Clients: {{groupSummary?.activeClients}}<br/>
+      {{"labels.inputs.Active Clients" | translate }}: {{groupSummary?.activeClients}}<br/>
     </p>
   </div>
 
   <!-- Client Members Table -->
   <div *ngIf="groupClientMembers">
 
-    <h3>Client Members</h3>
+    <h3>{{"labels.heading.Client Members" | translate }}</h3>
 
     <table mat-table [dataSource]="groupClientMembers"
       class="mat-elevation-z1 m-b-30">
 
       <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 element">
           <i class="fa fa-stop" [ngClass]="element.status.code|statusLookup" [matTooltip]="element.status.value"></i>
           {{element.displayName}}
@@ -35,21 +35,21 @@
       </ng-container>
 
       <ng-container matColumnDef="Account No">
-        <th mat-header-cell *matHeaderCellDef> Account No. </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Account No" | translate }}. </th>
         <td mat-cell *matCellDef="let element"> {{element.accountNo}} </td>
       </ng-container>
 
       <ng-container matColumnDef="Office">
-        <th mat-header-cell *matHeaderCellDef> Office </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Office" | translate }} </th>
         <td mat-cell *matCellDef="let element"> {{element.officeName}} </td>
       </ng-container>
 
       <ng-container matColumnDef="JLG Loan Application">
-        <th mat-header-cell *matHeaderCellDef> JLG Loan Application </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.JLG Loan Application" | translate }} </th>
         <td mat-cell *matCellDef="let element">
           <div class="m-l-30" *ngIf="element.status.code !== 'clientStatusType.closed'">
             <button class="account-action-button" mat-raised-button color="primary">
-              <i class="fa fa-plus" matTooltip="New Loan Application"></i>
+              <i class="fa fa-plus" matTooltip="{{ 'tooltips.New Loan Application' | translate }}"></i>
             </button>
           </div>
         </td>
@@ -66,7 +66,7 @@
 
     <div fxLayout="row" fxLayoutAlign="start" class="table-header">
       <div class="m-b-10">
-        <h3>Loan Accounts</h3>
+        <h3>{{"labels.heading.Loan Accounts" | translate }}</h3>
       </div>
       <div *ngIf="(loanAccounts|accountsFilter:'loan':'closed').length" class="action-button m-b-10">
         <button mat-raised-button class="f-right" color="primary"
@@ -79,7 +79,7 @@
       class="mat-elevation-z1 m-b-30">
 
       <ng-container matColumnDef="Account No">
-        <th mat-header-cell *matHeaderCellDef> Account No. </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Account No" | translate }}. </th>
         <td mat-cell *matCellDef="let element"> <i class="fa fa-stop"
             [ngClass]="element.inArrears?'status-active-overdue':(element.status.code|statusLookup)"
             [matTooltip]="element.inArrears?'Active Overdue':element.status.value"></i>
@@ -88,27 +88,27 @@
       </ng-container>
 
       <ng-container matColumnDef="Loan Account">
-        <th mat-header-cell *matHeaderCellDef> Loan Account </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Loan Account" | translate }} </th>
         <td mat-cell *matCellDef="let element"> {{element.productName}} </td>
       </ng-container>
 
       <ng-container matColumnDef="Original Loan">
-        <th mat-header-cell *matHeaderCellDef> Original Loan </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Original Loan" | translate }} </th>
         <td mat-cell *matCellDef="let element"> {{element.originalLoan}} </td>
       </ng-container>
 
       <ng-container matColumnDef="Loan Balance">
-        <th mat-header-cell *matHeaderCellDef> Loan Balance </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Loan Balance" | translate }} </th>
         <td mat-cell *matCellDef="let element"> {{element.loanBalance}} </td>
       </ng-container>
 
       <ng-container matColumnDef="Amount Paid">
-        <th mat-header-cell *matHeaderCellDef> Amount Paid </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Amount Paid" | translate }} </th>
         <td mat-cell *matCellDef="let element"> {{element.amountPaid}} </td>
       </ng-container>
 
       <ng-container matColumnDef="Type">
-        <th mat-header-cell *matHeaderCellDef> Type </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Type" | translate }} </th>
         <td mat-cell *matCellDef="let element">
           <i class="fa fa-large" [ngClass]="(element.loanType.value==='Individual')?'fa-user':'fa-group'"
           [matTooltip]="(element.loanType.value==='Individual')?'Individual':'Group'"></i>
@@ -116,21 +116,21 @@
       </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 element">
           <button *ngIf="element.status.active" class="account-action-button" mat-raised-button color="primary">
-            <i class="fa fa-dollar" matTooltip="Make Repayment"></i>
+            <i class="fa fa-dollar" matTooltip="{{ 'tooltips.Make Repayment' | translate }}"></i>
           </button>
           <button *ngIf="element.status.pendingApproval" class="account-action-button" mat-raised-button color="primary">
-            <i class="fa fa-check" matTooltip="Approve"></i>
+            <i class="fa fa-check" matTooltip="{{ 'tooltips.Approve' | translate }}"></i>
           </button>
           <button *ngIf="!element.status.pendingApproval && !element.status.active && !element.status.overpaid"
             class="account-action-button" mat-raised-button color="primary">
-            <i class="fa fa-flag" matTooltip="Disburse"></i>
+            <i class="fa fa-flag" matTooltip="{{ 'tooltips.Disburse' | translate }}"></i>
           </button>
           <button *ngIf="!element.status.pendingApproval && !element.status.active && element.status.overpaid"
             class="account-action-button" mat-raised-button color="primary">
-            <i class="fa fa-exchange" matTooltip="Transfer Funds"></i>
+            <i class="fa fa-exchange" matTooltip="{{ 'tooltips.Transfer Funds' | translate }}"></i>
           </button>
         </td>
       </ng-container>
@@ -145,7 +145,7 @@
       class="mat-elevation-z1 m-b-30">
 
       <ng-container matColumnDef="Account No">
-        <th mat-header-cell *matHeaderCellDef> Account No. </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Account No" | translate }}. </th>
         <td mat-cell *matCellDef="let element"> <i class="fa fa-stop"
             [ngClass]="element.inArrears?'status-active-overdue':(element.status.code|statusLookup)"
             [matTooltip]="element.inArrears?'Active Overdue':element.status.value"></i>
@@ -154,27 +154,27 @@
       </ng-container>
 
       <ng-container matColumnDef="Loan Account">
-        <th mat-header-cell *matHeaderCellDef> Loan Account </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Loan Account" | translate }} </th>
         <td mat-cell *matCellDef="let element"> {{element.productName}} </td>
       </ng-container>
 
       <ng-container matColumnDef="Original Loan">
-        <th mat-header-cell *matHeaderCellDef> Original Loan </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Original Loan" | translate }} </th>
-        <td mat-cell *matCellDef="let element"> {{element.lastActiveTransactionDate | dateFormat}} </td>
+        <td mat-cell *matCellDef="let element"> {{element.lastActiveTransactionDate  | dateFormat}} </td>
       </ng-container>
 
       <ng-container matColumnDef="Loan Balance">
-        <th mat-header-cell *matHeaderCellDef>Loan Balance </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Loan Balance" | translate }} </th>
         <td mat-cell *matCellDef="let element"> {{element.loanBalance}} </td>
       </ng-container>
 
       <ng-container matColumnDef="Amount Paid">
-        <th mat-header-cell *matHeaderCellDef> Amount Paid </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Amount Paid" | translate }} </th>
         <td mat-cell *matCellDef="let element"> {{element.accountBalance}} </td>
       </ng-container>
 
       <ng-container matColumnDef="Type">
-        <th mat-header-cell *matHeaderCellDef> Type </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Type" | translate }} </th>
         <td mat-cell *matCellDef="let element">
           <i class="fa fa-large" [ngClass]="(element.loanType.value=== 'Individual')?'fa-user':'fa-group'"
           [matTooltip]="(element.loanType.value==='Individual')?'Individual':'Group'"></i>
@@ -182,8 +182,8 @@
       </ng-container>
 
       <ng-container matColumnDef="Closed Date">
-        <th mat-header-cell *matHeaderCellDef> Closed Date </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Closed Date" | translate }} </th>
-        <td mat-cell *matCellDef="let element">{{element.timeline.closedOnDate | dateFormat}}</td>
+        <td mat-cell *matCellDef="let element">{{element.timeline.closedOnDate  | dateFormat}}</td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="closedLoansColumns"></tr>
@@ -197,7 +197,7 @@
 
     <div fxLayout="row" fxLayoutAlign="start" class="table-header">
       <div class="m-b-10">
-        <h3>GSIM Account Overview</h3>
+        <h3>{{"labels.heading.GSIM Account Overview" | translate }}</h3>
       </div>
     </div>
 
@@ -206,28 +206,28 @@
       class="mat-elevation-z1 m-b-30">
 
       <ng-container matColumnDef="GSIM Id">
-        <th mat-header-cell *matHeaderCellDef> GSIM Id </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.GSIM Id" | translate }} </th>
         <td mat-cell *matCellDef="let element">
           {{element.gsimId}} </td>
       </ng-container>
 
       <ng-container matColumnDef="Account Number">
-        <th mat-header-cell *matHeaderCellDef> Account Number </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Account Number" | translate }} </th>
         <td mat-cell *matCellDef="let element"> {{element.accountNumber}} </td>
       </ng-container>
 
       <ng-container matColumnDef="Product">
-        <th mat-header-cell *matHeaderCellDef> Product </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Product" | translate }} </th>
         <td mat-cell *matCellDef="let element"> {{element.childGSIMAccounts[0].productName}}</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 element"> {{element.parentBalance}} </td>
       </ng-container>
 
       <ng-container matColumnDef="Status">
-        <th mat-header-cell *matHeaderCellDef> Status </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Status" | translate }} </th>
         <td mat-cell *matCellDef="let element"> {{element.savingsStatus}} </td>
       </ng-container>
 
@@ -242,7 +242,7 @@
 
     <div fxLayout="row" fxLayoutAlign="start" class="table-header">
       <div class="m-b-10">
-        <h3>GLIM Loans Account Overview</h3>
+        <h3>{{"labels.heading.GLIM Loans Account Overview" | translate }}</h3>
       </div>
     </div>
 
@@ -251,28 +251,28 @@
       class="mat-elevation-z1 m-b-30">
 
       <ng-container matColumnDef="GLIM Id">
-        <th mat-header-cell *matHeaderCellDef> GLIM Id </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.GLIM Id" | translate }} </th>
         <td mat-cell *matCellDef="let element">
           {{element.glimId}} </td>
       </ng-container>
 
       <ng-container matColumnDef="Account Number">
-        <th mat-header-cell *matHeaderCellDef> Account Number </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Account Number" | translate }} </th>
         <td mat-cell *matCellDef="let element"> {{element.accountNumber}} </td>
       </ng-container>
 
       <ng-container matColumnDef="Product">
-        <th mat-header-cell *matHeaderCellDef> Product </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Product" | translate }} </th>
         <td mat-cell *matCellDef="let element"> {{element.childGLIMAccounts[0].productName}} </td>
       </ng-container>
 
       <ng-container matColumnDef="Original Loan">
-        <th mat-header-cell *matHeaderCellDef> Original Loan </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Original Loan" | translate }} </th>
         <td mat-cell *matCellDef="let element"> {{element.parentPrincipalAmount}} </td>
       </ng-container>
 
       <ng-container matColumnDef="Status">
-        <th mat-header-cell *matHeaderCellDef> Status </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Status" | translate }} </th>
         <td mat-cell *matCellDef="let element">{{element.loanStatus}} </td>
       </ng-container>
 
@@ -287,7 +287,7 @@
 
     <div fxLayout="row" fxLayoutAlign="start" class="table-header">
       <div class="m-b-10">
-        <h3>Saving Accounts</h3>
+        <h3>{{"labels.heading.Saving Accounts" | translate }}</h3>
       </div>
       <div class="action-button m-b-10">
         <button *ngIf="(savingAccounts|accountsFilter:'saving':'closed').length" mat-raised-button class="f-right" color="primary"
@@ -300,50 +300,50 @@
       class="mat-elevation-z1 m-b-30">
 
       <ng-container matColumnDef="Account No">
-        <th mat-header-cell *matHeaderCellDef> Account No. </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Account No" | translate }}. </th>
         <td mat-cell *matCellDef="let element"> <i class="fa fa-stop" [ngClass]="element.status.code|statusLookup" [matTooltip]="element.status.value"></i>
           {{element.accountNo}} </td>
       </ng-container>
 
       <ng-container matColumnDef="Saving Account">
-        <th mat-header-cell *matHeaderCellDef> Saving Account </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Saving Account" | translate }} </th>
         <td mat-cell *matCellDef="let element"> {{element.productName}} </td>
       </ng-container>
 
       <ng-container matColumnDef="Last Active">
-        <th mat-header-cell *matHeaderCellDef> Last Active </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Last Active" | translate }} </th>
-        <td mat-cell *matCellDef="let element"> {{element.lastActiveTransactionDate | dateFormat}} </td>
+        <td mat-cell *matCellDef="let element"> {{element.lastActiveTransactionDate  | dateFormat}} </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 element"> {{element.accountBalance}} </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 element">
           <button *ngIf="element.status.active" class="account-action-button" mat-raised-button color="primary"
             (click)="routeEdit($event)" [routerLink]="['../','savings-accounts', element.id, 'actions', 'Deposit']">
-            <i class="fa fa-arrow-up" matTooltip="Deposit"></i>
+            <i class="fa fa-arrow-up" matTooltip="{{ 'tooltips.Deposit' | translate }}"></i>
           </button>
           <button *ngIf="element.status.active" class="account-action-button" mat-raised-button color="primary"
             (click)="routeEdit($event)" [routerLink]="['../','savings-accounts', element.id, 'actions', 'Withdrawal']">
-            <i class="fa fa-arrow-down" matTooltip="Withdraw"></i>
+            <i class="fa fa-arrow-down" matTooltip="{{ 'tooltips.Withdraw' | translate }}"></i>
           </button>
           <button *ngIf="element.status.submittedAndPendingApproval" class="account-action-button" mat-raised-button color="primary"
             (click)="routeEdit($event)" [routerLink]="['../','savings-accounts', element.id, 'actions', 'Approve']">
-            <i class="fa fa-check" matTooltip="Approve"></i>
+            <i class="fa fa-check" matTooltip="{{ 'tooltips.Approve' | translate }}"></i>
           </button>
           <button *ngIf="!element.status.submittedAndPendingApproval && !element.status.active"
             class="account-action-button" mat-raised-button color="primary"
             (click)="routeEdit($event)" [routerLink]="['../','savings-accounts', element.id, 'actions', 'Undo Approval']">
-            <i class="fa fa-undo" matTooltip="Undo Approval"></i>
+            <i class="fa fa-undo" matTooltip="{{ 'tooltips.Undo Approval' | translate }}"></i>
           </button>
           <button *ngIf="!element.status.submittedAndPendingApproval && !element.status.active"
             class="account-action-button" mat-raised-button color="primary"
             (click)="routeEdit($event)" [routerLink]="['../','savings-accounts', element.id, 'actions', 'Activate']">
-            <i class="fa fa-check-circle" matTooltip="Activate"></i>
+            <i class="fa fa-check-circle" matTooltip="{{ 'tooltips.Activate' | translate }}"></i>
           </button>
         </td>
       </ng-container>
@@ -358,19 +358,19 @@
       class="mat-elevation-z1 m-b-30">
 
       <ng-container matColumnDef="Account No">
-        <th mat-header-cell *matHeaderCellDef> Account No. </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Account No" | translate }}. </th>
         <td mat-cell *matCellDef="let element"> <i class="fa fa-stop" [ngClass]="element.status.code|statusLookup" [matTooltip]="element.status.value"></i>
           {{element.accountNo}} </td>
       </ng-container>
 
       <ng-container matColumnDef="Saving Account">
-        <th mat-header-cell *matHeaderCellDef> Saving Account </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Saving Account" | translate }} </th>
         <td mat-cell *matCellDef="let element"> {{element.productName}} </td>
       </ng-container>
 
       <ng-container matColumnDef="Closed Date">
-        <th mat-header-cell *matHeaderCellDef> Closed Date </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Closed Date" | translate }} </th>
-        <td mat-cell *matCellDef="let element">{{element.timeline.closedOnDate | dateFormat}}</td>
+        <td mat-cell *matCellDef="let element">{{element.timeline.closedOnDate  | dateFormat}}</td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="closedSavingsColumns"></tr>

src/app/groups/groups-view/group-actions/activate-group/activate-group.component.html

@@ -7,20 +7,20 @@
       <mat-card-content>
 
           <mat-form-field fxFlex (click)="activationDatePicker.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]="activationDatePicker" required formControlName="activationDate">
             <mat-datepicker-toggle matSuffix [for]="activationDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #activationDatePicker></mat-datepicker>
             <mat-error *ngIf="activateGroupForm.controls.activationDate.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 type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate }}</button>
-        <button mat-raised-button color="primary" [disabled]="!activateGroupForm.valid">Confirm</button>
+        <button mat-raised-button color="primary" [disabled]="!activateGroupForm.valid">{{"labels.buttons.Confirm" | translate }}</button>
       </mat-card-actions>
 
     </form>

src/app/groups/groups-view/group-actions/attach-group-meeting/attach-group-meeting.component.html

@@ -9,52 +9,52 @@
         <div fxLayout="column">
 
           <mat-form-field (click)="startDatePicker.open()">
-            <mat-label>Meeting Start Date</mat-label>
+            <mat-label>{{"labels.inputs.Meeting Start Date" | translate }}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="startDatePicker" required formControlName="startDate">
             <mat-datepicker-toggle matSuffix [for]="startDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #startDatePicker></mat-datepicker>
             <mat-error *ngIf="groupMeetingForm.controls.startDate.hasError('required')">
-              Start Date is <strong>required</strong>
+              {{"labels.inputs.Start Date" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-checkbox class="m-t-10 m-b-10" labelPosition="before" formControlName="repeating">
-            Repeats?
+            {{"labels.inputs.Repeats" | translate }}?
           </mat-checkbox>
 
           <mat-form-field *ngIf="groupMeetingForm.contains('frequency')">
-            <mat-label>Repetition Frequency</mat-label>
+            <mat-label>{{"labels.inputs.Repetition Frequency" | translate }}</mat-label>
             <mat-select formControlName="frequency">
               <mat-option *ngFor="let option of frequencyOptions" [value]="option.id">
                 {{ option.value }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="groupMeetingForm.controls.frequency.hasError('repeatsOnDay')">
-              Repetition Frequency is <strong>required</strong>
+              {{"labels.inputs.Repetition Frequency" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field *ngIf="groupMeetingForm.contains('interval')">
-            <mat-label>Repetition Interval</mat-label>
+            <mat-label>{{"labels.inputs.Repetition Interval" | translate }}</mat-label>
             <mat-select formControlName="interval">
               <mat-option *ngFor="let interval of repetitionIntervals" [value]="interval">
                 {{ interval }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="groupMeetingForm.controls.interval.hasError('repeatsOnDay')">
-              Repeition Interval is <strong>required</strong>
+              {{"labels.inputs.Repeition Interval" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field *ngIf="groupMeetingForm.contains('repeatsOnDay')">
-          <mat-label>Repeats on Day</mat-label>
+          <mat-label>{{"labels.inputs.Repeats on Day" | translate }}</mat-label>
           <mat-select formControlName="repeatsOnDay" required>
             <mat-option *ngFor="let day of repeatsOnDays" [value]="day.id">
               {{ day.value }}
             </mat-option>
           </mat-select>
           <mat-error *ngIf="groupMeetingForm.controls.repeatsOnDay.hasError('repeatsOnDay')">
-            At least <strong>one</strong> day must be selected
+            {{"labels.inputs.At least" | translate }} <strong>{{"labels.inputs.one" | translate }}</strong> {{"labels.inputs.day must be selected" | translate }}
           </mat-error>
         </mat-form-field>
   
@@ -63,9 +63,9 @@
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate }}</button>
         <button mat-raised-button color="primary" [disabled]="!groupMeetingForm.valid" (click)="submit()"
-          *mifosxHasPermission="'CREATE_MEETING'">Submit</button>
+          *mifosxHasPermission="'CREATE_MEETING'">{{"labels.buttons.Submit" | translate }}</button>
       </mat-card-actions>
 
     </form>

src/app/groups/groups-view/group-actions/close-group/close-group.component.html

@@ -9,24 +9,24 @@
         <div fxLayout="column">
 
           <mat-form-field (click)="closureDatePicker.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]="closureDatePicker" required formControlName="closureDate">
             <mat-datepicker-toggle matSuffix [for]="closureDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #closureDatePicker></mat-datepicker>
             <mat-error *ngIf="closeGroupForm.controls.closureDate.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 fxFlex="48%">
-            <mat-label>Closure Reason</mat-label>
+            <mat-label>{{"labels.inputs.Closure Reason" | translate }}</mat-label>
             <mat-select formControlName="closureReasonId">
               <mat-option *ngFor="let reason of closureData" [value]="reason.id">
                 {{ reason.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="closeGroupForm.controls.closureReasonId.hasError('required')">
-              Closure Reason is <strong>required</strong>
+              {{"labels.inputs.Closure Reason" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -35,8 +35,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 type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate }}</button>
-        <button mat-raised-button color="warn" [disabled]="!closeGroupForm.valid">Confirm</button>
+        <button mat-raised-button color="warn" [disabled]="!closeGroupForm.valid">{{"labels.buttons.Confirm" | translate }}</button>
       </mat-card-actions>
 
     </form>

src/app/groups/groups-view/group-actions/edit-group-meeting-schedule/edit-group-meeting-schedule.component.html

@@ -9,24 +9,24 @@
         <div fxLayout="column">
 
         <mat-form-field>
-          <mat-label>Existing Meeting Date</mat-label>
+          <mat-label>{{"labels.inputs.Existing Meeting Date"  |translate}}</mat-label>
           <mat-select formControlName="presentMeetingDate">
             <mat-option *ngFor="let date of nextMeetingDates" [value]="date">
               {{ date | dateFormat }}
             </mat-option>
           </mat-select>
           <mat-error *ngIf="groupEditMeetingScheduleForm.controls.presentMeetingDate.hasError('repeatsOnDay')">
-            Existing Meeting Date is <strong>required</strong>
+            {{"labels.inputs.Existing Meeting Date"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
           </mat-error>
         </mat-form-field>
 
         <mat-form-field (click)="newMeetingDatePicker.open()">
-          <mat-label>Revised Meeting Date</mat-label>
+          <mat-label>{{"labels.inputs.Revised Meeting Date"  |translate}}</mat-label>
           <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="newMeetingDatePicker" required formControlName="newMeetingDate">
           <mat-datepicker-toggle matSuffix [for]="newMeetingDatePicker"></mat-datepicker-toggle>
           <mat-datepicker #newMeetingDatePicker></mat-datepicker>
           <mat-error *ngIf="groupEditMeetingScheduleForm.controls.newMeetingDate.hasError('required')">
-            Revised Meeting Date is <strong>required</strong>
+            {{"labels.inputs.Revised Meeting Date"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
           </mat-error>
         </mat-form-field>
 
@@ -35,9 +35,9 @@
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate }}</button>
         <button mat-raised-button color="primary" [disabled]="!groupEditMeetingScheduleForm.valid" (click)="submit()"
-          *mifosxHasPermission="'CREATE_MEETING'">Submit</button>
+          *mifosxHasPermission="'CREATE_MEETING'">{{"labels.buttons.Submit" | translate }}</button>
       </mat-card-actions>
 
     </form>

src/app/groups/groups-view/group-actions/edit-group-meeting/edit-group-meeting.component.html

@@ -1,7 +1,7 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end">
   <button mat-raised-button color="primary" (click)="editSchedule()">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    Edit Schedule
+    {{"labels.buttons.Edit Schedule"  |translate}}
   </button>
 </div>
 
@@ -16,52 +16,51 @@
         <div fxLayout="column">
 
           <mat-form-field>
-            <mat-label>Repetition Frequency</mat-label>
+            <mat-label>{{"labels.inputs.Repetition Frequency"  |translate}}</mat-label>
             <mat-select formControlName="frequency">
               <mat-option *ngFor="let option of frequencyOptions" [value]="option.id">
                 {{ option.value }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="groupEditMeetingForm.controls.frequency.hasError('repeatsOnDay')">
-              Repetition Frequency is <strong>required</strong>
+              {{"labels.inputs.Repetition Frequency"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Repetition Interval</mat-label>
+            <mat-label>{{"labels.inputs.Repetition Interval"  |translate}}</mat-label>
             <mat-select formControlName="interval">
               <mat-option *ngFor="let interval of repetitionIntervals" [value]="interval">
                 {{ interval }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="groupEditMeetingForm.controls.interval.hasError('repeatsOnDay')">
-              Repeition Interval is <strong>required</strong>
+              {{"labels.inputs.Repeition Interval"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field *ngIf="groupEditMeetingForm.contains('repeatsOnDay')">
-          <mat-label>Repeats on Day</mat-label>
+          <mat-label>{{"labels.inputs.Repeats on Day"  |translate}}</mat-label>
           <mat-select formControlName="repeatsOnDay" required>
             <mat-option *ngFor="let day of repeatsOnDays" [value]="day.id">
               {{ day.value }}
             </mat-option>
           </mat-select>
           <mat-error *ngIf="groupEditMeetingForm.controls.repeatsOnDay.hasError('repeatsOnDay')">
-            At least <strong>one</strong> day must be selected
+            {{"labels.inputs.At least" | translate }} <strong>{{"labels.inputs.one" | translate }}</strong> {{"labels.inputs.day must be selected" | translate }}
           </mat-error>
         </mat-form-field>
 
         <mat-form-field class="m-b-5" (click)="startDatePicker.open()">
-          <mat-label>Above Changes are Effective from</mat-label>
+          <mat-label>{{"labels.inputs.Above Changes are Effective from"  |translate}}</mat-label>
           <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="startDatePicker" required formControlName="startDate">
           <mat-datepicker-toggle matSuffix [for]="startDatePicker"></mat-datepicker-toggle>
           <mat-datepicker #startDatePicker></mat-datepicker>
           <mat-error *ngIf="groupEditMeetingForm.controls.startDate.hasError('required')">
-            Changes Affection Date is <strong>required</strong>
+            {{"labels.inputs.Changes Affection Date"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
           </mat-error>
           <mat-hint>
-            Note: 'Repeats' and 'Repeats every' cannot not be modified if there are active accounts <br>
+            {{"labels.text.Repeats' and 'Repeats every" |translate}}
-            (JLG Loans, Recurring Deposits etc) dependent on this meeting.
           </mat-hint>
         </mat-form-field>
 
@@ -70,9 +69,9 @@
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate }}</button>
         <button mat-raised-button color="primary" [disabled]="!groupEditMeetingForm.valid" (click)="submit()"
-        *mifosxHasPermission="'CREATE_MEETING'">Submit</button>
+        *mifosxHasPermission="'CREATE_MEETING'">{{"labels.buttons.Submit" | translate }}</button>
       </mat-card-actions>
 
     </form>

src/app/groups/groups-view/group-actions/group-assign-staff/group-assign-staff.component.html

@@ -9,14 +9,14 @@
         <div fxLayout="column">
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Staff</mat-label>
+            <mat-label>{{"labels.inputs.Staff"  |translate}}</mat-label>
             <mat-select formControlName="staffId">
               <mat-option *ngFor="let staff of staffData" [value]="staff.id">
                 {{ staff.displayName }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="groupAssignStaffForm.controls.staffId.hasError('required')">
-              Staff is <strong>required</strong>
+              {{"labels.inputs.Staff"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -25,8 +25,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 type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel"  |translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!groupAssignStaffForm.valid">Confirm</button>
+        <button mat-raised-button color="primary" [disabled]="!groupAssignStaffForm.valid">{{"labels.buttons.Confirm"  |translate}}</button>
       </mat-card-actions>
 
     </form>

src/app/groups/groups-view/group-actions/group-attendance/group-attendance.component.html

@@ -3,30 +3,30 @@
   <mat-card fxLayout="column" fxLayoutGap="3%">
 
     <mat-form-field fxFlex>
-      <mat-label>Meeting Date</mat-label>
+      <mat-label>{{"labels.inputs.Meeting Date"  |translate}}</mat-label>
       <mat-select [formControl]="meetingDate">
         <mat-option *ngFor="let date of meetingDates" [value]="date">
           {{ date | dateFormat }}
         </mat-option>
       </mat-select>
-      <mat-hint>Next Meeting on: {{ this.groupData.collectionMeetingCalendar.nextTenRecurringDates[0] | dateFormat }}</mat-hint>
+      <mat-hint>{{"labels.inputs.Next Meeting on"  |translate}}: {{this.groupData.collectionMeetingCalendar.nextTenRecurringDates[0] | dateFormat}}</mat-hint>
     </mat-form-field>
 
     <table class="mat-elevation-z1" mat-table [dataSource]="dataSource">
 
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef> Name </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.name"  |translate}} </th>
         <td mat-cell *matCellDef="let member"> {{ member.clientId | find:membersData:'id':'displayName' }} </td>
       </ng-container>
 
       <ng-container matColumnDef="attendance">
-        <th mat-header-cell *matHeaderCellDef> Attendance </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Attendance"  |translate}} </th>
         <td mat-cell *matCellDef="let member" [ngSwitch]="member.attendanceType">
-          <span *ngSwitchCase="1">Present</span>
+          <span *ngSwitchCase="1">{{"labels.inputs.Present"  |translate}}</span>
-          <span *ngSwitchCase="2">Absent</span>
+          <span *ngSwitchCase="2">{{"labels.inputs.Absent"  |translate}}</span>
-          <span *ngSwitchCase="3">Approved</span>
+          <span *ngSwitchCase="3">{{"labels.inputs.Approved"  |translate}}</span>
-          <span *ngSwitchCase="4">Leave</span>
+          <span *ngSwitchCase="4">{{"labels.inputs.Leave"  |translate}}</span>
-          <span *ngSwitchCase="5">Late</span>
+          <span *ngSwitchCase="5">{{"labels.inputs.Late"  |translate}}</span>
           <button mat-icon-button color="primary"
             (click)="editAttendance(member)">
             <fa-icon icon="pen"></fa-icon>
@@ -40,9 +40,9 @@
     </table>
 
     <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-      <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
+      <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel"  |translate}}</button>
       <button mat-raised-button color="primary" (click)="submit()"
-        *mifosxHasPermission="'SAVEORUPDATEATTENDANCE_MEETING'">Confirm</button>
+        *mifosxHasPermission="'SAVEORUPDATEATTENDANCE_MEETING'">{{"labels.buttons.Confirm"  |translate}}</button>
     </mat-card-actions>
 
   </mat-card>

src/app/groups/groups-view/group-actions/group-transfer-clients/group-transfer-clients.component.html

@@ -9,26 +9,26 @@
         <div fxLayout="column">
 
           <mat-form-field>
-            <mat-label>Select Client Members for Transfer</mat-label>
+            <mat-label>{{"labels.inputs.Select Client Members for Transfer"  |translate}}</mat-label>
             <mat-select required formControlName="clients" multiple>
               <mat-option *ngFor="let member of clientMembers" [value]="{ id: member.id }">
                 {{ member.displayName }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="transferClientsForm.controls.clients.hasError('required')">
-              Office is <strong>required</strong>
+              {{"labels.inputs.Office"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-checkbox class="m-t-10 m-b-10" labelPosition="before" formControlName="inheritDestinationGroupLoanOfficer">
-            Inherit Group Loan Officer?
+            {{"labels.inputs.Inherit Group Loan Officer"  |translate}}?
           </mat-checkbox>
 
           <mat-form-field>
-            <mat-label>Destination Group</mat-label>
+            <mat-label>{{"labels.inputs.Destination Group"  |translate}}</mat-label>
             <input matInput formControlName="destinationGroupId" [matAutocomplete]="groupsAutocomplete">
             <mat-error *ngIf="transferClientsForm.controls.destinationGroupId.hasError('required')">
-              Destination Group is <strong>required</strong>
+              {{"labels.inputs.Destination Group"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -42,26 +42,26 @@
 
         <div class="mat-table" *ngIf="transferClientsForm.get('destinationGroupId').value">
           <div class="mat-header-row">
-            <div class="mat-header-cell">Destination Group Details</div>
+            <div class="mat-header-cell">{{"labels.inputs.Destination Group Details"  |translate}}</div>
           </div>
           <div class="mat-row">
-            <div class="mat-cell">Name</div>
+            <div class="mat-cell">{{"labels.inputs.name"  |translate}}</div>
             <div class="mat-cell">{{transferClientsForm.get('destinationGroupId').value.name}}</div>
           </div>
           <div class="mat-row">
-            <div class="mat-cell">Id</div>
+            <div class="mat-cell">{{"labels.inputs.Id"  |translate}}</div>
             <div class="mat-cell">{{transferClientsForm.get('destinationGroupId').value.id}}</div>
           </div>
           <div class="mat-row">
-            <div class="mat-cell">Activation Date</div>
+            <div class="mat-cell">{{"labels.inputs.Activation Date"  |translate}}</div>
-            <div class="mat-cell">{{(transferClientsForm.get('destinationGroupId').value.activationDate | dateFormat) || 'Not Activated'}}</div>
+            <div class="mat-cell">{{(transferClientsForm.get('destinationGroupId').value.activationDate  | dateFormat) || 'Not Activated'}}</div>
           </div>
           <div class="mat-row">
-            <div class="mat-cell">Staff</div>
+            <div class="mat-cell">{{"labels.inputs.Staff"  |translate}}</div>
             <div class="mat-cell">{{transferClientsForm.get('destinationGroupId').value.staffName || 'Unassigned'}}</div>
           </div>
           <div class="mat-row">
-            <div class="mat-cell">External Id</div>
+            <div class="mat-cell">{{"labels.inputs.External Id"  |translate}}</div>
             <div class="mat-cell">{{transferClientsForm.get('destinationGroupId').value.externalId || 'Unassigned'}}</div>
           </div>
         </div>
@@ -69,9 +69,9 @@
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel"  |translate}}</button>
         <button mat-raised-button color="primary" [disabled]="!transferClientsForm.valid" (click)="submit()"
-          *mifosxHasPermission="'TRANSFERCLIENTS_GROUP'">Submit</button>
+          *mifosxHasPermission="'TRANSFERCLIENTS_GROUP'">{{"labels.buttons.Submit"  |translate}}</button>
       </mat-card-actions>
 
     </form>

src/app/groups/groups-view/group-actions/manage-group-members/manage-group-members.component.html

@@ -1,66 +1,59 @@
-<mat-card class="container">
+<div class="container" fxLayout="row" fxLayoutGap="3%">
 
-  <mat-card-content fxLayout="row" >
+  <mat-card fxFlex class="client-card" fxLayout="column" fxLayoutGap="2%">
 
-    <mat-card fxFlex class="client-card" fxLayout="column" fxLayoutGap="2%">
+    <mat-form-field fxFlex="30%">
+      <mat-label>{{"labels.inputs.Add Clients"  |translate}}</mat-label>
+      <input matInput [formControl]="clientChoice" [matAutocomplete]="clientsAutocomplete">
+    </mat-form-field>
 
-      <mat-form-field fxFlex="30%">
+    <mat-autocomplete autoActiveFirstOption #clientsAutocomplete="matAutocomplete" [displayWith]="displayClient">
-        <mat-label>Add Clients</mat-label>
+      <mat-option *ngFor="let client of clientsData" [value]="client">
-        <input matInput [formControl]="clientChoice" [matAutocomplete]="clientsAutocomplete">
+        {{ client.displayName }}
-      </mat-form-field>
+      </mat-option>
+    </mat-autocomplete>
 
-      <mat-autocomplete autoActiveFirstOption #clientsAutocomplete="matAutocomplete" [displayWith]="displayClient">
+    <div class="mat-table">
-        <mat-option *ngFor="let client of clientsData" [value]="client">
+      <div class="mat-header-row">
-          {{ client.displayName }}
+        <div class="mat-header-cell">{{"labels.inputs.Client Details"  |translate}}</div>
-        </mat-option>
+        <button mat-icon-button (click)="addClient()">
-      </mat-autocomplete>
+          <fa-icon icon="plus"></fa-icon>
-
+        </button>
-      <div class="mat-table">
+      </div>
-        <div class="mat-header-row">
+      <div class="mat-row">
-          <div class="mat-header-cell">Client Details</div>
+        <div class="mat-cell">{{"labels.inputs.name"  |translate}}</div>
-          <button mat-icon-button (click)="addClient()">
+        <div class="mat-cell">{{clientChoice.value.displayName}}</div>
-            <fa-icon icon="plus"></fa-icon>
+      </div>
-          </button>
+      <div class="mat-row">
-        </div>
+        <div class="mat-cell">{{"labels.inputs.Id"  |translate}}</div>
-        <div class="mat-row">
+        <div class="mat-cell">{{clientChoice.value.id}}</div>
-          <div class="mat-cell">Name</div>
+      </div>
-          <div class="mat-cell">{{clientChoice.value.displayName}}</div>
+      <div class="mat-row">
-        </div>
+        <div class="mat-cell">{{"labels.inputs.Office"  |translate}}</div>
-        <div class="mat-row">
+        <div class="mat-cell">{{clientChoice.value.officeName}}</div>
-          <div class="mat-cell">Id</div>
-          <div class="mat-cell">{{clientChoice.value.id}}</div>
-        </div>
-        <div class="mat-row">
-          <div class="mat-cell">Office</div>
-          <div class="mat-cell">{{clientChoice.value.officeName}}</div>
-        </div>
       </div>
-
-    </mat-card>
-
-    <mat-card fxFlex="50%">
-
-      <h3 matSubheader>Client Members</h3>
-
-      <mat-nav-list *ngIf="clientMembers?.length">
-        <div mat-list-item *ngFor="let client of clientMembers index as i">
-          <span matLine class="p-t-10">{{client.displayName}}</span>
-          <div fxFlex></div>
-          <button mat-icon-button color="warn" (click)="removeClient(i, client)" matTooltip="Remove Client from Group"
-            matTooltipPosition="left">
-            <fa-icon icon="trash"></fa-icon>
-          </button>
-        </div>
-      </mat-nav-list>
-
-    </mat-card>
-
-  </mat-card-content>
-
-  <mat-card-actions>
-    <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="2%" fxLayout.lt-md="column">
-      <button type="button" mat-raised-button color="primary" [routerLink]="['../..']">{{ 'Back' | translate}}</button>
     </div>
-  </mat-card-actions>
 
-</mat-card>
+  </mat-card>
+
+  <mat-card fxFlex="50%">
+
+    <h3 matSubheader>{{"labels.heading.Client Members"  |translate}}</h3>
+
+    <mat-nav-list  *ngIf="clientMembers?.length">
+      <div mat-list-item *ngFor="let client of clientMembers index as i">
+        <span matLine class="p-t-10">{{client.displayName}}</span>
+        <div fxFlex></div>
+        <button mat-icon-button color="warn" (click)="removeClient(i, client)" matTooltip="{{ 'tooltips.Remove Client from Group' | translate }}" matTooltipPosition="left">
+          <fa-icon icon="trash"></fa-icon>
+        </button>
+      </div>
+    </mat-nav-list>
+
+  </mat-card>
+
+  <div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+    <button type="button" mat-raised-button [routerLink]="['../']">{{"labels.buttons.Back"  |translate}}</button>
+  </div>
+
+</div>

src/app/groups/groups-view/groups-view.component.html

@@ -15,7 +15,7 @@
           <h3 fxFlex="95%">
             <i class="fa fa-stop" [ngClass]="groupViewData.status.code|statusLookup"
               [matTooltip]="groupViewData.status.value"></i>
-            Group Name : {{groupViewData.name}}
+              {{"labels.heading.Group Name"  |translate}} : {{groupViewData.name}}
           </h3>
 
           <div fxFlex="5%">
@@ -29,28 +29,28 @@
 
         <mat-card-subtitle>
           <div fxFlex="45%">
-            <b>Group :</b> {{groupViewData.name}} | <b>Center Name:</b> {{groupViewData.centerName}} | <b>Staff:</b>
+            <b>{{"labels.inputs.Group"  |translate}} :</b> {{groupViewData.name}} | <b>{{"labels.inputs.Center Name"  |translate}}:</b> {{groupViewData.centerName}} | <b>{{"labels.inputs.Staff"  |translate}}:</b>
             {{groupViewData.staffName || 'Unassigned'}}<br />
-            <b>Office Name :</b> {{groupViewData.officeName}}<br />
+            <b>{{"labels.inputs.Office Name"  |translate}} :</b> {{groupViewData.officeName}}<br />
-            <b>Activation Date :</b> {{(groupViewData.activationDate)?(groupViewData.activationDate | dateFormat) :'Not Activated'}}<br />
+            <b>{{"labels.inputs.Activation Date"  |translate}} :</b> {{(groupViewData.activationDate)?(groupViewData.activationDate | dateFormat) :'Not Activated'}}<br />
             <span *ngIf="!groupViewData.active">
-              <b>Closure Date :</b> {{groupViewData.timeline.closedOnDate | dateFormat}}
+              <b>{{"labels.inputs.Closure Date"  |translate}} :</b> {{groupViewData.timeline.closedOnDate | dateFormat}}
             </span>
           </div>
           <div  fxFlex="45%" class="group-meeting" fxLayoutAlign="start start">
             <div *ngIf="groupViewData.collectionMeetingCalendar; else unassigned">
               <p>
-                Next Meeting on: {{groupViewData.collectionMeetingCalendar?.nextTenRecurringDates[0] | dateFormat}}
+                {{"labels.inputs.Next Meeting on"  |translate}}: {{groupViewData.collectionMeetingCalendar?.nextTenRecurringDates[0] | dateFormat}}
                 <i class="fa fa-edit" *ngIf="editMeeting" (click)="doAction('Edit Meeting')"></i><br />
-                Meeting Frequency: {{groupViewData.collectionMeetingCalendar?.frequency.value | lowercase}}
+                {{"labels.inputs.Meeting Frequency"  |translate}}: {{groupViewData.collectionMeetingCalendar?.frequency.value | lowercase}}
               </p>
             </div>
             <ng-template #unassigned>
               <div>
                 <p>
-                  Next Meeting on: Unassigned
+                  {{"labels.inputs.Next Meeting on"  |translate}}: {{"labels.inputs.Unassigned"  |translate}}
                   <i class="fa fa-calendar"></i><br />
-                  Meeting Frequency: N/A
+                  {{"labels.inputs.Meeting Frequency"  |translate}}: {{"labels.inputs.N/A"  |translate}}
                 </p>
               </div>
             </ng-template>
@@ -65,72 +65,73 @@
             <mat-icon matListIcon>
               <fa-icon icon="checkSign" size="sm"></fa-icon>
             </mat-icon>
-            <span>Activate</span>
+            <span>{{"labels.buttons.Activate"  |translate}}</span>
           </button>
         </span>
         <button mat-menu-item *mifosxHasPermission="'UPDATE_GROUP'" (click)="doAction('Edit')">
           <mat-icon matListIcon>
             <fa-icon icon="edit" size="sm"></fa-icon>
           </mat-icon>
-          <span>Edit</span>
+          <span>{{"labels.buttons.Edit"  |translate}}</span>
         </button>
         <button mat-menu-item *mifosxHasPermission="'CREATE_CLIENT'" (click)="doAction('Manage Members')">
           <mat-icon matListIcon>
             <fa-icon icon="plus" size="sm"></fa-icon>
           </mat-icon>
-          <span>Add Clients</span>
+          <span>{{"labels.buttons.Add Clients"  |translate}}</span>
         </button>
         <button mat-menu-item *mifosxHasPermission="'ASSOCIATECLIENTS_GROUP'"
           (click)="doAction('Transfer Clients')">
           <mat-icon matListIcon>
             <fa-icon icon="users" size="sm"></fa-icon>
           </mat-icon>
-          <span>Transfer Clients</span>
+          <span>{{"labels.buttons.Transfer Clients"  |translate}}</span>
         </button>
         <button mat-menu-item *mifosxHasPermission="'TRANSFERCLIENTS_GROUP'" (click)="doAction('Manage Members')">
           <mat-icon matListIcon>
             <fa-icon icon="user" size="sm"></fa-icon>
           </mat-icon>
-          <span>Manage Members</span>
+          <span>{{"labels.buttons.Manage Members"  |translate}}</span>
         </button>
 
         <button mat-menu-item *ngIf="groupViewData.active" [matMenuTriggerFor]="AccountApplications">
           <mat-icon matListIcon>
             <fa-icon icon="money-bill-alt" size="sm"></fa-icon>
           </mat-icon>
-          <span>Applications</span>
+          <span>{{"labels.buttons.Applications"  |translate}}</span>
         </button>
 
         <mat-menu #AccountApplications="matMenu">
           <span *ngIf="groupViewData.clientMembers">
-            <button mat-menu-item *mifosxHasPermission="'CREATE_LOAN'">Bulk JLG Loan Application</button></span>
+            <button mat-menu-item *mifosxHasPermission="'CREATE_LOAN'">{{"labels.buttons.Bulk JLG Loan Application"  |translate}}</button></span>
           <button mat-menu-item *mifosxHasPermission="'CREATE_SAVINGSACCOUNT'"
-            [routerLink]="['savings-accounts', 'create']">Group Saving Application</button>
+            [routerLink]="['savings-accounts', 'create']">{{"labels.buttons.Group Saving Application"  |translate}}</button>
-          <button mat-menu-item *mifosxHasPermission="'CREATE_LOAN'" [routerLink]="['loans-accounts', 'create']">Group
+          <button mat-menu-item *mifosxHasPermission="'CREATE_LOAN'" [routerLink]="['loans-accounts', 'create']">
-            Loan Application</button>
+            {{"labels.buttons.Group Loan Application"  |translate}}</button>
-          <button mat-menu-item [routerLink]="['loans-accounts', 'glim-account', 'create']">GLIM Loan
+          <button mat-menu-item [routerLink]="['loans-accounts', 'glim-account', 'create']">
-            Application</button>
+            {{"labels.buttons.GLIM Loan Application"  |translate}}</button>
-          <button mat-menu-item [routerLink]="['savings-accounts', 'gsim-account' , 'create']"> GSIM Application
+          <button mat-menu-item [routerLink]="['savings-accounts', 'gsim-account' , 'create']"> 
+            {{"labels.buttons.GSIM Application"  |translate}}
           </button>
         </mat-menu>
 
-        <button mat-menu-item [matMenuTriggerFor]="More">More</button>
+        <button mat-menu-item [matMenuTriggerFor]="More">{{"labels.buttons.More"  |translate}}</button>
         <mat-menu #More="matMenu">
           <span *ngIf="groupViewData.collectionMeetingCalendar">
             <button mat-menu-item *mifosxHasPermission="'SAVEORUPDATEATTENDANCE_MEETING'"
-              (click)="doAction('Attendance')">Attendance</button></span>
+              (click)="doAction('Attendance')">{{"labels.buttons.Attendance"  |translate}}</button></span>
           <span *ngIf="!groupViewData.staffId">
-            <button mat-menu-item *mifosxHasPermission="'ASSIGNSTAFF_GROUP'" (click)="doAction('Assign Staff')">Assign
+            <button mat-menu-item *mifosxHasPermission="'ASSIGNSTAFF_GROUP'" (click)="doAction('Assign Staff')">
-              Staff</button></span>
+              {{"labels.buttons.Assign Staff"  |translate}}</button></span>
           <span *ngIf="groupViewData.staffId">
             <button mat-menu-item *mifosxHasPermission="'UNASSIGNSTAFF_GROUP'"
-              (click)="doAction('Unassign Staff')">Unassign Staff</button></span>
+              (click)="doAction('Unassign Staff')">{{"labels.buttons.Unassign Staff"  |translate}}</button></span>
           <span
             *ngIf="!(groupViewData.centerId || groupViewData.collectionMeetingCalendar) && groupViewData.status.value==='Active'">
-            <button mat-menu-item *mifosxHasPermission="'CREATE_MEETING'" (click)="doAction('Attach Meeting')">Attach
+            <button mat-menu-item *mifosxHasPermission="'CREATE_MEETING'" (click)="doAction('Attach Meeting')">
-              Meeting</button></span>
+              {{"labels.buttons.Attach Meeting"  |translate}}</button></span>
-          <button mat-menu-item *mifosxHasPermission="'CLOSE_GROUP'" (click)="doAction('Close')">Close</button>
+          <button mat-menu-item *mifosxHasPermission="'CLOSE_GROUP'" (click)="doAction('Close')">{{"labels.buttons.Close"  |translate}}</button>
-          <button mat-menu-item *mifosxHasPermission="'DELETE_GROUP'" (click)="doAction('Delete')">Delete</button>
+          <button mat-menu-item *mifosxHasPermission="'DELETE_GROUP'" (click)="doAction('Delete')">{{"labels.buttons.Delete"  |translate}}</button>
         </mat-menu>
       </mat-menu>
     </mat-card-title-group>
@@ -142,15 +143,15 @@
     <nav mat-tab-nav-bar class="navigation-tabs">
       <a mat-tab-link [routerLink]="['./general']" routerLinkActive #general="routerLinkActive"
         [active]="general.isActive">
-        General
+        {{"labels.inputs.General"  |translate}}
       </a>
       <a mat-tab-link [routerLink]="['./notes']" *mifosxHasPermission="'READ_GROUPNOTE'" routerLinkActive
         #notes="routerLinkActive" [active]="notes.isActive">
-        Notes
+        {{"labels.inputs.Notes"  |translate}}
       </a>
       <a mat-tab-link [routerLink]="['./committee']" routerLinkActive #committee="routerLinkActive"
         [active]="committee.isActive">
-        Committee
+        {{"labels.inputs.Committee"  |translate}}
       </a>
       <span *ngFor="let groupDatatable of groupDatatables">
         <a mat-tab-link *mifosxHasPermission="'READ_' + groupDatatable.registeredTableName"

src/app/groups/groups.component.html

@@ -5,14 +5,14 @@
       <mat-form-field>
         <input matInput placeholder="Search by Name" [formControl]="name">
       </mat-form-field>
-      <mat-checkbox #showClosedGroups labelPosition="after" (change)="changeShowClosedGroups()">Show Closed Groups</mat-checkbox>
+      <mat-checkbox #showClosedGroups labelPosition="after" (change)="changeShowClosedGroups()">{{"labels.inputs.Show Closed Groups"  |translate}}</mat-checkbox>
     </div>
     <div class="action-button" fxLayoutGap="25px">
       <button mat-raised-button color="primary" [routerLink]="['../', 'organization', 'bulk-import', 'Groups']">
-        <fa-icon icon="download" class="m-r-10"></fa-icon>Import Group
+        <fa-icon icon="download" class="m-r-10"></fa-icon>{{"labels.buttons.Import Group"  |translate}}
       </button>
       <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_GROUP'">
-        <fa-icon icon="plus" class="m-r-10"></fa-icon>Create Group
+        <fa-icon icon="plus" class="m-r-10"></fa-icon>{{"labels.buttons.Create Group"  |translate}}
       </button>
     </div>
   </div>
@@ -20,22 +20,22 @@
   <table mat-table [dataSource]="dataSource" matSort>
 
     <ng-container matColumnDef="name">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.name"  |translate}} </th>
       <td mat-cell *matCellDef="let group"> {{ group.name }} </td>
     </ng-container>
 
     <ng-container matColumnDef="accountNo">
-      <th mat-header-cell *matHeaderCellDef> Account # </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Account"  |translate}} # </th>
       <td mat-cell *matCellDef="let group"> {{ group.accountNo }} </td>
     </ng-container>
 
     <ng-container matColumnDef="externalId">
-      <th mat-header-cell *matHeaderCellDef> ExternalID </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.External Id"  |translate}} </th>
       <td mat-cell *matCellDef="let group"> {{ group.externalId }} </td>
     </ng-container>
 
     <ng-container matColumnDef="status">
-      <th mat-header-cell *matHeaderCellDef> Status </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Status"  |translate}} </th>
       <td mat-cell *matCellDef="let row">
         <div [ngClass]="row.status.code|statusLookup">
           <fa-icon icon="stop"></fa-icon>
@@ -44,7 +44,7 @@
     </ng-container>
 
     <ng-container matColumnDef="officeName">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Office Name </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Office Name"  |translate}} </th>
       <td mat-cell *matCellDef="let group"> {{ group.officeName }} </td>
     </ng-container>
 

src/app/organization/adhoc-query/adhoc-query.component.html

@@ -1,7 +1,7 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
   <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_ADHOC'">
     <fa-icon icon="plus" class="m-r-10"></fa-icon>
-    Create AdHoc Query
+    {{"labels.buttons.Create AdHoc Query" | translate }}
   </button>
 </div>
 
@@ -19,32 +19,32 @@
     <table mat-table [dataSource]="dataSource" matSort>
 
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.name' | translate }} </th>
         <td mat-cell *matCellDef="let adhocquery"> {{ adhocquery.name }} </td>
       </ng-container>
 
       <ng-container matColumnDef="query">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> SQL Query </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.SQL Query' | translate }} </th>
         <td mat-cell *matCellDef="let adhocquery"> {{ adhocquery.query }} </td>
       </ng-container>
 
       <ng-container matColumnDef="tableName">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Table Affected </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Table Affected' | translate }} </th>
         <td mat-cell *matCellDef="let adhocquery"> {{ adhocquery.tableName }} </td>
       </ng-container>
 
       <ng-container matColumnDef="email">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Email </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Email' | translate }} </th>
         <td mat-cell *matCellDef="let adhocquery"> {{ adhocquery.email }} </td>
       </ng-container>
 
       <ng-container matColumnDef="reportRunFrequency">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Report Run Frequency </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Report Run Frequency' | translate }} </th>
         <td mat-cell *matCellDef="let adhocquery"> {{ adhocquery.reportRunFrequency }} </td>
       </ng-container>
 
       <ng-container matColumnDef="isActive">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Status </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Status' | translate }} </th>
         <td mat-cell *matCellDef="let adhocquery">
           <div [className]="adhocquery.isActive === true ? 'true' : 'false'">
             <fa-icon matTooltip="{{ adhocquery.isActive === true ? 'Active' : 'Inactive' }}" matTooltipPosition="right" icon="circle" size="lg"></fa-icon>
@@ -53,7 +53,7 @@
       </ng-container>
 
       <ng-container matColumnDef="createdBy">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Created By </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Created By' | translate }} </th>
         <td mat-cell *matCellDef="let adhocquery"> {{ adhocquery.createdBy }} </td>
       </ng-container>
 

src/app/organization/adhoc-query/create-adhoc-query/create-adhoc-query.component.html

@@ -9,47 +9,47 @@
         <div fxLayout="column">
 
           <mat-form-field>
-            <mat-label>Name</mat-label>
+            <mat-label>{{ 'labels.inputs.name' | translate }}</mat-label>
             <input matInput required formControlName="name">
             <mat-error *ngIf="adhocQueryForm.controls.name.hasError('required')">
-              Name is <strong>required</strong>
+              {{ 'labels.inputs.name' | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>SQL Query</mat-label>
+            <mat-label>{{ 'labels.inputs.SQL Query' | translate }}</mat-label>
             <textarea matInput required formControlName="query"></textarea>
             <mat-error *ngIf="adhocQueryForm.controls.query.hasError('required')">
-              SQL Query is <strong>required</strong>
+              {{ 'labels.inputs.SQL Query' | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Insert into table</mat-label>
+            <mat-label>{{ 'labels.inputs.Insert into table' | translate }}</mat-label>
             <input matInput required formControlName="tableName">
             <mat-error *ngIf="adhocQueryForm.controls.tableName.hasError('required')">
-              Insert into table is <strong>required</strong>
+              {{ 'labels.inputs.Insert into table' | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Table Fields</mat-label>
+            <mat-label>{{ 'labels.inputs.Table Fields' | translate }}</mat-label>
             <textarea matInput required formControlName="tableFields"></textarea>
             <mat-error *ngIf="adhocQueryForm.controls.tableFields.hasError('required')">
-              Table Fields are <strong>required</strong>
+              {{ 'labels.inputs.Table Fields' | translate }} {{ "labels.commons.are"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Email</mat-label>
+            <mat-label>{{ 'labels.inputs.Email' | translate }}</mat-label>
             <input matInput formControlName="email">
             <mat-error *ngIf="adhocQueryForm.controls.email.hasError('email')">
-              Email is <strong>invalid</strong>
+              {{ 'labels.inputs.Email' | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.invalid"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Report Run Frequency</mat-label>
+            <mat-label>{{ 'labels.inputs.Report Run Frequency' | translate }}</mat-label>
             <mat-select formControlName="reportRunFrequency">
               <mat-option *ngFor="let reportRunFrequency of reportRunFrequencyData" [value]="reportRunFrequency.id">
                 {{ reportRunFrequency.value }}
@@ -58,18 +58,18 @@
           </mat-form-field>
 
           <mat-form-field *ngIf="adhocQueryForm.controls.reportRunFrequency.value === 5">
-            <mat-label>Custom Report Run Frequency (Days)</mat-label>
+            <mat-label>{{ 'labels.inputs.Custom Report Run Frequency (Days)' | translate }}</mat-label>
             <input type="number" matInput required formControlName="reportRunEvery">
             <mat-error *ngIf="adhocQueryForm.controls.reportRunEvery.hasError('required')">
-              Custom Report Run Frequency is <strong>required</strong>
+              {{ 'labels.inputs.Custom Report Run Frequency' | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
             <mat-error *ngIf="adhocQueryForm.controls.reportRunEvery.hasError('min')">
-              Custom Report Run Frequency <strong>must be larger than 0</strong>
+              {{ 'labels.inputs.Custom Report Run Frequency' | translate }} <strong>{{ "labels.commons.must be larger than 0"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-checkbox labelPosition="before" formControlName="isActive">
-            Active
+            {{ 'labels.inputs.Active' | translate }}
           </mat-checkbox>
 
         </div>
@@ -77,8 +77,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 type="button" mat-raised-button [routerLink]="['../']">{{"labels.buttons.Cancel" | translate }}</button>
-        <button mat-raised-button color="primary" [disabled]="!adhocQueryForm.valid" *mifosxHasPermission="'CREATE_ADHOC'">Submit</button>
+        <button mat-raised-button color="primary" [disabled]="!adhocQueryForm.valid" *mifosxHasPermission="'CREATE_ADHOC'">{{"labels.buttons.Submit" | translate }}</button>
       </mat-card-actions>
 
     </form>

src/app/organization/adhoc-query/edit-adhoc-query/edit-adhoc-query.component.html

@@ -9,47 +9,47 @@
         <div fxLayout="column">
 
           <mat-form-field>
-            <mat-label>Name</mat-label>
+            <mat-label>{{ 'labels.inputs.name' | translate }}</mat-label>
             <input matInput required formControlName="name">
             <mat-error *ngIf="editAdhocQueryForm.controls.name.hasError('required')">
-              Name is <strong>required</strong>
+              {{ 'labels.inputs.name' | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>SQL Query</mat-label>
+            <mat-label>{{ 'labels.inputs.SQL Query' | translate }}</mat-label>
             <textarea matInput required formControlName="query"></textarea>
             <mat-error *ngIf="editAdhocQueryForm.controls.query.hasError('required')">
-              SQL Query is <strong>required</strong>
+              {{ 'labels.inputs.SQL Query' | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Insert into table</mat-label>
+            <mat-label>{{ 'labels.inputs.Insert into table' | translate }}</mat-label>
             <input matInput required formControlName="tableName">
             <mat-error *ngIf="editAdhocQueryForm.controls.tableName.hasError('required')">
-              Insert into table is <strong>required</strong>
+              {{ 'labels.inputs.Insert into table' | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Table Fields</mat-label>
+            <mat-label>{{ 'labels.inputs.Table Fields' | translate }}</mat-label>
             <textarea matInput required formControlName="tableFields"></textarea>
             <mat-error *ngIf="editAdhocQueryForm.controls.tableFields.hasError('required')">
-              Table Fields are <strong>required</strong>
+              {{ 'labels.inputs.Table Fields' | translate }} {{ "labels.commons.are"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Email</mat-label>
+            <mat-label>{{ 'labels.inputs.Email' | translate }}</mat-label>
             <input matInput formControlName="email">
             <mat-error *ngIf="editAdhocQueryForm.controls.email.hasError('email')">
-              Email is <strong>invalid</strong>
+              {{ 'labels.inputs.Email' | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.invalid"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Report Run Frequency</mat-label>
+            <mat-label>{{ 'labels.inputs.Report Run Frequency' | translate }}</mat-label>
             <mat-select formControlName="reportRunFrequency">
               <mat-option *ngFor="let reportRunFrequency of reportRunFrequencyData" [value]="reportRunFrequency.id">
                 {{ reportRunFrequency.value }}
@@ -58,18 +58,18 @@
           </mat-form-field>
 
           <mat-form-field *ngIf="editAdhocQueryForm.controls.reportRunFrequency.value === 5">
-            <mat-label>Custom Report Run Frequency (Days)</mat-label>
+            <mat-label>{{ 'labels.inputs.Custom Report Run Frequency (Days)' | translate }}</mat-label>
             <input type="number" matInput required formControlName="reportRunEvery">
             <mat-error *ngIf="editAdhocQueryForm.controls.reportRunEvery.hasError('required')">
-              Custom Report Run Frequency is <strong>required</strong>
+              {{ 'labels.inputs.Custom Report Run Frequency' | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
             <mat-error *ngIf="editAdhocQueryForm.controls.reportRunEvery.hasError('min')">
-              Custom Report Run Frequency <strong>must be larger than 0</strong>
+              {{ 'labels.inputs.Custom Report Run Frequency' | translate }} <strong>{{ "labels.commons.must be larger than 0"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-checkbox labelPosition="before" formControlName="isActive">
-            Active
+            {{ 'labels.inputs.Active' | translate }}
           </mat-checkbox>
 
         </div>
@@ -77,8 +77,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 type="button" mat-raised-button [routerLink]="['../']">{{"labels.buttons.Cancel" | translate }}</button>
-        <button mat-raised-button color="primary" [disabled]="!editAdhocQueryForm.valid" *mifosxHasPermission="'UPDATE_ADHOC'">Submit</button>
+        <button mat-raised-button color="primary" [disabled]="!editAdhocQueryForm.valid" *mifosxHasPermission="'UPDATE_ADHOC'">{{"labels.buttons.Submit" | translate }}</button>
       </mat-card-actions>
 
     </form>

src/app/organization/adhoc-query/view-adhoc-query/view-adhoc-query.component.html

@@ -1,11 +1,11 @@
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
   <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_ADHOC'">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    Edit
+    {{"labels.buttons.Edit" | translate }}
   </button>
   <button mat-raised-button color="warn" (click)="deleteAdhocQuery()" *mifosxHasPermission="'DELETE_ADHOC'">
     <fa-icon icon="trash" class="m-r-10"></fa-icon>
-    Delete
+    {{"labels.buttons.Delete" | translate }}
   </button>
 </div>
 
@@ -18,7 +18,7 @@
       <div fxLayout="row wrap" class="content">
 
         <div fxFlex="50%" class="mat-body-strong">
-          Name
+          {{ 'labels.inputs.name' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -26,7 +26,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Query
+          {{ 'labels.inputs.Query' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -34,7 +34,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Table Affected
+          {{ 'labels.inputs.Table Affected' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -42,7 +42,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong" *ngIf="adhocQueryData.reportRunFrequency">
-          Report Run Frequency
+          {{ 'labels.inputs.Report Run Frequency' | translate }}
         </div>
 
         <div fxFlex="50%" *ngIf="adhocQueryData.reportRunFrequency">
@@ -50,7 +50,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Status
+          {{ 'labels.inputs.Status' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -58,7 +58,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Created By
+          {{ 'labels.inputs.Created By' | translate }}
         </div>
 
         <div fxFlex="50%">

src/app/organization/bulk-import/bulk-import.component.html

@@ -13,56 +13,56 @@
             <mat-icon matListIcon>
               <fa-icon icon="building" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>Offices</h4>
+            <h4 matLine>{{'labels.heading.Offices' | translate }}</h4>
           </mat-list-item>
 
           <mat-list-item [routerLink]="['Users']" *mifosxHasPermission="'READ_OFFICE'">
             <mat-icon matListIcon>
               <fa-icon icon="user" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>Users</h4>
+            <h4 matLine>{{'labels.heading.Users' | translate }}</h4>
           </mat-list-item>
 
           <mat-list-item [routerLink]="['Groups']" *mifosxHasPermission="'READ_OFFICE'">
             <mat-icon matListIcon>
               <fa-icon icon="users" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>Groups</h4>
+            <h4 matLine>{{'labels.heading.Groups' | translate }}</h4>
           </mat-list-item>
 
           <mat-list-item [routerLink]="['Loan Accounts']" *mifosxHasPermission="'READ_OFFICE'">
             <mat-icon matListIcon>
               <fa-icon icon="money-bill-alt" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>Loan Accounts</h4>
+            <h4 matLine>{{'labels.heading.Loan Accounts' | translate }}</h4>
           </mat-list-item>
 
           <mat-list-item [routerLink]="['Savings Accounts']" *mifosxHasPermission="'READ_OFFICE'">
             <mat-icon matListIcon>
               <fa-icon icon="money-bill-alt" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>Savings Accounts</h4>
+            <h4 matLine>{{'labels.heading.Savings Accounts' | translate }}</h4>
           </mat-list-item>
 
           <mat-list-item [routerLink]="['Fixed Deposit Accounts']" *mifosxHasPermission="'READ_OFFICE'">
             <mat-icon matListIcon>
               <fa-icon icon="money-bill-alt" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>Fixed Deposit Accounts</h4>
+            <h4 matLine>{{'labels.heading.Fixed Deposit Accounts' | translate }}</h4>
           </mat-list-item>
 
           <mat-list-item [routerLink]="['Chart of Accounts']" *mifosxHasPermission="'READ_OFFICE'">
             <mat-icon matListIcon>
               <fa-icon icon="money-bill-alt" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>Chart of Accounts</h4>
+            <h4 matLine>{{'labels.heading.Chart of Accounts' | translate }}</h4>
           </mat-list-item>
 
           <mat-list-item [routerLink]="['Share Accounts']" *mifosxHasPermission="'READ_OFFICE'">
             <mat-icon matListIcon>
               <fa-icon icon="money-bill-alt" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>Share Accounts</h4>
+            <h4 matLine>{{'labels.heading.Share Accounts' | translate }}</h4>
           </mat-list-item>
 
         </mat-nav-list>
@@ -77,7 +77,7 @@
             <mat-icon matListIcon>
               <fa-icon icon="user" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>Employees</h4>
+            <h4 matLine>{{'labels.heading.Employees' | translate }}</h4>
           </mat-list-item>
 
 
@@ -85,56 +85,56 @@
             <mat-icon matListIcon>
               <fa-icon icon="user" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>Clients</h4>
+            <h4 matLine>{{'labels.heading.Clients' | translate }}</h4>
           </mat-list-item>
 
           <mat-list-item [routerLink]="['Centers']" *mifosxHasPermission="'READ_OFFICE'">
             <mat-icon matListIcon>
               <fa-icon icon="users" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>Centers</h4>
+            <h4 matLine>{{'labels.heading.Centers' | translate }}</h4>
           </mat-list-item>
 
           <mat-list-item [routerLink]="['Loan Repayments']" *mifosxHasPermission="'READ_OFFICE'">
             <mat-icon matListIcon>
               <fa-icon icon="chevron-right" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>Loan Repayments</h4>
+            <h4 matLine>{{'labels.heading.Loan Repayments' | translate }}</h4>
           </mat-list-item>
 
           <mat-list-item [routerLink]="['Savings Transactions']" *mifosxHasPermission="'READ_OFFICE'">
             <mat-icon matListIcon>
               <fa-icon icon="chevron-right" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>Savings Transactions</h4>
+            <h4 matLine>{{'labels.heading.Savings Transactions' | translate }}</h4>
           </mat-list-item>
 
           <mat-list-item [routerLink]="['Fixed Deposit Transactions']" *mifosxHasPermission="'READ_OFFICE'">
             <mat-icon matListIcon>
               <fa-icon icon="chevron-right" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>Fixed Deposit Transactions</h4>
+            <h4 matLine>{{'labels.heading.Fixed Deposit Transactions' | translate }}</h4>
           </mat-list-item>
 
           <mat-list-item [routerLink]="['Recurring Deposit Transactions']" *mifosxHasPermission="'READ_OFFICE'">
             <mat-icon matListIcon>
               <fa-icon icon="chevron-right" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>Recurring Deposit Transactions</h4>
+            <h4 matLine>{{'labels.heading.Recurring Deposit Transactions' | translate }}</h4>
           </mat-list-item>
 
           <mat-list-item [routerLink]="['Journal Entries']" *mifosxHasPermission="'READ_OFFICE'">
             <mat-icon matListIcon>
               <fa-icon icon="chevron-right" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>Journal Entries</h4>
+            <h4 matLine>{{'labels.heading.Journal Entries' | translate }}</h4>
           </mat-list-item>
 
           <mat-list-item [routerLink]="['Guarantors']" *mifosxHasPermission="'READ_OFFICE'">
             <mat-icon matListIcon>
               <fa-icon icon="chevron-right" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>Guarantors</h4>
+            <h4 matLine>{{'labels.heading.Guarantors' | translate }}</h4>
           </mat-list-item>
 
         </mat-nav-list>

src/app/organization/bulk-import/view-bulk-import/view-bulk-import.component.html

@@ -4,7 +4,7 @@
 
     <mat-card fxLayout="column" fxLayoutGap="2%" fxFlex="50%">
 
-      <h3><strong>{{bulkImport.name}} Template</strong></h3>
+      <h3><strong>{{bulkImport.name}} {{ 'labels.heading.Template' | translate }}</strong></h3>
 
       <form [formGroup]="bulkImportForm">
 
@@ -12,7 +12,7 @@
 
           <div *ngIf="bulkImport.formFields >= 1">
             <mat-form-field fxFlex>
-              <mat-label>Office</mat-label>
+              <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
               <mat-select formControlName="officeId">
                 <mat-option *ngFor="let office of officeData" [value]="office.id">
                 {{ office.name }}
@@ -23,7 +23,7 @@
 
           <div *ngIf="bulkImport.formFields >= 2">
             <mat-form-field fxFlex>
-              <mat-label>Staff</mat-label>
+              <mat-label>{{ 'labels.inputs.Staff' | translate }}</mat-label>
               <mat-select formControlName="staffId">
                 <mat-option *ngFor="let staff of staffData" [value]="staff.id">
                 {{ staff.displayName }}
@@ -34,10 +34,10 @@
 
           <div *ngIf="bulkImport.formFields === 3">
             <mat-form-field fxFlex>
-              <mat-label>Legal Form</mat-label>
+              <mat-label>{{ 'labels.inputs.Legal Form' | translate }}</mat-label>
               <mat-select required formControlName="legalForm">
-                <mat-option value="Entity">Entity</mat-option>
+                <mat-option value="Entity">{{ 'labels.inputs.Entity' | translate }}</mat-option>
-                <mat-option value="Person">Person</mat-option>
+                <mat-option value="Person">{{ 'labels.inputs.Person' | translate }}</mat-option>
               </mat-select>
             </mat-form-field>
           </div>
@@ -48,7 +48,7 @@
 
       <div fxFlex="13%">
         <button mat-raised-button color="primary" (click)="downloadTemplate()" *mifosxHasPermission="bulkImport.permission">
-          <i class="fa fa-download"></i>&nbsp;&nbsp;Download
+          <i class="fa fa-download"></i>&nbsp;&nbsp;{{'labels.buttons.Download' | translate }}
         </button>
       </div>
 
@@ -58,15 +58,15 @@
 
       <h3><strong>{{bulkImport.name}}</strong></h3>
 
-      <h4>Select Excel File</h4>
+      <h4>{{'labels.heading.Select Excel File' | translate }}</h4>
 
       <mifosx-file-upload flex="75%" (change)="onFileSelect($event)" acceptFilter=".xls,.xlsx"></mifosx-file-upload>
 
-      <mat-hint *ngIf="bulkImport.name === 'Clients'">Please retain the value Entity/Person in the filename.</mat-hint>
+      <mat-hint *ngIf="bulkImport.name === 'Clients'">{{ 'labels.text.Please retain the value Entity/Person in the filename.' | translate }}</mat-hint>
 
       <div fxFlex="13%">
         <button mat-raised-button color="primary" [disabled]="!template" (click)="uploadTemplate()">
-          <i class="fa fa-upload"></i>&nbsp;&nbsp;Upload
+          <i class="fa fa-upload"></i>&nbsp;&nbsp;{{'labels.buttons.Upload' | translate }}
         </button>
       </div>
 
@@ -79,12 +79,12 @@
   <mat-card>
 
     <div>
-      <h3 class="documents"><strong>Documents</strong></h3>
+      <h3 class="documents"><strong>{{ 'labels.heading.Documents' | translate }}</strong></h3>
     </div>
 
     <div class="m-b-10" fxLayoutAlign="end">
       <button  mat-raised-button color="primary" (click)="refreshDocuments()">
-        <i class="fa fa-repeat"></i>&nbsp;&nbsp;Refresh
+        <i class="fa fa-repeat"></i>&nbsp;&nbsp;{{'labels.buttons.Refresh' | translate }}
       </button>
     </div>
 
@@ -93,42 +93,42 @@
       <table #importsTable mat-table [dataSource]="dataSource" matSort>
 
         <ng-container matColumnDef="name">
-          <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.name' | translate }} </th>
           <td mat-cell *matCellDef="let import"> {{ import.name }} </td>
         </ng-container>
 
         <ng-container matColumnDef="importTime">
-          <th mat-header-cell *matHeaderCellDef mat-sort-header> Import Time </th>
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Import Time' | translate }} </th>
-          <td mat-cell *matCellDef="let import"> {{ import.importTime | dateFormat }} </td>
+          <td mat-cell *matCellDef="let import"> {{ import.importTime  | dateFormat }} </td>
         </ng-container>
 
         <ng-container matColumnDef="endTime">
-          <th mat-header-cell *matHeaderCellDef mat-sort-header> End Time </th>
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.End Time' | translate }} </th>
-          <td mat-cell *matCellDef="let import"> {{ import.endTime | dateFormat }} </td>
+          <td mat-cell *matCellDef="let import"> {{ import.endTime  | dateFormat }} </td>
         </ng-container>
 
         <ng-container matColumnDef="completed">
-          <th mat-header-cell *matHeaderCellDef mat-sort-header> Completed </th>
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Completed' | translate }} </th>
           <td mat-cell *matCellDef="let import"> {{ import.completed }} </td>
         </ng-container>
 
         <ng-container matColumnDef="totalRecords">
-          <th mat-header-cell *matHeaderCellDef mat-sort-header> Total Records </th>
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Total Records' | translate }} </th>
           <td mat-cell *matCellDef="let import"> {{ import.totalRecords }} </td>
         </ng-container>
 
         <ng-container matColumnDef="successCount">
-          <th mat-header-cell *matHeaderCellDef mat-sort-header> Success Count </th>
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Success Count' | translate }} </th>
           <td mat-cell *matCellDef="let import"> {{ import.successCount }} </td>
         </ng-container>
 
         <ng-container matColumnDef="failureCount">
-          <th mat-header-cell *matHeaderCellDef mat-sort-header> Failure Count </th>
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Failure Count' | translate }} </th>
           <td mat-cell *matCellDef="let import"> {{ import.failureCount }} </td>
         </ng-container>
 
         <ng-container matColumnDef="download">
-          <th mat-header-cell *matHeaderCellDef mat-sort-header> Download </th>
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Download' | translate }} </th>
           <td mat-cell *matCellDef="let import">
             <button mat-icon-button (click)="downloadDocument(import.name, import.importId)" *mifosxHasPermission="'READ_DOCUMENT'">
               <fa-icon icon="cloud-download-alt"></fa-icon>

src/app/organization/bulk-loan-reassignmnet/bulk-loan-reassignmnet.component.html

@@ -9,7 +9,7 @@
         <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Office</mat-label>
+            <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
             <mat-select required (selectionChange)="getOffice($event.value)">
               <mat-option *ngFor="let office of offices" [value]="office.id">
                 {{ office.name }} 
@@ -22,12 +22,12 @@
         <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
           <mat-form-field fxFlex="48%" (click)="assignmentDatePicker.open()">
-            <mat-label>Assignment Date</mat-label>
+            <mat-label>{{ 'labels.inputs.Assignment Date' | translate }}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="assignmentDatePicker" required formControlName="assignmentDate">
             <mat-datepicker-toggle matSuffix [for]="assignmentDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #assignmentDatePicker></mat-datepicker>
             <mat-error *ngIf="bulkLoanForm.controls.assignmentDate.hasError('required')">
-              Assignment Date <strong>is required</strong>
+              {{ 'labels.inputs.Assignment Date' | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -36,14 +36,14 @@
         <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
           <mat-form-field fxFlex="48%" *ngIf="fromLoanOfficers !== undefined">
-            <mat-label>From loan officer</mat-label>
+            <mat-label>{{ 'labels.inputs.From loan officer' | translate }}</mat-label>
             <mat-select required formControlName="fromLoanOfficerId" (selectionChange)="getFromOfficers($event.value)">
               <mat-option *ngFor="let fromOfficers of fromLoanOfficers" [value]="fromOfficers.id">
                 {{ fromOfficers.displayName }} 
               </mat-option>
             </mat-select>
             <mat-error *ngIf="bulkLoanForm.controls.fromLoanOfficerId.hasError('required')">
-              From Loan Officer is <strong>required</strong>
+              {{ 'labels.inputs.From Loan Officer' | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -52,14 +52,14 @@
         <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
           <mat-form-field fxFlex="48%">
-            <mat-label>To loan officer</mat-label>
+            <mat-label>{{ 'labels.inputs.To loan officer' | translate }}</mat-label>
             <mat-select required formControlName="toLoanOfficerId">
               <mat-option *ngFor="let toOfficers of toLoanOfficers" [value]="toOfficers.id">
                 {{ toOfficers.displayName }} 
               </mat-option>
             </mat-select>
             <mat-error *ngIf="bulkLoanForm.controls.toLoanOfficerId.hasError('required')">
-              To Loan Officer is <strong>required</strong>
+              {{ 'labels.inputs.To Loan Officer' | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -71,7 +71,7 @@
 
             <thead>
 
-              <th> Clients </th>
+              <th> {{ 'labels.inputs.Clients' | translate }} </th>
 
             </thead>
 
@@ -109,7 +109,7 @@
 
             <thead>
 
-              <th> Groups </th>
+              <th> {{ 'labels.inputs.Groups' | translate }} </th>
 
             </thead>
 
@@ -148,8 +148,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 type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate }}</button>
-        <button mat-raised-button color="primary" [disabled]="!bulkLoanForm.valid" *mifosxHasPermission="'BULKREASSIGN_LOAN'">Submit</button>
+        <button mat-raised-button color="primary" [disabled]="!bulkLoanForm.valid" *mifosxHasPermission="'BULKREASSIGN_LOAN'">{{'labels.buttons.Submit' | translate }}</button>
       </mat-card-actions>
 
     </form>

src/app/organization/currencies/currencies.component.html

@@ -2,7 +2,7 @@
 <div #buttonAddEdit class="in-block">
   <button mat-raised-button color="primary" [routerLink]="'manage'" *mifosxHasPermission="'UPDATE_CURRENCY'">
     <fa-icon icon="plus" class="m-r-10"></fa-icon>
-    Add/Edit
+    {{'labels.buttons.Add/Edit' | translate }}
   </button>
   </div>
 </div>
@@ -11,7 +11,7 @@
 
   <div #filter fxLayout="row" fxLayoutGap="20px">
     <mat-form-field fxFlex>
-      <mat-label >Filter</mat-label>
+      <mat-label >{{ 'labels.inputs.Filter' | translate }}</mat-label>
       <input matInput (keyup)="applyFilter($event.target.value)">
     </mat-form-field>
   </div>
@@ -21,12 +21,12 @@
     <table mat-table [dataSource]="dataSource" matSort>
 
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Currency Name </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Currency Name' | translate }} </th>
         <td mat-cell *matCellDef="let currency"> {{ currency.name }} </td>
       </ng-container>
 
       <ng-container matColumnDef="code">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Currency Code </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Currency Code' | translate }} </th>
         <td mat-cell *matCellDef="let currency"> {{ currency.code }} </td>
       </ng-container>
 
@@ -42,29 +42,29 @@
 </div>
 
 <ng-template #templateButtonAddEdit let-popover="popover">
-  <h2>Add/Edit Currency</h2>
+  <h2>{{ 'labels.heading.Add/Edit Currency' | translate }}</h2>
-  <p class="mw300">This will display a list of all currencies currently in use.</p>
+  <p class="mw300">{{ 'labels.text.List of all currencies currently in use' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">Back</button>
+    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">{{'labels.buttons.Back' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter, filter, 'bottom', true)">Next</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter, filter, 'bottom', true)">{{'labels.buttons.Next' | translate }}</button>
   </div>
 </ng-template>
 
 <ng-template #templateFilter let-popover="popover">
-  <h4>Search bar to filter currencies.</h4>
+  <h4>{{ 'labels.heading.Search bar to filter currencies.' | translate }}</h4>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonAddEdit,buttonAddEdit, 'bottom', true)">Back</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonAddEdit,buttonAddEdit, 'bottom', true)">{{'labels.buttons.Back' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateTableCurrencies, tableCurrencies, 'top', true)">Next</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateTableCurrencies, tableCurrencies, 'top', true)">{{'labels.buttons.Next' | translate }}</button>
   </div>
 </ng-template>
 
 <ng-template #templateTableCurrencies let-popover="popover">
-  <h4>List of currencies available.</h4>
+  <h4>{{ 'labels.heading.List of currencies available.' | translate }}</h4>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter, filter, 'bottom', true)">Back</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter, filter, 'bottom', true)">{{'labels.buttons.Back' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">Next</button>
+    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">{{'labels.buttons.Next' | translate }}</button>
   </div>
 </ng-template>

src/app/organization/currencies/manage-currencies/manage-currencies.component.html

@@ -8,14 +8,14 @@
         fxFlex="48%" (ngSubmit)="addCurrency()">
 
         <mat-form-field fxFlex="calc(90%-20px)">
-            <mat-label>Currency</mat-label>
+            <mat-label>{{ 'labels.inputs.Currency' | translate }}</mat-label>
             <mat-select required formControlName="currency">
               <mat-option *ngFor="let currency of currencyData" [value]="currency">
                 {{ currency.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="currencyForm.controls.currency.hasError('required')">
-              Currency is <strong>required</strong>
+              {{ 'labels.inputs.Currency' | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
         </mat-form-field>
 
@@ -49,12 +49,12 @@
 </div>
 
 <ng-template #templateCurrencyFormRef let-popover="popover">
-  <h4>Add Currency Form</h4>
+  <h4>{{'labels.heading.Add Currency Form' | translate }}</h4>
-  <p class="mw400">This form will be used to add currency. To add currency click on add currency and fill the form and then click add else click back or next. For more details click: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67141734/Currency+Configuration" target="_blank">Currency Configuration</a></p>
+  <p class="mw400">{{ 'labels.text.Used to add currency' | translate }}: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67141734/Currency+Configuration" target="_blank">{{ 'labels.inputs.Currency Configuration' | translate }}</a></p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();">Add Currency</button>
+    <button mat-raised-button color="primary" (click)="popover.close();">{{"labels.buttons.Add Currency' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">Back</button>
+    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">{{"labels.buttons.Back' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">Next</button>
+    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">{{"labels.buttons.Next' | translate }}</button>
   </div>
 </ng-template>

src/app/organization/employees/create-employee/create-employee.component.html

@@ -9,55 +9,55 @@
         <div #createEmployeeFormRef fxLayout="column">
           
           <mat-form-field>
-            <mat-label>Office</mat-label>
+            <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
             <mat-select required formControlName="officeId">
               <mat-option *ngFor="let office of officeData" [value]="office.id">
                 {{ office.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="employeeForm.controls.officeId.hasError('required')">
-              Office is <strong>required</strong>
+              {{'labels.inputs.Office' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
           
           <mat-form-field>
-            <mat-label>First Name</mat-label>
+            <mat-label>{{'labels.inputs.First Name' | translate }}</mat-label>
             <input matInput required formControlName="firstname">
             <mat-error *ngIf="employeeForm.controls.firstname.hasError('required')">
-              First Name is <strong>required</strong>
+              {{'labels.inputs.First Name' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
             <mat-error *ngIf="employeeForm.controls.firstname.hasError('pattern')">
-              First Name <strong>cannot</strong> begin with a special character or number
+              {{'labels.inputs.First Name' | translate }} <strong>{{'labels.inputs.cannot' | translate }}</strong> {{'labels.inputs.begin with a special character or number' | translate }}
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Last Name</mat-label>
+            <mat-label>{{'labels.inputs.Last Name' | translate }}</mat-label>
             <input matInput required formControlName="lastname">
             <mat-error *ngIf="employeeForm.controls.lastname.hasError('required')">
-              Last Name is <strong>required</strong>
+              {{'labels.inputs.Last Name' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
             <mat-error *ngIf="employeeForm.controls.lastname.hasError('pattern')">
-              Last Name <strong>cannot</strong> begin with a special character or number
+              {{'labels.inputs.Last Name' | translate }} <strong>{{'labels.inputs.cannot' | translate }}</strong> {{'labels.inputs.begin with a special character or number' | translate }}
             </mat-error>
           </mat-form-field>
 
           <mat-checkbox labelPosition="before" formControlName="isLoanOfficer" class="loan-officer">
-            Is Loan Officer
+            {{'labels.inputs.Is Loan Officer' | translate }}
           </mat-checkbox>
 
           <mat-form-field>
-            <mat-label>Mobile Number for SMS</mat-label>
+            <mat-label>{{'labels.inputs.Mobile Number for SMS' | translate }}</mat-label>
             <input matInput formControlName="mobileNo">
           </mat-form-field>
 
           <mat-form-field (click)="joiningDatePicker.open()">
-            <mat-label>Joining Date</mat-label>
+            <mat-label>{{'labels.inputs.Joining Date' | translate }}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="joiningDatePicker" required formControlName="joiningDate">
             <mat-datepicker-toggle matSuffix [for]="joiningDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #joiningDatePicker></mat-datepicker>
             <mat-error *ngIf="employeeForm.controls.joiningDate.hasError('required')">
-              Joining Date is <strong>required</strong>
+              {{'labels.inputs.Joining Date' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -66,8 +66,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 type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate }}</button>
-        <button mat-raised-button color="primary" [disabled]="!employeeForm.valid" *mifosxHasPermission="'CREATE_STAFF'">Submit</button>
+        <button mat-raised-button color="primary" [disabled]="!employeeForm.valid" *mifosxHasPermission="'CREATE_STAFF'">{{'labels.buttons.Submit' | translate }}</button>
       </mat-card-actions>
 
     </form>
@@ -77,12 +77,12 @@
 </div>
 
 <ng-template #templateCreateEmployeeForm let-popover="popover">
-  <h2>Create Employee</h2>
+  <h2>{{ 'labels.heading.Create Employee' | translate }}</h2>
-  <p class="mw400">Click to start filling the details. * mark fields are neccessary. <br> For more details click: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67141732/Manage+Employees" target="_blank">Manage Employees</a></p>
+  <p class="mw400">{{'labels.text.Start filling the details' | translate }} <br> {{'labels.text.For more details click' | translate }}: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67141732/Manage+Employees" target="_blank">{{'labels.inputs.Manage Employees' | translate }}</a></p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close()">Create Employee</button>
+    <button mat-raised-button color="primary" (click)="popover.close()">{{'labels.buttons.Create Employee' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">Back</button> 
+    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">{{'labels.buttons.Back' | translate }}</button> 
-    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">Next</button>
+    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">{{'labels.buttons.Next' | translate }}</button>
   </div>
 </ng-template>

src/app/organization/employees/edit-employee/edit-employee.component.html

@@ -9,59 +9,59 @@
         <div fxLayout="column">
 
           <mat-form-field>
-            <mat-label>Office</mat-label>
+            <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
             <mat-select required formControlName="officeId">
               <mat-option *ngFor="let office of officeData" [value]="office.id">
                 {{ office.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="editEmployeeForm.controls.officeId.hasError('required')">
-              Office is <strong>required</strong>
+              {{'labels.inputs.Office' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>First Name</mat-label>
+            <mat-label>{{'labels.inputs.First Name' | translate }}</mat-label>
             <input matInput required formControlName="firstname">
             <mat-error *ngIf="editEmployeeForm.controls.firstname.hasError('required')">
-              First Name is <strong>required</strong>
+              {{'labels.inputs.First Name' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
             <mat-error *ngIf="editEmployeeForm.controls.firstname.hasError('pattern')">
-              First Name <strong>cannot</strong> begin with a special character or number
+              {{'labels.inputs.First Name' | translate }} <strong>{{'labels.inputs.cannot' | translate }}</strong> {{'labels.inputs.begin with a special character or number' | translate }}
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Last Name</mat-label>
+            <mat-label>{{'labels.inputs.Last Name' | translate }}</mat-label>
             <input matInput required formControlName="lastname">
             <mat-error *ngIf="editEmployeeForm.controls.lastname.hasError('required')">
-              Last Name is <strong>required</strong>
+              {{'labels.inputs.Last Name' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
             <mat-error *ngIf="editEmployeeForm.controls.lastname.hasError('pattern')">
-              Last Name <strong>cannot</strong> begin with a special character or number
+              {{'labels.inputs.Last Name' | translate }} <strong>{{'labels.inputs.cannot' | translate }}</strong> {{'labels.inputs.begin with a special character or number' | translate }}
             </mat-error>
           </mat-form-field>
 
           <mat-checkbox labelPosition="before" formControlName="isLoanOfficer" class="m-b-10">
-            Is Loan Officer
+            {{'labels.inputs.Is Loan Officer' | translate }}
           </mat-checkbox>
 
           <mat-form-field>
-            <mat-label>Mobile Number for SMS</mat-label>
+            <mat-label>{{'labels.inputs.Mobile Number for SMS' | translate }}</mat-label>
             <input matInput formControlName="mobileNo">
           </mat-form-field>
 
           <mat-checkbox labelPosition="before" formControlName="isActive">
-            Active
+            {{'labels.inputs.Active' | translate }}
           </mat-checkbox>
 
           <mat-form-field (click)="joiningDatePicker.open()">
-            <mat-label>Joining Date</mat-label>
+            <mat-label>{{'labels.inputs.Joining Date' | translate }}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="joiningDatePicker" required formControlName="joiningDate">
             <mat-datepicker-toggle matSuffix [for]="joiningDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #joiningDatePicker></mat-datepicker>
             <mat-error *ngIf="editEmployeeForm.controls.joiningDate.hasError('required')">
-              Joining Date is <strong>required</strong>
+              {{'labels.inputs.Joining Date' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -70,8 +70,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 type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate }}</button>
-        <button mat-raised-button color="primary" [disabled]="!editEmployeeForm.valid" *mifosxHasPermission="'UPDATE_STAFF'">Submit</button>
+        <button mat-raised-button color="primary" [disabled]="!editEmployeeForm.valid" *mifosxHasPermission="'UPDATE_STAFF'">{{'labels.buttons.Submit' | translate }}</button>
       </mat-card-actions>
 
     </form>

src/app/organization/employees/employees.component.html

@@ -3,13 +3,13 @@
   <div #buttonImportEmployees>
     <button mat-raised-button color="primary" *mifosxHasPermission="'CREATE_STAFF'" [routerLink]="['/', 'organization', 'bulk-import', 'Employees']">
     <fa-icon icon="upload" class="m-r-10"></fa-icon>
-    Import Employees
+    {{'labels.buttons.Import Employees' | translate }}
   </button>
   </div>
   <div #buttonCreateEmployee>
     <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_STAFF'">
     <fa-icon icon="plus" class="m-r-10"></fa-icon>
-    Create Employee
+    {{'labels.buttons.Create Employee' | translate }}
   </button>
   </div>
 
@@ -29,27 +29,27 @@
         <table mat-table [dataSource]="dataSource" matSort>
 
             <ng-container matColumnDef="displayName">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
+                <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.name' | translate }} </th>
                 <td mat-cell *matCellDef="let employee"> {{ employee.displayName }} </td>
             </ng-container>
 
             <ng-container matColumnDef="isLoanOfficer">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header> Loan Officer </th>
+                <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Loan Officer' | translate }} </th>
                 <td mat-cell *matCellDef="let employee">
                     <div [className]="employee.isLoanOfficer === true ? 'true' : 'false'">
-                        <fa-icon *ngIf="employee.isLoanOfficer" icon="check-circle" size="lg" matTooltip="Yes" matTooltipPosition="right"></fa-icon>
+                        <fa-icon *ngIf="employee.isLoanOfficer" icon="check-circle" size="lg" matTooltip="{{ 'tooltips.Yes' | translate }}" matTooltipPosition="right"></fa-icon>
-                        <fa-icon *ngIf="!employee.isLoanOfficer" icon="times-circle" size="lg" matTooltip="No" matTooltipPosition="right"></fa-icon>
+                        <fa-icon *ngIf="!employee.isLoanOfficer" icon="times-circle" size="lg" matTooltip="{{ 'tooltips.No' | translate }}" matTooltipPosition="right"></fa-icon>
                     </div>
                 </td>
             </ng-container>
 
             <ng-container matColumnDef="officeName">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header> Office </th>
+                <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Office' | translate }} </th>
                 <td mat-cell *matCellDef="let employees"> {{ employees.officeName }} </td>
             </ng-container>
 
             <ng-container matColumnDef="isActive">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header> Status </th>
+                <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Status' | translate }} </th>
                 <td mat-cell *matCellDef="let employee">
                     <div [className]="employee.isActive === true ? 'true' : 'false'">
                         <fa-icon matTooltip="{{ employee.isActive === true ? 'Active' : 'Inactive' }}" matTooltipPosition="right" icon="circle" size="lg"></fa-icon>
@@ -69,39 +69,39 @@
 </div>
 
 <ng-template #templateButtonImportEmployees let-data let-popover="popover">
-  <h2>Import Employees</h2>
+  <h2>{{ 'labels.heading.Import Employees' | translate }}</h2>
-  <p class="mw300">This button is used to import employee details from your local device.</p>
+  <p class="mw300">{{'labels.text.Import employee details from your local device' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">Back</button>
+    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">{{'labels.buttons.Back' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonCreateEmployee,buttonCreateEmployee,'bottom', true)">Next</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonCreateEmployee,buttonCreateEmployee,'bottom', true)">{{'labels.buttons.Next' | translate }}</button>
   </div>
 </ng-template>
 
 <ng-template #templateButtonCreateEmployee let-popover="popover">
-  <h2>Create Employee</h2>
+  <h2>{{ 'labels.heading.Create Employee' | translate }}</h2>
-  <p class="mw300">This option allows you to create new employees in your organization.</p>
+  <p class="mw300">{{'labels.text.Create new employees in your organization' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonImportEmployees,buttonImportEmployees,'bottom', true)">Back</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonImportEmployees,buttonImportEmployees,'bottom', true)">{{'labels.buttons.Back' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter,filter,'bottom', true)">Next</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter,filter,'bottom', true)">{{'labels.buttons.Next' | translate }}</button>
   </div>
 </ng-template>
 
 <ng-template #templateFilter let-popover="popover">
-  <h4>Search bar to filter employees.</h4>
+  <h4>{{ 'labels.heading.Search bar to filter employees.' | translate }}</h4>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonCreateEmployee,buttonCreateEmployee,'bottom', true)">Back</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonCreateEmployee,buttonCreateEmployee,'bottom', true)">{{'labels.buttons.Back' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateTableEmployees,tableEmployees,'top', true)">Next</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateTableEmployees,tableEmployees,'top', true)">{{'labels.buttons.Next' | translate }}</button>
   </div>
 </ng-template>
 
 <ng-template #templateTableEmployees let-popover="popover">
-  <h4>List of employees in the organization.</h4>
+  <h4>{{ 'labels.heading.List of employees in the organization.' | translate }}</h4>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter,filter,'bottom', true)">Back</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter,filter,'bottom', true)">{{'labels.buttons.Back' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">Next</button>
+    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">{{'labels.buttons.Next' | translate }}</button>
   </div>
 </ng-template>

src/app/organization/employees/view-employee/view-employee.component.html

@@ -1,7 +1,7 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
   <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_STAFF'">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    Edit
+    {{'labels.buttons.Edit' | translate }}
   </button>
 </div>
 
@@ -14,7 +14,7 @@
       <div fxLayout="row wrap" class="content">
 
         <div fxFlex="50%" class="mat-body-strong">
-          First Name
+          {{'labels.inputs.First Name' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -22,7 +22,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Last Name
+          {{'labels.inputs.Last Name' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -30,7 +30,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Office
+          {{'labels.inputs.Office' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -38,7 +38,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Is Loan Officer
+          {{'labels.inputs.Is Loan Officer' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -46,7 +46,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong" *ngIf="employeeData.mobileNo">
-          Mobile Number for SMS
+          {{'labels.inputs.Mobile Number for SMS' | translate }}
         </div>
 
         <div fxFlex="50%" *ngIf="employeeData.mobileNo">
@@ -54,7 +54,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Status
+          {{'labels.inputs.Status' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -62,7 +62,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Joining Date
+          {{'labels.inputs.Joining Date' | translate }}
         </div>
 
         <div fxFlex="50%">

src/app/organization/entity-data-table-checks/create-enity-data-table-checks/create-enity-data-table-checks.component.html

@@ -9,62 +9,62 @@
         <div fxLayout="column">
 
           <mat-form-field>
-            <mat-label>Entity</mat-label>
+            <mat-label>{{ 'labels.inputs.Entity' | translate }}</mat-label>
             <mat-select required formControlName="entity">
               <mat-option *ngFor="let entity of entityTypes" [value]="entity.value">
                 {{ entity.name }} 
               </mat-option>
             </mat-select>
             <mat-error *ngIf="createEntityForm.controls.entity.hasError('required')">
-              Entity is <strong>required</strong>
+              {{ 'labels.inputs.Entity' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Status</mat-label>
+            <mat-label>{{ 'labels.inputs.Status' | translate }}</mat-label>
             <mat-select required formControlName="status">
               <mat-option *ngFor="let status of statusList" [value]="status.code">
                 {{ status.name }} 
               </mat-option>
             </mat-select>
             <mat-error *ngIf="createEntityForm.controls.status.hasError('required')">
-              Status is <strong>required</strong>
+              {{ 'labels.inputs.Status' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Data Table</mat-label>
+            <mat-label>{{ 'labels.inputs.Data Table' | translate }}</mat-label>
             <mat-select required formControlName="datatableName">
               <mat-option *ngFor="let dataTable of dataTableList" [value]="dataTable.dataTableName">
                 {{ dataTable.dataTableName }} 
               </mat-option>
             </mat-select>
             <mat-error *ngIf="createEntityForm.controls.datatableName.hasError('required')">
-              Data Table is <strong>required</strong>
+              {{ 'labels.inputs.Data Table' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field *ngIf="entityType === 'm_loan'">
-            <mat-label>Products</mat-label>
+            <mat-label>{{ 'labels.inputs.Products' | translate }}</mat-label>
             <mat-select required formControlName="productId">
               <mat-option *ngFor="let loanProducts of createEntityData.loanProductDatas" [value]="loanProducts.id">
                 {{ loanProducts.name }} 
               </mat-option>
             </mat-select>
             <mat-error *ngIf="createEntityForm.controls.productId.hasError('required')">
-              Loan Product is <strong>required</strong>
+              {{ 'labels.inputs.Loan Product' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field *ngIf="entityType === 'm_savings_account'">
-            <mat-label>Products</mat-label>
+            <mat-label>{{ 'labels.inputs.Products' | translate }}</mat-label>
             <mat-select required formControlName="productId">
               <mat-option *ngFor="let savingsProducts of createEntityData.savingsProductDatas" [value]="savingsProducts.id">
                 {{ savingsProducts.name }} 
               </mat-option>
             </mat-select>
             <mat-error *ngIf="createEntityForm.controls.productId.hasError('required')">
-              Loan Product is <strong>required</strong>
+              {{ 'labels.inputs.Loan Product' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -73,8 +73,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 type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate }}</button>
-        <button mat-raised-button color="primary" [disabled]="!createEntityForm.valid">Submit</button>
+        <button mat-raised-button color="primary" [disabled]="!createEntityForm.valid">{{'labels.buttons.Submit' | translate }}</button>
       </mat-card-actions>
 
     </form>

src/app/organization/entity-data-table-checks/entity-data-table-checks.component.html

@@ -2,7 +2,7 @@
 
   <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_ENTITY_DATATABLE_CHECK'">
     <fa-icon icon="plus" class="m-r-10"></fa-icon>
-    Create
+    {{'labels.buttons.Create' | translate }}
   </button>
 
 </div>
@@ -21,40 +21,40 @@
     <table mat-table [dataSource]="dataSource" matSort>
 
       <ng-container matColumnDef="entity">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Entity </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Entity' | translate }} </th>
         <td mat-cell *matCellDef="let entityDataTableCheck"> {{ entityDataTableCheck.entity }} </td>
       </ng-container>
 
       <ng-container matColumnDef="productName">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Product Name </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Product Name' | translate }} </th>
         <td mat-cell *matCellDef="let entityDataTableCheck"> {{ entityDataTableCheck.productName }} </td>
       </ng-container>
 
       <ng-container matColumnDef="datatableName">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Data Table </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Data Table' | translate }} </th>
         <td mat-cell *matCellDef="let entityDataTableCheck"> {{ entityDataTableCheck.datatableName }} </td>
       </ng-container>
 
       <ng-container matColumnDef="status">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Status </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Status' | translate }} </th>
         <td mat-cell *matCellDef="let entityDataTableCheck"> {{ entityDataTableCheck.status.value }} </td>
       </ng-container>
 
       <ng-container matColumnDef="systemDefined">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> System Defined </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.System Defined' | translate }} </th>
         <td mat-cell *matCellDef="let entityDataTableCheck">
           <div [className]="entityDataTableCheck.systemDefined === true ? 'true' : 'false'">
-            <fa-icon *ngIf="entityDataTableCheck.systemDefined" icon="check-circle" size="lg" matTooltip="Yes" matTooltipPosition="right"></fa-icon>
+            <fa-icon *ngIf="entityDataTableCheck.systemDefined" icon="check-circle" size="lg" matTooltip="{{ 'tooltips.Yes' | translate }}" matTooltipPosition="right"></fa-icon>
-            <fa-icon *ngIf="!entityDataTableCheck.systemDefined" icon="times-circle" size="lg" matTooltip="No" matTooltipPosition="right"></fa-icon>
+            <fa-icon *ngIf="!entityDataTableCheck.systemDefined" icon="times-circle" size="lg" matTooltip="{{ 'tooltips.No' | translate }}" matTooltipPosition="right"></fa-icon>
           </div>
         </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 entityDataTableCheck">
           <button mat-button (click)="deleteEntityDataTableCheck(entityDataTableCheck.id)" color="warn" *mifosxHasPermission="'DELETE_ENTITY_DATATABLE_CHECK'">
-            <fa-icon icon="trash" class="m-r-10"></fa-icon>Delete
+            <fa-icon icon="trash" class="m-r-10"></fa-icon>{{'labels.buttons.Delete' | translate }}
           </button>
         </td>
       </ng-container>

src/app/organization/fund-mapping/fund-mapping.component.html

@@ -5,20 +5,20 @@
     <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" fxLayoutAlign.gt-sm="start center">
   
       <mat-form-field fxFlex="48%">
-        <mat-label>Loan Status</mat-label>
+        <mat-label>{{ 'labels.inputs.Loan Status' | translate }}</mat-label>
         <mat-select formControlName="loanStatus" multiple>
-          <mat-option value="all">All</mat-option>
+          <mat-option value="all">{{ 'labels.inputs.All' | translate }}</mat-option>
-          <mat-option value="active">Active</mat-option>
+          <mat-option value="active">{{ 'labels.inputs.Active' | translate }}</mat-option>
-          <mat-option value="closed">Overpaid</mat-option>
+          <mat-option value="closed">{{ 'labels.inputs.Overpaid' | translate }}</mat-option>
-          <mat-option value="overpaid">Closed (obligations met)</mat-option>
+          <mat-option value="overpaid">{{ 'labels.inputs.Closed (obligations met)' | translate }}</mat-option>
-          <mat-option value="writeoff">Closed (written-off)</mat-option>
+          <mat-option value="writeoff">{{ 'labels.inputs.Closed (written-off)' | translate }}</mat-option>
         </mat-select>
       </mat-form-field>
 
       <span fxFlex="48%" fxHide.lt-md></span>
 
       <mat-form-field fxFlex="48%">
-        <mat-label>Product</mat-label>
+        <mat-label>{{ 'labels.inputs.Product' | translate }}</mat-label>
         <mat-select formControlName="loanProducts" multiple>
           <mat-option *ngFor="let product of advanceSearchTemplate.loanProducts" [value]="product.id">
             {{ product.name }}
@@ -27,7 +27,7 @@
       </mat-form-field>
   
       <mat-form-field fxFlex="48%">
-        <mat-label>Office</mat-label>
+        <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
         <mat-select formControlName="offices" multiple>
           <mat-option *ngFor="let office of advanceSearchTemplate.offices" [value]="office.id">
             {{ office.name }}
@@ -36,46 +36,46 @@
       </mat-form-field>
 
       <mat-form-field fxFlex="31%">
-        <mat-label>Date Type</mat-label>
+        <mat-label>{{ 'labels.inputs.Date Type' | translate }}</mat-label>
         <mat-select required formControlName="loanDateOption">
-          <mat-option value="approvalDate">Approval Date</mat-option>
+          <mat-option value="approvalDate">{{ 'labels.inputs.Approval Date' | translate }}</mat-option>
-          <mat-option value="createdDate">Creation Date</mat-option>
+          <mat-option value="createdDate">{{ 'labels.inputs.Creation Date' | translate }}</mat-option>
-          <mat-option value="disbursalDate">Disbursement Date</mat-option>
+          <mat-option value="disbursalDate">{{ 'labels.inputs.Disbursement Date' | translate }}</mat-option>
         </mat-select>
       </mat-form-field>
 
       <mat-form-field fxFlex="31%" (click)="fromDatePicker.open()">
-        <mat-label>From Date</mat-label>
+        <mat-label>{{ 'labels.inputs.From Date' | translate }}</mat-label>
         <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="fromDatePicker" 
           required formControlName="loanFromDate" required>
         <mat-datepicker-toggle matSuffix [for]="fromDatePicker"></mat-datepicker-toggle>
         <mat-datepicker #fromDatePicker></mat-datepicker>
         <mat-error *ngIf="fundMappingForm.controls.loanFromDate.hasError('required')">
-          From Date is <strong>required</strong>
+          {{ 'labels.inputs.From Date' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
         </mat-error>
       </mat-form-field>
 
       <mat-form-field fxFlex="31%" (click)="toDatePicker.open()">
-        <mat-label>To Date</mat-label>
+        <mat-label>{{ 'labels.inputs.To Date' | translate }}</mat-label>
         <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="toDatePicker" 
           required formControlName="loanToDate" required>
         <mat-datepicker-toggle matSuffix [for]="toDatePicker"></mat-datepicker-toggle>
         <mat-datepicker #toDatePicker></mat-datepicker>
         <mat-error *ngIf="fundMappingForm.controls.loanToDate.hasError('required')">
-          To Date is <strong>required</strong>
+          {{ 'labels.inputs.To Date' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
         </mat-error>
       </mat-form-field>
   
       <mat-checkbox fxFlex="73%" labelPosition="before" formControlName="includeOutStandingAmountPercentage" class="margin-b">
-        Loan Outstanding Percentage
+        {{ 'labels.inputs.Loan Outstanding Percentage' | translate }}
       </mat-checkbox>
   
       <div *ngIf="fundMappingForm.value.includeOutStandingAmountPercentage" fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
         <mat-form-field *ngIf="fundMappingForm.contains('outStandingAmountPercentageCondition')" fxFlex="31%">
-          <mat-label>Comparison Condition</mat-label>
+          <mat-label>{{ 'labels.inputs.Comparison Condition' | translate }}</mat-label>
           <mat-select required formControlName="outStandingAmountPercentageCondition">
-            <mat-option value="between">between</mat-option>
+            <mat-option value="between">{{ 'labels.inputs.between' | translate }}</mat-option>
             <mat-option value="<="><=</mat-option>
             <mat-option value=">=">>=</mat-option>
             <mat-option value="<"><</mat-option>
@@ -83,46 +83,46 @@
             <mat-option value="=">=</mat-option>
           </mat-select>
           <mat-error *ngIf="fundMappingForm.controls.outStandingAmountPercentageCondition.hasError('required')">
-            Comparison Condition is <strong>required</strong>
+            {{ 'labels.inputs.Comparison Condition' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
           </mat-error>
         </mat-form-field>
   
         <mat-form-field *ngIf="fundMappingForm.contains('minOutStandingAmountPercentage')" fxFlex="31%">
-          <mat-label>Minimum Value</mat-label>
+          <mat-label>{{ 'labels.inputs.Minimum Value' | translate }}</mat-label>
           <input type="number" matInput required formControlName="minOutStandingAmountPercentage">
           <mat-error *ngIf="fundMappingForm.controls.minOutStandingAmountPercentage.hasError('required')">
-            Minimum Value is <strong>required</strong>
+            {{ 'labels.inputs.Minimum Value' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
           </mat-error>
         </mat-form-field>
 
         <mat-form-field *ngIf="fundMappingForm.contains('outStandingAmountPercentage')" fxFlex="31%">
-          <mat-label>Comparison Value</mat-label>
+          <mat-label>{{ 'labels.inputs.Comparison Value' | translate }}</mat-label>
           <input type="number" matInput required formControlName="outStandingAmountPercentage">
           <mat-error *ngIf="fundMappingForm.controls.outStandingAmountPercentage.hasError('required')">
-            Comparison Value is <strong>required</strong>
+            {{ 'labels.inputs.Comparison Value' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
           </mat-error>
         </mat-form-field>
   
         <mat-form-field *ngIf="fundMappingForm.contains('maxOutStandingAmountPercentage')" fxFlex="31%">
-          <mat-label>Maximum Value</mat-label>
+          <mat-label>{{ 'labels.inputs.Maximum Value' | translate }}</mat-label>
           <input type="number" matInput required formControlName="maxOutStandingAmountPercentage">
           <mat-error *ngIf="fundMappingForm.controls.maxOutStandingAmountPercentage.hasError('required')">
-            Maximum Value is <strong>required</strong>
+            {{ 'labels.inputs.Maximum Value' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
           </mat-error>
         </mat-form-field>
   
       </div>
   
       <mat-checkbox fxFlex="73%" labelPosition="before" formControlName="includeOutstandingAmount" class="margin-b">
-        Loan Outstanding Amount
+        {{ 'labels.inputs.Loan Outstanding Amount' | translate }}
       </mat-checkbox>
   
       <div *ngIf="fundMappingForm.value.includeOutstandingAmount" fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
   
         <mat-form-field *ngIf="fundMappingForm.contains('outstandingAmountCondition')" fxFlex="31%">
-          <mat-label>Comparison Condition</mat-label>
+          <mat-label>{{ 'labels.inputs.Comparison Condition' | translate }}</mat-label>
           <mat-select required formControlName="outstandingAmountCondition">
-            <mat-option value="between">between</mat-option>
+            <mat-option value="between">{{ 'labels.inputs.between' | translate }}</mat-option>
             <mat-option value="<="><=</mat-option>
             <mat-option value=">=">>=</mat-option>
             <mat-option value="<"><</mat-option>
@@ -130,31 +130,31 @@
             <mat-option value="=">=</mat-option>
           </mat-select>
           <mat-error *ngIf="fundMappingForm.controls.outstandingAmountCondition.hasError('required')">
-            Comparison Condition is <strong>required</strong>
+            {{ 'labels.inputs.Comparison Condition' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
           </mat-error>
         </mat-form-field>
   
         <mat-form-field *ngIf="fundMappingForm.contains('minOutstandingAmount')" fxFlex="31%">
-          <mat-label>Minimum Value</mat-label>
+          <mat-label>{{ 'labels.inputs.Minimum Value' | translate }}</mat-label>
           <input type="number" matInput required formControlName="minOutstandingAmount">
           <mat-error *ngIf="fundMappingForm.controls.minOutstandingAmount.hasError('required')">
-            Minimum Value is <strong>required</strong>
+            {{ 'labels.inputs.Minimum Value' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
           </mat-error>
         </mat-form-field>
 
         <mat-form-field *ngIf="fundMappingForm.contains('outstandingAmount')" fxFlex="31%">
-          <mat-label>Comparison Value</mat-label>
+          <mat-label>{{ 'labels.inputs.Comparison Value' | translate }}</mat-label>
           <input type="number" matInput required formControlName="outstandingAmount">
           <mat-error *ngIf="fundMappingForm.controls.outstandingAmount.hasError('required')">
-            Comparison Value is <strong>required</strong>
+            {{ 'labels.inputs.Comparison Value' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
           </mat-error>
         </mat-form-field>
   
         <mat-form-field *ngIf="fundMappingForm.contains('maxOutstandingAmount')" fxFlex="31%">
-          <mat-label>Maximum Value</mat-label>
+          <mat-label>{{ 'labels.inputs.Maximum Value' | translate }}</mat-label>
           <input type="number" matInput required formControlName="maxOutstandingAmount">
           <mat-error *ngIf="fundMappingForm.controls.maxOutstandingAmount.hasError('required')">
-            Maximum Value is <strong>required</strong>
+            {{ 'labels.inputs.Maximum Value' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
           </mat-error>
         </mat-form-field>
   
@@ -163,9 +163,9 @@
     </div>
 
     <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-      <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
+      <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate }}</button>
       <button mat-raised-button color="primary" [disabled]="!fundMappingForm.valid">
-        <fa-icon icon="search"></fa-icon>&nbsp; Summary
+        <fa-icon icon="search"></fa-icon>&nbsp; {{'labels.buttons.Summary' | translate }}
       </button>
     </mat-card-actions>
   
@@ -180,34 +180,34 @@
 
     <div class="m-b-20">
       <button mat-raised-button color="primary" (click)="isCollapsed = false">
-        Parameters
+        {{'labels.buttons.Parameters' | translate }}
       </button>
     </div>
 
     <table class="mat-elevation-z1" mat-table [dataSource]="dataSource" matSort>
 
       <ng-container matColumnDef="officeName">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Office Name </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Office Name' | translate }} </th>
         <td mat-cell *matCellDef="let loan"> {{ loan.officeName }}</td>
       </ng-container>
 
       <ng-container matColumnDef="productName">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Product Name </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Product Name' | translate }} </th>
         <td mat-cell *matCellDef="let loan"> {{ loan.loanProductName }}</td>
       </ng-container>
 
       <ng-container matColumnDef="count">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Count </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Count' | translate }} </th>
         <td mat-cell *matCellDef="let loan"> {{ loan.count }} </td>
       </ng-container>
 
       <ng-container matColumnDef="outstanding">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Outstanding </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Outstanding' | translate }} </th>
         <td mat-cell *matCellDef="let loan"> {{ loan.loanOutStanding }} </td>
       </ng-container>
 
       <ng-container matColumnDef="percentage">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Percentage </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Percentage' | translate }} </th>
         <td mat-cell *matCellDef="let loan"> {{ loan.percentage }} </td>
       </ng-container>
 

src/app/organization/holidays/create-holiday/create-holiday.component.html

@@ -9,61 +9,61 @@
         <div fxLayout="column">
 
           <mat-form-field>
-            <mat-label>Name</mat-label>
+            <mat-label>{{ 'labels.inputs.name' | translate }}</mat-label>
             <input matInput required autofocus formControlName="name">
             <mat-error *ngIf="holidayForm.controls.name.hasError('required')">
-              Name <strong>is required</strong>
+              {{ 'labels.inputs.name' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field (click)="fromDatePicker.open()">
-            <mat-label>From Date</mat-label>
+            <mat-label>{{ 'labels.inputs.From Date' | translate }}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="fromDatePicker" required formControlName="fromDate">
             <mat-datepicker-toggle matSuffix [for]="fromDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #fromDatePicker></mat-datepicker>
             <mat-error *ngIf="holidayForm.controls.fromDate.hasError('required')">
-              From Date <strong>is required</strong>
+              {{ 'labels.inputs.From Date' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field (click)="toDatePicker.open()">
-            <mat-label>To Date</mat-label>
+            <mat-label>{{ 'labels.inputs.To Date' | translate }}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="toDatePicker" required formControlName="toDate">
             <mat-datepicker-toggle matSuffix [for]="toDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #toDatePicker></mat-datepicker>
             <mat-error *ngIf="holidayForm.controls.toDate.hasError('required')">
-              To Date <strong>is required</strong>
+              {{ 'labels.inputs.To Date' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Repayment Scheduling Type</mat-label>
+            <mat-label>{{ 'labels.inputs.Repayment Scheduling Type' | translate }}</mat-label>
             <mat-select required formControlName="reschedulingType">
               <mat-option *ngFor="let repayments of repaymentSchedulingTypes" [value]="repayments.id">
                 {{ repayments.value }} 
               </mat-option>
             </mat-select>
             <mat-error *ngIf="holidayForm.controls.reschedulingType.hasError('required')">
-              Repayment Scheduling Type is <strong>required</strong>
+              {{ 'labels.inputs.Repayment Scheduling Type' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field *ngIf="holidayForm.contains('repaymentsRescheduledTo')" (click)="repaymentDatePicker.open()">
-            <mat-label>Repayment scheduled to</mat-label>
+            <mat-label>{{ 'labels.inputs.Repayment scheduled to' | translate }}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="repaymentDatePicker" required formControlName="repaymentsRescheduledTo">
             <mat-datepicker-toggle matSuffix [for]="repaymentDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #repaymentDatePicker></mat-datepicker>
             <mat-error *ngIf="holidayForm.controls.repaymentsRescheduledTo.hasError('required')">
-              Repayment Scheduled To <strong>is required</strong>
+              {{ 'labels.inputs.Repayment scheduled to' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Description</mat-label>
+            <mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
             <input matInput formControlName="description">
           </mat-form-field>   
           
-          <label>Select applicable offices</label>
+          <label>{{ 'labels.inputs.Select applicable offices' | translate }}</label>
 
           <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
             <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle matTreeNodePadding>
@@ -90,8 +90,8 @@
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate }}</button>
-        <button mat-raised-button color="primary" [disabled]="!holidayForm.valid" *mifosxHasPermission="'CREATE_HOLIDAY'">Submit</button>
+        <button mat-raised-button color="primary" [disabled]="!holidayForm.valid" *mifosxHasPermission="'CREATE_HOLIDAY'">{{'labels.buttons.Submit' | translate }}</button>
       </mat-card-actions>
 
     </form>

src/app/organization/holidays/edit-holiday/edit-holiday.component.html

@@ -9,57 +9,57 @@
         <div fxLayout="column">
 
           <mat-form-field>
-            <mat-label>Name</mat-label>
+            <mat-label>{{ 'labels.inputs.name' | translate }}</mat-label>
             <input matInput required autofocus formControlName="name">
             <mat-error *ngIf="holidayForm.controls.name.hasError('required')">
-              Name <strong>is required</strong>
+              {{ 'labels.inputs.name' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field *ngIf="!isActiveHoliday" (click)="fromDatePicker.open()">
-            <mat-label>From Date</mat-label>
+            <mat-label>{{ 'labels.inputs.From Date' | translate }}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="fromDatePicker" required formControlName="fromDate">
             <mat-datepicker-toggle matSuffix [for]="fromDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #fromDatePicker></mat-datepicker>
             <mat-error *ngIf="holidayForm.controls.fromDate.hasError('required')">
-              From Date <strong>is required</strong>
+              {{ 'labels.inputs.From Date' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field *ngIf="!isActiveHoliday" (click)="toDatePicker.open()">
-            <mat-label>To Date</mat-label>
+            <mat-label>{{ 'labels.inputs.To Date' | translate }}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="toDatePicker" required formControlName="toDate">
             <mat-datepicker-toggle matSuffix [for]="toDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #toDatePicker></mat-datepicker>
             <mat-error *ngIf="holidayForm.controls.toDate.hasError('required')">
-              To Date <strong>is required</strong>
+              {{ 'labels.inputs.To Date' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field *ngIf="!isActiveHoliday">
-            <mat-label>Repayment Scheduling Type</mat-label>
+            <mat-label>{{ 'labels.inputs.Repayment Scheduling Type' | translate }}</mat-label>
             <mat-select required formControlName="reschedulingType">
               <mat-option *ngFor="let repayments of holidayData.repaymentSchedulingTypes" [value]="repayments.id">
                 {{ repayments.value }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="holidayForm.controls.reschedulingType.hasError('required')">
-              Repayment Scheduling Type is <strong>required</strong>
+              {{ 'labels.inputs.Repayment Scheduling Type' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field *ngIf="!isActiveHoliday && reSchedulingType === 2" (click)="repaymentDatePicker.open()">
-            <mat-label>Repayment scheduled to</mat-label>
+            <mat-label>{{ 'labels.inputs.Repayment scheduled to' | translate }}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="repaymentDatePicker" required formControlName="repaymentsRescheduledTo">
             <mat-datepicker-toggle matSuffix [for]="repaymentDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #repaymentDatePicker></mat-datepicker>
             <mat-error *ngIf="holidayForm.controls.repaymentsRescheduledTo.hasError('required')">
-              Repayment Scheduled To <strong>is required</strong>
+              {{ 'labels.inputs.Repayment scheduled to' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Description</mat-label>
+            <mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
             <input matInput formControlName="description">
           </mat-form-field>
 
@@ -68,8 +68,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 type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate }}</button>
-        <button mat-raised-button color="primary" [disabled]="!holidayForm.valid" *mifosxHasPermission="'UPDATE_HOLIDAY'">Submit</button>
+        <button mat-raised-button color="primary" [disabled]="!holidayForm.valid" *mifosxHasPermission="'UPDATE_HOLIDAY'">{{'labels.buttons.Submit' | translate }}</button>
       </mat-card-actions>
 
     </form>

src/app/organization/holidays/holidays.component.html

@@ -3,7 +3,7 @@
   <div #buttonCreateHoliday class="in-block">
   <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_HOLIDAY'">
     <fa-icon icon="plus" class="m-r-10"></fa-icon>
-    Create Holiday
+    {{'labels.buttons.Create Holiday' | translate }}
   </button>
   </div>
 
@@ -18,7 +18,7 @@
       <input matInput (keyup)="applyFilter($event.target.value)">
     </mat-form-field>
     <mat-form-field>
-      <mat-label> Select Office </mat-label>
+      <mat-label> {{ 'labels.inputs.Select Office' | translate }} </mat-label>
       <mat-select [formControl]="officeSelector">
         <mat-option *ngFor="let office of officeData" [value]="office.id">
           {{ office.name }}
@@ -33,27 +33,27 @@
     <table mat-table [dataSource]="dataSource" matSort>
 
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Holiday Name </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Holiday Name' | translate }} </th>
         <td mat-cell *matCellDef="let holidays"> {{ holidays.name }} </td>
       </ng-container>
 
       <ng-container matColumnDef="fromDate">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Start Date </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Start Date' | translate }} </th>
-        <td mat-cell *matCellDef="let holidays"> {{ holidays.fromDate | dateFormat }} </td>
+        <td mat-cell *matCellDef="let holidays"> {{ holidays.fromDate  | dateFormat }} </td>
       </ng-container>
 
       <ng-container matColumnDef="toDate">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> End Date </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.End Date' | translate }} </th>
-        <td mat-cell *matCellDef="let holidays"> {{ holidays.toDate | dateFormat }} </td>
+        <td mat-cell *matCellDef="let holidays"> {{ holidays.toDate  | dateFormat }} </td>
       </ng-container>
 
       <ng-container matColumnDef="repaymentsRescheduledTo">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Repayments Scheduled To </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Repayments Scheduled To' | translate }} </th>
-        <td mat-cell *matCellDef="let holidays"> {{ holidays.reschedulingType === 1 ? 'Next Repayment Date' : holidays.repaymentsRescheduledTo | dateFormat }} </td>
+        <td mat-cell *matCellDef="let holidays"> {{ holidays.reschedulingType === 1 ? 'Next Repayment Date' : holidays.repaymentsRescheduledTo  | dateFormat }} </td>
       </ng-container>
 
       <ng-container matColumnDef="status">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Status </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Status' | translate }} </th>
         <td mat-cell *matCellDef="let holidays"> {{ holidays.status.value }} </td>
       </ng-container>
 
@@ -69,20 +69,20 @@
 </div>
 
 <ng-template #templateButtonCreateHoliday let-popover="popover">
-  <h2>Create Holiday</h2>
+  <h2>{{'labels.heading.Create Holiday' | translate }}</h2>
-  <p class="mw300">This option allows you to create holidays for different offices in your organization.</p>
+  <p class="mw300">{{'labels.text.Create holidays for different offices' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStep();">Back</button>
+    <button mat-raised-button color="primary" (click)="popover.close();previousStep();">{{'labels.buttons.Back' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilterRef,filterRef,'bottom', true);">Next</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilterRef,filterRef,'bottom', true);">{{'labels.buttons.Next' | translate }}</button>
   </div>
 </ng-template>
 
 <ng-template #templateFilterRef let-popover="popover">
-  <h4>Search bar to filter holidays based on different offices.</h4>
+  <h4>{{'labels.heading.Filter holidays' | translate }}</h4>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonCreateHoliday,buttonCreateHoliday,'bottom', true);">Back</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonCreateHoliday,buttonCreateHoliday,'bottom', true);">{{'labels.buttons.Back' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStep();">Next</button>
+    <button mat-raised-button color="primary" (click)="popover.close();nextStep();">{{'labels.buttons.Next' | translate }}</button>
   </div>
 </ng-template>

src/app/organization/holidays/view-holidays/view-holidays.component.html

@@ -2,16 +2,16 @@
     <span *mifosxHasPermission="'ACTIVATE_HOLIDAY'">
     <button mat-raised-button color="accent" (click)="activateHoliday()" *ngIf="holidayData.status.value !== 'Active'">
       <fa-icon icon="lock-open" class="m-r-10"></fa-icon>
-      Activate
+      {{'labels.buttons.Activate' | translate }}
     </button>
   </span>
     <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_HOLIDAY'">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    Edit
+    {{'labels.buttons.Edit' | translate }}
   </button>
     <button mat-raised-button color="warn" (click)="deleteHoliday()" *mifosxHasPermission="'DELETE_HOLIDAY'">
     <fa-icon icon="trash" class="m-r-10"></fa-icon>
-    Delete
+    {{'labels.buttons.Delete' | translate }}
   </button>
 </div>
 
@@ -24,7 +24,7 @@
             <div fxLayout="row wrap" class="content">
 
                 <div fxFlex="50%" class="header">
-                    Name
+                    {{ 'labels.inputs.Name' | translate }}
                 </div>
 
                 <div fxFlex="50%">
@@ -32,7 +32,7 @@
                 </div>
 
                 <div fxFlex="50%" class="header">
-                    From Date
+                    {{ 'labels.inputs.From Date' | translate }}
                 </div>
 
                 <div fxFlex="50%">
@@ -40,7 +40,7 @@
                 </div>
 
                 <div fxFlex="50%" class="header">
-                    To Date
+                    {{ 'labels.inputs.To Date' | translate }}
                 </div>
 
                 <div fxFlex="50%">
@@ -48,7 +48,7 @@
                 </div>
 
                 <div fxFlex="50%" class="header">
-                    Repayments Scheduled To
+                    {{ 'labels.inputs.Repayments Scheduled To' | translate }}
                 </div>
 
                 <div fxFlex="50%" *ngIf="holidayData.repaymentsRescheduledTo !== undefined && holidayData.repaymentsRescheduledTo !== null">
@@ -56,7 +56,7 @@
                 </div>
 
                 <div fxFlex="50%" *ngIf="holidayData.repaymentsRescheduledTo === undefined || holidayData.repaymentsRescheduledTo === null">
-                    Next Repayment Date
+                    {{ 'labels.inputs.Next Repayment Date' | translate }}
                 </div>
 
             </div>

src/app/organization/investors/investors.component.html

@@ -3,12 +3,12 @@
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
     <mat-form-field fxFlex="18%">
-      <mat-label>Search by Text</mat-label>
+      <mat-label>{{'labels.text.Search by Text' | translate}}</mat-label>
       <input matInput [formControl]="searchText">
     </mat-form-field>
 
     <mat-form-field fxFlex="18%" (click)="effectiveFromDatePicker.open()">
-      <mat-label>Effective Date From</mat-label>
+      <mat-label>{{'labels.text.Effective Date From' | translate}}</mat-label>
       <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="effectiveFromDatePicker"
         [formControl]="effectiveFromDate">
       <mat-datepicker-toggle matSuffix [for]="effectiveFromDatePicker"></mat-datepicker-toggle>
@@ -16,7 +16,7 @@
     </mat-form-field>
 
     <mat-form-field fxFlex="18%" (click)="effectiveToDatePicker.open()">
-      <mat-label>Effective Date To</mat-label>
+      <mat-label>{{'labels.text.Effective Date To' | translate}}</mat-label>
       <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="effectiveToDatePicker"
         [formControl]="effectiveToDate">
       <mat-datepicker-toggle matSuffix [for]="effectiveToDatePicker"></mat-datepicker-toggle>
@@ -24,7 +24,7 @@
     </mat-form-field>
 
     <mat-form-field fxFlex="18%" (click)="settlementFromDatePicker.open()">
-      <mat-label>Settlement Date From</mat-label>
+      <mat-label>{{'labels.text.Settlement Date From' | translate}}</mat-label>
       <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="settlementFromDatePicker"
         [formControl]="settlementFromDate">
       <mat-datepicker-toggle matSuffix [for]="settlementFromDatePicker"></mat-datepicker-toggle>
@@ -32,7 +32,7 @@
     </mat-form-field>
 
     <mat-form-field fxFlex="18%" (click)="settlementToDatePicker.open()">
-      <mat-label>Settlement Date To</mat-label>
+      <mat-label>{{'labels.text.Settlement Date To' | translate}}</mat-label>
       <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="settlementToDatePicker"
         [formControl]="settlementToDate">
       <mat-datepicker-toggle matSuffix [for]="settlementToDatePicker"></mat-datepicker-toggle>
@@ -41,7 +41,7 @@
 
     <div fxFlex="98%" class="center m-t-15">
       <button mat-raised-button color="primary" (click)="searchEAO()">
-        <fa-icon icon="search" class="m-r-10"></fa-icon> Search
+        <fa-icon icon="search" class="m-r-10"></fa-icon> {{'labels.buttons.Search' | translate}}
       </button>
     </div>
   </div>
@@ -61,15 +61,15 @@
                     <span class="m-l-10 status">{{record.status}}</span>
                   </div>
                 </td>
-                <td class="field-name"> Owner ExternalId </td>
+                <td class="field-name"> {{'labels.inputs.Owner External Id' | translate}} </td>
                 <td>
                   <mifosx-external-identifier externalId="{{record.owner.externalId}}"></mifosx-external-identifier>
                 </td>
-                <td class="field-name"> Transfer ExternalId </td>
+                <td class="field-name"> {{'labels.inputs.Transfer External Id' | translate}} </td>
                 <td>
                   <mifosx-external-identifier externalId="{{record.transferExternalId}}"></mifosx-external-identifier>
                 </td>
-                <td class="field-name"> Effective From </td>
+                <td class="field-name"> {{'labels.inputs.Effective From' | translate}} </td>
                 <td> {{ record.effectiveFrom | dateFormat }} </td>
               </tr>
             </table>
@@ -82,7 +82,7 @@
             <tbody>
               <tr>
                 <td fxFlex="25%" class="m-l-5">
-                  <b>Status :</b>
+                  <b>{{'labels.inputs.Status' | translate}} :</b>
                 </td>
                 <td fxFlex="25%" class="m-l-5 left">
                   <div [ngClass]="itemStatus(record.status)">
@@ -91,7 +91,7 @@
                   </div>
                 </td>
                 <td fxFlex="25%" class="m-l-5">
-                  <b>Owner External Id :</b>
+                  <b>{{'labels.inputs.Owner External Id' | translate}} :</b>
                 </td>
                 <td fxFlex="25%" class="m-l-5 left">
                   <mifosx-external-identifier externalId="{{record.owner.externalId}}" completed="true"></mifosx-external-identifier>
@@ -99,13 +99,13 @@
               </tr>
               <tr>
                 <td fxFlex="25%" class="m-l-5">
-                  <b>Settlement Date :</b>
+                  <b>{{'labels.inputs.Settlement Date' | translate}} :</b>
                 </td>
                 <td fxFlex="25%" class="m-l-5">
                   {{record.settlementDate | dateFormat}}
                 </td>
                 <td fxFlex="25%" class="m-l-5">
-                  <b>Effective Date :</b>
+                  <b>{{'labels.inputs.Effective Date' | translate}} :</b>
                 </td>
                 <td fxFlex="25%" class="m-l-5">
                   {{record.effectiveFrom | dateFormat}}
@@ -113,33 +113,33 @@
               </tr>
               <tr *ngIf="record.details">
                 <td fxFlex="25%" class="m-l-5">
-                  <b>Details :</b>
+                  <b>{{'labels.inputs.Details' | translate}} :</b>
                 </td>
                 <td fxFlex="75%" class="left">
                   <table>
                     <tbody>
                       <tr>
-                        <td fxFlex="50%" class="m-l-5"><b>Principal Outstanding :</b></td>
+                        <td fxFlex="50%" class="m-l-5"><b>{{'labels.inputs.Principal Outstanding' | translate}} :</b></td>
                         <td fxFlex="50%" class="r-amount">{{record.details.totalPrincipalOutstanding | formatNumber}}</td>
                       </tr>
                       <tr>
-                        <td fxFlex="50%" class="m-l-5"><b>Interest Outstanding :</b></td>
+                        <td fxFlex="50%" class="m-l-5"><b>{{'labels.inputs.Interest Outstanding' | translate}} :</b></td>
                         <td fxFlex="50%" class="r-amount">{{record.details.totalInterestOutstanding | formatNumber}}</td>
                       </tr>
                       <tr>
-                        <td fxFlex="50%" class="m-l-5"><b>Fees Outstanding :</b></td>
+                        <td fxFlex="50%" class="m-l-5"><b>{{'labels.inputs.Fees Outstanding' | translate}} :</b></td>
                         <td fxFlex="50%" class="r-amount">{{record.details.totalFeeChargesOutstanding | formatNumber}}</td>
                       </tr>
                       <tr>
-                        <td fxFlex="50%" class="m-l-5"><b>Penalties Outstanding :</b></td>
+                        <td fxFlex="50%" class="m-l-5"><b>{{'labels.inputs.Penalties Outstanding' | translate}} :</b></td>
                         <td fxFlex="50%" class="r-amount">{{record.details.totalPenaltyChargesOutstanding | formatNumber}}</td>
                       </tr>
                       <tr>
-                        <td fxFlex="50%" class="m-l-5"><b>Outstanding :</b></td>
+                        <td fxFlex="50%" class="m-l-5"><b>{{'labels.inputs.Outstanding' | translate}} :</b></td>
                         <td fxFlex="50%" class="r-amount">{{record.details.totalOutstanding | formatNumber}}</td>
                       </tr>
                       <tr>
-                        <td fxFlex="50%" class="m-l-5"><b>Overpaid :</b></td>
+                        <td fxFlex="50%" class="m-l-5"><b>{{'labels.inputs.Overpaid' | translate}} :</b></td>
                         <td fxFlex="50%" class="r-amount">{{record.details.totalOverpaid | formatNumber}}</td>
                       </tr>
                     </tbody>
@@ -153,7 +153,7 @@
         <mat-divider [inset]="true"></mat-divider>
 
         <div class="record-actions" fxLayout="row" fxLayoutAlign="flex-end" *ngIf="canBeCancelled(record)">
-          <button mat-button color="warn" (click)="cancelPendingSale(record)" matTooltip="Cancel Pending Sale">
+          <button mat-button color="warn" (click)="cancelPendingSale(record)" matTooltip="{{'labels.text.Cancel Pending Sale' | translate}}">
             <fa-icon icon="trash"></fa-icon>
           </button>
         </div>
@@ -168,7 +168,7 @@
   <div class="alert" *ngIf="!existsDataToFilter">
     <div class="message">
       <i class="fa fa-exclamation-circle alert-check"></i>
-      No data was found
+      {{'labels.text.No data found' | translate}}
     </div>
   </div>
 

src/app/organization/loan-provisioning-criteria/create-loan-provisioning-criteria/create-loan-provisioning-criteria.component.html

@@ -9,15 +9,15 @@
         <div fxLayout="row" fxLayoutGap="2%">
 
           <mat-form-field fxFlex>
-            <mat-label>Provisioning Criteria</mat-label>
+            <mat-label>{{ 'labels.inputs.Provisioning Criteria' | translate }}</mat-label>
             <input required matInput formControlName="criteriaName">
             <mat-error *ngIf="provisioningCriteriaForm.controls.criteriaName.hasError('required')">
-              Provisioning Criteria is <strong>required</strong>
+              {{ 'labels.inputs.Provisioning Criteria' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex>
-            <mat-label>Selected Products</mat-label>
+            <mat-label>{{ 'labels.inputs.Selected Products' | translate }}</mat-label>
             <mat-select formControlName="loanProducts" multiple>
               <mat-option *ngFor="let product of loanProvisioningCriteriaTemplate.loanProducts" [value]="product">
                 {{ product.name }}
@@ -33,46 +33,47 @@
 
     <div class="mat-elevation-z1">
 
-      <mat-hint *ngIf="!provisioningCriteriaFormValid">Please fill all provisioning criteria definitions.</mat-hint>
+      <mat-hint *ngIf="!provisioningCriteriaFormValid">
+        {{ 'labels.text.Provisioning criteria definitions' | translate }}</mat-hint>
 
       <table mat-table class="m-t-10" [dataSource]="definitions">
 
         <ng-container matColumnDef="category">
-          <th mat-header-cell *matHeaderCellDef> Category </th>
+          <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Category' | translate }} </th>
           <td mat-cell *matCellDef="let definition"> {{ definition.categoryName }} </td>
         </ng-container>
 
         <ng-container matColumnDef="minAge">
-          <th mat-header-cell *matHeaderCellDef> Min Age </th>
+          <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Min Age' | translate }} </th>
           <td mat-cell *matCellDef="let definition"> {{ definition.minAge || '0' }} </td>
         </ng-container>
 
         <ng-container matColumnDef="maxAge">
-          <th mat-header-cell *matHeaderCellDef> Max Age </th>
+          <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Max Age' | translate }} </th>
           <td mat-cell *matCellDef="let definition"> {{ definition.maxAge || '0' }} </td>
         </ng-container>
 
         <ng-container matColumnDef="percentage">
-          <th mat-header-cell *matHeaderCellDef> Percentage (%)</th>
+          <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Percentage' | translate }} (%)</th>
           <td mat-cell *matCellDef="let definition"> {{ definition.provisioningPercentage || '0' }} </td>
         </ng-container>
 
         <ng-container matColumnDef="liabilityAccount">
-          <th mat-header-cell *matHeaderCellDef> Liability Account </th>
+          <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Liability Account' | translate }} </th>
           <td mat-cell *matCellDef="let definition"> {{ (definition.liabilityAccount | find:loanProvisioningCriteriaTemplate.glAccounts:'id':'name') || '-' }} </td>
         </ng-container>
 
         <ng-container matColumnDef="expenseAccount">
-          <th mat-header-cell *matHeaderCellDef> Expense Account </th>
+          <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Expense Account' | translate }} </th>
           <td mat-cell *matCellDef="let definition"> {{ (definition.expenseAccount | find:loanProvisioningCriteriaTemplate.glAccounts:'id':'name') || '-' }} </td>
         </ng-container>
 
         <ng-container matColumnDef="edit">
-          <th mat-header-cell *matHeaderCellDef> Actions </th>
+          <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Actions' | translate }} </th>
           <td mat-cell *matCellDef="let definition">
             <button mat-button color="primary" (click)="editDefinition(definition)">
               <fa-icon icon="edit" class="m-r-10"></fa-icon>
-              Edit
+              {{'labels.buttons.Edit' | translate }}
             </button>
           </td>
         </ng-container>
@@ -85,8 +86,8 @@
     </div>
 
     <div class="m-t-20" fxLayout="row" fxLayoutAlign="center" fxLayoutGap="20px">
-      <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
+      <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate }}</button>
-      <button mat-raised-button color="primary" [disabled]="!provisioningCriteriaFormValid" (click)="submit()" *mifosxHasPermission="'CREATE_PROVISIONING_CRITERIA'">Submit</button>
+      <button mat-raised-button color="primary" [disabled]="!provisioningCriteriaFormValid" (click)="submit()" *mifosxHasPermission="'CREATE_PROVISIONING_CRITERIA'">{{'labels.buttons.Submit' | translate }}</button>
     </div>
 
   </mat-card>

src/app/organization/loan-provisioning-criteria/edit-loan-provisioning-criteria/edit-loan-provisioning-criteria.component.html

@@ -9,15 +9,15 @@
         <div fxLayout="row" fxLayoutGap="2%">
 
           <mat-form-field fxFlex>
-            <mat-label>Provisioning Criteria</mat-label>
+            <mat-label>{{ 'labels.inputs.Provisioning Criteria' | translate }}</mat-label>
             <input required matInput formControlName="criteriaName">
             <mat-error *ngIf="provisioningCriteriaForm.controls.criteriaName.hasError('required')">
-              Provisioning Criteria is <strong>required</strong>
+              {{ 'labels.inputs.Provisioning Criteria' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex>
-            <mat-label>Selected Products</mat-label>
+            <mat-label>{{ 'labels.inputs.Selected Products' | translate }}</mat-label>
             <mat-select formControlName="loanProducts" [compareWith]="compareOptions" multiple>
               <mat-option *ngFor="let product of loanProducts" [value]="product">
                 {{ product.name }}
@@ -33,46 +33,46 @@
 
     <div class="mat-elevation-z1">
 
-      <mat-hint *ngIf="!provisioningCriteriaFormValid">Please fill all provisioning criteria definitions.</mat-hint>
+      <mat-hint *ngIf="!provisioningCriteriaFormValid">{{ 'labels.text.Provisioning criteria definitions' | translate }}</mat-hint>
 
       <table mat-table class="m-t-10" [dataSource]="definitions">
 
         <ng-container matColumnDef="category">
-          <th mat-header-cell *matHeaderCellDef> Category </th>
+          <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Category' | translate }} </th>
           <td mat-cell *matCellDef="let definition"> {{ definition.categoryName }} </td>
         </ng-container>
 
         <ng-container matColumnDef="minAge">
-          <th mat-header-cell *matHeaderCellDef> Min Age </th>
+          <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Min Age' | translate }} </th>
           <td mat-cell *matCellDef="let definition"> {{ definition.minAge || '0' }} </td>
         </ng-container>
 
         <ng-container matColumnDef="maxAge">
-          <th mat-header-cell *matHeaderCellDef> Max Age </th>
+          <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Max Age' | translate }} </th>
           <td mat-cell *matCellDef="let definition"> {{ definition.maxAge || '0' }} </td>
         </ng-container>
 
         <ng-container matColumnDef="percentage">
-          <th mat-header-cell *matHeaderCellDef> Percentage (%)</th>
+          <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Percentage' | translate }} (%)</th>
           <td mat-cell *matCellDef="let definition"> {{ definition.provisioningPercentage || '0' }} </td>
         </ng-container>
 
         <ng-container matColumnDef="liabilityAccount">
-          <th mat-header-cell *matHeaderCellDef> Liability Account </th>
+          <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Liability Account' | translate }} </th>
           <td mat-cell *matCellDef="let definition"> {{ (definition.liabilityAccount | find:loanProvisioningCriteriaAndTemplate.glAccounts:'id':'name') || '-' }} </td>
         </ng-container>
 
         <ng-container matColumnDef="expenseAccount">
-          <th mat-header-cell *matHeaderCellDef> Expense Account </th>
+          <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Expense Account' | translate }} </th>
           <td mat-cell *matCellDef="let definition"> {{ (definition.expenseAccount | find:loanProvisioningCriteriaAndTemplate.glAccounts:'id':'name') || '-' }} </td>
         </ng-container>
 
         <ng-container matColumnDef="edit">
-          <th mat-header-cell *matHeaderCellDef> Actions </th>
+          <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Actions' | translate }} </th>
           <td mat-cell *matCellDef="let definition">
             <button mat-button color="primary" (click)="editDefinition(definition)">
               <fa-icon icon="edit" class="m-r-10"></fa-icon>
-              Edit
+              {{'labels.buttons.Edit' | translate }}
             </button>
           </td>
         </ng-container>
@@ -85,8 +85,8 @@
     </div>
 
     <div class="m-t-20" fxLayout="row" fxLayoutAlign="center" fxLayoutGap="20px">
-      <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
+      <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate }}</button>
-      <button mat-raised-button color="primary" [disabled]="!provisioningCriteriaFormValid" (click)="submit()" *mifosxHasPermission="'UPDATE_CRITERIA'">Submit</button>
+      <button mat-raised-button color="primary" [disabled]="!provisioningCriteriaFormValid" (click)="submit()" *mifosxHasPermission="'UPDATE_CRITERIA'">{{'labels.buttons.Submit' | translate }}</button>
     </div>
 
   </mat-card>

src/app/organization/loan-provisioning-criteria/loan-provisioning-criteria.component.html

@@ -1,7 +1,7 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
   <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_PROVISIONING_CRITERIA'">
     <fa-icon icon="plus" class="m-r-10"></fa-icon>
-    Create Provisioning Criteria
+    {{'labels.buttons.Create Provisioning Criteria' | translate }}
   </button>
 </div>
 
@@ -19,12 +19,12 @@
     <table mat-table [dataSource]="dataSource" matSort>
 
       <ng-container matColumnDef="criteriaName">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.name' | translate }} </th>
         <td mat-cell *matCellDef="let loanProvisioningCriteria"> {{ loanProvisioningCriteria.criteriaName }} </td>
       </ng-container>
 
       <ng-container matColumnDef="createdBy">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Created By </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Created By' | translate }} </th>
         <td mat-cell *matCellDef="let loanProvisioningCriteria"> {{ loanProvisioningCriteria.createdBy }} </td>
       </ng-container>
 

src/app/organization/loan-provisioning-criteria/view-loan-provisioning-criteria/view-loan-provisioning-criteria.component.html

@@ -1,11 +1,11 @@
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
   <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_CRITERIA'">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    Edit
+    {{'labels.buttons.Edit' | translate }}
   </button>
   <button mat-raised-button color="warn" (click)="deleteCriteria()" *mifosxHasPermission="'DELETE_CRITERIA'">
     <fa-icon icon="trash" class="m-r-10"></fa-icon>
-    Delete
+    {{'labels.buttons.Delete' | translate }}
   </button>
 </div>
 
@@ -21,7 +21,7 @@
         <mat-divider [inset]="true"></mat-divider>
 
          <div fxFlexFill class="loanProduct">
-          <span fxFlex="40%">Loan Product:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Loan Product' | translate }}:</span>
           <span fxFlex="60%">{{ loanProducts }}</span>
         </div>
 
@@ -32,32 +32,32 @@
         <table mat-table class="mat-elevation-z1" [dataSource]="dataSource">
 
           <ng-container matColumnDef="category">
-            <th mat-header-cell *matHeaderCellDef> Category </th>
+            <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Category' | translate }} </th>
             <td mat-cell *matCellDef="let provisioningData"> {{provisioningData.categoryName}} </td>
           </ng-container>
 
           <ng-container matColumnDef="minAge">
-            <th mat-header-cell *matHeaderCellDef> Min Age </th>
+            <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Min Age' | translate }} </th>
             <td mat-cell *matCellDef="let provisioningData"> {{provisioningData.minAge}} </td>
           </ng-container>
 
           <ng-container matColumnDef="maxAge">
-            <th mat-header-cell *matHeaderCellDef> Max Age </th>
+            <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Max Age' | translate }} </th>
             <td mat-cell *matCellDef="let provisioningData"> {{provisioningData.maxAge}} </td>
           </ng-container>
 
           <ng-container matColumnDef="percentage">
-            <th mat-header-cell *matHeaderCellDef> Percentage </th>
+            <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Percentage' | translate }} </th>
             <td mat-cell *matCellDef="let provisioningData"> {{provisioningData.provisioningPercentage}} </td>
           </ng-container>
 
           <ng-container matColumnDef="liabilityAccount">
-            <th mat-header-cell *matHeaderCellDef> Liability Account </th>
+            <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Liability Account' | translate }} </th>
             <td mat-cell *matCellDef="let provisioningData"> {{provisioningData.liabilityName}} </td>
           </ng-container>
 
           <ng-container matColumnDef="expenseAccount">
-            <th mat-header-cell *matHeaderCellDef> Expense Account </th>
+            <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Expense Account' | translate }} </th>
             <td mat-cell *matCellDef="let provisioningData"> {{provisioningData.expenseName}} </td>
           </ng-container>
 

src/app/organization/manage-funds/create-fund/create-fund.component.html

@@ -9,15 +9,15 @@
         <div fxLayout="column">
 
           <mat-form-field>
-            <mat-label>Name</mat-label>
+            <mat-label>{{ 'labels.inputs.name' | translate }}</mat-label>
             <input matInput required autofocus formControlName="name">
             <mat-error *ngIf="fundForm.controls.name.hasError('required')">
-              Name <strong>is required</strong>
+              {{ 'labels.inputs.name' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>External Id</mat-label>
+            <mat-label>{{ 'labels.inputs.External Id' | translate }}</mat-label>
             <input matInput autofocus formControlName="externalId">
           </mat-form-field>
 
@@ -26,8 +26,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 type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate }}</button>
-        <button mat-raised-button color="primary" [disabled]="!fundForm.valid" *mifosxHasPermission="'CREATE_FUND'">Submit</button>
+        <button mat-raised-button color="primary" [disabled]="!fundForm.valid" *mifosxHasPermission="'CREATE_FUND'">{{'labels.buttons.Submit' | translate }}</button>
       </mat-card-actions>
 
     </form>