Loan and Savings products translations

src/app/core/utils/accounting.ts

@@ -9,7 +9,11 @@ import { OptionData } from 'app/shared/models/option-data.model';
   export class Accounting {
 
     public getAccountingRulesForSavings(): string[] {
-        return ['None', 'Cash', 'Accrual (periodic)'];
+        return ['NONE', 'Cash', 'Accrual (periodic)'];
+    }
+
+    public getAccountingRulesForLoans(): string[] {
+        return ['NONE', 'Cash', 'Accrual (periodic)', 'Accrual (upfront)'];
     }
 
     public isNoneAccounting(accountingRule: OptionData): boolean {

src/app/products/loan-products/common/loan-product-summary/loan-product-summary.component.ts

@@ -4,6 +4,7 @@ import { AccountingMapping, Charge, ChargeToIncomeAccountMapping, GLAccount, Pay
 import { AdvancePaymentAllocationData, CreditAllocation, PaymentAllocation } from '../../loan-product-stepper/loan-product-payment-strategy-step/payment-allocation-model';
 import { LoanProducts } from '../../loan-products';
 import { CodeName, OptionData } from '../../../../shared/models/option-data.model';
+import { Accounting } from 'app/core/utils/accounting';
 
 @Component({
   selector: 'mifosx-loan-product-summary',
@@ -23,7 +24,7 @@ export class LoanProductSummaryComponent implements OnInit, OnChanges {
   chargesDisplayedColumns: string[] = ['name', 'chargeCalculationType', 'amount', 'chargeTimeType'];
   paymentFundSourceDisplayedColumns: string[] = ['paymentTypeId', 'fundSourceAccountId'];
   feesPenaltyIncomeDisplayedColumns: string[] = ['chargeId', 'incomeAccountId'];
-  accountingRuleData = ['None', 'Cash', 'Accrual (periodic)', 'Accrual (upfront)'];
+  accountingRuleData: string[] = [];
 
   isAdvancedPaymentAllocation = false;
 
@@ -34,9 +35,10 @@ export class LoanProductSummaryComponent implements OnInit, OnChanges {
   feeToIncomeAccountMappings: ChargeToIncomeAccountMapping[] = [];
   penaltyToIncomeAccountMappings: ChargeToIncomeAccountMapping[] = [];
 
-  constructor() { }
+  constructor(private accounting: Accounting) { }
 
   ngOnInit() {
+    this.accountingRuleData = this.accounting.getAccountingRulesForLoans();
     this.setCurrentValues();
   }
 

src/app/products/loan-products/create-loan-product/create-loan-product.component.html

@@ -24,7 +24,7 @@
 
     <mat-step [stepControl]="loanProductDetailsForm">
 
-      <ng-template matStepLabel>DETAILS</ng-template>
+      <ng-template matStepLabel>{{'labels.inputs.DETAILS' | translate}}</ng-template>
 
       <mifosx-loan-product-details-step [loanProductsTemplate]="loanProductsTemplate"></mifosx-loan-product-details-step>
 
@@ -32,7 +32,7 @@
 
     <mat-step [stepControl]="loanProductCurrencyForm">
 
-      <ng-template matStepLabel>CURRENCY</ng-template>
+      <ng-template matStepLabel>{{'labels.inputs.CURRENCY' | translate}}</ng-template>
 
       <mifosx-loan-product-currency-step [loanProductsTemplate]="loanProductsTemplate"></mifosx-loan-product-currency-step>
 
@@ -40,7 +40,7 @@
 
     <mat-step [stepControl]="loanProductSettingsForm">
 
-      <ng-template matStepLabel>SETTINGS</ng-template>
+      <ng-template matStepLabel>{{'labels.inputs.SETTINGS' | translate}}</ng-template>
 
       <mifosx-loan-product-settings-step
         [loanProductsTemplate]="loanProductsTemplate"
@@ -53,7 +53,7 @@
 
     <mat-step *ngIf="isAdvancedPaymentStrategy">
 
-      <ng-template matStepLabel>PAYMENT ALLOCATION</ng-template>
+      <ng-template matStepLabel>{{'labels.inputs.PAYMENT ALLOCATION' | translate}}</ng-template>
 
       <mifosx-loan-product-payment-strategy-step
       [advancedPaymentAllocations]="advancedPaymentAllocations"
@@ -73,7 +73,7 @@
 
     <mat-step [stepControl]="loanProductTermsForm">
 
-      <ng-template matStepLabel>TERMS</ng-template>
+      <ng-template matStepLabel>{{'labels.inputs.TERMS' | translate}}</ng-template>
 
       <mifosx-loan-product-terms-step [loanProductsTemplate]="loanProductsTemplate"></mifosx-loan-product-terms-step>
 
@@ -81,7 +81,7 @@
 
     <mat-step>
 
-      <ng-template matStepLabel>CHARGES</ng-template>
+      <ng-template matStepLabel>{{'labels.inputs.CHARGES' | translate}}</ng-template>
 
       <mifosx-loan-product-charges-step
         [loanProductsTemplate]="loanProductsTemplate"
@@ -94,7 +94,7 @@
 
     <mat-step [stepControl]="loanProductAccountingForm">
 
-      <ng-template matStepLabel>ACCOUNTING</ng-template>
+      <ng-template matStepLabel>{{'labels.inputs.ACCOUNTING' | translate}}</ng-template>
 
       <mifosx-loan-product-accounting-step
         [loanProductsTemplate]="loanProductsTemplate"
@@ -107,7 +107,7 @@
 
     <mat-step state="preview" *ngIf="loanProductFormValid" completed>
 
-      <ng-template matStepLabel>PREVIEW</ng-template>
+      <ng-template matStepLabel>{{'labels.inputs.PREVIEW' | translate}}</ng-template>
 
       <mifosx-loan-product-preview-step
         [loanProductsTemplate]="loanProductsTemplate"

src/app/products/loan-products/create-loan-product/create-loan-product.component.ts

@@ -14,6 +14,7 @@ import { LoanProductAccountingStepComponent } from '../loan-product-stepper/loan
 import { ProductsService } from 'app/products/products.service';
 import { LoanProducts } from '../loan-products';
 import { AdvancedPaymentAllocation, AdvancedPaymentStrategy, PaymentAllocation } from '../loan-product-stepper/loan-product-payment-strategy-step/payment-allocation-model';
+import { Accounting } from 'app/core/utils/accounting';
 
 @Component({
   selector: 'mifosx-create-loan-product',
@@ -30,7 +31,7 @@ export class CreateLoanProductComponent implements OnInit {
   @ViewChild(LoanProductAccountingStepComponent, { static: true }) loanProductAccountingStep: LoanProductAccountingStepComponent;
 
   loanProductsTemplate: any;
-  accountingRuleData = ['None', 'Cash', 'Accrual (periodic)', 'Accrual (upfront)'];
+  accountingRuleData: string[] = [];
   itemsByDefault: any[] = [];
 
   isAdvancedPaymentStrategy = false;
@@ -49,6 +50,7 @@ export class CreateLoanProductComponent implements OnInit {
               private productsService: ProductsService,
               private loanProducts: LoanProducts,
               private router: Router,
+              private accounting: Accounting,
               private advancedPaymentStrategy: AdvancedPaymentStrategy) {
     this.route.data.subscribe((data: { loanProductsTemplate: any, configurations: any }) => {
       this.loanProductsTemplate = data.loanProductsTemplate;
@@ -63,6 +65,7 @@ export class CreateLoanProductComponent implements OnInit {
   }
 
   ngOnInit() {
+    this.accountingRuleData = this.accounting.getAccountingRulesForLoans();
     this.buildAdvancedPaymentAllocation();
   }
 

src/app/products/loan-products/edit-loan-product/edit-loan-product.component.html

@@ -24,7 +24,7 @@
 
       <mat-step [stepControl]="loanProductDetailsForm" completed>
 
-        <ng-template matStepLabel>DETAILS</ng-template>
+        <ng-template matStepLabel>{{'labels.inputs.DETAILS' | translate}}</ng-template>
 
         <mifosx-loan-product-details-step [loanProductsTemplate]="loanProductAndTemplate"></mifosx-loan-product-details-step>
 
@@ -32,7 +32,7 @@
 
       <mat-step [stepControl]="loanProductCurrencyForm" completed>
 
-        <ng-template matStepLabel>CURRENCY</ng-template>
+        <ng-template matStepLabel>{{'labels.inputs.CURRENCY' | translate}}</ng-template>
 
         <mifosx-loan-product-currency-step [loanProductsTemplate]="loanProductAndTemplate"></mifosx-loan-product-currency-step>
 
@@ -40,7 +40,7 @@
 
       <mat-step [stepControl]="loanProductSettingsForm" completed>
 
-        <ng-template matStepLabel>SETTINGS</ng-template>
+        <ng-template matStepLabel>{{'labels.inputs.SETTINGS' | translate}}</ng-template>
 
         <mifosx-loan-product-settings-step
           [loanProductsTemplate]="loanProductAndTemplate"
@@ -53,7 +53,7 @@
 
       <mat-step *ngIf="isAdvancedPaymentStrategy" completed>
 
-        <ng-template matStepLabel>PAYMENT ALLOCATION</ng-template>
+        <ng-template matStepLabel>{{'labels.inputs.PAYMENT ALLOCATION' | translate}}</ng-template>
 
         <mifosx-loan-product-payment-strategy-step
           [advancedPaymentAllocations]="advancedPaymentAllocations"
@@ -73,7 +73,7 @@
 
       <mat-step [stepControl]="loanProductTermsForm" completed>
 
-        <ng-template matStepLabel>TERMS</ng-template>
+        <ng-template matStepLabel>{{'labels.inputs.TERMS' | translate}}</ng-template>
 
         <mifosx-loan-product-terms-step [loanProductsTemplate]="loanProductAndTemplate"></mifosx-loan-product-terms-step>
 
@@ -81,7 +81,7 @@
 
       <mat-step completed>
 
-        <ng-template matStepLabel>CHARGES</ng-template>
+        <ng-template matStepLabel>{{'labels.inputs.CHARGES' | translate}}</ng-template>
 
         <mifosx-loan-product-charges-step
           [loanProductsTemplate]="loanProductAndTemplate"
@@ -94,7 +94,7 @@
 
       <mat-step [stepControl]="loanProductAccountingForm" completed>
 
-        <ng-template matStepLabel>ACCOUNTING</ng-template>
+        <ng-template matStepLabel>{{'labels.inputs.ACCOUNTING' | translate}}</ng-template>
 
         <mifosx-loan-product-accounting-step
           [loanProductsTemplate]="loanProductAndTemplate"
@@ -107,7 +107,7 @@
 
       <mat-step state="preview" *ngIf="loanProductFormValidAndNotPristine" completed>
 
-        <ng-template matStepLabel>PREVIEW</ng-template>
+        <ng-template matStepLabel>{{'labels.inputs.PREVIEW' | translate}}</ng-template>
 
         <mifosx-loan-product-preview-step
           [loanProductsTemplate]="loanProductAndTemplate"

src/app/products/loan-products/edit-loan-product/edit-loan-product.component.ts

@@ -15,6 +15,7 @@ import { ProductsService } from 'app/products/products.service';
 import { GlobalConfiguration } from 'app/system/configurations/global-configurations-tab/configuration.model';
 import { LoanProducts } from '../loan-products';
 import { AdvancedCreditAllocation, AdvancedPaymentAllocation, AdvancedPaymentStrategy, CreditAllocation, PaymentAllocation, PaymentAllocationOrder, PaymentAllocationTransactionTypes } from '../loan-product-stepper/loan-product-payment-strategy-step/payment-allocation-model';
+import { Accounting } from 'app/core/utils/accounting';
 
 @Component({
   selector: 'mifosx-edit-loan-product',
@@ -31,7 +32,7 @@ export class EditLoanProductComponent implements OnInit {
   @ViewChild(LoanProductAccountingStepComponent, { static: true }) loanProductAccountingStep: LoanProductAccountingStepComponent;
 
   loanProductAndTemplate: any;
-  accountingRuleData = ['None', 'Cash', 'Accrual (periodic)', 'Accrual (upfront)'];
+  accountingRuleData: string[] = [];
   itemsByDefault: GlobalConfiguration[] = [];
 
   isAdvancedPaymentStrategy = false;
@@ -52,6 +53,7 @@ export class EditLoanProductComponent implements OnInit {
               private productsService: ProductsService,
               private loanProducts: LoanProducts,
               private router: Router,
+              private accounting: Accounting,
               private advancedPaymentStrategy: AdvancedPaymentStrategy) {
     this.route.data.subscribe((data: { loanProductAndTemplate: any, configurations: any }) => {
       this.loanProductAndTemplate = data.loanProductAndTemplate;
@@ -66,6 +68,7 @@ export class EditLoanProductComponent implements OnInit {
   }
 
   ngOnInit() {
+    this.accountingRuleData = this.accounting.getAccountingRulesForLoans();
     this.buildAdvancedPaymentAllocation();
     this.advancePaymentStrategy(this.loanProductAndTemplate.transactionProcessingStrategyCode);
     if (this.isAdvancedPaymentStrategy) {

src/app/products/loan-products/loan-product-stepper/loan-product-accounting-step/loan-product-accounting-step.component.html

@@ -4,7 +4,7 @@
 
     <mat-radio-group fxFlex="98%" fxLayout="row" fxLayoutGap="5%" fxLayout.lt-md="column" formControlName="accountingRule">
       <mat-radio-button *ngFor="let accountingRule of accountingRuleData; let i =  index" [value]="i+1">
-        {{ accountingRule }}
+        {{ 'labels.accounting.' + accountingRule | translate }}
       </mat-radio-button>
     </mat-radio-group>
 
@@ -202,37 +202,37 @@
 
       <mat-divider fxFlex="98%"></mat-divider>
 
-      <mat-checkbox fxFlex="73%" formControlName="advancedAccountingRules">Advanced Accounting Rules</mat-checkbox>
+      <mat-checkbox fxFlex="73%" formControlName="advancedAccountingRules">{{'labels.heading.Advanced Accounting Rules' | translate}}</mat-checkbox>
 
       <div *ngIf="loanProductAccountingForm.value.advancedAccountingRules" fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
-        <h4 fxFlex="33%" class="mat-h4">Configure Fund Sources for Payment Channels</h4>
+        <h4 fxFlex="33%" class="mat-h4">{{'labels.heading.Configure Fund Sources for Payment Channels' | translate}}</h4>
 
         <div fxFlex="63%">
           <button type="button" mat-raised-button color="primary" (click)="add('PaymentFundSource', paymentChannelToFundSourceMappings)">
             <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]="paymentChannelToFundSourceMappings.value" *ngIf="paymentChannelToFundSourceMappings.value.length !== 0">
 
           <ng-container matColumnDef="paymentTypeId">
-            <th mat-header-cell *matHeaderCellDef> Payment Type </th>
+            <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Payment Type' | translate}} </th>
             <td mat-cell *matCellDef="let paymentFundSource">
               {{ paymentFundSource.paymentTypeId | find:paymentTypeData:'id':'name' }}
             </td>
           </ng-container>
 
           <ng-container matColumnDef="fundSourceAccountId">
-            <th mat-header-cell *matHeaderCellDef> Fund Source </th>
+            <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Fund Source' | translate}} </th>
             <td mat-cell *matCellDef="let paymentFundSource">
               {{ paymentFundSource.fundSourceAccountId | find:assetAccountData:'id':'name' }}
             </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 paymentFundSource; let i = index">
               <button mat-icon-button color="primary" (click)="edit('PaymentFundSource', paymentChannelToFundSourceMappings, i)">
                 <fa-icon icon="edit"></fa-icon>
@@ -248,33 +248,33 @@
 
         </table>
 
-        <h4 fxFlex="33%" class="mat-h4">Map Fees to Specific Income Accounts</h4>
+        <h4 fxFlex="33%" class="mat-h4">{{'labels.heading.Map Fees to Specific Income Accounts' | translate}}</h4>
 
         <div fxFlex="63%">
           <button type="button" mat-raised-button color="primary" (click)="add('FeesIncome', feeToIncomeAccountMappings)">
             <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]="feeToIncomeAccountMappings.value" *ngIf="feeToIncomeAccountMappings.value.length !== 0">
 
           <ng-container matColumnDef="chargeId">
-            <th mat-header-cell *matHeaderCellDef> Fees </th>
+            <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Fees' | translate}} </th>
             <td mat-cell *matCellDef="let feesIncome">
               {{ feesIncome.chargeId | find:chargeData:'id':'name' }}
             </td>
           </ng-container>
 
           <ng-container matColumnDef="incomeAccountId">
-            <th mat-header-cell *matHeaderCellDef> Income Account </th>
+            <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Income Account' | translate}} </th>
             <td mat-cell *matCellDef="let feesIncome">
               {{ feesIncome.incomeAccountId | find:incomeAndLiabilityAccountData:'id':'name' }}
             </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 feesIncome; let i = index">
               <button mat-icon-button color="primary" (click)="edit('FeesIncome', feeToIncomeAccountMappings, i)">
                 <fa-icon icon="edit"></fa-icon>
@@ -290,12 +290,12 @@
 
         </table>
 
-        <h4 fxFlex="33%" class="mat-h4">Map Penalties to Specific Income Accounts</h4>
+        <h4 fxFlex="33%" class="mat-h4">{{'labels.heading.Map Penalties to Specific Income Accounts' | translate}}</h4>
 
         <div fxFlex="63%">
           <button type="button" mat-raised-button color="primary" (click)="add('PenaltyIncome', penaltyToIncomeAccountMappings)">
             <fa-icon icon="plus" class="m-r-10"></fa-icon>
-            Add
+            {{'labels.buttons.Add' | translate}}
           </button>
         </div>
 
@@ -303,21 +303,21 @@
         <table fxFlex="98%" class="mat-elevation-z1" mat-table [dataSource]="penaltyToIncomeAccountMappings.value" *ngIf="penaltyToIncomeAccountMappings.value.length !== 0">
 
           <ng-container matColumnDef="chargeId">
-            <th mat-header-cell *matHeaderCellDef> Penalty </th>
+            <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Penalty' | translate}} </th>
             <td mat-cell *matCellDef="let penaltyIncome">
               {{ penaltyIncome.chargeId | find:penaltyData:'id':'name' }}
             </td>
           </ng-container>
 
           <ng-container matColumnDef="incomeAccountId">
-            <th mat-header-cell *matHeaderCellDef> Income Account </th>
+            <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Income Account' | translate}} </th>
             <td mat-cell *matCellDef="let penaltyIncome">
               {{ penaltyIncome.incomeAccountId | find:incomeAccountData:'id':'name' }}
             </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 penaltyIncome; let i = index">
               <button mat-icon-button color="primary" (click)="edit('PenaltyIncome', penaltyToIncomeAccountMappings, i)">
                 <fa-icon icon="edit"></fa-icon>
@@ -342,12 +342,11 @@
   <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]="!loanProductFormValid">
-      Next
+      {{'labels.buttons.Next' | translate}}
       <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
     </button>
   </div>
-
 </form>

src/app/products/loan-products/loan-product-stepper/loan-product-charges-step/loan-product-charges-step.component.html

@@ -1,9 +1,11 @@
 <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:multiDisburseLoan.value" [value]="charge">
+      <mat-option
+        *ngFor="let charge of chargeData | chargesFilter:chargesDataSource:currencyCode.value:multiDisburseLoan.value"
+        [value]="charge">
         {{ charge.name }}
       </mat-option>
     </mat-select>
@@ -12,42 +14,43 @@
   <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 | chargesPenaltyFilter:false" #chargesTable [hidden]="chargesTable.dataSource.length === 0">
+  <table fxFlex="98%" class="mat-elevation-z1" mat-table [dataSource]="chargesDataSource | chargesPenaltyFilter:false"
+    #chargesTable [hidden]="chargesTable.dataSource.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 }}
       </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>
     </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>
@@ -63,57 +66,60 @@
   <mat-divider fxFlex="98%"></mat-divider>
 
   <div fxFlex="98%">
-    <h3 class="mat-h3">Overdue Charges</h3>
+    <h3 class="mat-h3">{{'labels.inputs.Overdue Charges' | translate}}</h3>
   </div>
 
   <mat-form-field fxFlex="48%">
-    <mat-label>Overdue Charge</mat-label>
+    <mat-label>{{'labels.inputs.Overdue Charge' | translate}}</mat-label>
     <mat-select #overdueCharge>
-      <mat-option *ngFor="let overdueCharge of overdueChargeData | chargesFilter:chargesDataSource:currencyCode.value" [value]="overdueCharge">
+      <mat-option *ngFor="let overdueCharge of overdueChargeData | chargesFilter:chargesDataSource:currencyCode.value"
+        [value]="overdueCharge">
         {{ overdueCharge.name }}
       </mat-option>
     </mat-select>
   </mat-form-field>
 
   <div fxFlex="48%" fxFlexAlign="center">
-    <button type="button" mat-raised-button color="primary" (click)="addCharge(overdueCharge)" [disabled]="!overdueCharge.value">
+    <button type="button" mat-raised-button color="primary" (click)="addCharge(overdueCharge)"
+      [disabled]="!overdueCharge.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 | chargesPenaltyFilter:true" #overdueChargesTable [hidden]="overdueChargesTable.dataSource.length === 0">
+  <table fxFlex="98%" class="mat-elevation-z1" mat-table [dataSource]="chargesDataSource | chargesPenaltyFilter:true"
+    #overdueChargesTable [hidden]="overdueChargesTable.dataSource.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 overdueCharge">
         {{ overdueCharge.name + ', ' + overdueCharge.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 overdueCharge">
         {{ overdueCharge.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 overdueCharge">
         {{ overdueCharge.amount }}
       </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 overdueCharge">
         {{ overdueCharge.chargeTimeType.value }}
       </td>
     </ng-container>
 
     <ng-container matColumnDef="action">
-      <th mat-header-cell *matHeaderCellDef> Actions </th>
+      <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Actions' | translate}} </th>
       <td mat-cell *matCellDef="let overdueCharge">
         <button mat-icon-button color="warn" (click)="deleteCharge(overdueCharge)">
           <fa-icon icon="trash"></fa-icon>
@@ -128,13 +134,13 @@
 
 </div>
 
-<div fxLayout="row" class="margin-t+" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
+<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/products/loan-products/loan-product-stepper/loan-product-currency-step/loan-product-currency-step.component.html

@@ -3,32 +3,32 @@
   <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>
       <mat-select formControlName="currencyCode" matTooltip="The currency in which the loan will be disbursed." required>
         <mat-option *ngFor="let currency of currencyData" [value]="currency.code">
           {{ currency.name }}
         </mat-option>
       </mat-select>
       <mat-error>
-        Currency is <strong>required</strong>
+        {{'labels.inputs.Currency' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Decimal Places</mat-label>
+      <mat-label>{{'labels.inputs.Decimal Places' | translate}}</mat-label>
       <input type="number" matTooltip="The number of decimal places to be used to track and report on loans." matInput formControlName="digitsAfterDecimal" required>
       <mat-error>
-        Decimal Places is <strong>required</strong>
+        {{'labels.inputs.Decimal Places' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Currency in multiples of</mat-label>
+      <mat-label>{{'labels.inputs.Currency in multiples of' | translate}}</mat-label>
       <input type="number" matInput matTooltip="You can enter multiples of currency value. For example, if you put multiples of 100, the currency value will be rounded off to 200, 300, 400, etc." formControlName="inMultiplesOf">
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Installment in multiples of</mat-label>
+      <mat-label>{{'labels.inputs.Installment in multiples of' | translate}}</mat-label>
       <input type="number" matInput formControlName="installmentAmountInMultiplesOf">
     </mat-form-field>
 
@@ -37,10 +37,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/products/loan-products/loan-product-stepper/loan-product-details-step/loan-product-details-step.component.html

@@ -3,23 +3,23 @@
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" fxLayoutAlign.gt-sm="start center">
 
     <mat-form-field fxFlex="72%">
-      <mat-label>Product Name</mat-label>
+      <mat-label>{{'labels.inputs.Product Name' | translate}}</mat-label>
       <input matInput formControlName="name" matTooltip="The product name is a unique identifier for the lending product." required>
       <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="24%">
-      <mat-label>Short Name</mat-label>
+      <mat-label>{{'labels.inputs.Short Name' | translate}}</mat-label>
       <input matInput formControlName="shortName" maxlength="4" matTooltip="The short name is a unique identifier for the lending product." required>
       <mat-error>
-        Short Name is <strong>required</strong>
+        {{'labels.inputs.Short Name' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Fund</mat-label>
+      <mat-label>{{'labels.inputs.Fund' | translate}}</mat-label>
       <mat-select matTooltip="Loan products may be assigned to a fund set up by your financial institution. If available, the fund field can be used for tracking and reporting on groups of loans." formControlName="fundId">
         <mat-option *ngFor="let fund of fundData" [value]="fund.id">
           {{ fund.name }}
@@ -28,25 +28,25 @@
     </mat-form-field>
 
     <mat-checkbox labelPosition="before" matTooltip="A borrower loan counter (cycle) is used for tracking how many time the client has taken this particular product." formControlName="includeInBorrowerCycle" fxFlex="48%">
-      Include in Customer Loan Counter
+      {{'labels.inputs.Include in Customer Loan Counter' | translate}}
     </mat-checkbox>
 
     <mat-form-field fxFlex="48%" (click)="startDatePicker.open()">
-      <mat-label>Start Date</mat-label>
+      <mat-label>{{'labels.inputs.Start Date' | translate}}</mat-label>
       <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="startDatePicker" matTooltip="The date that the loan product will be active and available to clients. If blank, the loan product will be active as soon as it is created." formControlName="startDate">
       <mat-datepicker-toggle matSuffix [for]="startDatePicker"></mat-datepicker-toggle>
       <mat-datepicker #startDatePicker></mat-datepicker>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%" (click)="closeDatePicker.open()">
-      <mat-label>Close Date</mat-label>
+      <mat-label>{{'labels.inputs.Close Date' | translate}}</mat-label>
       <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="closeDatePicker" matTooltip="The date that the loan product will become inactive and unavailable to clients. If blank, the load product will never become inactive." formControlName="closeDate">
       <mat-datepicker-toggle matSuffix [for]="closeDatePicker"></mat-datepicker-toggle>
       <mat-datepicker #closeDatePicker></mat-datepicker>
     </mat-form-field>
 
     <mat-form-field fxFlex="98%">
-      <mat-label>Description</mat-label>
+      <mat-label>{{'labels.inputs.Description' | translate}}</mat-label>
       <textarea matInput matTooltip="The description is used to provide additional information regarding the purpose and characteristics of the loan product." formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
     </mat-form-field>
 
@@ -55,10 +55,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/products/loan-products/loan-product-stepper/loan-product-payment-strategy-step/advance-payment-allocation-tab/advance-payment-allocation-tab.component.html

@@ -1,6 +1,6 @@
 <div fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
-  <h4 class="m-b-15 right" fxFlex="90%">You can drag and drop the rows to set a Payment Allocations order</h4>
+  <h4 class="m-b-15 right" fxFlex="90%">{{'labels.heading.You can drag and drop the rows to set a Payment Allocations order' | translate}}</h4>
 
   <div class="right" fxFlex="4%" *ngIf="!isDefault()">
     <button mat-button color="warn" (click)="removeTransaction()">

src/app/products/loan-products/loan-product-stepper/loan-product-preview-step/loan-product-preview-step.component.html

@@ -12,12 +12,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/products/loan-products/loan-product-stepper/loan-product-settings-step/loan-product-settings-step.component.html

@@ -2,7 +2,7 @@
 
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" fxLayoutAlign.gt-sm="start center">
 
-    <mat-form-field fxFlex="31%">
+    <mat-form-field fxFlex="30%">
       <mat-label>{{'labels.inputs.products.loan.Amortization' | translate}}</mat-label>
       <mat-select formControlName="amortizationType" matTooltip="The Amortization value is input to calculating the repayment amounts for repayment of the loan." required>
         <mat-option *ngFor="let amortizationType of amortizationTypeData" [value]="amortizationType.id">
@@ -10,28 +10,24 @@
         </mat-option>
       </mat-select>
       <mat-error>
-        Amortization is <strong>required</strong>
+        {{'labels.inputs.products.loan.Amortization' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
       </mat-error>
     </mat-form-field>
 
-    <mat-checkbox fxFlex="15%" labelPosition="before" formControlName="isEqualAmortization">
-      {{'labels.inputs.products.loan.Is Equal Amortization?' | translate}}
-    </mat-checkbox>
-
-    <mat-form-field fxFlex="48%">
-      <mat-label>Interest Method</mat-label>
+    <mat-form-field fxFlex="30%">
+      <mat-label>{{'labels.inputs.Interest Method' | translate}}</mat-label>
       <mat-select formControlName="interestType" matTooltip="The Interest method value is input to calculating the payments amount for repayment of the loan. " required>
         <mat-option *ngFor="let interestType of interestTypeData" [value]="interestType.id">
           {{ interestType.value }}
         </mat-option>
       </mat-select>
       <mat-error>
-        Interest Method is <strong>required</strong>
+        {{'labels.inputs.Interest Method' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field fxFlex="48%">
-      <mat-label>Interest calculation period</mat-label>
+    <mat-form-field fxFlex="30%">
+      <mat-label>{{'labels.inputs.Interest calculation period' | translate}}</mat-label>
       <mat-select formControlName="interestCalculationPeriodType" matTooltip="Daily - Will Calculate the interest on DAILY basis ex: Month of February has 28days
       and it will calculate interest for 28days, SAME AS REPAYMENT PERIOD- it calculates for the month,that is, 30days." required>
         <mat-option *ngFor="let interestCalculationPeriodType of interestCalculationPeriodTypeData" [value]="interestCalculationPeriodType.id">
@@ -39,23 +35,27 @@
         </mat-option>
       </mat-select>
       <mat-error>
-        Interest calculation period is <strong>required</strong>
+        {{'labels.inputs.Interest calculation period' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
       </mat-error>
     </mat-form-field>
 
-    <mat-checkbox *ngIf="loanProductSettingsForm.value.interestCalculationPeriodType === 1" fxFlex="48%" labelPosition="before"
+    <mat-checkbox fxFlex="96%" labelPosition="before" formControlName="isEqualAmortization">
+      {{'labels.inputs.products.loan.Is Equal Amortization?' | translate}}
+    </mat-checkbox>
+
+    <mat-checkbox *ngIf="loanProductSettingsForm.value.interestCalculationPeriodType === 1" fxFlex="96%" labelPosition="before"
       matTooltip=" To be used with SAME AS REPAYMENT PERIOD- for  calculating exact interest with partial period  ex: Interest charged from is 5th of April ,
       Principal is 10000 and interest is 1% per month then the interest will be (10000 * 1%)* (25/30) , it calculates for the month first then calculates exact periods between start date and end date(can be a decimal)"
       formControlName="allowPartialPeriodInterestCalcualtion">
-      Calculate interest for exact days in partial period
+      {{'labels.inputs.Calculate interest for exact days in partial period' | translate}}
     </mat-checkbox>
 
     <mat-divider fxFlex="98%"></mat-divider>
 
-    <h4 fxFlex="98%" class="mat-h4">Loan Schedule</h4>
+    <h4 fxFlex="98%" class="mat-h4">{{'labels.inputs.Loan Schedule' | translate}}</h4>
 
-    <mat-form-field fxFlex="48%">
-      <mat-label>Loan Schedule Type</mat-label>
+    <mat-form-field fxFlex="30%">
+      <mat-label>{{'labels.inputs.Loan Schedule Type' | translate}}</mat-label>
       <mat-select formControlName="loanScheduleType" required>
         <mat-option *ngFor="let loanScheduleType of loanScheduleTypeData" [value]="loanScheduleType.code">
           {{ loanScheduleType.value }}
@@ -63,8 +63,8 @@
       </mat-select>
     </mat-form-field>
 
-    <mat-form-field fxFlex="48%">
-      <mat-label>Repayment strategy</mat-label>
+    <mat-form-field fxFlex="30%">
+      <mat-label>{{'labels.inputs.Repayment strategy' | translate}}</mat-label>
       <mat-select formControlName="transactionProcessingStrategyCode" matTooltip="The repayment strategy determines the sequence in which each of the components is paid."
         required [disabled]="advancedTransactionProcessingStrategyDisabled">
         <mat-option *ngFor="let transactionProcessingStrategy of transactionProcessingStrategyData" [value]="transactionProcessingStrategy.code">
@@ -72,12 +72,12 @@
         </mat-option>
       </mat-select>
       <mat-error>
-        Repayment strategy is <strong>required</strong>
+        {{'labels.inputs.Repayment strategy' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field fxFlex="48%" *ngIf="isAdvancedTransactionProcessingStrategy">
-      <mat-label>Loan Schedule Processing Type</mat-label>
+    <mat-form-field fxFlex="30%" *ngIf="isAdvancedTransactionProcessingStrategy">
+      <mat-label>{{'labels.inputs.Loan Schedule Processing Type' | translate}}</mat-label>
       <mat-select formControlName="loanScheduleProcessingType" required>
         <mat-option *ngFor="let loanScheduleProcessingType of loanScheduleProcessingTypeData" [value]="loanScheduleProcessingType.code">
           {{ loanScheduleProcessingType.value }}
@@ -85,54 +85,54 @@
       </mat-select>
     </mat-form-field>
 
-    <h3 fxFlex="96%" class="mat-h3">Loan Tranche Details</h3>
+    <h3 fxFlex="96%" class="mat-h3">{{'labels.inputs.Loan Tranche Details' | translate}}</h3>
 
     <mat-checkbox fxFlex="73%" labelPosition="before" formControlName="multiDisburseLoan" matTooltip="Leave this checkbox unchecked if the loan is a single disburse loan. Check this
     checkbox if the loan is a multi disburse loan. See additional fields for additional information required for this type of loan." class="margin-b">
-      Enable Multiple Disbursals
+      {{'labels.inputs.Enable Multiple Disbursals' | translate}}
     </mat-checkbox>
 
     <div *ngIf="loanProductSettingsForm.value.multiDisburseLoan" fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
       <mat-form-field fxFlex="48%">
-        <mat-label>Maximum Tranche count</mat-label>
+        <mat-label>{{'labels.inputs.Maximum Tranche count' | translate}}</mat-label>
         <input type="number" matInput matTooltip="The maximum number of disbursements allowed for a loan account." formControlName="maxTrancheCount" required>
         <mat-error *ngIf="loanProductSettingsForm.controls.maxTrancheCount.hasError('required')">
-          Maximum Tranche count is <strong>required</strong>
+          {{'labels.inputs.Maximum Tranche count' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
         </mat-error>
       </mat-form-field>
 
       <mat-form-field fxFlex="48%">
-        <mat-label>Maximum allowed outstanding balance</mat-label>
+        <mat-label>{{'labels.inputs.Maximum allowed outstanding balance' | translate}}</mat-label>
         <input type="number" matInput matTooltip="The maximum outstanding loan account balance allowed at a point in time." formControlName="outstandingLoanBalance">
       </mat-form-field>
 
       <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="disallowExpectedDisbursements" class="margin-v">
-        Disallow Expected Disbursements
+        {{'labels.inputs.Disallow Expected Disbursements' | translate}}
       </mat-checkbox>
     </div>
 
-    <h3 fxFlex="96%" class="mat-h3">Down Payment</h3>
+    <h3 fxFlex="96%" class="mat-h3">{{'labels.heading.Down Payment' | translate}}</h3>
 
     <mat-checkbox fxFlex="73%" labelPosition="before" formControlName="enableDownPayment" matTooltip="Leave this checkbox checked if the loan has Down Payment, A Down Payment is
     a sum a buyer pays upfront when purchasing a good. It represents a percentage of the total purchase price, and the balance is usually financed" class="margin-b">
-      Enable Down Payment
+      {{'labels.inputs.Enable Down Payment' | translate}}
     </mat-checkbox>
 
     <div *ngIf="loanProductSettingsForm.value.enableDownPayment" fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
       <mat-form-field fxFlex="48%">
-        <mat-label>Disbursed Amount Percentage Down Payment (%)</mat-label>
+        <mat-label>{{'labels.inputs.Disbursed Amount Percentage Down Payment' | translate}} (%)</mat-label>
         <input type="number" matInput matTooltip="The percentage of disbursements amount for Down Payment" formControlName="disbursedAmountPercentageForDownPayment" required [min]="0" [max]="100">
         <mat-error *ngIf="loanProductSettingsForm.controls.disbursedAmountPercentageForDownPayment.hasError('required')">
-          Disbursed Amount Percentage Down Payment is <strong>required</strong>
+          {{'labels.inputs.Disbursed Amount Percentage Down Payment' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
         </mat-error>
         <mat-error *ngIf="loanProductSettingsForm.controls.disbursedAmountPercentageForDownPayment.errors?.range">
-          Disbursed Amount Percentage Down Payment is out <strong>percentage range</strong>
+          {{'labels.inputs.Disbursed Amount Percentage Down Payment' | translate}} is out <strong>percentage range</strong>
         </mat-error>
       </mat-form-field>
 
       <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="enableAutoRepaymentForDownPayment" matTooltip="Enable or disable  the auto repayment of down-payment.
       When “auto repayment for the down-payments“ is enabled,  the disbursements will trigger an auto down payment transaction for the down payment amount" class="margin-b">
-        Enable Auto Repayment for Down Payment
+      {{'labels.inputs.Enable Auto Repayment for Down Payment' | translate}}
       </mat-checkbox>
     </div>
 
@@ -140,22 +140,22 @@
 
     <span fxFlex="48%" fxHide.lt-md></span>
 
-    <h4 fxFlex="98%" class="mat-h4">Moratorium <i class="fas fa-question" matTooltip="The moratorium information will default from the loan product settings, but can be changed for this loan account"></i></h4>
+    <h4 fxFlex="98%" class="mat-h4 m-r-10">{{'labels.inputs.Moratorium' | translate}} <i class="fas fa-question" matTooltip="The moratorium information will default from the loan product settings, but can be changed for this loan account"></i></h4>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Grace on principal payment</mat-label>
+      <mat-label>{{'labels.inputs.Grace on principal payment' | translate}}</mat-label>
       <input type="number" matInput formControlName="graceOnPrincipalPayment">
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Grace on interest payment</mat-label>
+      <mat-label>{{'labels.inputs.Grace on interest payment' | translate}}</mat-label>
       <input type="number" matInput formControlName="graceOnInterestPayment">
     </mat-form-field>
 
     <mat-divider fxFlex="98%"></mat-divider>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Delinquency Bucket</mat-label>
+      <mat-label>{{'labels.inputs.Delinquency Bucket' | translate}}</mat-label>
       <mat-select formControlName="delinquencyBucketId">
         <mat-option *ngFor="let delinquencyBucket of delinquencyBucketData" [value]="delinquencyBucket.id">
           {{ delinquencyBucket.name }}
@@ -168,78 +168,78 @@
     </mat-form-field>
 
     <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="enableInstallmentLevelDelinquency" class="margin-v">
-      Enable installment level Delinquency
+      {{'labels.inputs.Enable installment level Delinquency' | translate}}
     </mat-checkbox>
 
     <mat-divider fxFlex="98%"></mat-divider>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Interest free period</mat-label>
+      <mat-label>{{'labels.inputs.Interest free period' | translate}}</mat-label>
       <input type="number" matInput matTooltip="If the Interest Free Period is '4' and the client's Repayment Frequency is every week,
       then for the first four weeks the client need not to pay interest, he has to pay principle due for that week only." formControlName="graceOnInterestCharged">
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Arrears tolerance</mat-label>
+      <mat-label>{{'labels.inputs.Arrears tolerance' | translate}}</mat-label>
       <input type="number" matInput matTooltip="With 'Arrears tolerance' you can specify a tolerance amount and if the loan is behind (in arrears),
       but within the tolerance, it won't be classified as 'in arrears' and part of the portfolio at risk." formControlName="inArrearsTolerance">
     </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 matTooltip="The setting for number of days in year to use to calculate interest" formControlName="daysInYearType" required>
         <mat-option *ngFor="let daysInYearType of daysInYearTypeData" [value]="daysInYearType.id">
           {{ daysInYearType.value }}
         </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>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Days in month</mat-label>
+      <mat-label>{{'labels.inputs.Days in month' | translate}}</mat-label>
       <mat-select matTooltip="Number of days in month." formControlName="daysInMonthType" required>
         <mat-option *ngFor="let daysInMonthType of daysInMonthTypeData" [value]="daysInMonthType.id">
           {{ daysInMonthType.value }}
         </mat-option>
       </mat-select>
       <mat-error>
-        Days in month is <strong>required</strong>
+        {{'labels.inputs.Days in month' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-checkbox fxFlex="98%" labelPosition="before" formControlName="canDefineInstallmentAmount" class="margin-v">
-      Allow fixing of the installment amount
+      {{'labels.inputs.Allow fixing of the installment amount' | translate}}
     </mat-checkbox>
 
-    <h4 fxFlex="48%" class="mat-h4">Number of days a loan may be overdue before moving into arrears <i class="fas fa-question"
+    <h4 fxFlex="48%">{{'labels.inputs.Number of days a loan may be overdue before moving into arrears' | translate}} <i class="fas fa-question"
       matTooltip="A loan is in arrears once the number of days entered into this field is exceeded. If this field is blank, the loan will be in arrears the day after a scheduled payment is missed. "></i></h4>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>On arrears ageing</mat-label>
+      <mat-label>{{'labels.inputs.On arrears ageing' | translate}}</mat-label>
       <input type="number" matInput formControlName="graceOnArrearsAgeing">
     </mat-form-field>
 
-    <h4 fxFlex="48%" class="mat-h4">Maximum number of days a loan may be overdue before becoming a NPA (non-performing asset) <i class="fas fa-question"
+    <h4 fxFlex="48%">{{'labels.inputs.Maximum number of days a loan may be overdue before becoming a NPA (non performing asset)' | translate}} <i class="fas fa-question"
       matTooltip="A loan is a NPA (non performing asset) once the number of days entered into this field is exceeded. If this field is blank, the loan will be an NPA the day after a scheduled payment is missed."></i></h4>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Overdue days for NPA</mat-label>
+      <mat-label>{{'labels.inputs.Overdue days for NPA' | translate}}</mat-label>
       <input type="number" matInput formControlName="overdueDaysForNPA">
     </mat-form-field>
 
     <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="accountMovesOutOfNPAOnlyOnArrearsCompletion" class="margin-v">
-      Account moves out of NPA only after all arrears have been cleared?
+      {{'labels.inputs.Account moves out of NPA only after all arrears have been cleared' | translate}}
     </mat-checkbox>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Principal Threshold (%) for Last Instalment</mat-label>
+      <mat-label>{{'labels.inputs.Principal Threshold (%) for Last Instalment' | translate}}</mat-label>
       <input type="number" matInput formControlName="principalThresholdForLastInstallment">
     </mat-form-field>
 
     <mat-checkbox fxFlex="48%" labelPosition="before" matTooltip="These fields are used to define the minimum, maximum gap that should be present between the installments for the loan product" formControlName="allowVariableInstallments" class="margin-v">
-      Are Variable Installments allowed?
+      {{'labels.inputs.Are Variable Installments allowed?' | translate}}
     </mat-checkbox>
 
     <div *ngIf="loanProductSettingsForm.value.allowVariableInstallments" fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
@@ -247,70 +247,70 @@
       <h4 fxFlex="98%" class="mat-h4">Variable Installments</h4>
 
       <mat-form-field fxFlex="48%">
-        <mat-label>Minimum gap between Installments</mat-label>
+        <mat-label>{{'labels.inputs.Minimum gap between Installments' | translate}}</mat-label>
         <input type="number" matInput formControlName="minimumGap" required>
         <mat-error>
-          Minimum gap between Installments is <strong>required</strong>
+          {{'labels.inputs.Minimum gap between Installments' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
         </mat-error>
       </mat-form-field>
 
       <mat-form-field fxFlex="48%">
-        <mat-label>Maximum gap between Installments</mat-label>
+        <mat-label>{{'labels.inputs.Maximum gap between Installments' | translate}}</mat-label>
         <input type="number" matInput formControlName="maximumGap" required>
         <mat-error>
-          Maximum gap between Installments is <strong>required</strong>
+          {{'labels.inputs.Maximum gap between Installments' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
         </mat-error>
       </mat-form-field>
 
     </div>
 
     <mat-checkbox fxFlex="48%" labelPosition="before" matTooltip="If selected, the Loan Product can be used to apply for Topup Loans." formControlName="canUseForTopup" class="margin-v">
-      Allowed to be used for providing Topup Loans
+      {{'labels.inputs.Allowed to be used for providing Topup Loans' | translate}}
     </mat-checkbox>
 
     <mat-divider fxFlex="98%"></mat-divider>
 
-    <h3 fxFlex="23%" class="mat-h3">Interest Recalculation</h3>
+    <h3 fxFlex="96%" class="mat-h3">{{'labels.heading.Interest Recalculation' | translate}}</h3>
 
     <mat-checkbox fxFlex="73%" labelPosition="before" formControlName="isInterestRecalculationEnabled" class="margin-b">
-      Recalculate Interest
+      {{'labels.inputs.Recalculate Interest' | translate}}
     </mat-checkbox>
 
     <div *ngIf="loanProductSettingsForm.value.isInterestRecalculationEnabled" fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
       <mat-form-field fxFlex="48%">
-        <mat-label>Pre-closure interest calculation rule</mat-label>
+        <mat-label>{{'labels.inputs.Pre-closure interest calculation rule' | translate}}</mat-label>
         <mat-select formControlName="preClosureInterestCalculationStrategy" required>
           <mat-option *ngFor="let preClosureInterestCalculationStrategy of preClosureInterestCalculationStrategyData" [value]="preClosureInterestCalculationStrategy.id">
             {{ preClosureInterestCalculationStrategy.value }}
           </mat-option>
         </mat-select>
         <mat-error>
-          Pre-closure interest calculation rule is <strong>required</strong>
+          {{'labels.inputs.Pre-closure interest calculation rule' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
         </mat-error>
       </mat-form-field>
 
       <mat-form-field fxFlex="48%">
-        <mat-label>Advance payments adjustment type</mat-label>
+        <mat-label>{{'labels.inputs.Advance payments adjustment type' | translate}}</mat-label>
         <mat-select formControlName="rescheduleStrategyMethod" required>
           <mat-option *ngFor="let rescheduleStrategyType of rescheduleStrategyTypeData" [value]="rescheduleStrategyType.id">
             {{ rescheduleStrategyType.value }}
           </mat-option>
         </mat-select>
         <mat-error>
-          Advance payments adjustment type is <strong>required</strong>
+          {{'labels.inputs.Advance payments adjustment type' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
         </mat-error>
       </mat-form-field>
 
       <mat-form-field fxFlex="48%">
-        <mat-label>Interest recalculation compounding on</mat-label>
+        <mat-label>{{'labels.inputs.Interest recalculation compounding on' | translate}}</mat-label>
         <mat-select formControlName="interestRecalculationCompoundingMethod" required>
           <mat-option *ngFor="let interestRecalculationCompoundingType of interestRecalculationCompoundingTypeData" [value]="interestRecalculationCompoundingType.id">
             {{ interestRecalculationCompoundingType.value }}
           </mat-option>
         </mat-select>
         <mat-error>
-          Interest recalculation compounding on is <strong>required</strong>
+          {{'labels.inputs.Interest recalculation compounding on' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
         </mat-error>
       </mat-form-field>
 
@@ -319,18 +319,18 @@
       <div fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
         <mat-form-field fxFlex="48%" *ngIf="loanProductSettingsForm.value.interestRecalculationCompoundingMethod !== 0 && loanProductSettingsForm.value.recalculationCompoundingFrequencyType !== 1">
-          <mat-label>Frequency Interval for compounding</mat-label>
+          <mat-label>{{'labels.inputs.Frequency Interval for compounding' | translate}}</mat-label>
           <input type="number" matInput formControlName="recalculationCompoundingFrequencyInterval" required>
           <mat-error>
-            Frequency Interval for compounding is <strong>required</strong>
+            {{'labels.inputs.Frequency Interval for compounding' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
           </mat-error>
         </mat-form-field>
 
         <mat-form-field fxFlex="48%" *ngIf="loanProductSettingsForm.value.recalculationRestFrequencyType !== 1">
-          <mat-label>Frequency Interval for recalculation</mat-label>
+          <mat-label>{{'labels.inputs.Frequency Interval for recalculation' | translate}}</mat-label>
           <input type="number" matInput formControlName="recalculationRestFrequencyInterval" required>
           <mat-error>
-            Frequency Interval for recalculation is <strong>required</strong>
+            {{'labels.inputs.Frequency Interval for recalculation' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
           </mat-error>
         </mat-form-field>
 
@@ -339,7 +339,7 @@
       <div *ngIf="loanProductSettingsForm.value.interestRecalculationCompoundingMethod !== 0" fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
         <mat-form-field fxFlex="31%">
-          <mat-label>Frequency for compounding</mat-label>
+          <mat-label>{{'labels.inputs.Frequency for compounding' | translate}}</mat-label>
           <mat-select formControlName="recalculationCompoundingFrequencyType" required>
             <mat-option *ngFor="let interestRecalculationFrequencyType of interestRecalculationFrequencyTypeData" [value]="interestRecalculationFrequencyType.id">
               {{ interestRecalculationFrequencyType.value }}
@@ -388,14 +388,14 @@
       </div>
 
       <mat-form-field fxFlex="31%">
-        <mat-label>Frequency for recalculate Outstanding Principal</mat-label>
+        <mat-label>{{'labels.inputs.Frequency for recalculate Outstanding Principal' | translate}}</mat-label>
         <mat-select formControlName="recalculationRestFrequencyType" required>
           <mat-option *ngFor="let interestRecalculationFrequencyType of interestRecalculationFrequencyTypeData" [value]="interestRecalculationFrequencyType.id">
             {{ interestRecalculationFrequencyType.value }}
           </mat-option>
         </mat-select>
         <mat-error>
-          Frequency for recalculate Outstanding Principal is <strong>required</strong>
+          {{'labels.inputs.Frequency for recalculate Outstanding Principal' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
         </mat-error>
       </mat-form-field>
 
@@ -437,36 +437,36 @@
       </div>
 
       <mat-checkbox fxFlex="98%" labelPosition="before" formControlName="isArrearsBasedOnOriginalSchedule" class="margin-v">
-        Is Arrears recognization based on original schedule?
+        {{'labels.inputs.Is Arrears recognization based on original schedule' | translate}}?
       </mat-checkbox>
 
     </div>
 
     <mat-divider fxFlex="98%"></mat-divider>
 
-    <h3 fxFlex="23%" class="mat-h3">Guarantee Requirements</h3>
+    <h3 fxFlex="23%" class="mat-h3">{{'labels.heading.Guarantee Requirements' | translate}}</h3>
 
     <mat-checkbox fxFlex="73%" labelPosition="before" formControlName="holdGuaranteeFunds" class="margin-b">
-      Place Guarantee Funds On-Hold?
+      {{'labels.inputs.Place Guarantee Funds On-Hold' | translate}}
     </mat-checkbox>
 
     <div *ngIf="loanProductSettingsForm.value.holdGuaranteeFunds" fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
       <mat-form-field fxFlex="31%">
-        <mat-label>Mandatory Guarantee(%)</mat-label>
+        <mat-label>{{'labels.inputs.Mandatory Guarantee(%)' | translate}}</mat-label>
         <input type="number" matInput formControlName="mandatoryGuarantee" required>
         <mat-error>
-          Mandatory Guarantee is <strong>required</strong>
+          {{'labels.inputs.Mandatory Guarantee' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
         </mat-error>
       </mat-form-field>
 
       <mat-form-field fxFlex="31%">
-        <mat-label>Minimum Guarantee from Own Funds(%)</mat-label>
+        <mat-label>{{'labels.inputs.Minimum Guarantee from Own Funds(%)' | translate}}</mat-label>
         <input type="number" matInput formControlName="minimumGuaranteeFromOwnFunds">
       </mat-form-field>
 
       <mat-form-field fxFlex="31%">
-        <mat-label>Minimum Guarantee from Guarantor Funds(%)</mat-label>
+        <mat-label>{{'labels.inputs.Minimum Guarantee from Guarantor Funds(%)' | translate}}</mat-label>
         <input type="number" matInput formControlName="minimumGuaranteeFromGuarantor">
       </mat-form-field>
 
@@ -478,62 +478,62 @@
       matTooltip="Setting for event notifications to be sent before or after repayments. Blue color means default value from global configurations."></i></h3>
 
     <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="useDueForRepaymentsConfigurations" matTooltip="Use or not the Global Configurations values to the Repayment Event (notifications)" class="margin-b">
-        Use the Global Configurations values to the Repayment Event (notifications)
+      {{'labels.inputs.Use the Global Configurations values to the Repayment Event (notifications)' | translate}}
     </mat-checkbox>
 
     <div fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" *ngIf="!loanProductSettingsForm.value.useDueForRepaymentsConfigurations">
 
       <mat-form-field fxFlex="48%">
-        <mat-label>Due days for repayment event</mat-label>
+        <mat-label>{{'labels.inputs.Due days for repayment event' | translate}}</mat-label>
         <input type="number" matInput matTooltip="The maximum outstanding loan account balance allowed at a point in time." formControlName="dueDaysForRepaymentEvent">
       </mat-form-field>
 
       <mat-form-field fxFlex="48%">
-        <mat-label>OverDue days for repayment event</mat-label>
+        <mat-label>{{'labels.inputs.OverDue days for repayment event' | translate}}</mat-label>
         <input type="number" matInput matTooltip="The maximum outstanding loan account balance allowed at a point in time." formControlName="overDueDaysForRepaymentEvent">
       </mat-form-field>
     </div>
 
     <mat-divider fxFlex="98%"></mat-divider>
 
-    <h3 fxFlex="23%" class="mat-h3">Configurable Terms and Settings</h3>
+    <h3 fxFlex="23%" class="mat-h3">{{'labels.inputs.Configurable Terms and Settings' | translate}}</h3>
 
     <mat-checkbox fxFlex="73%" labelPosition="before" formControlName="allowAttributeConfiguration" class="margin-b">
-      Allow overriding select terms and settings in loan accounts
+      {{'labels.inputs.Allow overriding select terms and settings in loan accounts' | translate}}
     </mat-checkbox>
 
     <div *ngIf="loanProductSettingsForm.value.allowAttributeConfiguration" formGroupName="allowAttributeOverrides" fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
       <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="amortizationType" class="margin-v">
-        Amortization
+        {{'labels.inputs.Amortization' | translate}}
       </mat-checkbox>
 
       <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="interestType" class="margin-v">
-        Interest method
+        {{'labels.inputs.Interest method' | translate}}
       </mat-checkbox>
 
       <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="transactionProcessingStrategyCode" class="margin-v">
-        Repayment strategy
+        {{'labels.inputs.Repayment strategy' | translate}}
       </mat-checkbox>
 
       <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="interestCalculationPeriodType" class="margin-v">
-        Interest calculation period
+        {{'labels.inputs.Interest calculation period' | translate}}
       </mat-checkbox>
 
       <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="inArrearsTolerance" class="margin-v">
-        Arrears tolerance
+        {{'labels.inputs.Arrears tolerance' | translate}}
       </mat-checkbox>
 
       <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="repaymentEvery" class="margin-v">
-        Repaid every
+        {{'labels.inputs.Repaid every' | translate}}
       </mat-checkbox>
 
       <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="graceOnPrincipalAndInterestPayment" class="margin-v">
-        Moratorium
+        {{'labels.inputs.Moratorium' | translate}}
       </mat-checkbox>
 
       <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="graceOnArrearsAgeing" class="margin-v">
-        Number of days a loan may be overdue before moving into arrears
+        {{'labels.inputs.Number of days a loan may be overdue before moving into arrears' | translate}}
       </mat-checkbox>
 
     </div>
@@ -543,10 +543,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/products/loan-products/loan-product-stepper/loan-product-terms-step/loan-product-terms-step.component.html

@@ -2,10 +2,10 @@
 
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
-    <h4 fxFlex="98%" class="mat-h4">Principal <i class="fas fa-question" matTooltip="These fields are used to define the minimum, default, and maximum principal allowed for the loan product."></i></h4>
+    <h4 fxFlex="98%" class="mat-h4">{{'labels.inputs.Principal' | translate}}<i class="m-l-10 fas fa-question" matTooltip="These fields are used to define the minimum, default, and maximum principal allowed for the loan product."></i></h4>
 
     <mat-form-field fxFlex="31%">
-      <mat-label>Minimum</mat-label>
+      <mat-label>{{'labels.inputs.Minimum' | translate}}</mat-label>
       <input type="number" matInput formControlName="minPrincipal" [min]="0">
       <mat-error>
         Minimum Value must be <strong>greater equal to than 0</strong>
@@ -13,15 +13,15 @@
     </mat-form-field>
 
     <mat-form-field fxFlex="31%">
-      <mat-label>Default</mat-label>
+      <mat-label>{{'labels.inputs.Default' | translate}}</mat-label>
       <input type="number" matInput formControlName="principal" required>
       <mat-error>
-        Default Principal is <strong>required</strong>
+        {{'labels.inputs.Default Principal' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="31%">
-      <mat-label>Maximum</mat-label>
+      <mat-label>{{'labels.inputs.Maximum' | translate}}</mat-label>
       <input type="number" matInput formControlName="maxPrincipal" [min]="0">
       <mat-error>
         Maximum Value must be <strong>greater equal to than 0</strong> and must be greater than <strong>Minimum Principal</strong>
@@ -29,12 +29,12 @@
     </mat-form-field>
 
     <mat-checkbox fxFlex="96%" labelPosition="before" formControlName="allowApprovedDisbursedAmountsOverApplied">
-      Allow approval / disbursal above loan applied amount?
+      {{'labels.inputs.Allow approval / disbursal above loan applied amount' | translate}}
     </mat-checkbox>
 
     <div fxFlex="98%" fxLayoutGap="2%" fxLayout="row wrap" fxLayout.lt-md="column">
       <mat-form-field fxFlex="32%" *ngIf="loanProductTermsForm.value.allowApprovedDisbursedAmountsOverApplied">
-        <mat-label>Over Amount Calculation Type</mat-label>
+        <mat-label>{{'labels.inputs.Over Amount Calculation Type' | translate}}</mat-label>
         <mat-select formControlName="overAppliedCalculationType" required>
           <mat-option *ngFor="let overAppliedCalculationType of overAppliedCalculationTypeData" [value]="overAppliedCalculationType.id">
             {{ overAppliedCalculationType.value }}
@@ -43,13 +43,13 @@
       </mat-form-field>
 
       <mat-form-field fxFlex="32%" *ngIf="loanProductTermsForm.value.allowApprovedDisbursedAmountsOverApplied">
-        <mat-label>Over Amount</mat-label>
+        <mat-label>{{'labels.inputs.Over Amount' | translate}}</mat-label>
         <input type="number" matInput formControlName="overAppliedNumber" required>
       </mat-form-field>
     </div>
 
     <mat-form-field fxFlex="31%">
-      <mat-label>Installment day calculation from <i class="fas fa-question" matTooltip="Repayment schedule will start the installment dates from the submitted date or the disbursement date"></i></mat-label>
+      <mat-label>{{'labels.inputs.Installment day calculation from' | translate}} <i class="fas fa-question" matTooltip="Repayment schedule will start the installment dates from the submitted date or the disbursement date"></i></mat-label>
       <mat-select formControlName="repaymentStartDateType" required>
         <mat-option *ngFor="let repaymentStartDateType of repaymentStartDateTypeOptions" [value]="repaymentStartDateType.id">
           {{ repaymentStartDateType.value | translate}}
@@ -57,10 +57,10 @@
       </mat-select>
     </mat-form-field>
 
-    <h4 fxFlex="98%" class="mat-h4">Number of repayments <i class="fas fa-question" matTooltip="These fields are used to define the minimum, default, and maximum number of repayments allowed for the loan product."></i></h4>
+    <h4 fxFlex="98%" class="mat-h4">{{'labels.inputs.Number of repayments' | translate}} <i class="fas fa-question" matTooltip="These fields are used to define the minimum, default, and maximum number of repayments allowed for the loan product."></i></h4>
 
     <mat-form-field fxFlex="31%">
-      <mat-label>Minimum</mat-label>
+      <mat-label>{{'labels.inputs.Minimum' | translate}}</mat-label>
       <input type="number" matInput formControlName="minNumberOfRepayments" [min]="1">
       <mat-error>
         Minimum Value must be <strong>greater equal to than 0</strong>
@@ -68,39 +68,39 @@
     </mat-form-field>
 
     <mat-form-field fxFlex="31%">
-      <mat-label>Default</mat-label>
+      <mat-label>{{'labels.inputs.Default' | translate}}</mat-label>
       <input type="number" matInput formControlName="numberOfRepayments" required>
       <mat-error>
-        Default number of repayments is <strong>required</strong>
+        {{'labels.inputs.Default number of repayments' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="31%">
-      <mat-label>Maximum</mat-label>
+      <mat-label>{{'labels.inputs.Maximum' | translate}}</mat-label>
       <input type="number" matInput formControlName="maxNumberOfRepayments" [min]="0">
       <mat-error>
-        Maximum Value must be <strong>greater equal to than 0</strong> and must be greater than <strong>Minimum Principal</strong>
+        {{'labels.inputs.Maximum' | translate}} Value must be <strong>greater equal to than 0</strong> and must be greater than <strong>Minimum Principal</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-divider fxFlex="98%"></mat-divider>
 
-    <h3 fxFlex="23%" class="mat-h3">Interest Rates</h3>
+    <h3 fxFlex="23%" class="mat-h3">{{'labels.inputs.Interest Rates' | translate}}</h3>
 
     <mat-checkbox [formControl]="zeroInterest" fxFlex="23%" labelPosition="before" *ngIf="!loanProductTermsForm.value.isLinkedToFloatingInterestRates">
-      Is Zero Interest?
+      {{'labels.inputs.Is Zero Interest Rate?' | translate}}
     </mat-checkbox>
 
     <mat-checkbox fxFlex="32%" labelPosition="before" formControlName="isLinkedToFloatingInterestRates" *ngIf="!isZeroInterest()">
-      Is Linked to floating interest rates?
+      {{'labels.inputs.Is Linked to floating interest rates?' | translate}}
     </mat-checkbox>
 
     <div *ngIf="!loanProductTermsForm.value.isLinkedToFloatingInterestRates" fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
-      <h4 fxFlex="98%" class="mat-h4">Nominal interest rate <i class="fas fa-question" matTooltip="These fields are used to define the minimum, default, maximum, and period for the nominal interest rate allowed for the loan product. The minimum, default, and maximum nominal interest rates are expressed as percentages."></i></h4>
+      <h4 fxFlex="98%" class="mat-h4">{{'labels.inputs.Nominal interest rate' | translate}} <i class="fas fa-question" matTooltip="These fields are used to define the minimum, default, maximum, and period for the nominal interest rate allowed for the loan product. The minimum, default, and maximum nominal interest rates are expressed as percentages."></i></h4>
 
       <mat-form-field fxFlex="23%">
-        <mat-label>Minimum</mat-label>
+        <mat-label>{{'labels.inputs.Minimum' | translate}}</mat-label>
         <input type="number" matInput formControlName="minInterestRatePerPeriod" [min]="0" [attr.disabled]="isZeroInterest()">
         <mat-error>
           Minimum Value must be <strong>greater than 0</strong>
@@ -108,30 +108,30 @@
       </mat-form-field>
 
       <mat-form-field fxFlex="23%">
-        <mat-label>Default</mat-label>
+        <mat-label>{{'labels.inputs.Default' | translate}}</mat-label>
         <input type="number" matInput formControlName="interestRatePerPeriod" required [attr.disabled]="isZeroInterest()">
         <mat-error>
-          Default nominal interest rate is <strong>required</strong>
+          {{'labels.inputs.Default nominal interest rate' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
         </mat-error>
       </mat-form-field>
 
       <mat-form-field fxFlex="23%">
-        <mat-label>Maximum</mat-label>
+        <mat-label>{{'labels.inputs.Maximum' | translate}}</mat-label>
         <input type="number" matInput formControlName="maxInterestRatePerPeriod" [min]="0" [attr.disabled]="isZeroInterest()">
         <mat-error>
-          Maximum Value must be <strong>greater equal to than 0</strong> and must be greater than <strong>Minimum Principal</strong>
+          {{'labels.inputs.Maximum' | translate}} Value must be <strong>greater equal to than 0</strong> and must be greater than <strong>Minimum Principal</strong>
         </mat-error>
       </mat-form-field>
 
       <mat-form-field fxFlex="23%">
-        <mat-label>Frequency</mat-label>
+        <mat-label>{{'labels.inputs.Frequency' | translate}}</mat-label>
         <mat-select formControlName="interestRateFrequencyType" required [disabled]="isZeroInterest()">
           <mat-option *ngFor="let interestRateFrequencyType of interestRateFrequencyTypeData" [value]="interestRateFrequencyType.id">
             {{ interestRateFrequencyType.value }}
           </mat-option>
         </mat-select>
         <mat-error>
-          Nominal interest rate frequency is <strong>required</strong>
+          {{'labels.inputs.Nominal interest rate frequency' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
         </mat-error>
       </mat-form-field>
 
@@ -139,53 +139,53 @@
 
     <div *ngIf="loanProductTermsForm.value.isLinkedToFloatingInterestRates && !isZeroInterest()" fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" fxLayoutAlign.gt-sm="start center">
 
-      <h4 fxFlex="98%" class="mat-h4">Floating interest rate <i class="fas fa-question" matTooltip="These fields are used to define the minimum, default, maximum, and period for the floating interest rate allowed for the loan product. The minimum, default, and maximum floating interest rates are expressed as percentages."></i></h4>
+      <h4 fxFlex="98%" class="mat-h4">{{'labels.inputs.Floating Interest Rate' | translate}} <i class="fas fa-question" matTooltip="These fields are used to define the minimum, default, maximum, and period for the Floating Interest Rate allowed for the loan product. The minimum, default, and maximum floating interest rates are expressed as percentages."></i></h4>
 
       <mat-form-field fxFlex="31%">
-        <mat-label>Floating Rate</mat-label>
+        <mat-label>{{'labels.inputs.Floating Rate' | translate}}</mat-label>
         <mat-select formControlName="floatingRatesId" required>
           <mat-option *ngFor="let floatingRate of floatingRateData" [value]="floatingRate.id">
             {{ floatingRate.name }}
           </mat-option>
         </mat-select>
         <mat-error>
-          Floating rate is <strong>required</strong>
+          {{'labels.inputs.Floating rate' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
         </mat-error>
       </mat-form-field>
 
       <mat-form-field fxFlex="31%">
-        <mat-label>Differential Rate</mat-label>
+        <mat-label>{{'labels.inputs.Differential Rate' | translate}}</mat-label>
         <input type="number" matInput formControlName="interestRateDifferential" required>
         <mat-error>
-          Differential rate is <strong>required</strong>
+          {{'labels.inputs.Differential rate' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
         </mat-error>
       </mat-form-field>
 
       <mat-checkbox fxFlex="31%" labelPosition="before" formControlName="isFloatingInterestRateCalculationAllowed">
-        Is Floating calculation allowed?
+        {{'labels.inputs.Is Floating calculation allowed?' | translate}}
       </mat-checkbox>
 
       <mat-form-field fxFlex="31%">
-        <mat-label>Minimum</mat-label>
+        <mat-label>{{'labels.inputs.Minimum' | translate}}</mat-label>
         <input type="number" matInput formControlName="minDifferentialLendingRate" [min]="0" required>
         <mat-error>
-          Minimum interest rate is <strong>required</strong>
+          {{'labels.inputs.Minimum interest rate' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
         </mat-error>
       </mat-form-field>
 
       <mat-form-field fxFlex="31%">
-        <mat-label>Default</mat-label>
+        <mat-label>{{'labels.inputs.Default' | translate}}</mat-label>
         <input type="number" matInput formControlName="defaultDifferentialLendingRate" required>
         <mat-error>
-          Default interest rate is <strong>required</strong>
+          {{'labels.inputs.Default interest rate' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
         </mat-error>
       </mat-form-field>
 
       <mat-form-field fxFlex="31%">
-        <mat-label>Maximum</mat-label>
+        <mat-label>{{'labels.inputs.Maximum' | translate}}</mat-label>
         <input type="number" matInput formControlName="maxDifferentialLendingRate" required>
         <mat-error>
-          Maximum interest rate is <strong>required</strong>
+          {{'labels.inputs.Maximum interest rate' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
         </mat-error>
       </mat-form-field>
 
@@ -193,62 +193,62 @@
 
     <mat-divider fxFlex="98%"></mat-divider>
 
-    <h3 fxFlex="23%" class="mat-h3">Variations</h3>
+    <h3 fxFlex="23%" class="mat-h3">{{'labels.inputs.Variations' | translate}}</h3>
 
     <mat-checkbox fxFlex="73%" labelPosition="before" formControlName="useBorrowerCycle">
-      Terms vary based on loan cycle
+      {{'labels.inputs.Terms vary based on loan cycle' | translate}}
     </mat-checkbox>
 
     <div *ngIf="loanProductTermsForm.value.useBorrowerCycle" fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
-      <h4 fxFlex="23%" class="mat-h4">Principal by loan cycle</h4>
+      <h4 fxFlex="23%" class="mat-h4">{{'labels.inputs.Principal by loan cycle' | translate}}</h4>
 
       <div fxFlex="73%">
         <button type="button" mat-raised-button color="primary" (click)="addVariationsForBorrowerCycle('Principal', principalVariationsForBorrowerCycle)">
           <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]="principalVariationsForBorrowerCycle.value" *ngIf="principalVariationsForBorrowerCycle.value.length">
 
         <ng-container matColumnDef="valueConditionType">
-          <th mat-header-cell *matHeaderCellDef> Condition </th>
+          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Condition' | translate}} </th>
           <td mat-cell *matCellDef="let variation">
             {{ variation.valueConditionType | find:valueConditionTypeData:'id':'value' }}
           </td>
         </ng-container>
 
         <ng-container matColumnDef="borrowerCycleNumber">
-          <th mat-header-cell *matHeaderCellDef> Loan Cycle </th>
+          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Loan Cycle' | translate}} </th>
           <td mat-cell *matCellDef="let variation">
             {{ variation.borrowerCycleNumber }}
           </td>
         </ng-container>
 
         <ng-container matColumnDef="minValue">
-          <th mat-header-cell *matHeaderCellDef> Minimum </th>
+          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Minimum' | translate}} </th>
           <td mat-cell *matCellDef="let variation">
             {{ variation.minValue  }}
           </td>
         </ng-container>
 
         <ng-container matColumnDef="defaultValue">
-          <th mat-header-cell *matHeaderCellDef> Default </th>
+          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Default' | translate}} </th>
           <td mat-cell *matCellDef="let variation">
             {{ variation.defaultValue }}
           </td>
         </ng-container>
 
         <ng-container matColumnDef="maxValue">
-          <th mat-header-cell *matHeaderCellDef> Maximum </th>
+          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Maximum' | translate}} </th>
           <td mat-cell *matCellDef="let variation">
             {{ variation.maxValue }}
           </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 variation; let i = index">
             <button mat-icon-button color="primary" (click)="editVariationsForBorrowerCycle('Principal', principalVariationsForBorrowerCycle, i)">
               <fa-icon icon="edit"></fa-icon>
@@ -264,54 +264,54 @@
 
       </table>
 
-      <h4 fxFlex="23%" class="mat-h4">Number of repayments by loan cycle</h4>
+      <h4 fxFlex="23%" class="mat-h4">{{'labels.inputs.Number of repayments by loan cycle' | translate}}</h4>
 
       <div fxFlex="73%">
         <button type="button" mat-raised-button color="primary" (click)="addVariationsForBorrowerCycle('NumberOfRepayments', numberOfRepaymentVariationsForBorrowerCycle)">
           <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]="numberOfRepaymentVariationsForBorrowerCycle.value" *ngIf="numberOfRepaymentVariationsForBorrowerCycle.value.length">
 
         <ng-container matColumnDef="valueConditionType">
-          <th mat-header-cell *matHeaderCellDef> Condition </th>
+          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Condition' | translate}} </th>
           <td mat-cell *matCellDef="let variation">
             {{ variation.valueConditionType | find:valueConditionTypeData:'id':'value' }}
           </td>
         </ng-container>
 
         <ng-container matColumnDef="borrowerCycleNumber">
-          <th mat-header-cell *matHeaderCellDef> Loan Cycle </th>
+          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Loan Cycle' | translate}} </th>
           <td mat-cell *matCellDef="let variation">
             {{ variation.borrowerCycleNumber }}
           </td>
         </ng-container>
 
         <ng-container matColumnDef="minValue">
-          <th mat-header-cell *matHeaderCellDef> Minimum </th>
+          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Minimum' | translate}} </th>
           <td mat-cell *matCellDef="let variation">
             {{ variation.minValue }}
           </td>
         </ng-container>
 
         <ng-container matColumnDef="defaultValue">
-          <th mat-header-cell *matHeaderCellDef> Default </th>
+          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Default' | translate}} </th>
           <td mat-cell *matCellDef="let variation">
             {{ variation.defaultValue }}
           </td>
         </ng-container>
 
         <ng-container matColumnDef="maxValue">
-          <th mat-header-cell *matHeaderCellDef> Maximum </th>
+          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Maximum' | translate}} </th>
           <td mat-cell *matCellDef="let variation">
             {{ variation.maxValue }}
           </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 variation; let i = index">
             <button mat-icon-button color="primary" (click)="editVariationsForBorrowerCycle('NumberOfRepayments', numberOfRepaymentVariationsForBorrowerCycle, i)">
               <fa-icon icon="edit"></fa-icon>
@@ -327,12 +327,12 @@
 
       </table>
 
-      <h4 fxFlex="23%" class="mat-h4">Nominal interest rate by loan cycle</h4>
+      <h4 fxFlex="23%" class="mat-h4">{{'labels.inputs.Nominal interest rate by loan cycle' | translate}}</h4>
 
       <div fxFlex="73%">
         <button type="button" mat-raised-button color="primary" (click)="addVariationsForBorrowerCycle('NominalInterestRate', interestRateVariationsForBorrowerCycle)">
           <fa-icon icon="plus" class="m-r-10"></fa-icon>
-          Add
+          {{'labels.buttons.Add' | translate}}
         </button>
       </div>
 
@@ -394,39 +394,39 @@
 
     <mat-divider fxFlex="98%"></mat-divider>
 
-    <h4 fxFlex="33%" class="mat-h4">Repaid every <i class="fas fa-question" matTooltip="These fields are input to calculating the repayment schedule for a loan account and are used to determine when payments are due."></i></h4>
+    <h4 fxFlex="33%" class="mat-h4">{{'labels.inputs.Repaid every' | translate}} <i class="fas fa-question" matTooltip="These fields are input to calculating the repayment schedule for a loan account and are used to determine when payments are due."></i></h4>
 
     <mat-form-field fxFlex="30%">
-      <mat-label>Frequency</mat-label>
+      <mat-label>{{'labels.inputs.Frequency' | translate}}</mat-label>
       <input type="number" matInput formControlName="repaymentEvery" required>
       <mat-error>
-        Repaid every frequency is <strong>required</strong>
+        {{'labels.inputs.Repaid every frequency' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="30%">
-      <mat-label>Type</mat-label>
+      <mat-label>{{'labels.inputs.Frequency Type' | translate}}</mat-label>
       <mat-select formControlName="repaymentFrequencyType" required>
         <mat-option *ngFor="let repaymentFrequencyType of repaymentFrequencyTypeData" [value]="repaymentFrequencyType.id">
           {{ repaymentFrequencyType.value }}
         </mat-option>
       </mat-select>
       <mat-error>
-        Repaid every type is <strong>required</strong>
+        {{'labels.inputs.Repaid every type' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
       </mat-error>
     </mat-form-field>
 
-    <h4 fxFlex="33%" class="mat-h4" *ngIf="allowFixedLength()">Fixed Length <i class="fas fa-question" 
+    <h4 fxFlex="33%" class="mat-h4" *ngIf="allowFixedLength()">{{'labels.inputs.Fixed Length' | translate}} <i class="fas fa-question" 
       matTooltip="Due to regulatory requirements in some countries, the loans cannot exceed X days, the Fineract SOR needs to be extended to support defining that a loan has a maximum length and the maximum length of that loan defines the length of the last installment which will be a shorter period than the first installments."></i></h4>
 
     <mat-form-field fxFlex="30%" *ngIf="allowFixedLength()">
-      <mat-label>Fixed Length</mat-label>
+      <mat-label>{{'labels.inputs.Fixed Length' | translate}}</mat-label>
       <input type="number" matInput formControlName="fixedLength">
     </mat-form-field>
     <span fxFlex="30%" *ngIf="allowFixedLength()" class="label-field">{{ loanProductTermsForm.value.repaymentFrequencyType | find:repaymentFrequencyTypeData:'id':'value' }}</span>
   
     <mat-form-field fxFlex="48%">
-      <mat-label>Minimum days between disbursal and first repayment date</mat-label>
+      <mat-label>{{'labels.inputs.Minimum days between disbursal and first repayment date' | translate}}</mat-label>
       <input type="number" matInput formControlName="minimumDaysBetweenDisbursalAndFirstRepayment">
     </mat-form-field>
 
@@ -435,10 +435,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/products/loan-products/loan-products.component.html

@@ -2,7 +2,7 @@
 <div #buttonCreateLoanProduct class="in-block">
   <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_LOANPRODUCT'">
     <fa-icon icon="plus" class="m-r-10"></fa-icon>
-    Create Loan Product
+    {{'labels.buttons.Create Loan Product' | translate}}
   </button>
   </div>
 </div>
@@ -21,22 +21,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 loanProduct"> {{ loanProduct.name }} </td>
       </ng-container>
 
       <ng-container matColumnDef="shortName">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Short Name </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Short Name' | translate}} </th>
         <td mat-cell *matCellDef="let loanProduct"> {{ loanProduct.shortName }} </td>
       </ng-container>
 
       <ng-container matColumnDef="closeDate">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Expiry Date </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Expiry Date' | translate}} </th>
         <td mat-cell *matCellDef="let loanProduct"> {{ loanProduct.closeDate | 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 loanProduct">
           <div [className]="loanProduct.status | statusLookup">
             <fa-icon matTooltip="{{ loanProduct.status === 'loanProduct.active' ? 'Active' : 'Inactive' }}" matTooltipPosition="right" icon="circle" size="lg"></fa-icon>
@@ -56,29 +56,29 @@
 </div>
 
 <ng-template #templateButtonCreateLoanProduct let-popover="popover">
-  <h2>Create loan product</h2>
+  <h2>{{'labels.heading.Create Loan Product' | translate}}t</h2>
   <p class="mw300">This option allows you to create new loan product.</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter,filter, 'bottom', true)">Next</button>
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate}}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">{{'labels.buttons.Back' | translate}}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter,filter, 'bottom', true)">{{'labels.buttons.Next' | translate}}</button>
   </div>
 </ng-template>
 
 <ng-template #templateFilter let-popover="popover">
-  <h4>Search bar to filter loan products.</h4>
+  <h4>{{'labels.heading.Search bar to filter loan products.' | translate}}</h4>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonCreateLoanProduct,buttonCreateLoanProduct, 'bottom', true)">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateLoanProductsTable,loanProductsTable, 'top', true)">Next</button>
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate}}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonCreateLoanProduct,buttonCreateLoanProduct, 'bottom', true)">{{'labels.buttons.Back' | translate}}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateLoanProductsTable,loanProductsTable, 'top', true)">{{'labels.buttons.Next' | translate}}</button>
   </div>
 </ng-template>
 
 <ng-template #templateLoanProductsTable let-popover="popover">
   <h4 class="mw300">List of loan products in the organization. For more details click: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/102039585/Loan+Products" target="_blank">Loan Products</a></h4>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter,filter, 'bottom', true)">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">Next</button>
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate}}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter,filter, 'bottom', true)">{{'labels.buttons.Back' | translate}}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">{{'labels.buttons.Next' | translate}}</button>
   </div>
 </ng-template>

src/app/products/loan-products/view-loan-product/view-loan-product.component.html

@@ -5,7 +5,7 @@
     <nav mat-tab-nav-bar class="navigation-tabs">
       <a mat-tab-link [routerLink]="['./general']" routerLinkActive #general="routerLinkActive"
         [active]="general.isActive">
-        General
+        {{'labels.heading.General' | translate}}
       </a>
       <ng-container *ngFor="let loanProductDatatable of loanProductDatatables">
         <a mat-tab-link [routerLink]="['./datatables',loanProductDatatable.registeredTableName]" routerLinkActive

src/app/products/saving-products/create-saving-product/create-saving-product.component.html

@@ -24,7 +24,7 @@
 
     <mat-step [stepControl]="savingProductDetailsForm">
 
-      <ng-template matStepLabel>DETAILS</ng-template>
+      <ng-template matStepLabel>{{'labels.inputs.Details' | translate}}</ng-template>
 
       <mifosx-saving-product-details-step></mifosx-saving-product-details-step>
 
@@ -32,7 +32,7 @@
 
     <mat-step [stepControl]="savingProductCurrencyForm">
 
-      <ng-template matStepLabel>CURRENCY</ng-template>
+      <ng-template matStepLabel>{{'labels.inputs.Currency' | translate}}</ng-template>
 
       <mifosx-saving-product-currency-step [savingProductsTemplate]="savingProductsTemplate"></mifosx-saving-product-currency-step>
 
@@ -40,7 +40,7 @@
 
     <mat-step [stepControl]="savingProductTermsForm">
 
-      <ng-template matStepLabel>TERMS</ng-template>
+      <ng-template matStepLabel>{{'labels.inputs.TERMS' | translate}}</ng-template>
 
       <mifosx-saving-product-terms-step [savingProductsTemplate]="savingProductsTemplate"></mifosx-saving-product-terms-step>
 
@@ -48,7 +48,7 @@
 
     <mat-step [stepControl]="savingProductSettingsForm">
 
-      <ng-template matStepLabel>SETTINGS</ng-template>
+      <ng-template matStepLabel>{{'labels.inputs.SETTINGS' | translate}}</ng-template>
 
       <mifosx-saving-product-settings-step [savingProductsTemplate]="savingProductsTemplate"></mifosx-saving-product-settings-step>
 
@@ -56,7 +56,7 @@
 
     <mat-step>
 
-      <ng-template matStepLabel>CHARGES</ng-template>
+      <ng-template matStepLabel>{{'labels.inputs.CHARGES' | translate}}</ng-template>
 
       <mifosx-saving-product-charges-step
         [savingProductsTemplate]="savingProductsTemplate"
@@ -68,7 +68,7 @@
 
     <mat-step [stepControl]="savingProductAccountingForm">
 
-      <ng-template matStepLabel>ACCOUNTING</ng-template>
+      <ng-template matStepLabel>{{'labels.inputs.ACCOUNTING' | translate}}</ng-template>
 
       <mifosx-saving-product-accounting-step
         [savingProductsTemplate]="savingProductsTemplate"
@@ -82,7 +82,7 @@
 
     <mat-step state="preview" *ngIf="savingProductFormValid" completed>
 
-      <ng-template matStepLabel>PREVIEW</ng-template>
+      <ng-template matStepLabel>{{'labels.inputs.PREVIEW' | translate}}</ng-template>
 
       <mifosx-saving-product-preview-step
         [savingProductsTemplate]="savingProductsTemplate"

src/app/products/saving-products/edit-saving-product/edit-saving-product.component.html

@@ -24,7 +24,7 @@
 
     <mat-step [stepControl]="savingProductDetailsForm" completed>
 
-      <ng-template matStepLabel>DETAILS</ng-template>
+      <ng-template matStepLabel>{{'labels.inputs.DETAILS' | translate}}</ng-template>
 
       <mifosx-saving-product-details-step [savingProductsTemplate]="savingProductAndTemplate"></mifosx-saving-product-details-step>
 
@@ -32,7 +32,7 @@
 
     <mat-step [stepControl]="savingProductCurrencyForm" completed>
 
-      <ng-template matStepLabel>CURRENCY</ng-template>
+      <ng-template matStepLabel>{{'labels.inputs.CURRENCY' | translate}}</ng-template>
 
       <mifosx-saving-product-currency-step [savingProductsTemplate]="savingProductAndTemplate"></mifosx-saving-product-currency-step>
 
@@ -40,7 +40,7 @@
 
     <mat-step [stepControl]="savingProductTermsForm" completed>
 
-      <ng-template matStepLabel>TERMS</ng-template>
+      <ng-template matStepLabel>{{'labels.inputs.TERMS' | translate}}</ng-template>
 
       <mifosx-saving-product-terms-step [savingProductsTemplate]="savingProductAndTemplate"></mifosx-saving-product-terms-step>
 
@@ -48,7 +48,7 @@
 
     <mat-step [stepControl]="savingProductSettingsForm" completed>
 
-      <ng-template matStepLabel>SETTINGS</ng-template>
+      <ng-template matStepLabel>{{'labels.inputs.SETTINGS' | translate}}</ng-template>
 
       <mifosx-saving-product-settings-step [savingProductsTemplate]="savingProductAndTemplate"></mifosx-saving-product-settings-step>
 
@@ -56,7 +56,7 @@
 
     <mat-step completed>
 
-      <ng-template matStepLabel>CHARGES</ng-template>
+      <ng-template matStepLabel>{{'labels.inputs.CHARGES' | translate}}</ng-template>
 
       <mifosx-saving-product-charges-step
         [savingProductsTemplate]="savingProductAndTemplate"
@@ -68,7 +68,7 @@
 
     <mat-step [stepControl]="savingProductAccountingForm" completed>
 
-      <ng-template matStepLabel>ACCOUNTING</ng-template>
+      <ng-template matStepLabel>{{'labels.inputs.ACCOUNTING' | translate}}</ng-template>
 
       <mifosx-saving-product-accounting-step
         [savingProductsTemplate]="savingProductAndTemplate"
@@ -82,7 +82,7 @@
 
     <mat-step state="preview" *ngIf="savingProductFormValidAndNotPristine" completed>
 
-      <ng-template matStepLabel>PREVIEW</ng-template>
+      <ng-template matStepLabel>{{'labels.inputs.PREVIEW' | translate}}</ng-template>
 
       <mifosx-saving-product-preview-step
         [savingProductsTemplate]="savingProductAndTemplate"

src/app/products/saving-products/saving-product-stepper/saving-product-accounting-step/saving-product-accounting-step.component.html

@@ -4,7 +4,7 @@
 
     <mat-radio-group fxFlex="98%" fxLayout="row" fxLayoutGap="5%" fxLayout.lt-md="column" formControlName="accountingRule">
       <mat-radio-button *ngFor="let accountingRule of accountingRuleData; let i =  index" [value]="i+1">
-        {{ accountingRule }}
+        {{ 'labels.accounting.' + accountingRule | translate }}
       </mat-radio-button>
     </mat-radio-group>
 
@@ -130,39 +130,37 @@
 
       <mat-divider fxFlex="98%"></mat-divider>
 
-      <h3 fxFlex="23%" class="mat-h3">Advanced Accounting Rules</h3>
-
-      <mat-checkbox fxFlex="73%" formControlName="advancedAccountingRules"></mat-checkbox>
+      <mat-checkbox fxFlex="73%" formControlName="advancedAccountingRules">{{'labels.heading.Advanced Accounting Rules' | translate}}</mat-checkbox>
 
       <div *ngIf="savingProductAccountingForm.value.advancedAccountingRules" fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
-        <h4 fxFlex="33%" class="mat-h4">Configure Fund Sources for Payment Channels</h4>
+        <h4 fxFlex="33%" class="mat-h4">{{'labels.heading.Configure Fund Sources for Payment Channels' | translate}}</h4>
 
         <div fxFlex="63%">
           <button type="button" mat-raised-button color="primary" (click)="add('PaymentFundSource', paymentChannelToFundSourceMappings)">
             <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]="paymentChannelToFundSourceMappings.value" *ngIf="paymentChannelToFundSourceMappings.value.length !== 0">
 
           <ng-container matColumnDef="paymentTypeId">
-            <th mat-header-cell *matHeaderCellDef> Payment Type </th>
+            <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Payment Type' | translate}} </th>
             <td mat-cell *matCellDef="let paymentFundSource">
               {{ paymentFundSource.paymentTypeId | find:paymentTypeData:'id':'name' }}
             </td>
           </ng-container>
 
           <ng-container matColumnDef="fundSourceAccountId">
-            <th mat-header-cell *matHeaderCellDef> Fund Source </th>
+            <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Fund Source' | translate}} </th>
             <td mat-cell *matCellDef="let paymentFundSource">
               {{ paymentFundSource.fundSourceAccountId | find:combinedAccountData:'id':'name' }}
             </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 paymentFundSource; let i = index">
               <button mat-icon-button color="primary" (click)="edit('PaymentFundSource', paymentChannelToFundSourceMappings, i)">
                 <fa-icon icon="edit"></fa-icon>
@@ -178,33 +176,33 @@
 
         </table>
 
-        <h4 fxFlex="33%" class="mat-h4">Map Fees to Specific Income Accounts</h4>
+        <h4 fxFlex="33%" class="mat-h4">{{'labels.heading.Map Fees to Specific Income Accounts' | translate}}</h4>
 
-        <div fxFlex="63%">
+        <div fxFlex="63%" *ngIf="existCharges()">
           <button type="button" mat-raised-button color="primary" (click)="add('FeesIncome', feeToIncomeAccountMappings)">
             <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]="feeToIncomeAccountMappings.value" *ngIf="feeToIncomeAccountMappings.value.length !== 0">
 
           <ng-container matColumnDef="chargeId">
-            <th mat-header-cell *matHeaderCellDef> Fees </th>
+            <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Fees' | translate}} </th>
             <td mat-cell *matCellDef="let feesIncome">
               {{ feesIncome.chargeId | find:chargeData:'id':'name' }}
             </td>
           </ng-container>
 
           <ng-container matColumnDef="incomeAccountId">
-            <th mat-header-cell *matHeaderCellDef> Income Account </th>
+            <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Income Account' | translate}} </th>
             <td mat-cell *matCellDef="let feesIncome">
               {{ feesIncome.incomeAccountId | find:incomeAccountData:'id':'name' }}
             </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 feesIncome; let i = index">
               <button mat-icon-button color="primary" (click)="edit('FeesIncome', feeToIncomeAccountMappings, i)">
                 <fa-icon icon="edit"></fa-icon>
@@ -220,12 +218,12 @@
 
         </table>
 
-        <h4 fxFlex="33%" class="mat-h4">Map Penalties to Specific Income Accounts</h4>
+        <h4 fxFlex="33%" class="mat-h4">{{'labels.heading.Map Penalties to Specific Income Accounts' | translate}}</h4>
 
-        <div fxFlex="63%">
+        <div fxFlex="63%" *ngIf="existCharges()">
           <button type="button" mat-raised-button color="primary" (click)="add('PenaltyIncome', penaltyToIncomeAccountMappings)">
             <fa-icon icon="plus" class="m-r-10"></fa-icon>
-            Add
+            {{'labels.buttons.Add' | translate}}
           </button>
         </div>
 
@@ -233,21 +231,21 @@
         <table fxFlex="98%" class="mat-elevation-z1" mat-table [dataSource]="penaltyToIncomeAccountMappings.value" *ngIf="penaltyToIncomeAccountMappings.value.length !== 0">
 
           <ng-container matColumnDef="chargeId">
-            <th mat-header-cell *matHeaderCellDef> Penalty </th>
+            <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Penalty' | translate}} </th>
             <td mat-cell *matCellDef="let penaltyIncome">
               {{ penaltyIncome.chargeId | find:penaltyData:'id':'name' }}
             </td>
           </ng-container>
 
           <ng-container matColumnDef="incomeAccountId">
-            <th mat-header-cell *matHeaderCellDef> Income Account </th>
+            <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Income Account' | translate}} </th>
             <td mat-cell *matCellDef="let penaltyIncome">
               {{ penaltyIncome.incomeAccountId | find:incomeAccountData:'id':'name' }}
             </td>
           </ng-container>
 
           <ng-container matColumnDef="actions">
-            <th mat-header-cell *matHeaderCellDef> Actions </th>
+            <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Actions </th>
             <td mat-cell *matCellDef="let penaltyIncome; let i = index">
               <button mat-icon-button color="primary" (click)="edit('PenaltyIncome', penaltyToIncomeAccountMappings, i)">
                 <fa-icon icon="edit"></fa-icon>
@@ -272,10 +270,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]="!savingProductFormValid">
-      Next
+      {{'labels.buttons.Next' | translate}}
       <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
     </button>
   </div>

src/app/products/saving-products/saving-product-stepper/saving-product-accounting-step/saving-product-accounting-step.component.ts

@@ -200,6 +200,10 @@ export class SavingProductAccountingStepComponent implements OnInit {
     }
   }
 
+  existCharges(): boolean {
+    return (this.chargeData.length > 0);
+  }
+
   add(formType: string, formArray: UntypedFormArray) {
     const data = { ...this.getData(formType), pristine: false };
     const dialogRef = this.dialog.open(FormDialogComponent, { data });

src/app/products/saving-products/saving-product-stepper/saving-product-charges-step/saving-product-charges-step.component.html

@@ -1,7 +1,7 @@
 <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
   <mat-form-field fxFlex="48%">
-    <mat-label>Charge</mat-label>
+    <mat-label>{{'labels.inputs.Charge' | translate}}</mat-label>
     <mat-select #charge>
       <mat-option *ngFor="let charge of chargeData | chargesFilter:chargesDataSource:currencyCode.value" [value]="charge">
         {{ charge.name }}
@@ -12,42 +12,42 @@
   <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 }}
       </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>
     </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>
@@ -65,10 +65,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/products/saving-products/saving-product-stepper/saving-product-currency-step/saving-product-currency-step.component.html

@@ -3,42 +3,42 @@
   <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>
       <mat-select formControlName="currencyCode" matTooltip="The currency to be used" required>
         <mat-option *ngFor="let currency of currencyData" [value]="currency.code">
           {{ currency.name }}
         </mat-option>
       </mat-select>
       <mat-error>
-        Currency is <strong>required</strong>
+        {{'labels.inputs.Currency' | translate}} {{'labels.commons.is' | translate}} <strong>r{{'labels.commons.equired' | translate}}</strong>
       </mat-error>
     </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 matTooltip="The number of decimal places to be used to track and report on saving accounts" formControlName="digitsAfterDecimal" required>
       <mat-error>
-        Decimal Places is <strong>required</strong>
+        {{'labels.inputs.Decimal Places' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Currency in multiples of</mat-label>
+      <mat-label>{{'labels.inputs.Currency in multiples of' | translate}}</mat-label>
       <input type="number" matInput matTooltip="The amount to be rounded off (example: 100 rounds off to 200, 300, 400, etc)" formControlName="inMultiplesOf" required>
       <mat-error>
-        Currency in multiples of is <strong>required</strong>
+        {{'labels.inputs.Currency in multiples of' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
       </mat-error>
     </mat-form-field>
 
   </div>
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
-    <button mat-raised-button matStepperPrevious>
+    <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/products/saving-products/saving-product-stepper/saving-product-details-step/saving-product-details-step.component.html

@@ -3,23 +3,23 @@
   <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>
       <input matInput formControlName="name" matTooltip="A unique identifier for the saving product" required>
       <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%">
-      <mat-label>Short Name</mat-label>
+      <mat-label>{{'labels.inputs.Short Name' | translate}}</mat-label>
       <input matInput formControlName="shortName" matTooltip="A unique identifier for the saving product" maxlength="4" required>
       <mat-error>
-        Short Name is <strong>required</strong>
+        {{'labels.inputs.Short Name' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="98%">
-      <mat-label>Description</mat-label>
+      <mat-label>{{'labels.inputs.Description' | translate}}</mat-label>
       <textarea matInput matTooltip="Provides additional information regarding the purpose and characteristics of the saving product" formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
     </mat-form-field>
 
@@ -28,10 +28,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/products/saving-products/saving-product-stepper/saving-product-preview-step/saving-product-preview-step.component.html

@@ -4,177 +4,177 @@
 
   <mat-divider fxFlexFill></mat-divider>
 
-  <h3 class="mat-h3" fxFlexFill>Details</h3>
+  <h3 class="mat-h3" fxFlexFill>{{'labels.inputs.Details' | translate}}</h3>
 
   <mat-divider fxFlexFill></mat-divider>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Short Name:</span>
+    <span fxFlex="40%">{{'labels.inputs.Short Name' | translate}}:</span>
     <span fxFlex="60%">{{ savingProduct.shortName }}</span>
   </div>
 
   <div fxFlexFill *ngIf="savingProduct.description">
-    <span fxFlex="40%">Description:</span>
+    <span fxFlex="40%">{{'labels.inputs.Description' | translate}}:</span>
     <span fxFlex="60%">{{ savingProduct.description }}</span>
   </div>
 
-  <h3 class="mat-h3" fxFlexFill>Currency</h3>
+  <h3 class="mat-h3" fxFlexFill>{{'labels.inputs.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%">{{ savingProduct.currencyCode | find:savingProductsTemplate.currencyOptions:'code':'name' }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Decimal Places:</span>
+    <span fxFlex="40%">{{'labels.inputs.Decimal Places' | translate}}:</span>
     <span fxFlex="60%">{{ savingProduct.digitsAfterDecimal }}</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%">{{ savingProduct.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%">Nominal Annual Interest Rate:</span>
-    <span fxFlex="60%">{{ savingProduct.nominalAnnualInterestRate }}</span>
+    <span fxFlex="40%">{{'labels.inputs.Nominal Annual Interest' | translate}}:</span>
+    <span fxFlex="60%">{{ savingProduct.nominalAnnualInterestRate | formatNumber }} %</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Interest Compounding Period:</span>
+    <span fxFlex="40%">{{'labels.inputs.Interest Compounding Period' | translate}}:</span>
     <span fxFlex="60%">{{ savingProduct.interestCompoundingPeriodType | find:savingProductsTemplate.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%">{{ savingProduct.interestPostingPeriodType | find:savingProductsTemplate.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%">{{ savingProduct.interestCalculationType | find:savingProductsTemplate.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%">{{ savingProduct.interestCalculationDaysInYearType | find:savingProductsTemplate.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="savingProduct.minRequiredOpeningBalance">
-    <span fxFlex="40%">Minimum Opening Balance:</span>
+    <span fxFlex="40%">{{'labels.inputs.Minimum Opening Balance' | translate}}:</span>
     <span fxFlex="60%">{{ savingProduct.minRequiredOpeningBalance }}</span>
   </div>
 
   <div fxFlexFill *ngIf="savingProduct.lockinPeriodFrequency">
-    <span fxFlex="40%">Lock-in Period:</span>
+    <span fxFlex="40%">{{'labels.inputs.Lock-in Period' | translate}}:</span>
     <span fxFlex="60%">{{ savingProduct.lockinPeriodFrequency + ' ' + (savingProduct.lockinPeriodFrequencyType | find:savingProductsTemplate.lockinPeriodFrequencyTypeOptions:'id':'value') }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Apply Withdrawal Fee for Transfers:</span>
+    <span fxFlex="40%">{{'labels.inputs.Apply Withdrawal Fee for Transfers' | translate}}:</span>
     <span fxFlex="60%">{{ savingProduct.withdrawalFeeForTransfers | yesNo }}</span>
   </div>
 
   <div fxFlexFill *ngIf="savingProduct.minBalanceForInterestCalculation">
-    <span fxFlex="40%">Balance Required for Interest Calculation:</span>
+    <span fxFlex="40%">{{'labels.inputs.Balance Required for Interest Calculation' | translate}}:</span>
     <span fxFlex="60%">{{ savingProduct.minBalanceForInterestCalculation }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Enforce Minimum Balance:</span>
+    <span fxFlex="40%">{{'labels.inputs.Enforce Minimum Balance' | translate}}:</span>
     <span fxFlex="60%">{{ savingProduct.enforceMinRequiredBalance | yesNo }}</span>
   </div>
 
   <div fxFlexFill *ngIf="savingProduct.minRequiredBalance">
-    <span fxFlex="40%">Minimum Balance:</span>
+    <span fxFlex="40%">{{'labels.inputs.Minimum Balance' | translate}}:</span>
     <span fxFlex="60%">{{ savingProduct.minRequiredBalance }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Withhold Tax is Applicable:</span>
+    <span fxFlex="40%">{{'labels.inputs.Withhold Tax is Applicable' | translate}}:</span>
     <span fxFlex="60%">{{ savingProduct.withHoldTax | yesNo }}</span>
   </div>
 
   <div fxFlexFill *ngIf="savingProduct.withHoldTax">
-    <span fxFlex="40%">Tax Group:</span>
+    <span fxFlex="40%">{{'labels.inputs.Tax Group' | translate}}:</span>
     <span fxFlex="60%">{{ savingProduct.taxGroupId | find:savingProductsTemplate.taxGroupOptions:'id':'name' }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Is Overdraft Allowed:</span>
+    <span fxFlex="40%">{{'labels.inputs.Is Overdraft Allowed' | translate}}:</span>
     <span fxFlex="60%">{{ savingProduct.allowOverdraft | yesNo }}</span>
   </div>
 
   <div fxFlexFill *ngIf="savingProduct.minOverdraftForInterestCalculation">
-    <span fxFlex="40%">Minimum Overdraft Required for Interest Calculation:</span>
+    <span fxFlex="40%">{{'labels.inputs.Minimum Overdraft Required for Interest Calculation' | translate}}:</span>
     <span fxFlex="60%">{{ savingProduct.minOverdraftForInterestCalculation }}</span>
   </div>
 
   <div fxFlexFill *ngIf="savingProduct.nominalAnnualInterestRateOverdraft">
-    <span fxFlex="40%">Nominal Annual Interest for Overdraft:</span>
+    <span fxFlex="40%">{{'labels.inputs.Nominal Annual Interest for Overdraft' | translate}}:</span>
     <span fxFlex="60%">{{ savingProduct.nominalAnnualInterestRateOverdraft }}</span>
   </div>
 
   <div fxFlexFill *ngIf="savingProduct.overdraftLimit">
-    <span fxFlex="40%">Maximum Overdraft Amount Limit:</span>
+    <span fxFlex="40%">{{'labels.inputs.Maximum Overdraft Amount Limit' | translate}}:</span>
     <span fxFlex="60%">{{ savingProduct.overdraftLimit }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Enable Dormancy Tracking:</span>
+    <span fxFlex="40%">{{'labels.inputs.Enable Dormancy Tracking' | translate}}:</span>
     <span fxFlex="60%">{{ savingProduct.isDormancyTrackingActive | yesNo }}</span>
   </div>
 
   <div fxFlexFill *ngIf="savingProduct.isDormancyTrackingActive" fxLayout="row wrap" fxLayout.lt-md="column">
-    <span fxFlex="40%">Number of Days to Inactive sub-status:</span>
+    <span fxFlex="40%">{{'labels.inputs.Number of Days to Inactive sub-status' | translate}}:</span>
     <span fxFlex="60%">{{ savingProduct.daysToInactive }}</span>
-    <span fxFlex="40%">Number of Days to Dormant sub-status:</span>
+    <span fxFlex="40%">{{'labels.inputs.Number of Days to Dormant sub-status' | translate}}:</span>
     <span fxFlex="60%">{{ savingProduct.daysToDormancy }}</span>
-    <span fxFlex="40%">Number of Days to Escheat:</span>
+    <span fxFlex="40%">{{'labels.inputs.Number of Days to Escheat' | translate}}:</span>
     <span fxFlex="60%">{{ savingProduct.daysToEscheat }}</span>
   </div>
 
   <div fxFlexFill *ngIf="savingProduct.charges.length" fxLayout="row wrap" fxLayout.lt-md="column">
 
-    <h3 class="mat-h3" fxFlexFill>Charges</h3>
+    <h3 class="mat-h3" fxFlexFill>{{'labels.inputs.Charges' | translate}}</h3>
 
     <mat-divider fxFlexFill></mat-divider>
 
     <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="savingProduct.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="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>
@@ -187,7 +187,7 @@
 
   </div>
 
-  <h3 class="mat-h3" fxFlexFill>Accounting</h3>
+  <h3 class="mat-h3" fxFlexFill>{{'labels.inputs.Accounting' | translate}}</h3>
 
   <mat-divider fxFlexFill></mat-divider>
 
@@ -199,25 +199,25 @@
 
   <div *ngIf="savingProduct.advancedAccountingRules && (savingProduct.paymentChannelToFundSourceMappings?.length || savingProduct.feeToIncomeAccountMappings?.length || savingProduct.penaltyToIncomeAccountMappings?.length)" fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
 
-    <h3 class="mat-h3" fxFlexFill>Advanced Accounting Rules</h3>
+    <h3 class="mat-h3" fxFlexFill>{{'labels.heading.Advanced Accounting Rules' | translate}}</h3>
 
     <mat-divider fxFlexFill></mat-divider>
 
     <div *ngIf="savingProduct.paymentChannelToFundSourceMappings?.length" fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
 
-      <h4 class="mat-h4" fxFlexFill>Fund Sources for Payment Channels</h4>
+      <h4 class="mat-h4" fxFlexFill>{{'labels.heading.Fund Sources for Payment Channels' | translate}}</h4>
 
       <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="savingProduct.paymentChannelToFundSourceMappings">
 
         <ng-container matColumnDef="paymentTypeId">
-          <th mat-header-cell *matHeaderCellDef> Payment Type </th>
+          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Payment Type' | translate}} </th>
           <td mat-cell *matCellDef="let paymentFundSource">
             {{ paymentFundSource.paymentTypeId | find:savingProductsTemplate.paymentTypeOptions:'id':'name' }}
           </td>
         </ng-container>
 
         <ng-container matColumnDef="fundSourceAccountId">
-          <th mat-header-cell *matHeaderCellDef> Fund Source </th>
+          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Fund Source' | translate}} </th>
           <td mat-cell *matCellDef="let paymentFundSource">
             {{ paymentFundSource.fundSourceAccountId | find:savingProductsTemplate.accountingMappingOptions.assetAccountOptions:'id':'name' }}
           </td>
@@ -232,19 +232,19 @@
 
     <div *ngIf="savingProduct.feeToIncomeAccountMappings?.length" fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
 
-      <h4 class="mat-h4" fxFlexFill>Fees to Specific Income Accounts</h4>
+      <h4 class="mat-h4" fxFlexFill>{{'labels.heading.Fees to Specific Income Accounts' | translate}}</h4>
 
       <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="savingProduct.feeToIncomeAccountMappings">
 
         <ng-container matColumnDef="chargeId">
-          <th mat-header-cell *matHeaderCellDef> Fees </th>
+          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Fees' | translate}} </th>
           <td mat-cell *matCellDef="let feesIncome">
             {{ feesIncome.chargeId | find:savingProductsTemplate.chargeOptions:'id':'name' }}
           </td>
         </ng-container>
 
         <ng-container matColumnDef="incomeAccountId">
-          <th mat-header-cell *matHeaderCellDef> Income Account </th>
+          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Income Account' | translate}} </th>
           <td mat-cell *matCellDef="let feesIncome">
             {{ feesIncome.incomeAccountId | find:savingProductsTemplate.accountingMappingOptions.incomeAccountOptions:'id':'name' }}
           </td>
@@ -259,19 +259,19 @@
 
     <div *ngIf="savingProduct.penaltyToIncomeAccountMappings?.length" fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
 
-      <h4 class="mat-h4" fxFlexFill>Penalties to Specific Income Accounts</h4>
+      <h4 class="mat-h4" fxFlexFill>{{'labels.heading.Penalties to Specific Income Accounts' | translate}}</h4>
 
       <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="savingProduct.penaltyToIncomeAccountMappings">
 
         <ng-container matColumnDef="chargeId">
-          <th mat-header-cell *matHeaderCellDef> Penalty </th>
+          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Penalty' | translate}} </th>
           <td mat-cell *matCellDef="let penaltyIncome">
             {{ penaltyIncome.chargeId  | find:savingProductsTemplate.penaltyOptions:'id':'name' }}
           </td>
         </ng-container>
 
         <ng-container matColumnDef="incomeAccountId">
-          <th mat-header-cell *matHeaderCellDef> Income Account </th>
+          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Income Account' | translate}} </th>
           <td mat-cell *matCellDef="let penaltyIncome">
             {{ penaltyIncome.incomeAccountId | find:savingProductsTemplate.accountingMappingOptions.incomeAccountOptions:'id':'name' }}
           </td>
@@ -291,12 +291,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()" *mifosxHasPermission="taskPermission">
-    Submit
+    {{'labels.buttons.Submit' | translate}}
   </button>
 </div>

src/app/products/saving-products/saving-product-stepper/saving-product-settings-step/saving-product-settings-step.component.html

@@ -3,14 +3,14 @@
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" fxLayoutAlign.gt-sm="start center">
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Minimum Opening Balance</mat-label>
+      <mat-label>{{'labels.inputs.Minimum Opening Balance' | translate}}</mat-label>
       <input type="number" matInput matTooltip="Sets the minimum deposit amount required to open a saving account of this saving product type" formControlName="minRequiredOpeningBalance">
     </mat-form-field>
 
     <span fxFlex="48%" fxHide.lt-md></span>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Lock-in Period</mat-label>
+      <mat-label>{{'labels.inputs.Lock-in Period' | translate}}</mat-label>
       <input type="number" matInput matTooltip="Used to indicate the length of time that a savings account of this saving product type is locked-in and withdrawals are not allowed" formControlName="lockinPeriodFrequency">
     </mat-form-field>
 
@@ -23,61 +23,61 @@
     </mat-form-field>
 
     <mat-checkbox fxFlex="48%" labelPosition="before" matTooltip="Indicates whether the withdrawal fee should be applied when funds are transferred between accounts" formControlName="withdrawalFeeForTransfers" class="margin-v">
-      Apply Withdrawal Fee for Transfers
+      {{'labels.inputs.Apply Withdrawal Fee for Transfers' | translate}}
     </mat-checkbox>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Balance Required for Interest Calculation</mat-label>
+      <mat-label>{{'labels.inputs.Balance Required for Interest Calculation' | translate}}</mat-label>
       <input type="number" matInput matTooltip="Sets the balance required for interest calculation" formControlName="minBalanceForInterestCalculation">
     </mat-form-field>
 
     <mat-checkbox fxFlex="48%" labelPosition="before" matTooltip="Indicates whether to enforce a minimum balance" formControlName="enforceMinRequiredBalance" class="margin-v">
-      Enforce Minimum Balance
+      {{'labels.inputs.Enforce Minimum Balance' | translate}}
     </mat-checkbox>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Minimum Balance</mat-label>
+      <mat-label>{{'labels.inputs.Minimum Balance' | translate}}</mat-label>
       <input type="number" matInput matTooltip="Sets the minimum balance allowed for a saving account" formControlName="minRequiredBalance">
     </mat-form-field>
 
     <mat-checkbox fxFlex="48%" labelPosition="before" matTooltip="An boolean flag to attach  taxes to interest posting" formControlName="withHoldTax" class="margin-v">
-      Is Withhold Tax Applicable?
+      {{'labels.inputs.Is Withhold Tax Applicable' | translate}}?
     </mat-checkbox>
 
     <mat-form-field fxFlex="48%" *ngIf="savingProductSettingsForm.value.withHoldTax">
-      <mat-label>Tax Group</mat-label>
+      <mat-label>{{'labels.inputs.Tax Group' | translate}}</mat-label>
       <mat-select formControlName="taxGroupId" required>
         <mat-option *ngFor="let taxGroup of taxGroupData" [value]="taxGroup.id">
           {{ taxGroup.name }}
         </mat-option>
       </mat-select>
       <mat-error>
-        Tax Group is <strong>required</strong>
+        {{'labels.inputs.Tax Group' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-divider fxFlex="98%"></mat-divider>
 
-    <h3 fxFlex="23%" class="mat-h3">Overdraft</h3>
+    <h3 fxFlex="23%" class="mat-h3">{{'labels.inputs.Overdraft' | translate}}</h3>
 
     <mat-checkbox fxFlex="73%" labelPosition="before" matTooltip="Indicates whether saving accounts based on this saving product may have an overdraft" formControlName="allowOverdraft" class="margin-b">
-      Is Overdraft Allowed?
+      {{'labels.inputs.Is Overdraft Allowed' | translate}}?
     </mat-checkbox>
 
     <div *ngIf="savingProductSettingsForm.value.allowOverdraft" fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
       <mat-form-field fxFlex="31%">
-        <mat-label>Minimum Overdraft Required for Interest Calculation</mat-label>
+        <mat-label>{{'labels.inputs.Minimum Overdraft Required for Interest Calculation' | translate}}</mat-label>
         <input type="number" matInput matTooltip="Sets the overdraft required for interest calculation" formControlName="minOverdraftForInterestCalculation">
       </mat-form-field>
 
       <mat-form-field fxFlex="31%">
-        <mat-label>Nominal Annual Interest for Overdraft</mat-label>
+        <mat-label>{{'labels.inputs.Nominal Annual Interest for Overdraft' | translate}}</mat-label>
         <input type="number" matInput matTooltip="Default interest rate on overdraft" formControlName="nominalAnnualInterestRateOverdraft">
       </mat-form-field>
 
       <mat-form-field fxFlex="31%">
-        <mat-label>Maximum Overdraft Amount Limit</mat-label>
+        <mat-label>{{'labels.inputs.Maximum Overdraft Amount Limit' | translate}}</mat-label>
         <input type="number" matInput matTooltip="Sets the maximum allowed overdraft amount for a saving account that is allowed to have an overdraft" formControlName="overdraftLimit">
       </mat-form-field>
 
@@ -85,35 +85,35 @@
 
     <mat-divider fxFlex="98%"></mat-divider>
 
-    <h3 fxFlex="23%" class="mat-h3">Dormancy Tracking</h3>
+    <h3 fxFlex="23%" class="mat-h3">{{'labels.inputs.Dormancy Tracking' | translate}}</h3>
 
     <mat-checkbox fxFlex="73%" labelPosition="before" matTooltip="Enables definition and tracking inactive Savings Accounts" formControlName="isDormancyTrackingActive" class="margin-b">
-      Enable Dormancy Tracking
+      {{'labels.inputs.Enable Dormancy Tracking' | translate}}
     </mat-checkbox>
 
     <div *ngIf="savingProductSettingsForm.value.isDormancyTrackingActive" fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
       <mat-form-field fxFlex="31%">
-        <mat-label>Number of Days to Inactive sub-status</mat-label>
+        <mat-label>{{'labels.inputs.Number of Days to Inactive sub-status' | translate}}</mat-label>
         <input type="number" matInput matTooltip="Consecutive Number of Days of inactive period to mark an account as Inactive" formControlName="daysToInactive" required>
         <mat-error>
-          Number of Days to Inactive sub-status is <strong>required</strong>
+          {{'labels.inputs.Number of Days to Inactive sub-status' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
         </mat-error>
       </mat-form-field>
 
       <mat-form-field fxFlex="31%">
-        <mat-label>Number of Days to Dormant sub-status</mat-label>
+        <mat-label>{{'labels.inputs.Number of Days to Dormant sub-status' | translate}}</mat-label>
         <input type="number" matInput matTooltip="Consecutive Number of Days of inactive period to mark an account as Dormant" formControlName="daysToDormancy" required>
         <mat-error>
-          Number of Days to Dormant sub-status is <strong>required</strong>
+          {{'labels.inputs.Number of Days to Dormant sub-status' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
         </mat-error>
       </mat-form-field>
 
       <mat-form-field fxFlex="31%">
-        <mat-label>Number of Days to Escheat</mat-label>
+        <mat-label>{{'labels.inputs.Number of Days to Escheat' | translate}}</mat-label>
         <input type="number" matInput matTooltip="Consecutive Number of Days of inactive period to mark an account as Escheat" formControlName="daysToEscheat" required>
         <mat-error>
-          Number of Days to Escheat is <strong>required</strong>
+          {{'labels.inputs.Number of Days to Escheat' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
         </mat-error>
       </mat-form-field>
 
@@ -122,12 +122,12 @@
   </div>
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
-    <button mat-raised-button matStepperPrevious>
+    <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/products/saving-products/saving-product-stepper/saving-product-terms-step/saving-product-terms-step.component.html

@@ -3,72 +3,72 @@
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Nominal Annual Interest Rate</mat-label>
+      <mat-label>{{'labels.inputs.Nominal Annual Interest' | translate}}</mat-label>
       <input type="number" matInput matTooltip="The default interest rate set when creating savings accounts" formControlName="nominalAnnualInterestRate" required>
       <mat-error>
-        Nominal Annual Interest is <strong>required</strong>
+        {{'labels.inputs.Nominal Annual Interest' | 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>Interest Compounding Period</mat-label>
+      <mat-label>{{'labels.inputs.Interest Compounding Period' | translate}}</mat-label>
       <mat-select formControlName="interestCompoundingPeriodType" matTooltip="The period at which interest rate is compounded" required>
         <mat-option *ngFor="let interestCompoundingPeriodType of interestCompoundingPeriodTypeData" [value]="interestCompoundingPeriodType.id">
           {{ interestCompoundingPeriodType.value }}
         </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" matTooltip="The period at which interest rate is posted or credited to a saving account" required>
         <mat-option *ngFor="let interestPostingPeriodType of interestPostingPeriodTypeData" [value]="interestPostingPeriodType.id">
           {{ interestPostingPeriodType.value }}
         </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" matTooltip="The method used to calculate interest" required>
         <mat-option *ngFor="let interestCalculationType of interestCalculationTypeData" [value]="interestCalculationType.id">
           {{ interestCalculationType.value }}
         </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" matTooltip="The setting for number of days in year to use to calculate interest" required>
         <mat-option *ngFor="let interestCalculationDaysInYearType of interestCalculationDaysInYearTypeData" [value]="interestCalculationDaysInYearType.id">
           {{ interestCalculationDaysInYearType.value }}
         </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>
 
   </div>
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
-    <button mat-raised-button matStepperPrevious>
+    <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/products/saving-products/saving-products.component.html

@@ -2,7 +2,7 @@
   <div #buttonSavingProduct class="in-block">
   <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_SAVINGSPRODUCT'">
     <fa-icon icon="plus" class="m-r-10"></fa-icon>
-    Create Saving Product
+    {{'labels.text.Create Savings Product' | translate}}
   </button>
   </div>
 </div>
@@ -21,12 +21,12 @@
     <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 savingProduct"> {{ savingProduct.name }} </td>
       </ng-container>
 
       <ng-container matColumnDef="shortName">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Short Name </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Short Name' | translate}} </th>
         <td mat-cell *matCellDef="let savingProduct"> {{ savingProduct.shortName }} </td>
       </ng-container>
 
@@ -42,29 +42,29 @@
 </div>
 
 <ng-template #templateButtonSavingProduct let-popover="popover">
-  <h2>Create saving product</h2>
+  <h2>{{'labels.text.Create Savings Product' | translate}}</h2>
   <p class="mw300">This option allows you to create new savings product.</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter,filter, 'bottom', true)">Next</button>
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate}}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">{{'labels.buttons.Back' | translate}}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter,filter, 'bottom', true)">{{'labels.buttons.Next' | translate}}</button>
   </div>
 </ng-template>
 
 <ng-template #templateFilter let-popover="popover">
-  <h4>Search bar to filter saving products.</h4>
+  <h4>{{'labels.heading.Search bar to filter saving products.' | translate}}</h4>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonSavingProduct,buttonSavingProduct , 'bottom', true)">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateSavingProductTable,savingProductTable, 'top', true)">Next</button>
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate}}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonSavingProduct,buttonSavingProduct , 'bottom', true)">{{'labels.buttons.Back' | translate}}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateSavingProductTable,savingProductTable, 'top', true)">{{'labels.buttons.Next' | translate}}t</button>
   </div>
 </ng-template>
 
 <ng-template #templateSavingProductTable let-popover="popover">
-  <h4 class="mw300">List of saving products in the organization. For more details click: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/102629497/Savings+Products" target="_blank">Savings Products</a></h4>
+  <h4 class="mw300">List of saving products in the organization. For more details click: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/102629497/Savings+Products" target="_blank">{{'labels.heading.Savings Products' | translate}}</a></h4>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter,filter, 'bottom', true)">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">Next</button>
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate}}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter,filter, 'bottom', true)">{{'labels.buttons.Back' | translate}}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">{{'labels.buttons.Next' | translate}}</button>
   </div>
 </ng-template>

src/app/products/saving-products/view-saving-product/saving-product-general-tab/saving-product-general-tab.component.html

@@ -1,6 +1,6 @@
 <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_SAVINGSPRODUCT'">
-    <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>
 </div>
 
@@ -13,178 +13,178 @@
 
     <mat-divider [inset]="true"></mat-divider>
 
-    <h3 class="mat-h3" fxFlexFill>Details</h3>
+    <h3 class="mat-h3" fxFlexFill>{{'labels.heading.Details' | translate}}</h3>
 
     <mat-divider [inset]="true"></mat-divider>
 
     <div fxFlexFill>
-      <span fxFlex="40%">Short Name:</span>
+      <span fxFlex="40%">{{'labels.inputs.Short Name' | translate}}:</span>
       <span fxFlex="60%">{{ savingProduct.shortName }}</span>
     </div>
 
     <div fxFlexFill *ngIf="savingProduct.description">
-      <span fxFlex="40%">Description:</span>
+      <span fxFlex="40%">{{'labels.inputs.Description' | translate}}:</span>
       <span fxFlex="60%">{{ savingProduct.description }}</span>
     </div>
 
-    <h3 class="mat-h3" fxFlexFill>Currency</h3>
+    <h3 class="mat-h3" fxFlexFill>{{'labels.inputs.Currency' | translate}}</h3>
 
     <mat-divider [inset]="true"></mat-divider>
 
     <div fxFlexFill>
-      <span fxFlex="40%">Currency:</span>
+      <span fxFlex="40%">{{'labels.inputs.Currency' | translate}}:</span>
       <span fxFlex="60%">{{ savingProduct.currency.name }}</span>
     </div>
 
     <div fxFlexFill>
-      <span fxFlex="40%">Decimal Places:</span>
+      <span fxFlex="40%">{{'labels.inputs.Decimal Places' | translate}}:</span>
       <span fxFlex="60%">{{ savingProduct.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%">{{ savingProduct.currency.inMultiplesOf }}</span>
     </div>
 
-    <h3 class="mat-h3" fxFlexFill>Terms</h3>
+    <h3 class="mat-h3" fxFlexFill>{{'labels.heading.Terms' | translate}}</h3>
 
     <mat-divider [inset]="true"></mat-divider>
 
     <div fxFlexFill>
-      <span fxFlex="40%">Nominal Annual Interest Rate:</span>
-      <span fxFlex="60%">{{ savingProduct.nominalAnnualInterestRate }}</span>
+      <span fxFlex="40%">{{'labels.inputs.Nominal Annual Interest' | translate}}:</span>
+      <span fxFlex="60%">{{ savingProduct.nominalAnnualInterestRate | formatNumber}} %</span>
     </div>
 
     <div fxFlexFill>
-      <span fxFlex="40%">Interest Compounding Period:</span>
+      <span fxFlex="40%">{{'labels.inputs.Interest Compounding Period' | translate}}:</span>
       <span fxFlex="60%">{{ savingProduct.interestCompoundingPeriodType.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%">{{ savingProduct.interestPostingPeriodType.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%">{{ savingProduct.interestCalculationType.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%">{{ savingProduct.interestCalculationDaysInYearType.value }}</span>
     </div>
 
-    <h3 class="mat-h3" fxFlexFill>Settings</h3>
+    <h3 class="mat-h3" fxFlexFill>{{'labels.heading.Settings' | translate}}</h3>
 
     <mat-divider [inset]="true"></mat-divider>
 
     <div fxFlexFill *ngIf="savingProduct.minRequiredOpeningBalance">
-      <span fxFlex="40%">Minimum Opening Balance:</span>
+      <span fxFlex="40%">{{'labels.inputs.Minimum Opening Balance' | translate}}:</span>
       <span fxFlex="60%">{{ savingProduct.minRequiredOpeningBalance }}</span>
     </div>
 
     <div fxFlexFill *ngIf="savingProduct.lockinPeriodFrequency">
-      <span fxFlex="40%">Lock-in Period:</span>
+      <span fxFlex="40%">{{'labels.inputs.Lock-in Period' | translate}}:</span>
       <span fxFlex="60%">{{ savingProduct.lockinPeriodFrequency + ' ' + savingProduct.lockinPeriodFrequencyType.value
         }}</span>
     </div>
 
     <div fxFlexFill>
-      <span fxFlex="40%">Apply Withdrawal Fee for Transfers:</span>
+      <span fxFlex="40%">{{'labels.inputs.Apply Withdrawal Fee for Transfers' | translate}}:</span>
       <span fxFlex="60%">{{ savingProduct.withdrawalFeeForTransfers | yesNo }}</span>
     </div>
 
     <div fxFlexFill *ngIf="savingProduct.minBalanceForInterestCalculation">
-      <span fxFlex="40%">Balance Required for Interest Calculation:</span>
+      <span fxFlex="40%">{{'labels.inputs.Balance Required for Interest Calculation' | translate}}:</span>
       <span fxFlex="60%">{{ savingProduct.minBalanceForInterestCalculation }}</span>
     </div>
 
     <div fxFlexFill>
-      <span fxFlex="40%">Enforce Minimum Balance:</span>
+      <span fxFlex="40%">{{'labels.inputs.Enforce Minimum Balance' | translate}}:</span>
       <span fxFlex="60%">{{ savingProduct.enforceMinRequiredBalance | yesNo }}</span>
     </div>
 
     <div fxFlexFill *ngIf="savingProduct.minRequiredBalance">
-      <span fxFlex="40%">Minimum Balance:</span>
+      <span fxFlex="40%">{{'labels.inputs.Minimum Balance' | translate}}:</span>
       <span fxFlex="60%">{{ savingProduct.minRequiredBalance }}</span>
     </div>
 
     <div fxFlexFill>
-      <span fxFlex="40%">Withhold Tax is Applicable:</span>
+      <span fxFlex="40%">{{'labels.inputs.Withhold Tax is Applicable' | translate}}:</span>
       <span fxFlex="60%">{{ savingProduct.withHoldTax | yesNo }}</span>
     </div>
 
     <div fxFlexFill *ngIf="savingProduct.withHoldTax">
-      <span fxFlex="40%">Tax Group:</span>
+      <span fxFlex="40%">{{'labels.inputs.Tax Group' | translate}}:</span>
       <span fxFlex="60%">{{ savingProduct.taxGroup.name }}</span>
     </div>
 
     <div fxFlexFill>
-      <span fxFlex="40%">Is Overdraft Allowed:</span>
+      <span fxFlex="40%">{{'labels.inputs.Is Overdraft Allowed' | translate}}:</span>
       <span fxFlex="60%">{{ savingProduct.allowOverdraft | yesNo }}</span>
     </div>
 
     <div fxFlexFill *ngIf="savingProduct.minOverdraftForInterestCalculation">
-      <span fxFlex="40%">Minimum Overdraft Required for Interest Calculation:</span>
+      <span fxFlex="40%">{{'labels.inputs.Minimum Overdraft Required for Interest Calculation' | translate}}:</span>
       <span fxFlex="60%">{{ savingProduct.minOverdraftForInterestCalculation }}</span>
     </div>
 
     <div fxFlexFill *ngIf="savingProduct.nominalAnnualInterestRateOverdraft">
-      <span fxFlex="40%">Nominal Annual Interest for Overdraft:</span>
+      <span fxFlex="40%">{{'labels.inputs.Nominal Annual Interest for Overdraft' | translate}}:</span>
       <span fxFlex="60%">{{ savingProduct.nominalAnnualInterestRateOverdraft }}</span>
     </div>
 
     <div fxFlexFill *ngIf="savingProduct.overdraftLimit">
-      <span fxFlex="40%">Maximum Overdraft Amount Limit:</span>
+      <span fxFlex="40%">{{'labels.inputs.Maximum Overdraft Amount Limit' | translate}}:</span>
       <span fxFlex="60%">{{ savingProduct.overdraftLimit }}</span>
     </div>
 
     <div fxFlexFill>
-      <span fxFlex="40%">Enable Dormancy Tracking:</span>
+      <span fxFlex="40%">{{'labels.inputs.Enable Dormancy Tracking' | translate}}:</span>
       <span fxFlex="60%">{{ savingProduct.isDormancyTrackingActive | yesNo }}</span>
     </div>
 
     <div fxFlexFill *ngIf="savingProduct.isDormancyTrackingActive" fxLayout="row wrap" fxLayout.lt-md="column">
-      <span fxFlex="40%">Number of Days to Inactive sub-status:</span>
+      <span fxFlex="40%">{{'labels.inputs.Number of Days to Inactive sub-status' | translate}}:</span>
       <span fxFlex="60%">{{ savingProduct.daysToInactive }}</span>
-      <span fxFlex="40%">Number of Days to Dormant sub-status:</span>
+      <span fxFlex="40%">{{'labels.inputs.Number of Days to Dormant sub-status' | translate}}:</span>
       <span fxFlex="60%">{{ savingProduct.daysToDormancy }}</span>
-      <span fxFlex="40%">Number of Days to Escheat:</span>
+      <span fxFlex="40%">{{'labels.inputs.Number of Days to Escheat' | translate}}:</span>
       <span fxFlex="60%">{{ savingProduct.daysToEscheat }}</span>
     </div>
 
     <div fxFlexFill *ngIf="savingProduct.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 [inset]="true"></mat-divider>
 
       <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="savingProduct.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="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>
@@ -197,11 +197,11 @@
 
     </div>
 
-    <h3 class="mat-h3" fxFlexFill>Accounting</h3>
+    <h3 class="mat-h3" fxFlexFill>{{'labels.heading.Accounting' | translate}}</h3>
 
     <mat-divider [inset]="true"></mat-divider>
 
-    <mifosx-view-savings-accounting-details
+    <mifosx-view-savings-accounting-details fxFlex="100%"
     [accountingRule]="savingProduct.accountingRule"
     [accountingMappings]="savingProduct.accountingMappings"
     >
@@ -211,27 +211,27 @@
       *ngIf="savingProduct.paymentChannelToFundSourceMappings?.length || savingProduct.feeToIncomeAccountMappings?.length || savingProduct.penaltyToIncomeAccountMappings?.length"
       fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
 
-      <h3 class="mat-h3" fxFlexFill>Advanced Accounting Rules</h3>
+      <h3 class="mat-h3" fxFlexFill>{{'labels.inputs.Advanced Accounting Rules' | translate}}</h3>
 
       <mat-divider [inset]="true"></mat-divider>
 
       <div *ngIf="savingProduct.paymentChannelToFundSourceMappings?.length" fxFlexFill fxLayout="row wrap"
         fxLayout.lt-md="column">
 
-        <h4 class="mat-h4" fxFlexFill>Fund Sources for Payment Channels</h4>
+        <h4 class="mat-h4" fxFlexFill>{{'labels.inputs.Fund Sources for Payment Channels' | translate}}</h4>
 
         <table fxFlexFill class="mat-elevation-z1" mat-table
           [dataSource]="savingProduct.paymentChannelToFundSourceMappings">
 
           <ng-container matColumnDef="paymentTypeId">
-            <th mat-header-cell *matHeaderCellDef> Payment Type </th>
+            <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Payment Type' | translate}} </th>
             <td mat-cell *matCellDef="let paymentFundSource">
               {{ paymentFundSource.paymentType.name }}
             </td>
           </ng-container>
 
           <ng-container matColumnDef="fundSourceAccountId">
-            <th mat-header-cell *matHeaderCellDef> Fund Source </th>
+            <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Fund Source' | translate}} </th>
             <td mat-cell *matCellDef="let paymentFundSource">
               ({{ paymentFundSource.fundSourceAccount.glCode }}) {{ paymentFundSource.fundSourceAccount.name }}
             </td>
@@ -247,19 +247,19 @@
       <div *ngIf="savingProduct.feeToIncomeAccountMappings?.length" fxFlexFill fxLayout="row wrap"
         fxLayout.lt-md="column">
 
-        <h4 class="mat-h4" fxFlexFill>Fees to Specific Income Accounts</h4>
+        <h4 class="mat-h4" fxFlexFill>{{'labels.inputs.Fees to Specific Income Accounts' | translate}}</h4>
 
         <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="savingProduct.feeToIncomeAccountMappings">
 
           <ng-container matColumnDef="chargeId">
-            <th mat-header-cell *matHeaderCellDef> Fees </th>
+            <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Fees' | translate}} </th>
             <td mat-cell *matCellDef="let feesIncome">
               {{ feesIncome.charge.name }}
             </td>
           </ng-container>
 
           <ng-container matColumnDef="incomeAccountId">
-            <th mat-header-cell *matHeaderCellDef> Income Account </th>
+            <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Income Account' | translate}} </th>
             <td mat-cell *matCellDef="let feesIncome">
               ({{ feesIncome.incomeAccount.glCode }}) {{ feesIncome.incomeAccount.name }}
             </td>
@@ -275,20 +275,20 @@
       <div *ngIf="savingProduct.penaltyToIncomeAccountMappings?.length" fxFlexFill fxLayout="row wrap"
         fxLayout.lt-md="column">
 
-        <h4 class="mat-h4" fxFlexFill>Penalties to Specific Income Accounts</h4>
+        <h4 class="mat-h4" fxFlexFill>{{'labels.inputs.Penalties to Specific Income Accounts' | translate}}</h4>
 
         <table fxFlexFill class="mat-elevation-z1" mat-table
           [dataSource]="savingProduct.penaltyToIncomeAccountMappings">
 
           <ng-container matColumnDef="chargeId">
-            <th mat-header-cell *matHeaderCellDef> Penalty </th>
+            <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Penalty' | translate}} </th>
             <td mat-cell *matCellDef="let penaltyIncome">
               {{ penaltyIncome.charge.name }}
             </td>
           </ng-container>
 
           <ng-container matColumnDef="incomeAccountId">
-            <th mat-header-cell *matHeaderCellDef> Income Account </th>
+            <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Income Account' | translate}} </th>
             <td mat-cell *matCellDef="let penaltyIncome">
               ({{ penaltyIncome.incomeAccount.glCode }}) {{ penaltyIncome.incomeAccount.name }}
             </td>

src/app/products/saving-products/view-saving-product/view-saving-product.component.html

@@ -5,7 +5,7 @@
     <nav mat-tab-nav-bar class="navigation-tabs">
       <a mat-tab-link [routerLink]="['./general']" routerLinkActive #general="routerLinkActive"
         [active]="general.isActive">
-        General
+        {{'labels.heading.General' | translate}}
       </a>
       <ng-container *ngFor="let savingProductDatatable of savingProductDatatables">
         <a mat-tab-link [routerLink]="['./datatables',savingProductDatatable.registeredTableName]" routerLinkActive

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

@@ -93,7 +93,7 @@
   <div class="alert" [hidden]="accountWithTransactions">
     <div class="message">
       <i class="fa fa-exclamation-circle alert-check"></i>
-      No transaction was found
+      {{ "labels.texts.No transaction was found" | translate }}
     </div>
   </div>
 </div>

src/app/shared/accounting/view-savings-accounting-details/view-savings-accounting-details.component.html

@@ -1,8 +1,8 @@
 <div fxLayout="row wrap" fxLayout.lt-md="column">
 
     <div fxFlexFill *ngIf="accountingRule" fxLayout="row wrap" fxLayout.lt-md="column">
-        <span fxFlex="40%">Type:</span>
-        <span fxFlex="60%">{{ accountingRule.value }}</span>
+        <span fxFlex="40%">{{'labels.inputs.Type' | translate}}:</span>
+        <span fxFlex="60%">{{'labels.accounting.' + accountingRule.value | translate}}</span>
     </div>
 
     <div fxFlexFill *ngIf="isCashOrAccrualAccounting()" fxLayout="row wrap" fxLayout.lt-md="column">