Fixed Deposit products with i18n

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

@@ -1,7 +1,7 @@
 <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
   <mat-form-field fxFlex="48%">
-    <mat-label>Charge</mat-label>
+    <mat-label>{{'labels.inputs.Charge' | translate }}</mat-label>
     <mat-select #charge>
       <mat-option *ngFor="let charge of chargeData | chargesFilter:chargesDataSource:currencyCode.value"
         [value]="charge">
@@ -13,7 +13,7 @@
   <div fxFlex="48%" fxFlexAlign="center">
     <button type="button" mat-raised-button color="primary" (click)="addCharge(charge)" [disabled]="!charge.value">
       <fa-icon icon="plus" class="m-r-10"></fa-icon>
-      Add
+      {{'labels.buttons.Add' | translate }}
     </button>
   </div>
 
@@ -21,23 +21,23 @@
     *ngIf="chargesDataSource.length > 0">
 
     <ng-container matColumnDef="name">
-      <th mat-header-cell *matHeaderCellDef> Name </th>
+      <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Name' | translate }} </th>
       <td mat-cell *matCellDef="let charge">
         {{ charge.name + ', ' + charge.currency.displaySymbol }}
       </td>
     </ng-container>
 
     <ng-container matColumnDef="chargeCalculationType">
-      <th mat-header-cell *matHeaderCellDef> Type </th>
+      <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Type' | translate }} </th>
       <td mat-cell *matCellDef="let charge">
         {{ charge.chargeCalculationType.value }}
       </td>
     </ng-container>
 
     <ng-container matColumnDef="amount">
-      <th mat-header-cell *matHeaderCellDef> Amount </th>
+      <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Amount' | translate }} </th>
       <td mat-cell *matCellDef="let charge">
-        {{ charge.amount }}
+        {{ charge.amount | formatNumber }}
         <button mat-icon-button color="primary" (click)="editChargeAmount(charge)">
           <fa-icon icon="pen"></fa-icon>
         </button>
@@ -45,14 +45,14 @@
     </ng-container>
 
     <ng-container matColumnDef="chargeTimeType">
-      <th mat-header-cell *matHeaderCellDef> Collected On </th>
+      <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Collected On' | translate }} </th>
       <td mat-cell *matCellDef="let charge">
         {{ charge.chargeTimeType.value }}
       </td>
     </ng-container>
 
     <ng-container matColumnDef="date">
-      <th mat-header-cell *matHeaderCellDef> Date </th>
+      <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Date' | translate }} </th>
       <td mat-cell *matCellDef="let charge">
         <span
           *ngIf="charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee'">
@@ -73,9 +73,10 @@
     </ng-container>
 
     <ng-container matColumnDef="repaymentsEvery">
-      <th mat-header-cell *matHeaderCellDef> Repayments Every </th>
+      <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Repayments Every' | translate }} </th>
       <td mat-cell *matCellDef="let charge">
-        {{ charge.feeInterval || 'Not Provided' }}
+        <span *ngIf="charge.feeInterval">{{ charge.feeInterval}}</span>
+        <span *ngIf="!charge.feeInterval">{{'labels.inputs.Not Provided' | translate }}</span>
         <button mat-icon-button color="primary"
           *ngIf="charge.chargeTimeType.value === 'Weekly Fee' || charge.chargeTimeType.value === 'Monthly Fee'"
           (click)="editChargeFeeInterval(charge)">
@@ -85,7 +86,7 @@
     </ng-container>
 
     <ng-container matColumnDef="action">
-      <th mat-header-cell *matHeaderCellDef> Actions </th>
+      <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Actions' | translate }} </th>
       <td mat-cell *matCellDef="let charge">
         <button mat-icon-button color="warn" (click)="deleteCharge(charge)">
           <fa-icon icon="trash"></fa-icon>
@@ -103,23 +104,23 @@
 
       <!-- Check Column -->
       <ng-container matColumnDef="check">
-          <th mat-header-cell *matHeaderCellDef>
-              <mat-checkbox (change)="toggleSelects()" [(ngModel)]="selectAllItems"></mat-checkbox>
-          </th>
-          <td mat-cell *matCellDef="let element">
-              <mat-checkbox (change)="toggleSelect()" [(ngModel)]="element.selected"></mat-checkbox>
-          </td>
+        <th mat-header-cell *matHeaderCellDef>
+          <mat-checkbox (change)="toggleSelects()" [(ngModel)]="selectAllItems"></mat-checkbox>
+        </th>
+        <td mat-cell *matCellDef="let element">
+          <mat-checkbox (change)="toggleSelect()" [(ngModel)]="element.selected"></mat-checkbox>
+        </td>
       </ng-container>
 
       <!-- Position Column -->
       <ng-container matColumnDef="id">
-        <th mat-header-cell *matHeaderCellDef> Client ID </th>
+        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Client ID' | translate }} </th>
         <td mat-cell *matCellDef="let element"> {{element.id}} </td>
       </ng-container>
 
       <!-- Name Column -->
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef> Client Name </th>
+        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Client Name' | translate }} </th>
         <td mat-cell *matCellDef="let element"> {{element.displayName}} </td>
       </ng-container>
 
@@ -135,10 +136,10 @@
 <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
   <button mat-raised-button matStepperPrevious>
     <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
-    Previous
+    {{"labels.buttons.Previous" | translate }}
   </button>
   <button mat-raised-button matStepperNext>
-    Next
+    {{"labels.buttons.Next" | translate }}
     <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
   </button>
-</div>
+</div>

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

@@ -3,30 +3,30 @@
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Product Name</mat-label>
+      <mat-label>{{'labels.inputs.Product Name' | translate}}</mat-label>
       <mat-select formControlName="productId" required>
         <mat-option *ngFor="let product of productData" [value]="product.id">
           {{ product.name }}
         </mat-option>
       </mat-select>
       <mat-error>
-        Product Name is <strong>required</strong>
+        {{'labels.inputs.Product Name' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%" (click)="submittedOnDatePicker.open()" *ngIf="savingsProductSelected">
-      <mat-label>Submitted On</mat-label>
+      <mat-label>{{'labels.inputs.Submitted On' | translate}}</mat-label>
       <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="submittedOnDatePicker"
         formControlName="submittedOnDate" required>
       <mat-datepicker-toggle matSuffix [for]="submittedOnDatePicker"></mat-datepicker-toggle>
       <mat-datepicker #submittedOnDatePicker></mat-datepicker>
       <mat-error>
-        Submission Date is <strong>required</strong>
+        {{'labels.inputs.Submitted On' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%" *ngIf="savingsProductSelected">
-      <mat-label>Field Officer</mat-label>
+      <mat-label>{{'labels.inputs.Field Officer' | translate}}</mat-label>
       <mat-select formControlName="fieldOfficerId">
         <mat-option *ngFor="let officer of fieldOfficerData" [value]="officer.id">
           {{ officer.displayName }}
@@ -35,7 +35,7 @@
     </mat-form-field>
 
     <mat-form-field fxFlex="48%" *ngIf="savingsProductSelected">
-      <mat-label>External ID</mat-label>
+      <mat-label>{{'labels.inputs.External ID' | translate}}</mat-label>
       <input matInput formControlName="externalId">
     </mat-form-field>
 
@@ -44,12 +44,12 @@
   <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>
 
-</form>
+</form>

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

@@ -1,151 +1,158 @@
 <div fxLayout="row wrap" fxLayout.lt-md="column">
 
-  <h3 class="mat-h3" fxFlexFill>Details</h3>
+  <h3 class="mat-h3" fxFlexFill>{{'labels.heading.Details' | translate}}</h3>
 
   <mat-divider fxFlexFill></mat-divider>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Product</span>
+    <span fxFlex="40%">{{'labels.inputs.Product' | translate}}</span>
     <span fxFlex="60%">{{ savingsAccount.productId | find:savingsAccountTemplate.productOptions:'id':'name' }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Submitted On</span>
+    <span fxFlex="40%">{{'labels.inputs.Submitted On' | translate}}</span>
     <span fxFlex="60%">{{ savingsAccount.submittedOnDate | dateFormat }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">External Id</span>
+    <span fxFlex="40%">{{'labels.inputs.External Id' | translate}}</span>
     <span fxFlex="60%" *ngIf="savingsAccount.externalId">
       <mifosx-external-identifier externalId="{{savingsAccount.externalId}}"></mifosx-external-identifier>
     </span>
     <span fxFlex="60%" *ngIf="!savingsAccount.externalId">
-      Unassigned
+      {{'labels.inputs.Unassigned' | translate}}
     </span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Field Officer</span>
-    <span fxFlex="60%">{{ savingsAccount.fieldOfficerId | find:savingsAccountProductTemplate.fieldOfficerOptions:'id':'displayName' }}</span>
+    <span fxFlex="40%">{{'labels.inputs.Field Officer' | translate}}</span>
+    <span fxFlex="60%">{{ savingsAccount.fieldOfficerId |
+      find:savingsAccountProductTemplate.fieldOfficerOptions:'id':'displayName' }}</span>
   </div>
 
-  <h3 class="mat-h3" fxFlexFill>Terms</h3>
+  <h3 class="mat-h3" fxFlexFill>{{'labels.heading.Terms' | translate}}</h3>
 
   <mat-divider fxFlexFill></mat-divider>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Currency</span>
-    <span fxFlex="60%">{{ savingsAccountTermsForm.get('currencyCode').value  }}</span>
+    <span fxFlex="40%">{{'labels.inputs.Currency' | translate}}</span>
+    <span fxFlex="60%">{{ savingsAccountTermsForm.get('currencyCode').value }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Decimal Places</span>
+    <span fxFlex="40%">{{'labels.inputs.Decimal Places' | translate}}</span>
     <span fxFlex="60%">{{ savingsAccountTermsForm.get('decimal').value }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Nominal Annual Interest Rate:</span>
-    <span fxFlex="60%">{{ savingsAccount.nominalAnnualInterestRate }}</span>
+    <span fxFlex="40%">{{'labels.inputs.Nominal Annual Interest' | translate}}:</span>
+    <span fxFlex="60%">{{ savingsAccount.nominalAnnualInterestRate | formatNumber }} %</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Interest Compounding Period:</span>
-    <span fxFlex="60%">{{ savingsAccount.interestCompoundingPeriodType | find:savingsAccountProductTemplate.interestCompoundingPeriodTypeOptions:'id':'value' }}</span>
+    <span fxFlex="40%">{{'labels.inputs.Interest Compounding Period' | translate}}:</span>
+    <span fxFlex="60%">{{ savingsAccount.interestCompoundingPeriodType |
+      find:savingsAccountProductTemplate.interestCompoundingPeriodTypeOptions:'id':'value' }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Interest Posting Period:</span>
-    <span fxFlex="60%">{{ savingsAccount.interestPostingPeriodType | find:savingsAccountProductTemplate.interestPostingPeriodTypeOptions:'id':'value' }}</span>
+    <span fxFlex="40%">{{'labels.inputs.Interest Posting Period' | translate}}:</span>
+    <span fxFlex="60%">{{ savingsAccount.interestPostingPeriodType |
+      find:savingsAccountProductTemplate.interestPostingPeriodTypeOptions:'id':'value' }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Interest Calculated using:</span>
-    <span fxFlex="60%">{{ savingsAccount.interestCalculationType | find:savingsAccountProductTemplate.interestCalculationTypeOptions:'id':'value' }}</span>
+    <span fxFlex="40%">{{'labels.inputs.Interest Calculated using' | translate}}:</span>
+    <span fxFlex="60%">{{ savingsAccount.interestCalculationType |
+      find:savingsAccountProductTemplate.interestCalculationTypeOptions:'id':'value' }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Days in Year:</span>
-    <span fxFlex="60%">{{ savingsAccount.interestCalculationDaysInYearType | find:savingsAccountProductTemplate.interestCalculationDaysInYearTypeOptions:'id':'value' }}</span>
+    <span fxFlex="40%">{{'labels.inputs.Days in Year' | translate}}:</span>
+    <span fxFlex="60%">{{ savingsAccount.interestCalculationDaysInYearType |
+      find:savingsAccountProductTemplate.interestCalculationDaysInYearTypeOptions:'id':'value' }}</span>
   </div>
 
   <div fxFlexFill *ngIf="savingsAccount.minRequiredOpeningBalance">
-    <span fxFlex="40%">Minimum Opening Balance:</span>
-    <span fxFlex="60%">{{ savingsAccount.minRequiredOpeningBalance }}</span>
+    <span fxFlex="40%">{{'labels.inputs.Minimum Opening Balance' | translate}}:</span>
+    <span fxFlex="60%">{{ savingsAccount.minRequiredOpeningBalance | formatNumber }}</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%">{{ savingsAccount.withdrawalFeeForTransfers | yesNo }}</span>
   </div>
 
   <div fxFlexFill *ngIf="savingsAccount.lockinPeriodFrequency">
-    <span fxFlex="40%">Lock-in Period:</span>
-    <span fxFlex="60%">{{ savingsAccount.lockinPeriodFrequency + ' ' + (savingsAccount.lockinPeriodFrequencyType | find:savingsAccountProductTemplate.lockinPeriodFrequencyTypeOptions:'id':'value') }}</span>
+    <span fxFlex="40%">{{'labels.inputs.Lock-in Period' | translate}}:</span>
+    <span fxFlex="60%">{{ savingsAccount.lockinPeriodFrequency + ' ' + (savingsAccount.lockinPeriodFrequencyType |
+      find:savingsAccountProductTemplate.lockinPeriodFrequencyTypeOptions:'id':'value') }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Is Overdraft Allowed:</span>
+    <span fxFlex="40%">{{'labels.inputs.Is Overdraft Allowed' | translate}}:</span>
     <span fxFlex="60%">{{ savingsAccount.allowOverdraft | yesNo }}</span>
   </div>
 
   <div fxFlexFill *ngIf="savingsAccount.minOverdraftForInterestCalculation">
-    <span fxFlex="40%">Minimum Overdraft Required for Interest Calculation:</span>
-    <span fxFlex="60%">{{ savingsAccount.minOverdraftForInterestCalculation }}</span>
+    <span fxFlex="40%">{{'labels.inputs.Minimum Overdraft Required for Interest Calculation' | translate}}:</span>
+    <span fxFlex="60%">{{ savingsAccount.minOverdraftForInterestCalculation | formatNumber }}</span>
   </div>
 
   <div fxFlexFill *ngIf="savingsAccount.nominalAnnualInterestRateOverdraft">
-    <span fxFlex="40%">Nominal Annual Interest for Overdraft:</span>
-    <span fxFlex="60%">{{ savingsAccount.nominalAnnualInterestRateOverdraft }}</span>
+    <span fxFlex="40%">{{'labels.inputs.Nominal Annual Interest for Overdraft' | translate}}:</span>
+    <span fxFlex="60%">{{ savingsAccount.nominalAnnualInterestRateOverdraft | formatNumber }} %</span>
   </div>
 
   <div fxFlexFill *ngIf="savingsAccount.overdraftLimit">
-    <span fxFlex="40%">Maximum Overdraft Amount Limit:</span>
-    <span fxFlex="60%">{{ savingsAccount.overdraftLimit }}</span>
+    <span fxFlex="40%">{{'labels.inputs.Maximum Overdraft Amount Limit' | translate}}:</span>
+    <span fxFlex="60%">{{ savingsAccount.overdraftLimit | formatNumber }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Enforce Minimum Balance:</span>
+    <span fxFlex="40%">{{'labels.inputs.Enforce Minimum Balance' | translate}}:</span>
     <span fxFlex="60%">{{ savingsAccount.enforceMinRequiredBalance | yesNo }}</span>
   </div>
 
   <div fxFlexFill *ngIf="savingsAccount.minRequiredBalance">
-    <span fxFlex="40%">Minimum Balance:</span>
+    <span fxFlex="40%">{{'labels.inputs.Minimum Balance' | translate}}:</span>
     <span fxFlex="60%">{{ savingsAccount.minRequiredBalance }}</span>
   </div>
 
   <div fxFlexFill *ngIf="savingsAccount.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]="savingsAccount.charges">
 
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef> Name </th>
+        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Name' | translate}} </th>
         <td mat-cell *matCellDef="let charge">
           {{ charge.name + ', ' + charge.currency.displaySymbol }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="chargeCalculationType">
-        <th mat-header-cell *matHeaderCellDef> Type </th>
+        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Type' | translate}} </th>
         <td mat-cell *matCellDef="let charge">
           {{ charge.chargeCalculationType.value }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="amount">
-        <th mat-header-cell *matHeaderCellDef> Amount </th>
+        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Amount' | translate}} </th>
         <td mat-cell *matCellDef="let charge">
-          {{ charge.amount }}
+          {{ charge.amount | formatNumber }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="date">
-        <th mat-header-cell *matHeaderCellDef> Date </th>
+        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Date' | translate}} </th>
         <td mat-cell *matCellDef="let charge">
-          <span *ngIf="charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee'">
+          <span
+            *ngIf="charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee'">
             {{(charge.dueDate | dateFormat) || 'Unassigned'}}
           </span>
           <span *ngIf="charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'">
@@ -160,14 +167,14 @@
       </ng-container>
 
       <ng-container matColumnDef="repaymentsEvery">
-        <th mat-header-cell *matHeaderCellDef> Repayments Every </th>
+        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Repayments Every' | translate}} </th>
         <td mat-cell *matCellDef="let charge">
           {{ charge.feeInterval || 'Not Provided' }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="chargeTimeType">
-        <th mat-header-cell *matHeaderCellDef> Collected On </th>
+        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Collected On' | translate}} </th>
         <td mat-cell *matCellDef="let charge">
           {{ charge.chargeTimeType.value }}
         </td>
@@ -185,12 +192,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
+  <button mat-raised-button [routerLink]="['../..']">
+    {{"labels.buttons.Cancel" | translate }}
   </button>
   <button mat-raised-button color="primary" (click)="submit.emit()">
-    Submit
+    {{"labels.buttons.Submit" | translate }}
   </button>
-</div>
+</div>

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

@@ -3,89 +3,89 @@
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" fxLayoutAlign.gt-sm="start center">
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Currency</mat-label>
+      <mat-label>{{'labels.inputs.Currency' | translate}}</mat-label>
       <input matInput formControlName="currencyCode">
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Decimal Places</mat-label>
+      <mat-label>{{'labels.inputs.Decimal Places' | translate}}</mat-label>
       <input type="number" matInput formControlName="decimal">
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Nominal Annual Interest Rate</mat-label>
+      <mat-label>{{'labels.inputs.Nominal Annual Interest' | translate}}</mat-label>
       <input type="number" matInput 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>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Interest Compounding Period</mat-label>
+      <mat-label>{{'labels.inputs.Interest Compounding Period' | translate}}</mat-label>
       <mat-select formControlName="interestCompoundingPeriodType" required>
         <mat-option *ngFor="let interestCompoundingPeriodType of interestCompoundingPeriodTypeData" [value]="interestCompoundingPeriodType.id">
           {{ 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" 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" 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" 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>
 
     <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 formControlName="minRequiredOpeningBalance">
     </mat-form-field>
 
     <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="withdrawalFeeForTransfers" class="margin-v">
-      Apply Withdrawal Fee for Transfers
+      {{'labels.inputs.Apply Withdrawal Fee for Transfers' | translate}}
     </mat-checkbox>
 
-    <h4 fxFlex="98%" class="mat-h4">Lock-in Period</h4>
+    <h4 fxFlex="98%" class="mat-h4">{{'labels.inputs.Lock-in Period' | translate}}</h4>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Frequency</mat-label>
+      <mat-label>{{'labels.inputs.Frequency' | translate}}</mat-label>
       <input type="number" matInput formControlName="lockinPeriodFrequency">
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Type</mat-label>
+      <mat-label>{{'labels.inputs.Type' | translate}}</mat-label>
       <mat-select formControlName="lockinPeriodFrequencyType">
         <mat-option *ngFor="let lockinPeriodFrequencyType of lockinPeriodFrequencyTypeData" [value]="lockinPeriodFrequencyType.id">
           {{ lockinPeriodFrequencyType.value }}
@@ -95,26 +95,26 @@
 
     <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" formControlName="allowOverdraft" class="margin-b">
-      Is Overdraft Allowed?
+      {{'labels.inputs.Is Overdraft Allowed' | translate}}
     </mat-checkbox>
 
     <div *ngIf="savingsAccountTermsForm.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 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 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 formControlName="overdraftLimit">
       </mat-form-field>
 
@@ -123,16 +123,16 @@
     <mat-divider fxFlex="98%"></mat-divider>
 
     <mat-checkbox fxFlex="48%" labelPosition="before" 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 formControlName="minRequiredBalance">
     </mat-form-field>
 
     <mat-form-field fxFlex="48%" *ngIf="savingsAccountTermsForm.controls.minBalanceForInterestCalculation.value">
-      <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 formControlName="minBalanceForInterestCalculation">
     </mat-form-field>
 
@@ -141,10 +141,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>