Fixed Deposit account view update (#1881)

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

docker-compose.yml

@@ -21,4 +21,4 @@ services:
       - FINERACT_API_VERSION=/v1
       - FINERACT_PLATFORM_TENANT_IDENTIFIER=default
       - MIFOS_DEFAULT_LANGUAGE=en-US
-      - MIFOS_SUPPORTED_LANGUAGES=en-US,fr-FR
+      - MIFOS_SUPPORTED_LANGUAGES=cs-CS,de-DE,en-US,es-MX,fr-FR,it-IT,ko-KO,lt-LT,lv-LV,ne-NE,pt-PT

env.sample

@@ -15,7 +15,7 @@ FINERACT_PLATFORM_TENANTS_IDENTIFIER=default
 
 MIFOS_DEFAULT_LANGUAGE=en-US
 
-MIFOS_SUPPORTED_LANGUAGES=en-US,fr-FR
+MIFOS_SUPPORTED_LANGUAGES=cs-CS,de-DE,en-US,es-MX,fr-FR,it-IT,ko-KO,lt-LT,lv-LV,ne-NE,pt-PT
 
 MIFOS_PRELOAD_CLIENTS=true
 

src/app/account-transfers/create-standing-instructions/create-standing-instructions.component.html

@@ -41,7 +41,7 @@
               </mat-option>
             </mat-select>
             <mat-error *ngIf="createStandingInstructionsForm.controls.priority.hasError('required')">
-              {{ "labels.inputs.Priority"| translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{ "labels.inputs.Priority"| translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -53,7 +53,7 @@
               </mat-option>
             </mat-select>
             <mat-error *ngIf="createStandingInstructionsForm.controls.status.hasError('required')">
-              {{ "labels.inputs.Status" | translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{ "labels.inputs.Status" | translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -65,7 +65,7 @@
               </mat-option>
             </mat-select>
             <mat-error *ngIf="createStandingInstructionsForm.controls.fromAccountType.hasError('required')">
-              {{"labels.inputs.From Account Type"| translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{"labels.inputs.From Account Type"| translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -77,7 +77,7 @@
               </mat-option>
             </mat-select>
             <mat-error *ngIf="createStandingInstructionsForm.controls.fromAccountId.hasError('required')">
-              {{"labels.inputs.From Account" | translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{"labels.inputs.From Account" | translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -89,7 +89,7 @@
               </mat-option>
             </mat-select>
             <mat-error *ngIf="createStandingInstructionsForm.controls.destination.hasError('required')">
-              {{"labels.inputs.Destination"| translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{"labels.inputs.Destination"| translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -101,7 +101,7 @@
               </mat-option>
             </mat-select>
             <mat-error *ngIf="createStandingInstructionsForm.controls.toOfficeId.hasError('required')">
-              {{"labels.inputs.To Office"| translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{"labels.inputs.To Office"| translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -113,7 +113,7 @@
               </mat-option>
             </mat-select>
             <mat-error *ngIf="createStandingInstructionsForm.controls.toClientId.hasError('required')">
-              {{ "labels.inputs.Beneficiary"| translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{ "labels.inputs.Beneficiary"| translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -137,7 +137,7 @@
               </mat-option>
             </mat-select>
             <mat-error *ngIf="createStandingInstructionsForm.controls.toAccountId.hasError('required')">
-              {{"labels.inputs.To Account" | translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{"labels.inputs.To Account" | translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -149,7 +149,7 @@
               </mat-option>
             </mat-select>
             <mat-error *ngIf="createStandingInstructionsForm.controls.instructionType.hasError('required')">
-              {{ "labels.inputs.Standing Instruction Type" | translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{ "labels.inputs.Standing Instruction Type" | translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -157,7 +157,7 @@
             <mat-label>{{"labels.inputs.Amount" | translate}}</mat-label>
             <input type="number" matInput required formControlName="amount">
             <mat-error *ngIf="createStandingInstructionsForm.controls.amount.hasError('required')">
-              {{"labels.inputs.Amount" | translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{"labels.inputs.Amount" | translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -168,7 +168,7 @@
             <mat-datepicker-toggle matSuffix [for]="validFromDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #validFromDatePicker></mat-datepicker>
             <mat-error *ngIf="createStandingInstructionsForm.controls.validFrom.hasError('required')">
-              {{"labels.inputs.Valid From Date" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{"labels.inputs.Valid From Date" | translate }} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -179,7 +179,7 @@
             <mat-datepicker-toggle matSuffix [for]="validTillDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #validTillDatePicker></mat-datepicker>
             <mat-error *ngIf="createStandingInstructionsForm.controls.validTill.hasError('required')">
-              {{ "labels.inputs.Valid Till Date" | translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{ "labels.inputs.Valid Till Date" | translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -191,7 +191,7 @@
               </mat-option>
             </mat-select>
             <mat-error *ngIf="createStandingInstructionsForm.controls.recurrenceType.hasError('required')">
-              {{"labels.inputs.Recurrence Type" | translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{"labels.inputs.Recurrence Type" | translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -199,7 +199,7 @@
             <mat-label>{{"labels.inputs.Interval" | translate}}</mat-label>
             <input type="number" matInput required formControlName="recurrenceInterval">
             <mat-error *ngIf="createStandingInstructionsForm.controls.recurrenceInterval.hasError('required')">
-              {{"labels.inputs.Recurrence Interval" | translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{"labels.inputs.Recurrence Interval" | translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -212,7 +212,7 @@
               </mat-option>
             </mat-select>
             <mat-error *ngIf="createStandingInstructionsForm.controls.recurrenceFrequency.hasError('required')">
-              {{"labels.inputs.Recurrence Frequency" | translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{"labels.inputs.Recurrence Frequency" | translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -223,7 +223,7 @@
             <mat-datepicker-toggle matSuffix [for]="recurrenceOnMonthDayDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #recurrenceOnMonthDayDatePicker></mat-datepicker>
             <mat-error *ngIf="createStandingInstructionsForm.controls.recurrenceOnMonthDay.hasError('required')">
-              {{"labels.inputs.On Month Day" | translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{"labels.inputs.On Month Day" | translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 

src/app/account-transfers/edit-standing-instructions/edit-standing-instructions.component.html

@@ -36,7 +36,7 @@
               </mat-option>
             </mat-select>
             <mat-error *ngIf="editStandingInstructionsForm.controls.priority.hasError('required')">
-              {{ "labels.inputs.Priority"| translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{ "labels.inputs.Priority"| translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -48,7 +48,7 @@
               </mat-option>
             </mat-select>
             <mat-error *ngIf="editStandingInstructionsForm.controls.status.hasError('required')">
-              {{ "labels.inputs.Status" | translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{ "labels.inputs.Status" | translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -104,7 +104,7 @@
             <mat-datepicker-toggle matSuffix [for]="validFromDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #validFromDatePicker></mat-datepicker>
             <mat-error *ngIf="editStandingInstructionsForm.controls.validFrom.hasError('required')">
-              {{"labels.inputs.Valid From Date" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{"labels.inputs.Valid From Date" | translate }} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -115,7 +115,7 @@
             <mat-datepicker-toggle matSuffix [for]="validTillDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #validTillDatePicker></mat-datepicker>
             <mat-error *ngIf="editStandingInstructionsForm.controls.validTill.hasError('required')">
-              {{ "labels.inputs.Valid Till Date" | translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{ "labels.inputs.Valid Till Date" | translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -127,7 +127,7 @@
               </mat-option>
             </mat-select>
             <mat-error *ngIf="editStandingInstructionsForm.controls.recurrenceType.hasError('required')">
-              {{"labels.inputs.Recurrence Type" | translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{"labels.inputs.Recurrence Type" | translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 

src/app/account-transfers/list-transactions/list-transactions.component.html

@@ -59,7 +59,7 @@
 
     <ng-container matColumnDef="reversed">
       <th mat-header-cell *matHeaderCellDef> {{ "labels.inputs.Reversed"| translate}} </th>
-      <td mat-cell *matCellDef="let transaction"> {{ transaction.reversed ? 'Yes' : 'No'}}</td>
+      <td mat-cell *matCellDef="let transaction"> {{ transaction.reversed | yesNo}}</td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>

src/app/account-transfers/make-account-transfers/make-account-transfers.component.html

@@ -53,7 +53,7 @@
             <mat-datepicker-toggle matSuffix [for]="transferDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #transferDatePicker></mat-datepicker>
             <mat-error *ngIf="makeAccountTransferForm.controls.transferDate.hasError('required')">
-              {{"labels.inputs.Transaction Date"| translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{"labels.inputs.Transaction Date"| translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -65,7 +65,7 @@
               </mat-option>
             </mat-select>
             <mat-error *ngIf="makeAccountTransferForm.controls.toOfficeId.hasError('required')">
-              {{ "labels.inputs.Office"| translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{ "labels.inputs.Office"| translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -73,7 +73,7 @@
             <mat-label>{{ "labels.inputs.Client"| translate}}</mat-label>
             <input matInput formControlName="toClientId" [matAutocomplete]="clientsAutocomplete">
             <mat-error *ngIf="makeAccountTransferForm.controls.toClientId.hasError('required')">
-              {{ "labels.inputs.Client" | translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{ "labels.inputs.Client" | translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -91,7 +91,7 @@
               </mat-option>
             </mat-select>
             <mat-error *ngIf="makeAccountTransferForm.controls.toAccountType.hasError('required')">
-              {{ "labels.inputs.Account Type" | translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{ "labels.inputs.Account Type" | translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -103,7 +103,7 @@
               </mat-option>
             </mat-select>
             <mat-error *ngIf="makeAccountTransferForm.controls.toAccountId.hasError('required')">
-              {{"labels.inputs.Account"| translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{"labels.inputs.Account"| translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -111,7 +111,7 @@
             <mat-label>{{"labels.inputs.Amount" | translate}}</mat-label>
             <input type="number" matInput required formControlName="transferAmount">
             <mat-error *ngIf="makeAccountTransferForm.controls.transferAmount.hasError('required')">
-              {{"labels.inputs.Amount" | translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{"labels.inputs.Amount" | translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -120,7 +120,7 @@
             <textarea matInput formControlName="transferDescription" cdkTextareaAutosize
               cdkAutosizeMinRows="2"></textarea>
             <mat-error *ngIf="makeAccountTransferForm.controls.transferDescription.hasError('required')">
-              {{"labels.inputs.Transfer Description" | translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{"labels.inputs.Transfer Description" | translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
 
           </mat-form-field>

src/app/accounting/accounting-rules/create-rule/create-rule.component.html

@@ -12,7 +12,7 @@
             <mat-label>{{"labels.inputs.Accounting Rule Name" |translate}}</mat-label>
             <input matInput required formControlName="name">
             <mat-error *ngIf="accountingRuleForm.controls.name.hasError('required')">
-              {{"labels.inputs.Accounting Rule Name" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{"labels.inputs.Accounting Rule Name" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -24,7 +24,7 @@
               </mat-option>
             </mat-select>
             <mat-error *ngIf="accountingRuleForm.controls.officeId.hasError('required')">
-              {{"labels.inputs.Office" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{"labels.inputs.Office" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 

src/app/accounting/accounting-rules/edit-rule/edit-rule.component.html

@@ -12,7 +12,7 @@
             <mat-label>{{"labels.inputs.Accounting Rule Name" |translate}}</mat-label>
             <input matInput required formControlName="name">
             <mat-error *ngIf="accountingRuleForm.controls.name.hasError('required')">
-              {{"labels.inputs.Accounting Rule Name" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{"labels.inputs.Accounting Rule Name" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -24,7 +24,7 @@
               </mat-option>
             </mat-select>
             <mat-error *ngIf="accountingRuleForm.controls.officeId.hasError('required')">
-              {{"labels.inputs.Office" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{"labels.inputs.Office" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 

src/app/accounting/chart-of-accounts/create-gl-account/create-gl-account.component.html

@@ -16,7 +16,7 @@
               </mat-option>
             </mat-select>
             <mat-error *ngIf="glAccountForm.controls.type.hasError('required')">
-              {{"labels.inputs.Account Type" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{"labels.inputs.Account Type" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -24,7 +24,7 @@
             <mat-label>{{"labels.inputs.Account Name" |translate}}</mat-label>
             <input matInput required formControlName="name">
             <mat-error *ngIf="glAccountForm.controls.name.hasError('required')">
-              {{"labels.inputs.Account Name" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{"labels.inputs.Account Name" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -36,7 +36,7 @@
               </mat-option>
             </mat-select>
             <mat-error *ngIf="glAccountForm.controls.usage.hasError('required')">
-              {{"labels.inputs.Account Usage" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{"labels.inputs.Account Usage" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -44,7 +44,7 @@
             <mat-label>{{"labels.inputs.GL Code" |translate}}</mat-label>
             <input matInput required formControlName="glCode">
             <mat-error *ngIf="glAccountForm.controls.glCode.hasError('required')">
-              {{"labels.inputs.GL Code" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{"labels.inputs.GL Code" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 

src/app/accounting/chart-of-accounts/edit-gl-account/edit-gl-account.component.html

@@ -16,7 +16,7 @@
               </mat-option>
             </mat-select>
             <mat-error *ngIf="glAccountForm.controls.type.hasError('required')">
-              {{"labels.inputs.Account Type" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{"labels.inputs.Account Type" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -24,7 +24,7 @@
             <mat-label>{{"labels.inputs.Account Name" |translate}}</mat-label>
             <input matInput required formControlName="name">
             <mat-error *ngIf="glAccountForm.controls.name.hasError('required')">
-              {{"labels.inputs.Account Name" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{"labels.inputs.Account Name" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -36,7 +36,7 @@
               </mat-option>
             </mat-select>
             <mat-error *ngIf="glAccountForm.controls.usage.hasError('required')">
-              {{"labels.inputs.Account Usage" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{"labels.inputs.Account Usage" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -44,7 +44,7 @@
             <mat-label>{{"labels.inputs.GL Code" |translate}}</mat-label>
             <input matInput required formControlName="glCode">
             <mat-error *ngIf="glAccountForm.controls.glCode.hasError('required')">
-              {{"labels.inputs.GL Code" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{"labels.inputs.GL Code" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 

src/app/accounting/chart-of-accounts/view-gl-account/view-gl-account.component.html

@@ -46,7 +46,7 @@
         </div>
 
         <div fxFlex="50%" class="header">
-          {{"labels.inputs.GL Code" |translate}}        
+          {{"labels.inputs.GL Code" |translate}}
         </div>
 
         <div fxFlex="50%">
@@ -84,7 +84,7 @@
         </div>
 
         <div fxFlex="50%">
-          {{ glAccount.manualEntriesAllowed ? 'Yes' : 'No' }}
+          {{ glAccount.manualEntriesAllowed | yesNo }}
         </div>
 
         <div fxFlex="50%" class="header" *ngIf="glAccount.description">

src/app/accounting/closing-entries/create-closure/create-closure.component.html

@@ -16,7 +16,7 @@
               </mat-option>
             </mat-select>
             <mat-error *ngIf="accountingClosureForm.controls.officeId.hasError('required')">
-              {{"labels.inputs.Office" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{"labels.inputs.Office" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -26,7 +26,7 @@
             <mat-datepicker-toggle matSuffix [for]="closingDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #closingDatePicker></mat-datepicker>
             <mat-error *ngIf="accountingClosureForm.controls.closingDate.hasError('required')">
-              {{ "labels.inputs.Closing Date" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{ "labels.inputs.Closing Date" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 

src/app/accounting/create-journal-entry/create-journal-entry.component.html

@@ -16,7 +16,7 @@
               </mat-option>
             </mat-select>
             <mat-error *ngIf="journalEntryForm.controls.officeId.hasError('required')">
-              {{"labels.inputs.Office" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{"labels.inputs.Office" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -28,7 +28,7 @@
               </mat-option>
             </mat-select>
             <mat-error *ngIf="journalEntryForm.controls.currencyCode.hasError('required')">
-              {{"labels.inputs.Currency" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{"labels.inputs.Currency" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -45,7 +45,7 @@
                   </mat-option>
                 </mat-select>
                 <mat-error *ngIf="debits.at(i).controls.glAccountId.hasError('required')">
-                  {{"labels.inputs.Affected GL Entry (Debit)" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+                  {{"labels.inputs.Affected GL Entry (Debit)" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
                 </mat-error>
               </mat-form-field>
 
@@ -53,7 +53,7 @@
                 <mat-label>{{"labels.inputs.Debit Amount" |translate}}</mat-label>
                 <input type="number" matInput required formControlName="amount">
                 <mat-error *ngIf="debits.at(i).controls.amount.hasError('required')">
-                  {{"labels.inputs.Debit Amount" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+                  {{"labels.inputs.Debit Amount" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
                 </mat-error>
               </mat-form-field>
 
@@ -83,7 +83,7 @@
                   </mat-option>
                 </mat-select>
                 <mat-error *ngIf="credits.at(i).controls.glAccountId.hasError('required')">
-                  {{"labels.inputs.Affected GL Entry (Credit)" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+                  {{"labels.inputs.Affected GL Entry (Credit)" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
                 </mat-error>
               </mat-form-field>
 
@@ -91,7 +91,7 @@
                 <mat-label>{{"labels.inputs.Credit Amount"|translate}}</mat-label>
                 <input type="number" matInput required formControlName="amount">
                 <mat-error *ngIf="credits.at(i).controls.amount.hasError('required')">
-                  {{"labels.inputs.Credit Amount"|translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+                  {{"labels.inputs.Credit Amount"|translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
                 </mat-error>
               </mat-form-field>
 
@@ -119,7 +119,7 @@
             <mat-datepicker-toggle matSuffix [for]="transactionDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #transactionDatePicker></mat-datepicker>
             <mat-error *ngIf="journalEntryForm.controls.transactionDate.hasError('required')">
-              {{"labels.inputs.Transaction Date"|translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{"labels.inputs.Transaction Date"|translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 

src/app/accounting/financial-activity-mappings/create-financial-activity-mapping/create-financial-activity-mapping.component.html

@@ -16,7 +16,7 @@
               </mat-option>
             </mat-select>
             <mat-error *ngIf="financialActivityMappingForm.controls.financialActivityId.hasError('required')">
-              {{"labels.inputs.Financial Activity" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{"labels.inputs.Financial Activity" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -28,7 +28,7 @@
               </mat-option>
             </mat-select>
             <mat-error *ngIf="financialActivityMappingForm.controls.glAccountId.hasError('required')">
-              {{"labels.inputs.Account"|translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{"labels.inputs.Account"|translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 

src/app/accounting/frequent-postings/frequent-postings.component.html

@@ -16,7 +16,7 @@
               </mat-option>
             </mat-select>
             <mat-error *ngIf="frequentPostingsForm.controls.officeId.hasError('required')">
-              {{"labels.inputs.Office" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{"labels.inputs.Office" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -28,7 +28,7 @@
               </mat-option>
             </mat-select>
             <mat-error *ngIf="frequentPostingsForm.controls.accountingRule.hasError('required')">
-              {{"labels.inputs.Accounting Rule" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{"labels.inputs.Accounting Rule" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -40,7 +40,7 @@
               </mat-option>
             </mat-select>
             <mat-error *ngIf="frequentPostingsForm.controls.currencyCode.hasError('required')">
-              {{"labels.inputs.Currency" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{"labels.inputs.Currency" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -59,7 +59,7 @@
                   </mat-option>
                 </mat-select>
                 <mat-error *ngIf="debits.at(i).controls.glAccountId.hasError('required')">
-                  {{"labels.inputs.Affected GL Entry (Debit)" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+                  {{"labels.inputs.Affected GL Entry (Debit)" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
                 </mat-error>
               </mat-form-field>
 
@@ -67,7 +67,7 @@
                 <mat-label>{{"labels.inputs.Debit Amount" |translate}}</mat-label>
                 <input type="number" matInput required formControlName="amount">
                 <mat-error *ngIf="debits.at(i).controls.amount.hasError('required')">
-                  {{"labels.inputs.Debit Amount" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+                  {{"labels.inputs.Debit Amount" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
                 </mat-error>
               </mat-form-field>
 
@@ -97,7 +97,7 @@
                   </mat-option>
                 </mat-select>
                 <mat-error *ngIf="credits.at(i).controls.glAccountId.hasError('required')">
-                  {{"labels.inputs.Affected GL Entry (Credit)" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+                  {{"labels.inputs.Affected GL Entry (Credit)" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
                 </mat-error>
               </mat-form-field>
 
@@ -105,7 +105,7 @@
                 <mat-label>{{"labels.inputs.Credit Amount"|translate}}</mat-label>
                 <input type="number" matInput required formControlName="amount">
                 <mat-error *ngIf="credits.at(i).controls.amount.hasError('required')">
-                  {{"labels.inputs.Credit Amount"|translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+                  {{"labels.inputs.Credit Amount"|translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
                 </mat-error>
               </mat-form-field>
 
@@ -133,7 +133,7 @@
             <mat-datepicker-toggle matSuffix [for]="transactionDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #transactionDatePicker></mat-datepicker>
             <mat-error *ngIf="frequentPostingsForm.controls.transactionDate.hasError('required')">
-              {{"labels.inputs.Transaction Date"|translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{"labels.inputs.Transaction Date"|translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 

src/app/accounting/migrate-opening-balances/migrate-opening-balances.component.html

@@ -17,7 +17,7 @@
               </mat-option>
             </mat-select>
             <mat-error *ngIf="openingBalancesForm.controls.officeId.hasError('required')">
-              {{"labels.inputs.Office" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{"labels.inputs.Office" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -39,7 +39,7 @@
               </mat-option>
             </mat-select>
             <mat-error *ngIf="openingBalancesForm.controls.currencyCode.hasError('required')">
-              {{"labels.inputs.Currency" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{"labels.inputs.Currency" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -49,7 +49,7 @@
             <mat-datepicker-toggle matSuffix [for]="openingBalancesDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #openingBalancesDatePicker></mat-datepicker>
             <mat-error *ngIf="openingBalancesForm.controls.transactionDate.hasError('required')">
-              {{"labels.inputs.Opening Balances Date" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{"labels.inputs.Opening Balances Date" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -65,7 +65,7 @@
 
             <div class="header" fxFlex="18%">
               {{"labels.inputs.Account" |translate}}
-              
+
             </div>
 
             <div class="header" fxFlex="23%">

src/app/accounting/periodic-accruals/periodic-accruals.component.html

@@ -14,7 +14,7 @@
             <mat-datepicker-toggle matSuffix [for]="tillDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #tillDatePicker></mat-datepicker>
             <mat-error *ngIf="periodicAccrualsForm.controls.tillDate.hasError('required')">
-              {{"labels.inputs.Accrue Date" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{"labels.inputs.Accrue Date" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 

src/app/accounting/provisioning-entries/create-provisioning-entry/create-provisioning-entry.component.html

@@ -14,7 +14,7 @@
             <mat-datepicker-toggle matSuffix [for]="datePicker"></mat-datepicker-toggle>
             <mat-datepicker #datePicker></mat-datepicker>
             <mat-error *ngIf="provisioningEntryForm.controls.date.hasError('required')">
-              {{"labels.inputs.Date" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{"labels.inputs.Date" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 

src/app/centers/centers-view/center-actions/activate-center/activate-center.component.html

@@ -12,7 +12,7 @@
             <mat-datepicker-toggle matSuffix [for]="activationDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #activationDatePicker></mat-datepicker>
             <mat-error *ngIf="activateCenterForm.controls.activationDate.hasError('required')">
-              {{"labels.inputs.Activated On Date" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{"labels.inputs.Activated On Date" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 

src/app/centers/centers-view/center-actions/attach-center-meeting/attach-center-meeting.component.html

@@ -14,7 +14,7 @@
             <mat-datepicker-toggle matSuffix [for]="startDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #startDatePicker></mat-datepicker>
             <mat-error *ngIf="centerMeetingForm.controls.startDate.hasError('required')">
-              {{"labels.inputs.Start Date" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{"labels.inputs.Start Date" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -30,7 +30,7 @@
               </mat-option>
             </mat-select>
             <mat-error *ngIf="centerMeetingForm.controls.frequency.hasError('repeatsOnDay')">
-              {{"labels.inputs.Repetition Frequency" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{"labels.inputs.Repetition Frequency" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -42,7 +42,7 @@
               </mat-option>
             </mat-select>
             <mat-error *ngIf="centerMeetingForm.controls.interval.hasError('repeatsOnDay')">
-              {{"labels.inputs.Repetition Interval" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{"labels.inputs.Repetition Interval" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -57,7 +57,7 @@
             {{"labels.inputs.At least" |translate}} <strong>{{"labels.inputs.one" |translate}}</strong> {{"labels.inputs.day must be selected" |translate}}
           </mat-error>
         </mat-form-field>
-  
+
         </div>
 
       </mat-card-content>

src/app/centers/centers-view/center-actions/center-assign-staff/center-assign-staff.component.html

@@ -16,7 +16,7 @@
               </mat-option>
             </mat-select>
             <mat-error *ngIf="centerAssignStaffForm.controls.staffId.hasError('required')">
-              {{"labels.inputs.Staff" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{"labels.inputs.Staff" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 

src/app/centers/centers-view/center-actions/close-center/close-center.component.html

@@ -14,7 +14,7 @@
             <mat-datepicker-toggle matSuffix [for]="closureDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #closureDatePicker></mat-datepicker>
             <mat-error *ngIf="closeCenterForm.controls.closureDate.hasError('required')">
-              {{"labels.inputs.Closed On Date" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{"labels.inputs.Closed On Date" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -26,7 +26,7 @@
               </mat-option>
             </mat-select>
             <mat-error *ngIf="closeCenterForm.controls.closureReasonId.hasError('required')">
-              {{"labels.inputs.Closure Reason" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{"labels.inputs.Closure Reason" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 

src/app/centers/centers-view/center-actions/edit-center-meeting-schedule/edit-center-meeting-schedule.component.html

@@ -16,7 +16,7 @@
             </mat-option>
           </mat-select>
           <mat-error *ngIf="centerEditMeetingScheduleForm.controls.presentMeetingDate.hasError('repeatsOnDay')">
-            {{ "labels.inputs.Existing Meeting Date" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+            {{ "labels.inputs.Existing Meeting Date" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
           </mat-error>
         </mat-form-field>
 
@@ -26,10 +26,10 @@
           <mat-datepicker-toggle matSuffix [for]="newMeetingDatePicker"></mat-datepicker-toggle>
           <mat-datepicker #newMeetingDatePicker></mat-datepicker>
           <mat-error *ngIf="centerEditMeetingScheduleForm.controls.newMeetingDate.hasError('required')">
-            {{ "labels.inputs.Revised Meeting Date" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+            {{ "labels.inputs.Revised Meeting Date" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
           </mat-error>
         </mat-form-field>
-  
+
         </div>
 
       </mat-card-content>

src/app/centers/centers-view/center-actions/edit-center-meeting/edit-center-meeting.component.html

@@ -23,7 +23,7 @@
               </mat-option>
             </mat-select>
             <mat-error *ngIf="centerEditMeetingForm.controls.frequency.hasError('repeatsOnDay')">
-              {{"labels.inputs.Repetition Frequency" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{"labels.inputs.Repetition Frequency" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -35,7 +35,7 @@
               </mat-option>
             </mat-select>
             <mat-error *ngIf="centerEditMeetingForm.controls.interval.hasError('repeatsOnDay')">
-              {{"labels.inputs.Repetition Interval" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{"labels.inputs.Repetition Interval" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -57,7 +57,7 @@
           <mat-datepicker-toggle matSuffix [for]="startDatePicker"></mat-datepicker-toggle>
           <mat-datepicker #startDatePicker></mat-datepicker>
           <mat-error *ngIf="centerEditMeetingForm.controls.startDate.hasError('required')">
-            {{"labels.inputs.Changes Affection Date" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+            {{"labels.inputs.Changes Affection Date" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
           </mat-error>
           <mat-hint>
             {{"labels.text.Repeats' and 'Repeats every" |translate}}

src/app/centers/create-center/create-center.component.html

@@ -12,7 +12,7 @@
             <mat-label>{{"labels.inputs.name" |translate}}</mat-label>
             <input matInput required formControlName="name">
             <mat-error *ngIf="centerForm.controls.name.hasError('required')">
-              {{"labels.inputs.Center Name" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{"labels.inputs.Center Name" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
             <mat-error *ngIf="centerForm.controls.name.hasError('pattern')">
               {{"labels.inputs.Center Name" |translate}} <strong>{{"labels.inputs.cannot" |translate}}</strong> {{"labels.inputs.begin with a special character or number" |translate}}
@@ -27,7 +27,7 @@
               </mat-option>
             </mat-select>
             <mat-error *ngIf="centerForm.controls.officeId.hasError('required')">
-              {{"labels.inputs.Office" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{"labels.inputs.Office" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -50,7 +50,7 @@
             <mat-datepicker-toggle matSuffix [for]="activationDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #activationDatePicker></mat-datepicker>
             <mat-error *ngIf="centerForm.controls.activationDate.hasError('required')">
-              {{"labels.inputs.Activation Date" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{"labels.inputs.Activation Date" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -65,7 +65,7 @@
             <mat-datepicker-toggle matSuffix [for]="submittedOnDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #submittedOnDatePicker></mat-datepicker>
             <mat-error *ngIf="centerForm.controls.submittedOnDate.hasError('required')">
-              {{"labels.inputs.Submission Date" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{"labels.inputs.Submission Date" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 

src/app/centers/edit-center/edit-center.component.html

@@ -12,7 +12,7 @@
             <mat-label>{{"labels.inputs.name" |translate}}</mat-label>
             <input matInput required formControlName="name">
             <mat-error *ngIf="editCenterForm.controls.name.hasError('required')">
-              {{"labels.inputs.Center Name" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{"labels.inputs.Center Name" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
             <mat-error *ngIf="editCenterForm.controls.name.hasError('pattern')">
               {{"labels.inputs.Center Name" |translate}} <strong>{{"labels.inputs.cannot" |translate}}</strong> {{"labels.inputs.begin with a special character or number" |translate}}
@@ -41,7 +41,7 @@
               <mat-datepicker-toggle matSuffix [for]="activatedOnDatePicker"></mat-datepicker-toggle>
               <mat-datepicker #activatedOnDatePicker></mat-datepicker>
               <mat-error *ngIf="editCenterForm.controls.activationDate.hasError('required')">
-                {{"labels.inputs.Activation Date" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+                {{"labels.inputs.Activation Date" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
               </mat-error>
             </mat-form-field>
           </ng-container>

src/app/clients/client-stepper/client-family-members-step/client-family-member-dialog/client-family-member-dialog.component.html

@@ -8,7 +8,7 @@
       <mat-label>{{ "labels.inputs.First Name" |translate}}</mat-label>
       <input formControlName="firstName" required matInput />
       <mat-error *ngIf="familyMemberForm.controls.firstName.hasError('required')">
-        {{ "labels.inputs.First Name" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+        {{ "labels.inputs.First Name" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
       </mat-error>
     </mat-form-field>
 
@@ -21,7 +21,7 @@
       <mat-label>{{ "labels.inputs.Last Name" |translate}}</mat-label>
       <input formControlName="lastName" required matInput />
       <mat-error *ngIf="familyMemberForm.controls.lastName.hasError('required')">
-        {{ "labels.inputs.Last Name" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+        {{ "labels.inputs.Last Name" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
       </mat-error>
     </mat-form-field>
 
@@ -34,7 +34,7 @@
       <mat-label>{{ "labels.inputs.Age" |translate}}</mat-label>
       <input type="number" formControlName="age" matInput [min]="0"/>
       <mat-error *ngIf="familyMemberForm.controls.age.hasError('required')">
-        {{ "labels.inputs.Age" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required and cannot be negative" | translate}}</strong>
+        {{ "labels.inputs.Age" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required and cannot be negative" | translate}}</strong>
       </mat-error>
     </mat-form-field>
 
@@ -48,7 +48,7 @@
         </mat-option>
       </mat-select>
       <mat-error *ngIf="familyMemberForm.controls.relationshipId.hasError('required')">
-        {{ "labels.inputs.Relationship" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+        {{ "labels.inputs.Relationship" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
       </mat-error>
     </mat-form-field>
 
@@ -60,7 +60,7 @@
         </mat-option>
       </mat-select>
       <mat-error *ngIf="familyMemberForm.controls.genderId.hasError('required')">
-        {{ "labels.inputs.Gender" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+        {{ "labels.inputs.Gender" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
       </mat-error>
     </mat-form-field>
 
@@ -90,7 +90,7 @@
       <mat-datepicker-toggle matSuffix [for]="dueDatePicker"></mat-datepicker-toggle>
       <mat-datepicker #dueDatePicker></mat-datepicker>
       <mat-error *ngIf="familyMemberForm.controls.dateOfBirth.hasError('required')">
-        {{ "labels.inputs.Date of birth" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+        {{ "labels.inputs.Date of birth" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
       </mat-error>
     </mat-form-field>
 

src/app/clients/client-stepper/client-general-step/client-general-step.component.html

@@ -10,7 +10,7 @@
         </mat-option>
       </mat-select>
       <mat-error *ngIf="createClientForm.controls.officeId.hasError('required')">
-        {{ "labels.inputs.Office" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+        {{ "labels.inputs.Office" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
       </mat-error>
     </mat-form-field>
 
@@ -36,10 +36,10 @@
       <mat-label>{{ createClientForm.value.legalFormId === 1 ? 'Name' : 'Entity Name' }}</mat-label>
       <input matInput required formControlName="fullname">
       <mat-error *ngIf="createClientForm.controls.fullname.hasError('required')">
-        {{ "labels.inputs.Client name" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+        {{ "labels.inputs.Client name" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
       </mat-error>
       <mat-error *ngIf="createClientForm.controls.fullname.hasError('pattern')">
-        {{ "labels.inputs.Client name" |translate}} <strong>{{ "labels.inputs.cannot" |translate}}</strong> {{ "labels.commons.begin with a special character or number"  |translate}}
+        {{ "labels.inputs.Client name" |translate}} <strong>{{ "labels.inputs.cannot" |translate}}</strong> {{ "labels.commons.begin with a special character or number" | translate }}
       </mat-error>
     </mat-form-field>
 
@@ -47,10 +47,10 @@
       <mat-label>{{ "labels.inputs.First Name" |translate}}</mat-label>
       <input matInput required formControlName="firstname">
       <mat-error *ngIf="createClientForm.controls.firstname.hasError('required')">
-        {{ "labels.inputs.Client first name" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+        {{ "labels.inputs.Client first name" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
       </mat-error>
       <mat-error *ngIf="createClientForm.controls.firstname.hasError('pattern')">
-        {{ "labels.inputs.Client first name" |translate}} <strong>{{ "labels.inputs.cannot" |translate}}</strong> {{ "labels.commons.begin with a special character or number"  |translate}}
+        {{ "labels.inputs.Client first name" |translate}} <strong>{{ "labels.inputs.cannot" |translate}}</strong> {{ "labels.commons.begin with a special character or number" | translate }}
       </mat-error>
     </mat-form-field>
 
@@ -58,7 +58,7 @@
       <mat-label>{{ "labels.inputs.Middle Name" |translate}}</mat-label>
       <input matInput formControlName="middlename">
       <mat-error *ngIf="createClientForm.controls.middlename.hasError('pattern')">
-        {{ "labels.inputs.Client middle name" |translate}} <strong>{{ "labels.inputs.cannot" |translate}}</strong> {{ "labels.commons.begin with a special character or number"  |translate}}
+        {{ "labels.inputs.Client middle name" |translate}} <strong>{{ "labels.inputs.cannot" |translate}}</strong> {{ "labels.commons.begin with a special character or number" | translate }}
       </mat-error>
     </mat-form-field>
 
@@ -66,10 +66,10 @@
       <mat-label>{{ "labels.inputs.Last Name" |translate}}</mat-label>
       <input matInput required formControlName="lastname">
       <mat-error *ngIf="createClientForm.controls.lastname.hasError('required')">
-        {{ "labels.inputs.Client last name" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+        {{ "labels.inputs.Client last name" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
       </mat-error>
       <mat-error *ngIf="createClientForm.controls.lastname.hasError('pattern')">
-        {{ "labels.inputs.Client last name" |translate}} <strong>{{ "labels.inputs.cannot" |translate}}</strong> {{ "labels.commons.begin with a special character or number"  |translate}}
+        {{ "labels.inputs.Client last name" |translate}} <strong>{{ "labels.inputs.cannot" |translate}}</strong> {{ "labels.commons.begin with a special character or number" | translate }}
       </mat-error>
     </mat-form-field>
 
@@ -189,7 +189,7 @@
       <mat-datepicker-toggle matSuffix [for]="activatedOnDatePicker"></mat-datepicker-toggle>
       <mat-datepicker #activatedOnDatePicker></mat-datepicker>
       <mat-error *ngIf="createClientForm.controls.activationDate.hasError('required')">
-        {{ "labels.inputs.Activation Date" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+        {{ "labels.inputs.Activation Date" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
       </mat-error>
     </mat-form-field>
 
@@ -205,7 +205,7 @@
         </mat-option>
       </mat-select>
       <mat-error *ngIf="createClientForm.controls.savingsProductId.hasError('required')">
-        {{ "labels.inputs.Savings Product" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+        {{ "labels.inputs.Savings Product" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
       </mat-error>
     </mat-form-field>
 

src/app/clients/client-stepper/client-preview-step/client-preview-step.component.html

@@ -69,7 +69,7 @@
 
   <div fxFlexFill>
     <span fxFlex="40%">{{ "labels.inputs.Active" |translate}}?</span>
-    <span fxFlex="60%">{{ client.active ? 'Yes' : 'No' }}</span>
+    <span fxFlex="60%">{{ client.active | yesNo }}</span>
   </div>
 
   <div fxFlexFill *ngIf="client.activationDate">
@@ -86,7 +86,7 @@
 
     <div fxFlexFill>
       <span fxFlex="40%">{{ "labels.inputs.Is Staff" |translate}}?</span>
-      <span fxFlex="60%">{{ client.isStaff ? 'Yes' : 'No' }}</span>
+      <span fxFlex="60%">{{ client.isStaff | yesNo }}</span>
     </div>
 
   </ng-container>

src/app/clients/clients-view/charges/client-pay-charges/client-pay-charges.component.html

@@ -10,7 +10,7 @@
           <mat-label> {{ "labels.inputs.Amount" |translate}} </mat-label>
           <input matInput required autofocus formControlName="amount">
           <mat-error *ngIf="transactionForm.controls.amount.hasError('required')">
-            {{ "labels.inputs.Amount" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+            {{ "labels.inputs.Amount" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
           </mat-error>
         </mat-form-field>
 
@@ -20,7 +20,7 @@
           <mat-datepicker-toggle matSuffix [for]="transactionDatePicker"></mat-datepicker-toggle>
           <mat-datepicker #transactionDatePicker></mat-datepicker>
           <mat-error *ngIf="transactionForm.controls.transactionDate.hasError('required')">
-            {{ "labels.inputs.Transaction date" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+            {{ "labels.inputs.Transaction date" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
           </mat-error>
         </mat-form-field>
 

src/app/clients/clients-view/client-actions/activate-client/activate-client.component.html

@@ -12,7 +12,7 @@
             <mat-datepicker-toggle matSuffix [for]="activationDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #activationDatePicker></mat-datepicker>
             <mat-error *ngIf="activateClientForm.controls.activationDate.hasError('required')">
-              {{ "labels.inputs.Activated On Date" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{ "labels.inputs.Activated On Date" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 

src/app/clients/clients-view/client-actions/add-client-charge/add-client-charge.component.html

@@ -15,7 +15,7 @@
               </mat-option>
             </mat-select>
             <mat-error *ngIf="clientChargeForm.controls.chargeId.hasError('required')">
-              {{ "labels.inputs.Charge" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{ "labels.inputs.Charge" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -25,7 +25,7 @@
               <mat-label>{{ "labels.inputs.Amount" |translate}}</mat-label>
               <input type="number" required matInput formControlName="amount" />
               <mat-error *ngIf="clientChargeForm.controls.amount.hasError('required')">
-                {{ "labels.inputs.Amount" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+                {{ "labels.inputs.Amount" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
               </mat-error>
             </mat-form-field>
 
@@ -55,7 +55,7 @@
               <mat-datepicker-toggle matSuffix [for]="dueDatePicker"></mat-datepicker-toggle>
               <mat-datepicker #dueDatePicker></mat-datepicker>
               <mat-error *ngIf="clientChargeForm.controls.dueDate.hasError('required')">
-                {{ "labels.inputs.Due for collection on" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+                {{ "labels.inputs.Due for collection on" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
               </mat-error>
             </mat-form-field>
 
@@ -66,7 +66,7 @@
               <mat-datepicker-toggle matSuffix [for]="feeOnMonthDayPicker"></mat-datepicker-toggle>
               <mat-datepicker #feeOnMonthDayPicker></mat-datepicker>
               <mat-error *ngIf="clientChargeForm.controls.feeOnMonthDay.hasError('required')">
-                {{ "labels.inputs.Due Date" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+                {{ "labels.inputs.Due Date" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
               </mat-error>
             </mat-form-field>
 

src/app/clients/clients-view/client-actions/add-client-collateral/add-client-collateral.component.html

@@ -15,10 +15,10 @@
                             </mat-option>
                         </mat-select>
                         <mat-error *ngIf="clientCollateralForm.controls.collateralId.hasError('required')">
-                            {{ "labels.inputs.Collateral" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+                            {{ "labels.inputs.Collateral" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
                         </mat-error>
                     </mat-form-field>
-                    
+
                     <div *ngIf="collateralDetails" fxLayout="column">
 
                         <mat-form-field>
@@ -50,7 +50,7 @@
                             <mat-label>{{ "labels.inputs.Quantity" |translate}}</mat-label>
                             <input matInput required formControlName="quantity">
                             <mat-error *ngIf="clientCollateralForm.controls.quantity.hasError('required')">
-                                {{ "labels.inputs.Quantity" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+                                {{ "labels.inputs.Quantity" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
                             </mat-error>
                         </mat-form-field>
 
@@ -72,11 +72,11 @@
 
             <mat-card-actions fxLayoutGap="5px" fxLayout="row" fsLayout.xs="column" fxLayoutAlign="center">
                 <button type="button" mat-raised-button [routerLink]="['../../']">{{ "labels.buttons.Cancel" | translate}}</button>
-                <button mat-raised-button color="primary" [disabled]="!clientCollateralForm.valid">{{ "labels.buttons.Submit" | translate}}</button> 
+                <button mat-raised-button color="primary" [disabled]="!clientCollateralForm.valid">{{ "labels.buttons.Submit" | translate}}</button>
             </mat-card-actions>
 
         </form>
-    
+
     </mat-card>
 
-</div>
+</div>

src/app/clients/clients-view/client-actions/client-assign-staff/client-assign-staff.component.html

@@ -16,7 +16,7 @@
               </mat-option>
             </mat-select>
             <mat-error *ngIf="clientAssignStaffForm.controls.staffId.hasError('required')">
-              {{ "labels.inputs.Staff" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{ "labels.inputs.Staff" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 

src/app/clients/clients-view/client-actions/client-screen-reports/client-screen-reports.component.html

@@ -16,7 +16,7 @@
               </mat-option>
             </mat-select>
             <mat-error *ngIf="clientScreenReportForm.controls.templateId.hasError('required')">
-              {{ "labels.inputs.Screen Report" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{ "labels.inputs.Screen Report" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 

src/app/clients/clients-view/client-actions/close-client/close-client.component.html

@@ -14,7 +14,7 @@
             <mat-datepicker-toggle matSuffix [for]="closureDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #closureDatePicker></mat-datepicker>
             <mat-error *ngIf="closeClientForm.controls.closureDate.hasError('required')">
-              {{ "labels.inputs.Closed On Date" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{ "labels.inputs.Closed On Date" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -26,7 +26,7 @@
               </mat-option>
             </mat-select>
             <mat-error *ngIf="closeClientForm.controls.closureReasonId.hasError('required')">
-              {{ "labels.inputs.Closure Reason" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{ "labels.inputs.Closure Reason" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 

src/app/clients/clients-view/client-actions/create-self-service-user/create-self-service-user.component.html

@@ -12,7 +12,7 @@
                         <mat-label> {{ "labels.inputs.User Name" |translate}} </mat-label>
                         <input matInput required formControlName="username">
                         <mat-error *ngIf="createSelfServiceForm.controls.username.hasError('required')">
-                            {{ "labels.inputs.User Name" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+                            {{ "labels.inputs.User Name" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
                         </mat-error>
                     </mat-form-field>
 
@@ -20,7 +20,7 @@
                         <mat-label> {{ "labels.inputs.First Name" |translate}} </mat-label>
                         <input matInput required formControlName="firstname">
                         <mat-error *ngIf="createSelfServiceForm.controls.firstname.hasError('required')">
-                            {{ "labels.inputs.First Name" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+                            {{ "labels.inputs.First Name" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
                         </mat-error>
                     </mat-form-field>
 
@@ -28,7 +28,7 @@
                         <mat-label> {{ "labels.inputs.Last Name" |translate}} </mat-label>
                         <input matInput required formControlName="lastname">
                         <mat-error *ngIf="createSelfServiceForm.controls.lastname.hasError('required')">
-                            {{ "labels.inputs.Last Name" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+                            {{ "labels.inputs.Last Name" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
                         </mat-error>
                     </mat-form-field>
 
@@ -36,7 +36,7 @@
                         <mat-label> {{ "labels.inputs.Email" |translate}} </mat-label>
                         <input matInput required formControlName="email">
                         <mat-error *ngIf="createSelfServiceForm.controls.email.hasError('required')">
-                            {{ "labels.inputs.Email" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+                            {{ "labels.inputs.Email" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
                         </mat-error>
                         <mat-error *ngIf="createSelfServiceForm.controls.email.hasError('email')">
                             {{ "labels.inputs.Email should be a" |translate}} <strong>{{ "labels.inputs.valid" |translate}}</strong> {{ "labels.inputs.email" |translate}}.
@@ -52,7 +52,7 @@
                         <mat-checkbox labelPosition="before" formControlName="passwordNeverExpires">
                             {{ "labels.inputs.Override Password Expire Policy" |translate}} ?
                         </mat-checkbox>
-    
+
                         <i class="fa fa-question-circle fa fa-align-left" title="Determines if passwords do not expire for this user even if global configuration for password expiry is enabled"></i>
 
                     </div>
@@ -61,7 +61,7 @@
                         <mat-label> {{ "labels.inputs.Password" |translate}} </mat-label>
                         <input matInput required formControlName="password" type="password">
                         <mat-error *ngIf="createSelfServiceForm.controls.password.hasError('required')">
-                            {{ "labels.inputs.Password" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+                            {{ "labels.inputs.Password" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
                         </mat-error>
                     </mat-form-field>
 
@@ -69,7 +69,7 @@
                         <mat-label> {{ "labels.inputs.Repeat Password" |translate}} </mat-label>
                         <input matInput required formControlName="repeatPassword" type="password">
                         <mat-error *ngIf="createSelfServiceForm.controls.repeatPassword.hasError('required')">
-                            {{ "labels.inputs.Repeat password" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+                            {{ "labels.inputs.Repeat password" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
                         </mat-error>
                         <mat-error *ngIf="createSelfServiceForm.controls.repeatPassword.hasError('notequal')">
                             {{ "labels.inputs.Passwords should be" |translate}} <strong>{{ "labels.inputs.matched" |translate}}</strong>
@@ -82,13 +82,13 @@
                     </mat-form-field>
 
                 </div>
-        
+
                 <mat-card-actions fxLayoutGap="5px" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center">
                   <button type="button" mat-raised-button [routerLink]="['../../']">{{ "labels.buttons.Cancel" | translate}}</button>
                   <button mat-raised-button color="primary" [disabled]="!createSelfServiceForm.valid">{{ "labels.buttons.Activate Self Service User" | translate}}</button>
                   <i class="fa fa-question-circle fa-2x" title="Activate Self Service User Help"></i>
                 </mat-card-actions>
-        
+
             </mat-card-content>
 
         </form>

src/app/clients/clients-view/client-actions/reactivate-client/reactivate-client.component.html

@@ -12,7 +12,7 @@
             <mat-datepicker-toggle matSuffix [for]="reactivationDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #reactivationDatePicker></mat-datepicker>
             <mat-error *ngIf="reactivateClientForm.controls.reactivationDate.hasError('required')">
-              {{ "labels.inputs.Reactivation Date" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{ "labels.inputs.Reactivation Date" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 

src/app/clients/clients-view/client-actions/reject-client/reject-client.component.html

@@ -14,7 +14,7 @@
             <mat-datepicker-toggle matSuffix [for]="rejectionDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #rejectionDatePicker></mat-datepicker>
             <mat-error *ngIf="rejectClientForm.controls.rejectionDate.hasError('required')">
-              {{ "labels.inputs.Rejection Date" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{ "labels.inputs.Rejection Date" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -26,7 +26,7 @@
               </mat-option>
             </mat-select>
             <mat-error *ngIf="rejectClientForm.controls.rejectionReasonId.hasError('required')">
-              {{ "labels.inputs.Rejection Reason" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{ "labels.inputs.Rejection Reason" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 

src/app/clients/clients-view/client-actions/transfer-client/transfer-client.component.html

@@ -16,7 +16,7 @@
               </mat-option>
             </mat-select>
             <mat-error *ngIf="transferClientForm.controls.destinationOfficeId.hasError('required')">
-              {{ "labels.inputs.Office" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{ "labels.inputs.Office" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -26,7 +26,7 @@
             <mat-datepicker-toggle matSuffix [for]="transferDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #transferDatePicker></mat-datepicker>
             <mat-error *ngIf="transferClientForm.controls.transferDate.hasError('required')">
-              {{ "labels.inputs.Transfer Date" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{ "labels.inputs.Transfer Date" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 

src/app/clients/clients-view/client-actions/undo-client-rejection/undo-client-rejection.component.html

@@ -12,7 +12,7 @@
             <mat-datepicker-toggle matSuffix [for]="reopenedDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #reopenedDatePicker></mat-datepicker>
             <mat-error *ngIf="undoClientRejectionForm.controls.reopenedDate.hasError('required')">
-              {{ "labels.inputs.Reopened On Date" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{ "labels.inputs.Reopened On Date" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 

src/app/clients/clients-view/client-actions/update-client-savings-account/update-client-savings-account.component.html

@@ -16,7 +16,7 @@
               </mat-option>
             </mat-select>
             <mat-error *ngIf="clientSavingsAccountForm.controls.savingsAccountId.hasError('required')">
-              {{ "labels.inputs.Account" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{ "labels.inputs.Account" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 

src/app/clients/clients-view/client-actions/withdraw-client/withdraw-client.component.html

@@ -14,7 +14,7 @@
             <mat-datepicker-toggle matSuffix [for]="withdrawalDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #withdrawalDatePicker></mat-datepicker>
             <mat-error *ngIf="withdrawClientForm.controls.withdrawalDate.hasError('required')">
-              {{ "labels.inputs.Withdrawal Date" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{ "labels.inputs.Withdrawal Date" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -26,7 +26,7 @@
               </mat-option>
             </mat-select>
             <mat-error *ngIf="withdrawClientForm.controls.withdrawalReasonId.hasError('required')">
-              {{ "labels.inputs.Withdrawal Reason" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{ "labels.inputs.Withdrawal Reason" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 

src/app/clients/clients-view/family-members-tab/add-family-member/add-family-member.component.html

@@ -8,7 +8,7 @@
         <mat-label>{{"labels.inputs.First Name" |translate}}</mat-label>
         <input formControlName="firstName" required matInput />
         <mat-error *ngIf="addFamilyMemberForm.controls.firstName.hasError('required')">
-          {{"labels.inputs.First Name" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+          {{"labels.inputs.First Name" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
         </mat-error>
       </mat-form-field>
 
@@ -21,7 +21,7 @@
         <mat-label>{{"labels.inputs.Last Name" |translate}}</mat-label>
         <input formControlName="lastName" required matInput />
         <mat-error *ngIf="addFamilyMemberForm.controls.lastName.hasError('required')">
-          {{"labels.inputs.Last Name" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+          {{"labels.inputs.Last Name" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
         </mat-error>
       </mat-form-field>
 
@@ -34,7 +34,7 @@
         <mat-label>{{"labels.inputs.Age" |translate}}</mat-label>
         <input type="number" formControlName="age" required matInput [min]="minAge" />
         <mat-error *ngIf="addFamilyMemberForm.controls.age.hasError('required')">
-          {{"labels.inputs.Age" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required and cannot be negative" | translate}}</strong>
+          {{"labels.inputs.Age" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required and cannot be negative" | translate}}</strong>
         </mat-error>
       </mat-form-field>
 
@@ -49,7 +49,7 @@
           </mat-option>
         </mat-select>
         <mat-error *ngIf="addFamilyMemberForm.controls.relationshipId.hasError('required')">
-          {{"labels.inputs.Relationship" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+          {{"labels.inputs.Relationship" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
         </mat-error>
       </mat-form-field>
 
@@ -61,7 +61,7 @@
           </mat-option>
         </mat-select>
         <mat-error *ngIf="addFamilyMemberForm.controls.genderId.hasError('required')">
-          {{"labels.inputs.Gender" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+          {{"labels.inputs.Gender" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
         </mat-error>
       </mat-form-field>
 
@@ -92,12 +92,12 @@
         <mat-datepicker-toggle matSuffix [for]="dueDatePicker"></mat-datepicker-toggle>
         <mat-datepicker #dueDatePicker></mat-datepicker>
         <mat-error *ngIf="addFamilyMemberForm.controls.dateOfBirth.hasError('required')">
-          {{"labels.inputs.Date of birth" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+          {{"labels.inputs.Date of birth" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
         </mat-error>
       </mat-form-field>
 
     </div>
-    
+
     <div fxLayout="row" fxLayoutGap="32px" fxLayoutAlign="center">
       <button type="button" mat-raised-button [routerLink]="['../']">{{ "labels.buttons.Cancel" |translate}}</button>
       <button type="submit" mat-raised-button color="primary" [disabled]="!addFamilyMemberForm.valid">{{ "labels.buttons.Submit" |translate}}</button>
@@ -105,4 +105,4 @@
 
   </form>
 
-</div>
+</div>

src/app/clients/clients-view/family-members-tab/edit-family-member/edit-family-member.component.html

@@ -8,7 +8,7 @@
         <mat-label>{{"labels.inputs.First Name" |translate}}</mat-label>
         <input formControlName="firstName" required matInput />
         <mat-error *ngIf="editFamilyMemberForm.controls.firstName.hasError('required')">
-          {{"labels.inputs.First Name" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+          {{"labels.inputs.First Name" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
         </mat-error>
       </mat-form-field>
 
@@ -21,7 +21,7 @@
         <mat-label>{{"labels.inputs.Last Name" |translate}}</mat-label>
         <input formControlName="lastName" required matInput />
         <mat-error *ngIf="editFamilyMemberForm.controls.lastName.hasError('required')">
-          {{"labels.inputs.Last Name" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+          {{"labels.inputs.Last Name" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
         </mat-error>
       </mat-form-field>
 
@@ -34,7 +34,7 @@
         <mat-label>{{"labels.inputs.Age" |translate}}</mat-label>
         <input type="number" formControlName="age" required matInput />
         <mat-error *ngIf="editFamilyMemberForm.controls.age.hasError('required')">
-          {{"labels.inputs.Age" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required and cannot be negative" | translate}}</strong>
+          {{"labels.inputs.Age" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required and cannot be negative" | translate}}</strong>
         </mat-error>
       </mat-form-field>
 
@@ -49,7 +49,7 @@
           </mat-option>
         </mat-select>
         <mat-error *ngIf="editFamilyMemberForm.controls.relationshipId.hasError('required')">
-          {{"labels.inputs.Relationship" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+          {{"labels.inputs.Relationship" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
         </mat-error>
       </mat-form-field>
 
@@ -61,7 +61,7 @@
           </mat-option>
         </mat-select>
         <mat-error *ngIf="editFamilyMemberForm.controls.genderId.hasError('required')">
-          {{"labels.inputs.Gender" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+          {{"labels.inputs.Gender" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
         </mat-error>
       </mat-form-field>
 
@@ -92,12 +92,12 @@
         <mat-datepicker-toggle matSuffix [for]="dueDatePicker"></mat-datepicker-toggle>
         <mat-datepicker #dueDatePicker></mat-datepicker>
         <mat-error *ngIf="editFamilyMemberForm.controls.dateOfBirth.hasError('required')">
-          {{"labels.inputs.Date of birth" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+          {{"labels.inputs.Date of birth" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
         </mat-error>
       </mat-form-field>
 
     </div>
-    
+
     <div fxLayout="row" fxLayoutGap="32px" fxLayoutAlign="center">
       <button type="button" mat-raised-button [routerLink]="['../../']">{{ "labels.buttons.Cancel" |translate}}</button>
       <button type="submit" mat-raised-button color="primary" [disabled]="editFamilyMemberForm.pristine||!editFamilyMemberForm.valid">{{ "labels.buttons.Submit" |translate}}</button>
@@ -105,4 +105,4 @@
 
   </form>
 
-</div>
+</div>

src/app/collections/individual-collection-sheet/individual-collection-sheet.component.html

@@ -21,7 +21,7 @@
           </mat-option>
         </mat-select>
         <mat-error *ngIf="collectionSheetForm.controls.officeId.hasError('required')">
-          {{"labels.inputs.Branch Office" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+          {{"labels.inputs.Branch Office" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
         </mat-error>
       </mat-form-field>
 
@@ -32,7 +32,7 @@
         <mat-datepicker-toggle matSuffix [for]="transactionDatePicker"></mat-datepicker-toggle>
         <mat-datepicker #transactionDatePicker></mat-datepicker>
         <mat-error *ngIf="collectionSheetForm.controls.transactionDate.hasError('required')">
-          {{"labels.inputs.Repayment Date" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+          {{"labels.inputs.Repayment Date" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
         </mat-error>
       </mat-form-field>
 

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

@@ -22,7 +22,7 @@
 
   <div fxFlexFill>
     <span fxFlex="40%">Primary Grouping by Amount:</span>
-    <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate?.accountChart.isPrimaryGroupingByAmount ? 'Yes' : 'No' }}</span>
+    <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate?.accountChart.isPrimaryGroupingByAmount | yesNo }}</span>
   </div>
 
   <table class="mat-elevation-z1" mat-table [dataSource]="interestRateChartData" #chartsTable multiTemplateDataRows>

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

@@ -98,7 +98,7 @@
 
   <div fxFlexFill>
     <span fxFlex="40%">Transfer Interest to Savings Account?</span>
-    <span fxFlex="60%">{{ fixedDepositAccountData.transferInterestToSavings ? 'Yes' : 'No' }}</span>
+    <span fxFlex="60%">{{ fixedDepositAccountData.transferInterestToSavings | yesNo }}</span>
   </div>
 
   <div fxFlexFill *ngIf="fixedDepositAccountData.transferInterestToSavings">
@@ -108,7 +108,7 @@
 
   <div fxFlexFill>
     <span fxFlex="40%">Apply Penal Interest (less):</span>
-    <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate.preClosurePenalApplicable ? 'Yes' : 'No' }}</span>
+    <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate.preClosurePenalApplicable | yesNo }}</span>
   </div>
 
   <div fxFlexFill *ngIf="fixedDepositsAccountProductTemplate.preClosurePenalApplicable">
@@ -118,7 +118,7 @@
 
   <div fxFlexFill *ngIf="fixedDepositsAccountProductTemplate.withHoldTax">
     <span fxFlex="40%">Withhold Tax is Applicable:</span>
-    <span fxFlex="60%">{{ fixedDepositAccountData.withHoldTax ? 'Yes' : 'No' }}</span>
+    <span fxFlex="60%">{{ fixedDepositAccountData.withHoldTax | yesNo }}</span>
   </div>
 
   <h3 class="mat-h3" fxFlexFill>Interest Rate Chart</h3>
@@ -149,7 +149,7 @@
 
     <div fxFlexFill>
       <span fxFlex="40%">Primary Grouping by Amount:</span>
-      <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate?.accountChart.isPrimaryGroupingByAmount ? 'Yes' : 'No' }}</span>
+      <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate?.accountChart.isPrimaryGroupingByAmount | yesNo }}</span>
     </div>
 
     <table class="mat-elevation-z1 irc-table" mat-table [dataSource]="interestRateChartData" multiTemplateDataRows>

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

@@ -6,50 +6,61 @@
 
       <div class="profile-image-container">
         <div>
-          <img mat-card-md-image class="profile-image"
-            matTooltip="Fixed Deposits Account"
+          <img mat-card-md-image class="profile-image" matTooltip="Fixed Deposits Account"
             [src]="'assets/images/fd_account_placeholder.png'">
         </div>
       </div>
 
       <div class="mat-typography account-card-title">
         <mat-card-title>
-          <h3>
-            <i class="fa fa-stop" [ngClass]="fixedDepositsAccountData.status.code | statusLookup" [matTooltip]="fixedDepositsAccountData.status.value"></i>
-              Account Name : {{fixedDepositsAccountData.depositProductName}}
+          <h3 fxFlex="95%">
+            <i class="fa fa-stop" [ngClass]="fixedDepositsAccountData.status.code | statusLookup"
+              [matTooltip]="fixedDepositsAccountData.status.value"></i>
+            Fixed Deposit Product : {{fixedDepositsAccountData.fixedDepositsAccountData}}<span class="m-l-10">
+              <mifosx-account-number accountNo="{{fixedDepositsAccountData.accountNo}}"></mifosx-account-number></span>
           </h3>
+          <div fxFlex="5%">
+            <button mat-icon-button [matMenuTriggerFor]="accountMenu" aria-label="Loan account actions"
+              yPosition="below">
+              <mat-icon matListIcon class="actions-menu">
+                <fa-icon icon="bars" size="sm"></fa-icon>
+              </mat-icon>
+            </button>
+          </div>
         </mat-card-title>
         <mat-card-subtitle>
           <p>
-            Account #: {{fixedDepositsAccountData.accountNo}} | Client Name: {{fixedDepositsAccountData.clientName}}<br/>
-            <span *ngIf="!fixedDepositsAccountData.status.rejected && !fixedDepositsAccountData.status.submittedAndPendingApproval">
-              Current Balance: {{fixedDepositsAccountData.currency.displaySymbol}}&nbsp;{{fixedDepositsAccountData.summary.accountBalance}}<br/>
-              Deposit Amount: {{fixedDepositsAccountData.currency.displaySymbol}}&nbsp;{{fixedDepositsAccountData.depositAmount}}<br/>
+            {{entityType}} Name: {{fixedDepositsAccountData.clientName || fixedDepositsAccountData.groupName}}
+            <span class="m-l-10" *ngIf="fixedDepositsAccountData.clientAccountNo">({{fixedDepositsAccountData.clientAccountNo}})</span><br />
+            <span
+              *ngIf="!fixedDepositsAccountData.status.rejected && !fixedDepositsAccountData.status.submittedAndPendingApproval">
+              Current Balance:
+              {{fixedDepositsAccountData.summary.accountBalance | currency:currencyCode:'symbol-narrow':'1.2-2'}}<br />
+              Deposit Amount:
+              {{fixedDepositsAccountData.depositAmount | currency:currencyCode:'symbol-narrow':'1.2-2'}}<br />
             </span>
           </p>
         </mat-card-subtitle>
       </div>
 
+      <mat-menu #accountMenu="matMenu">
+        <ng-container *ngFor="let button of buttonConfig.singleButtons">
+          <button mat-menu-item (click)="doAction(button.name)">
+            <i ngClass="{{button.icon}}"></i> {{button.name}}</button>
+        </ng-container>
+
+        <ng-container *ngIf="buttonConfig.options.length">
+          <button mat-menu-item [matMenuTriggerFor]="More">More</button>
+          <mat-menu #More="matMenu">
+            <span *ngFor="let option of buttonConfig.options">
+              <button mat-menu-item (click)="doAction(option.name)">{{option.name}}</button>
+            </span>
+          </mat-menu>
+        </ng-container>
+      </mat-menu>
+
     </mat-card-title-group>
 
-    <mat-card-actions class="account-actions">
-
-      <ng-container *ngFor="let button of buttonConfig.singleButtons">
-        <button mat-raised-button (click)="doAction(button.name)">
-          <i class="{{button.icon}}"></i> {{button.name}}</button>
-      </ng-container>
-  
-      <ng-container *ngIf="buttonConfig.options.length">
-        <button mat-raised-button [matMenuTriggerFor]="More">More</button>
-        <mat-menu #More="matMenu">
-        <span *ngFor="let option of buttonConfig.options">
-          <button mat-menu-item (click)="doAction(option.name)">{{option.name}}</button>
-        </span>
-        </mat-menu>
-      </ng-container>
-  
-    </mat-card-actions>
-
   </mat-card-header>
 
   <mat-card-content class="content">
@@ -64,23 +75,28 @@
             <tbody>
               <tr>
                 <td>Activated On</td>
-                <td>{{fixedDepositsAccountData.timeline.activatedOnDate ? (fixedDepositsAccountData.timeline.activatedOnDate  | dateFormat) : 'Not Activated'}}</td>
+                <td>{{fixedDepositsAccountData.timeline.activatedOnDate ?
+                  (fixedDepositsAccountData.timeline.activatedOnDate | dateFormat) : 'Not Activated'}}</td>
               </tr>
               <tr *ngIf="fixedDepositsAccountData.timeline.closedOnDate">
                 <td>Closed On</td>
-                <td>{{fixedDepositsAccountData.timeline.closedOnDate  | dateFormat}}</td>
+                <td>{{fixedDepositsAccountData.timeline.closedOnDate | dateFormat}}</td>
               </tr>
               <tr>
                 <td>Field Officer</td>
-                <td>{{fixedDepositsAccountData.fieldOfficerName ? fixedDepositsAccountData.fieldOfficerName : 'Unassigned'}}</td>
+                <td>{{fixedDepositsAccountData.fieldOfficerName ? fixedDepositsAccountData.fieldOfficerName :
+                  'Unassigned'}}</td>
               </tr>
               <tr>
                 <td>Maturity Date</td>
-                <td>{{fixedDepositsAccountData.maturityDate ? (fixedDepositsAccountData.maturityDate  | dateFormat) : 'N/A'}}</td>
+                <td>{{fixedDepositsAccountData.maturityDate ? (fixedDepositsAccountData.maturityDate | dateFormat) :
+                  'N/A'}}</td>
               </tr>
               <tr>
                 <td>Deposit Period</td>
-                <td>{{fixedDepositsAccountData.depositPeriod}}&nbsp;{{fixedDepositsAccountData.depositPeriodFrequency.value}}</td>
+                <td>
+                  {{fixedDepositsAccountData.depositPeriod}}&nbsp;{{fixedDepositsAccountData.depositPeriodFrequency.value}}
+                </td>
               </tr>
               <tr *ngIf="fixedDepositsAccountData.withHoldTax">
                 <td>Tax Group</td>
@@ -116,8 +132,10 @@
               </tr>
               <tr *ngIf="fixedDepositsAccountData.preClosurePenalApplicable">
                 <td>Pre-cloure Penal</td>
-                <td>{{fixedDepositsAccountData.preClosurePenalInterest}} % on {{fixedDepositsAccountData.preClosurePenalInterestOnType.value}}</td>
+                <td>{{fixedDepositsAccountData.preClosurePenalInterest}} % on
+                  {{fixedDepositsAccountData.preClosurePenalInterestOnType.value}}</td>
               </tr>
+            </tbody>
           </table>
         </div>
 
@@ -125,30 +143,40 @@
 
       <div fxFlex="49%">
 
-        <div *ngIf="!fixedDepositsAccountData.status.rejected && !fixedDepositsAccountData.status.submittedAndPendingApproval; else otherDetails">
+        <div
+          *ngIf="!fixedDepositsAccountData.status.rejected && !fixedDepositsAccountData.status.submittedAndPendingApproval; else otherDetails">
           <h4 class="table-headers">Performance History</h4>
           <table>
             <tbody>
               <tr>
                 <td>Principal Amount</td>
-                <td>{{fixedDepositsAccountData.currency.displaySymbol}}&nbsp;{{fixedDepositsAccountData.depositAmount}}</td>
+                <td class="r-amount">{{fixedDepositsAccountData.depositAmount | currency:currencyCode:'symbol-narrow':'1.2-2'}}
+                </td>
               </tr>
               <tr>
                 <td>Maturity Amount</td>
-                <td>{{fixedDepositsAccountData.currency.displaySymbol}}&nbsp;{{fixedDepositsAccountData.maturityAmount}}</td>
+                <td class="r-amount">{{fixedDepositsAccountData.maturityAmount | currency:currencyCode:'symbol-narrow':'1.2-2'}}
+                </td>
               </tr>
               <tr *ngIf="fixedDepositsAccountData.summary.totalDeposits">
                 <td>Total Deposits</td>
-                <td>{{fixedDepositsAccountData.currency.displaySymbol}}&nbsp;{{fixedDepositsAccountData.summary.totalDeposits}}</td>
+                <td class="r-amount">
+                  {{fixedDepositsAccountData.summary.totalDeposits | currency:currencyCode:'symbol-narrow':'1.2-2'}}
+                </td>
               </tr>
               <tr *ngIf="fixedDepositsAccountData.summary.totalWithdrawals">
                 <td>Total Withdrawals</td>
-                <td>{{fixedDepositsAccountData.currency.displaySymbol}}&nbsp;{{fixedDepositsAccountData.summary.totalWithdrawals}}</td>
+                <td class="r-amount">
+                  {{fixedDepositsAccountData.summary.totalWithdrawals | currency:currencyCode:'symbol-narrow':'1.2-2'}}
+                </td>
               </tr>
               <tr *ngIf="fixedDepositsAccountData.summary.totalInterestEarned >= 0">
                 <td>Total Interest Earned</td>
-                <td>{{fixedDepositsAccountData.currency.displaySymbol}}&nbsp;{{fixedDepositsAccountData.summary.totalInterestEarned}}</td>
+                <td class="r-amount">
+                  {{fixedDepositsAccountData.summary.totalInterestEarned | currency:currencyCode:'symbol-narrow':'1.2-2'}}
+                </td>
               </tr>
+            </tbody>
           </table>
         </div>
 
@@ -159,11 +187,15 @@
               <tbody>
                 <tr>
                   <td>Principal Amount</td>
-                  <td>{{fixedDepositsAccountData.currency.displaySymbol}}&nbsp;{{fixedDepositsAccountData.depositAmount}}</td>
+                  <td>
+                    {{fixedDepositsAccountData.depositAmount | currency:currencyCode:'symbol-narrow':'1.2-2'}}
+                  </td>
                 </tr>
                 <tr>
                   <td>Maturity Amount</td>
-                  <td>{{fixedDepositsAccountData.currency.displaySymbol}}&nbsp;{{fixedDepositsAccountData.maturityAmount}}</td>
+                  <td>
+                    {{fixedDepositsAccountData.maturityAmount | currency:currencyCode:'symbol-narrow':'1.2-2'}}
+                  </td>
                 </tr>
               </tbody>
             </table>
@@ -176,25 +208,26 @@
 
     <nav mat-tab-nav-bar class="navigation-tabs">
       <a mat-tab-link [routerLink]="['./interest-rate-chart']" routerLinkActive #IRC="routerLinkActive"
-      [active]="IRC.isActive">
+        [active]="IRC.isActive">
         Interest Rate Chart
       </a>
       <a mat-tab-link [routerLink]="['./transactions']" routerLinkActive #transactions="routerLinkActive"
-      [active]="transactions.isActive">
+        [active]="transactions.isActive">
         Transactions
       </a>
       <a mat-tab-link [routerLink]="['./charges']" routerLinkActive #charges="routerLinkActive"
-      [active]="charges.isActive">
+        [active]="charges.isActive">
         Charges
       </a>
-      <a mat-tab-link [routerLink]="['./standing-instructions']" routerLinkActive #standingInstructions="routerLinkActive"
-        [active]="standingInstructions.isActive" *ngIf="fixedDepositsAccountData.clientId">
+      <a mat-tab-link [routerLink]="['./standing-instructions']" routerLinkActive
+        #standingInstructions="routerLinkActive" [active]="standingInstructions.isActive"
+        *ngIf="fixedDepositsAccountData.clientId">
         Standing Instructions
       </a>
       <ng-container *ngFor="let savingsDatatable of savingsDatatables">
         <a mat-tab-link *mifosxHasPermission="'READ_' + savingsDatatable.registeredTableName"
-          [routerLink]="['./datatables',savingsDatatable.registeredTableName]"
-          routerLinkActive #datatable="routerLinkActive" [active]="datatable.isActive">
+          [routerLink]="['./datatables',savingsDatatable.registeredTableName]" routerLinkActive
+          #datatable="routerLinkActive" [active]="datatable.isActive">
           {{savingsDatatable.registeredTableName}}
         </a>
       </ng-container>

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

@@ -32,6 +32,9 @@ export class FixedDepositAccountViewComponent implements OnInit {
   savingsDatatables: any;
   /** Button Configurations */
   buttonConfig: FixedDepositsButtonsConfiguration;
+  /** Entity Type */
+  entityType: string;
+  currencyCode: string;
 
   /**
    * Fetches fixed deposits account data from `resolve`
@@ -49,7 +52,15 @@ export class FixedDepositAccountViewComponent implements OnInit {
     this.route.data.subscribe((data: { fixedDepositsAccountData: any, savingsDatatables: any  }) => {
       this.fixedDepositsAccountData = data.fixedDepositsAccountData;
       this.savingsDatatables = data.savingsDatatables;
+      this.currencyCode = this.fixedDepositsAccountData.currency.code;
     });
+    if (this.router.url.includes('clients')) {
+      this.entityType = 'Client';
+    } else if (this.router.url.includes('groups')) {
+      this.entityType = 'Group';
+    } else if (this.router.url.includes('centers')) {
+      this.entityType = 'Center';
+    }
   }
 
   ngOnInit() {
@@ -97,6 +108,7 @@ export class FixedDepositAccountViewComponent implements OnInit {
       case 'Activate':
       case 'Close':
       case 'Undo Approval':
+      case 'Undo Activation':
       case 'Add Charge':
       case 'Withdraw By Client':
       case 'Premature Close':

src/app/deposits/fixed-deposits/fixed-deposit-account-view/fixed-deposits-buttons.config.ts

@@ -34,6 +34,10 @@ export class FixedDepositsButtonsConfiguration {
           {
             name: 'Calculate Interest',
             icon: 'fa fa-table'
+          },
+          {
+            name: 'Undo Activation',
+            icon: 'fa fa-undo'
           }
         ];
         break;

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

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

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

@@ -1,3 +1,5 @@
+@import "assets/styles/helper";
+
 .tab-container {
   padding: 1%;
   margin: 1%;
@@ -6,8 +8,40 @@
   }
   table {
     width: 100%;
+    color: $black;
+    .account-action-button{
+      min-width: 26px;
+      padding: 0 0 3px 0;
+      margin: 0 2%;
+      line-height: 25px;
+    }
     .select-row:hover {
       cursor: pointer;
     }
+    .strike {
+      text-decoration: line-through;
+      color: $status-active-overdue;
+    }
+    .linked {
+      color: $status-approved;
+    }
+    .accrual {
+      color: $msg-default;
+    }
   }
 }
+
+.active {
+  background-color: $status-active;
+  height: 4px;
+}
+
+.linked {
+  background-color: $status-approved;
+  height: 4px;
+}
+
+.undo {
+  background-color: $status-active-overdue;
+  height: 4px;
+}

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

@@ -14,11 +14,12 @@ import { ActivatedRoute, Router } from '@angular/router';
 export class TransactionsTabComponent implements OnInit {
 
   /** Fixed Deposits Account Status */
-  status: any;
+  status: string;
+  showTransactionsData = false;
   /** Transactions Data */
   transactionsData: any;
   /** Columns to be displayed in transactions table. */
-  displayedColumns: string[] = ['id', 'transactionDate', 'transactionType', 'debit', 'credit', 'balance'];
+  displayedColumns: string[] = ['id', 'transactionDate', 'transactionType', 'debit', 'credit', 'balance', 'actions'];
   /** Data source for transactions table. */
   dataSource: MatTableDataSource<any>;
 
@@ -32,6 +33,7 @@ export class TransactionsTabComponent implements OnInit {
     this.route.parent.data.subscribe((data: { fixedDepositsAccountData: any }) => {
       this.transactionsData = data.fixedDepositsAccountData.transactions;
       this.status = data.fixedDepositsAccountData.status.value;
+      this.showTransactionsData = (this.status === 'Active');
     });
   }
 
@@ -60,4 +62,26 @@ export class TransactionsTabComponent implements OnInit {
     }
   }
 
+  transactionColor(transaction: any): string {
+    if (transaction.reversed) {
+      return 'strike';
+    }
+    if (this.isAccrual(transaction.transactionType)) {
+      return 'accrual';
+    }
+    return '';
+  }
+
+  private isAccrual(transactionType: any): boolean  {
+    return (transactionType.accrual);
+  }
+
+  /**
+   * Stops the propagation to view pages.
+   * @param $event Mouse Event
+   */
+  routeEdit($event: MouseEvent) {
+    $event.stopPropagation();
+  }
+
 }

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

@@ -5,6 +5,8 @@
     <mat-card-content>
 
       <div fxLayout="row wrap" class="content">
+        <div fxFlex="100%" [ngClass]="transactionColor()">
+        </div>
 
         <div fxFlex="50%" class="mat-body-strong">
           Transaction Id
@@ -13,7 +15,7 @@
         <div fxFlex="50%">
           {{ transactionData.id }}
         </div>
-        
+
         <div fxFlex="50%" class="mat-body-strong">
           Type
         </div>
@@ -27,7 +29,7 @@
         </div>
 
         <div fxFlex="50%">
-          {{ transactionData.date  | dateFormat }}
+          {{ transactionData.date | dateFormat }}
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
@@ -43,7 +45,7 @@
         </div>
 
         <div fxFlex="50%">
-          {{ transactionData.amount }}
+          {{ transactionData.amount | currency:transactionData.currency.code:'symbol-narrow':'1.2-2' }}
         </div>
 
         <div fxFlex="50%" *ngIf="transactionData.note" class="mat-body-strong">
@@ -59,47 +61,47 @@
           <div *ngIf="transactionData.paymentDetailData.paymentType" fxFlex="50%" class="mat-body-strong">
             Payment Type
           </div>
-  
+
           <div *ngIf="transactionData.paymentDetailData.paymentType" fxFlex="50%">
             {{ transactionData.paymentDetailData.paymentType.name }}
           </div>
-          
+
           <div *ngIf="transactionData.paymentDetailData.accountNumber" fxFlex="50%" class="mat-body-strong">
             Account No.
           </div>
-  
+
           <div *ngIf="transactionData.paymentDetailData.accountNumber" fxFlex="50%">
             {{ transactionData.paymentDetailData.accountNumber }}
           </div>
-  
+
           <div *ngIf="transactionData.paymentDetailData.checkNumber" fxFlex="50%" class="mat-body-strong">
             Cheque Number
           </div>
-  
+
           <div *ngIf="transactionData.paymentDetailData.checkNumber" fxFlex="50%">
             {{ transactionData.paymentDetailData.checkNumber }}
           </div>
-  
+
           <div *ngIf="transactionData.paymentDetailData.routingCode" fxFlex="50%" class="mat-body-strong">
             Routing Code
           </div>
-  
+
           <div *ngIf="transactionData.paymentDetailData.routingCode" fxFlex="50%">
             {{ transactionData.paymentDetailData.routingCode }}
           </div>
-  
+
           <div *ngIf="transactionData.paymentDetailData.receiptNumber" fxFlex="50%" class="mat-body-strong">
             Receipt No.
           </div>
-  
+
           <div *ngIf="transactionData.paymentDetailData.receiptNumber" fxFlex="50%">
             {{ transactionData.paymentDetailData.receiptNumber }}
           </div>
-  
+
           <div *ngIf="transactionData.paymentDetailData.bankNumber" fxFlex="50%" class="mat-body-strong">
             Bank No.
           </div>
-  
+
           <div *ngIf="transactionData.paymentDetailData.bankNumber" fxFlex="50%">
             {{ transactionData.paymentDetailData.bankNumber }}
           </div>
@@ -108,6 +110,9 @@
 
       </div>
 
+      <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="2%" fxLayout.lt-md="column">
+        <button type="button" mat-raised-button color="primary" [routerLink]="['../']">{{ 'Back' | translate }}</button>
+      </div>
     </mat-card-content>
 
   </mat-card>

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

@@ -1,6 +1,8 @@
+@import "assets/styles/helper";
+
 .container {
   max-width: 37rem;
-  
+
   .content {
     div {
       margin: 1rem 0;
@@ -8,3 +10,26 @@
     }
   }
 }
+
+.transaction-buttons {
+  margin-top: 3%;
+}
+
+.transaction-relation {
+  background-color: $mid-grey;
+}
+
+.active {
+  background-color: $status-active;
+  height: 4px;
+}
+
+.linked {
+  background-color: $status-approved;
+  height: 4px;
+}
+
+.undo {
+  background-color: $status-active-overdue;
+  height: 4px;
+}

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

@@ -28,4 +28,11 @@ export class ViewTransactionComponent {
     });
   }
 
+  transactionColor(): string {
+    if (this.transactionData.manuallyReversed) {
+      return 'undo';
+    }
+    return 'active';
+  }
+
 }

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

@@ -1,7 +1,7 @@
 <mifosx-approve-fixed-deposits-account *ngIf="actions['Approve']"></mifosx-approve-fixed-deposits-account>
 <mifosx-reject-fixed-deposits-account *ngIf="actions['Reject']"></mifosx-reject-fixed-deposits-account>
 <mifosx-activate-fixed-deposits-account *ngIf="actions['Activate']"></mifosx-activate-fixed-deposits-account>
-<mifosx-undo-approval-fixed-deposits-account *ngIf="actions['Undo Approval']"></mifosx-undo-approval-fixed-deposits-account>
+<mifosx-undo-approval-fixed-deposits-account *ngIf="actions['Undo Approval'] || actions['Undo Activation']"></mifosx-undo-approval-fixed-deposits-account>
 <mifosx-withdraw-by-client-fixed-deposits-account *ngIf="actions['Withdraw By Client']"></mifosx-withdraw-by-client-fixed-deposits-account>
 <mifosx-add-charge-fixed-deposits-account *ngIf="actions['Add Charge']"></mifosx-add-charge-fixed-deposits-account>
 <mifosx-premature-close-fixed-deposits-account *ngIf="actions['Premature Close']"></mifosx-premature-close-fixed-deposits-account>

src/app/deposits/fixed-deposits/fixed-deposits-account-actions/fixed-deposits-account-actions.component.ts

@@ -19,6 +19,7 @@ export class FixedDepositsAccountActionsComponent {
     'Activate': boolean
     'Close': boolean
     'Undo Approval': boolean
+    'Undo Activation': boolean
     'Add Charge': boolean
     'Premature Close': boolean
     'Withdraw By Client': boolean
@@ -28,6 +29,7 @@ export class FixedDepositsAccountActionsComponent {
     'Activate': false,
     'Close': false,
     'Undo Approval': false,
+    'Undo Activation': false,
     'Add Charge': false,
     'Premature Close': false,
     'Withdraw By Client': false

src/app/deposits/fixed-deposits/fixed-deposits-account-actions/undo-approval-fixed-deposits-account/undo-approval-fixed-deposits-account.component.ts

@@ -5,6 +5,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Services */
 import { SavingsService } from 'app/savings/savings.service';
+import { FixedDepositsService } from '../../fixed-deposits.service';
 
 /**
  * Undo Approval Fixed Deposits Account Component
@@ -20,6 +21,9 @@ export class UndoApprovalFixedDepositsAccountComponent implements OnInit {
   undoApprovalFixedDepositsAccountForm: UntypedFormGroup;
   /** Fixed Deposits Account Id */
   accountId: any;
+  /** Action to be Undo */
+  undoAction: string;
+  undoCommand: string;
 
   /**
    * Fixed deposits endpoint is not supported so using Savings endpoint.
@@ -30,8 +34,14 @@ export class UndoApprovalFixedDepositsAccountComponent implements OnInit {
    */
   constructor(private formBuilder: UntypedFormBuilder,
               private savingsService: SavingsService,
+              private fixedDepositsService: FixedDepositsService,
               private route: ActivatedRoute,
               private router: Router) {
+    this.undoCommand = 'undoapproval'; // Default command
+    this.undoAction = this.route.snapshot.params['name'];
+    if (this.undoAction === 'Undo Activation') {
+      this.undoCommand = 'undoactivate';
+    }
     this.accountId = this.route.parent.snapshot.params['fixedDepositAccountId'];
   }
 
@@ -59,9 +69,15 @@ export class UndoApprovalFixedDepositsAccountComponent implements OnInit {
     const data = {
       ...this.undoApprovalFixedDepositsAccountForm.value,
     };
-    this.savingsService.executeSavingsAccountCommand(this.accountId, 'undoapproval', data).subscribe(() => {
-      this.router.navigate(['../../'], { relativeTo: this.route });
-    });
+    if (this.undoAction === 'Undo Activation') {
+      this.fixedDepositsService.executeFixedDepositsAccountCommand(this.accountId, this.undoCommand, data).subscribe(() => {
+        this.router.navigate(['../../'], { relativeTo: this.route });
+      });
+    } else {
+      this.savingsService.executeSavingsAccountCommand(this.accountId, this.undoCommand, data).subscribe(() => {
+        this.router.navigate(['../../'], { relativeTo: this.route });
+      });
+    }
   }
 
 }

src/app/deposits/fixed-deposits/fixed-deposits-routing.module.ts

@@ -54,6 +54,11 @@ const routes: Routes = [
               savingsDatatables: SavingsDatatablesResolver
             },
             children: [
+              {
+                path: '',
+                redirectTo: 'transactions',
+                pathMatch: 'full'
+              },
               {
                 path: 'interest-rate-chart',
                 component: InterestRateChartTabComponent,

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

@@ -23,7 +23,7 @@
   <div fxFlexFill>
     <span fxFlex="40%">Primary Grouping by Amount:</span>
     <span
-      fxFlex="60%">{{ recurringDepositsAccountProductTemplate?.accountChart.isPrimaryGroupingByAmount ? 'Yes' : 'No' }}</span>
+      fxFlex="60%">{{ recurringDepositsAccountProductTemplate?.accountChart.isPrimaryGroupingByAmount | yesNo }}</span>
   </div>
 
   <table class="mat-elevation-z1" mat-table [dataSource]="interestRateChartData" #chartsTable multiTemplateDataRows>

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

@@ -90,7 +90,7 @@
 
   <div fxFlexFill>
     <span fxFlex="40%">Deposit Frequency Same as Group/Center meeting:</span>
-    <span fxFlex="60%">{{ recurringDepositsAccountProductTemplate.isCalendarInherited === true ? 'Yes' : 'No'  }}</span>
+    <span fxFlex="60%">{{ recurringDepositsAccountProductTemplate.isCalendarInherited === true | yesNo  }}</span>
   </div>
 
   <ng-container *ngIf="!recurringDepositsAccountProductTemplate.isCalendarInherited">
@@ -155,7 +155,7 @@
     <div fxFlexFill>
       <span fxFlex="40%">Primary Grouping by Amount:</span>
       <span
-        fxFlex="60%">{{ recurringDepositsAccountProductTemplate?.accountChart.isPrimaryGroupingByAmount ? 'Yes' : 'No' }}</span>
+        fxFlex="60%">{{ recurringDepositsAccountProductTemplate?.accountChart.isPrimaryGroupingByAmount | yesNo }}</span>
     </div>
 
     <table class="mat-elevation-z1 irc-table" mat-table [dataSource]="interestRateChartData" multiTemplateDataRows>

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

@@ -1,4 +1,4 @@
-<mat-card class="recurringDeposits-account-card">
+<mat-card class="recurring-deposits-account-card">
 
   <mat-card-header fxLayout="column" class="header">
 
@@ -13,11 +13,19 @@
 
       <div class="mat-typography account-card-title">
         <mat-card-title>
-          <h3>
+          <h3 fxFlex="95%">
             <i class="fa fa-stop" [ngClass]="recurringDepositsAccountData.status.code | statusLookup"
               [matTooltip]="recurringDepositsAccountData.status.value"></i>
             Account Name : {{recurringDepositsAccountData.depositProductName}}
           </h3>
+          <div fxFlex="5%">
+            <button mat-icon-button [matMenuTriggerFor]="accountMenu" aria-label="Loan account actions"
+              yPosition="below">
+              <mat-icon matListIcon class="actions-menu">
+                <fa-icon icon="bars" size="sm"></fa-icon>
+              </mat-icon>
+            </button>
+          </div>
         </mat-card-title>
         <mat-card-subtitle>
           <p>
@@ -26,39 +34,38 @@
             <span
               *ngIf="!recurringDepositsAccountData.status.rejected && !recurringDepositsAccountData.status.submittedAndPendingApproval">
               Current Balance:
-              {{recurringDepositsAccountData.currency.displaySymbol}}&nbsp;{{recurringDepositsAccountData.summary.accountBalance}}<br />
+              {{recurringDepositsAccountData.summary.accountBalance | currency:currencyCode:'symbol-narrow':'1.2-2'}}<br />
               Available Balance:
-              {{recurringDepositsAccountData.currency.displaySymbol}}&nbsp;{{recurringDepositsAccountData.summary.availableBalance}}<br />
+              {{recurringDepositsAccountData.summary.availableBalance | currency:currencyCode:'symbol-narrow':'1.2-2'}}<br />
             </span>
           </p>
         </mat-card-subtitle>
       </div>
 
+      <mat-menu #accountMenu="matMenu">
+        <ng-container *ngFor="let button of buttonConfig.singleButtons">
+          <button mat-raised-button (click)="doAction(button.name)">
+            <i ngClass="{{button.icon}}"></i> {{button.name}}</button>
+        </ng-container>
+
+        <ng-container *ngIf="buttonConfig.options.length">
+          <button mat-raised-button [matMenuTriggerFor]="More">More</button>
+          <mat-menu #More="matMenu">
+          <span *ngFor="let option of buttonConfig.options">
+            <button mat-menu-item (click)="doAction(option.name)">{{option.name}}</button>
+          </span>
+          </mat-menu>
+        </ng-container>
+
+      </mat-menu>
+
     </mat-card-title-group>
 
-    <mat-card-actions class="account-actions">
-
-      <ng-container *ngFor="let button of buttonConfig.singleButtons">
-        <button mat-raised-button (click)="doAction(button.name)">
-          <i class="{{button.icon}}"></i> {{button.name}}</button>
-      </ng-container>
-
-      <ng-container *ngIf="buttonConfig.options.length">
-        <button mat-raised-button [matMenuTriggerFor]="More">More</button>
-        <mat-menu #More="matMenu">
-        <span *ngFor="let option of buttonConfig.options">
-          <button mat-menu-item (click)="doAction(option.name)">{{option.name}}</button>
-        </span>
-        </mat-menu>
-      </ng-container>
-
-    </mat-card-actions>
-
   </mat-card-header>
 
   <mat-card-content class="content">
 
-    <div class="recurringDeposits-account-tables" fxLayout="row" fxLayoutGap="2%">
+    <div class="recurring-deposits-account-tables" fxLayout="row" fxLayoutGap="2%">
 
       <div fxFlex="49%"
         *ngIf="!recurringDepositsAccountData.status.rejected && !recurringDepositsAccountData.status.submittedAndPendingApproval">
@@ -98,7 +105,7 @@
             </tr>
             <tr *ngIf="recurringDepositsAccountData.minBalanceForInterestCalculation">
               <td> Balance Required For Interest Calculation</td>
-              <td><span>{{recurringDepositsAccountData.minBalanceForInterestCalculation}}</span></td>
+              <td><span>{{recurringDepositsAccountData.minBalanceForInterestCalculation | number }}</span></td>
             </tr>
             <tr *ngIf="recurringDepositsAccountData.witdHoldTax">
               <td> Witdhold Tax Group </td>
@@ -116,41 +123,41 @@
             <tr>
               <td>Principal Amount</td>
               <td>
-                <span>{{recurringDepositsAccountData.currency.displaySymbol}}&nbsp;{{recurringDepositsAccountData.depositAmount}}</span>
+                <span>{{recurringDepositsAccountData.depositAmount | currency:currencyCode:'symbol-narrow':'1.2-2'}}}</span>
               </td>
             </tr>
             <tr>
               <td>Maturity Amount</td>
               <td>
-                <span>{{recurringDepositsAccountData.currency.displaySymbol}}&nbsp;{{recurringDepositsAccountData.maturityAmount | formatNumber}}</span>
+                <span>{{recurringDepositsAccountData.maturityAmount | currency:currencyCode:'symbol-narrow':'1.2-2'}}}</span>
               </td>
             </tr>
             <tr>
               <td>Recurring Deposit Amount</td>
               <td>
-                <span>{{recurringDepositsAccountData.currency.displaySymbol}}&nbsp;{{recurringDepositsAccountData?.mandatoryRecommendedDepositAmount | formatNumber}}</span>
+                <span>{{recurringDepositsAccountData?.mandatoryRecommendedDepositAmount | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span>
               </td>
             </tr>
             <tr>
               <td>Deposits till Date</td>
               <td><span
-                  *ngIf="recurringDepositsAccountData.summary.totalDeposits">{{recurringDepositsAccountData.currency.displaySymbol}}&nbsp;{{recurringDepositsAccountData.summary.totalDeposits | formatNumber}}</span>
+                  *ngIf="recurringDepositsAccountData.summary.totalDeposits">{{recurringDepositsAccountData.summary.totalDeposits | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span>
                 <span
-                  *ngIf="!recurringDepositsAccountData.summary.totalDeposits">{{recurringDepositsAccountData.currency.displaySymbol}}&nbsp;0</span>
+                  *ngIf="!recurringDepositsAccountData.summary.totalDeposits">{{ 0 | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span>
               </td>
             </tr>
             <tr>
               <td>Withdrwals till Date</td>
               <td><span
-                  *ngIf="recurringDepositsAccountData.summary.totalWithdrawals">{{recurringDepositsAccountData.currency.displaySymbol}}&nbsp;{{recurringDepositsAccountData.summary.totalWithdrawals | formatNumber}}</span>
+                  *ngIf="recurringDepositsAccountData.summary.totalWithdrawals">{{recurringDepositsAccountData.summary.totalWithdrawals | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span>
                 <span
-                  *ngIf="!recurringDepositsAccountData.summary.totalWithdrawals">{{recurringDepositsAccountData.currency.displaySymbol}}&nbsp;0</span>
+                  *ngIf="!recurringDepositsAccountData.summary.totalWithdrawals">{{ 0 | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span>
               </td>
             </tr>
 
             <tr *ngIf="recurringDepositsAccountData.summary.totalInterestEarned >= 0">
               <td >Interest Earned</td>
-              <td><span>{{recurringDepositsAccountData.currency.displaySymbol}}&nbsp;{{recurringDepositsAccountData.summary.totalInterestEarned| formatNumber}}</span>
+              <td><span>{{recurringDepositsAccountData.summary.totalInterestEarned | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span>
               </td>
             </tr>
 
@@ -186,33 +193,34 @@
             <tr>
               <td>Total Deposits </td>
               <td>
-                <span *ngIf="recurringDepositsAccountData.summary.totalDeposits">{{ recurringDepositsAccountData.currency.displaySymbol }}&nbsp;{{ recurringDepositsAccountData.summary.totalDeposits }}</span>
-                <span *ngIf="!recurringDepositsAccountData.summary.totalDeposits">{{recurringDepositsAccountData.currency.displaySymbol}}&nbsp;0</span>
+                <span *ngIf="recurringDepositsAccountData.summary.totalDeposits">{{ recurringDepositsAccountData.summary.totalDeposits | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span>
+                <span *ngIf="!recurringDepositsAccountData.summary.totalDeposits">{{ 0 | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span>
               </td>
             </tr>
             <tr >
               <td> Actual Available Balance</td>
-              <td>{{ recurringDepositsAccountData.currency.displaySymbol }}&nbsp;{{ recurringDepositsAccountData.summary.accountBalance }}
+              <td>{{ recurringDepositsAccountData.summary.accountBalance | currency:currencyCode:'symbol-narrow':'1.2-2'}}</td>
             </tr>
             <tr>
               <td> Recurring Deposits Amount</td>
               <td>
-                {{ recurringDepositsAccountData.currency.displaySymbol }}&nbsp;{{ recurringDepositsAccountData.mandatoryRecommendedDepositAmount }}
+                {{ recurringDepositsAccountData.mandatoryRecommendedDepositAmount | currency:currencyCode:'symbol-narrow':'1.2-2'}}
+              </td>
             </tr>
             <tr *ngIf="recurringDepositsAccountData.summary.totalInterestEarned">
               <td> Interests Earned </td>
-              <td><span>{{ recurringDepositsAccountData.currency.displaySymbol }}&nbsp;{{ recurringDepositsAccountData.summary.totalInterestEarned }}</span></td>
+              <td><span>{{ recurringDepositsAccountData.summary.totalInterestEarned | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span></td>
             </tr>
             <tr *ngIf="recurringDepositsAccountData.summary.totalWithdrawals">
               <td> Total Withdrawls </td>
               <td>
-                <span>{{ recurringDepositsAccountData.currency.displaySymbol }}&nbsp;{{ recurringDepositsAccountData.summary.totalWithdrawals }}</span>
+                <span>{{ recurringDepositsAccountData.summary.totalWithdrawals | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span>
               </td>
             </tr>
             <tr *ngIf="recurringDepositsAccountData.minBalanceForInterestCalculation">
               <td> Balance Required For Interest Calculation </td>
               <td>
-                <span>{{ recurringDepositsAccountData.minBalanceForInterestCalculation }}</span>
+                <span>{{ recurringDepositsAccountData.minBalanceForInterestCalculation | number  }}</span>
               </td>
             </tr>
           </tbody>
@@ -226,9 +234,9 @@
             <tr>
               <td>Principal Amount</td>
               <td><span
-                  *ngIf="recurringDepositsAccountData.depositAmount">{{ recurringDepositsAccountData.currency.displaySymbol }}&nbsp;{{ recurringDepositsAccountData.depositAmount }}</span>
+                  *ngIf="recurringDepositsAccountData.depositAmount">{{ recurringDepositsAccountData.depositAmount | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span>
                 <span
-                  *ngIf="!recurringDepositsAccountData.depositAmount">{{ recurringDepositsAccountData.currency.displaySymbol }}&nbsp;0</span>
+                  *ngIf="!recurringDepositsAccountData.depositAmount">{{ 0 | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span>
               </td>
             </tr>
             <tr>
@@ -240,35 +248,37 @@
             <tr *ngIf="recurringDepositsAccountData.maturityDate">
               <td>Maturity Amount</td>
               <td>
-                <span>{{ recurringDepositsAccountData.currency.displaySymbol }}&nbsp;{{ recurringDepositsAccountData.maturityAmount }}</span>
+                <span>{{ recurringDepositsAccountData.maturityAmount | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span>
               </td>
             </tr>
             <tr>
               <td>Total Withdrawls </td>
               <td>
                 <span
-                  *ngIf="recurringDepositsAccountData.summary.totalWithdrawals">{{ recurringDepositsAccountData.currency.displaySymbol }}&nbsp;{{ recurringDepositsAccountData.summary.totalWithdrawals }}</span>
+                  *ngIf="recurringDepositsAccountData.summary.totalWithdrawals">{{ recurringDepositsAccountData.summary.totalWithdrawals | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span>
                 <span
-                  *ngIf="!recurringDepositsAccountData.summary.totalWithdrawals">{{recurringDepositsAccountData.currency.displaySymbol}}&nbsp;0</span>
+                  *ngIf="!recurringDepositsAccountData.summary.totalWithdrawals">{{ 0 | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span>
               </td>
             </tr>
             <tr *ngIf="recurringDepositsAccountData.timeline.closedOnDate">
               <td> Closed on Date </td>
               <td>
                 {{ recurringDepositsAccountData.timeline.closedOnDate  | dateFormat }}
+              </td>
             </tr>
             <tr>
               <td> Deposits Frequency </td>
               <td>
                 {{ recurringDepositsAccountData.recurringFrequency }}&nbsp;{{ recurringDepositsAccountData.recurringFrequencyType.value }}
+              </td>
             </tr>
             <tr *ngIf="recurringDepositsAccountData.summary.totalInterestEarned">
               <td> Interests Posted </td>
               <td>
                 <span
-                  *ngIf="recurringDepositsAccountData.summary.totalInterestPosted">{{recurringDepositsAccountData.currency.displaySymbol}}&nbsp;{{recurringDepositsAccountData.summary.totalInterestPosted}}</span>
+                  *ngIf="recurringDepositsAccountData.summary.totalInterestPosted">{{recurringDepositsAccountData.summary.totalInterestPosted | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span>
                 <span
-                  *ngIf="!recurringDepositsAccountData.summary.totalInterestPosted">{{recurringDepositsAccountData.currency.displaySymbol}}&nbsp;0</span>
+                  *ngIf="!recurringDepositsAccountData.summary.totalInterestPosted">{{ 0 | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span>
               </td>
             </tr>
           </tbody>
@@ -276,7 +286,7 @@
       </div>
     </div>
 
-    <div class="recurringDeposits-account-tables" fxLayout="row" fxLayoutGap="2%">
+    <div class="recurring-deposits-account-tables" fxLayout="row" fxLayoutGap="2%">
       <div fxFlex="49%"
         *ngIf="!recurringDepositsAccountData.status.rejected && !recurringDepositsAccountData.status.submittedAndPendingApproval">
         <h4 class="table-headers">Interest Details</h4>

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

@@ -1,4 +1,4 @@
-.recurringDeposits-account-card {
+.recurring-deposits-account-card {
   margin: 0 auto;
   max-width: 80rem;
   width: 90%;
@@ -45,7 +45,7 @@
       td {
         padding: 3px;
       }
-    } 
+    }
   }
   i, img:hover {
     cursor: pointer;

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

@@ -35,6 +35,7 @@ export class RecurringDepositsAccountViewComponent implements OnInit {
   savingsDatatables: any;
   /** Is Prematured Allowed */
   isprematureAllowed: any;
+  currencyCode: string;
   /**
    * Fetches recurringDeposits account data from `resolve`
    * @param {ActivatedRoute} route Activated Route
@@ -50,6 +51,7 @@ export class RecurringDepositsAccountViewComponent implements OnInit {
       this.recurringDepositsAccountData = data.recurringDepositsAccountData;
       this.charges = this.recurringDepositsAccountData.charges;
       this.savingsDatatables = data.savingsDatatables;
+      this.currencyCode = this.recurringDepositsAccountData.currency.code;
       this.isprematureAllowed = data.recurringDepositsAccountData.maturityDate != null;
     });
   }

src/app/home/dashboard/amount-collected-pie/amount-collected-pie.component.html

@@ -3,10 +3,10 @@
   <mat-card-header class="header">
     <h3 fxFlex="100%">
       <fa-icon icon="donate"></fa-icon>
-      &nbsp;&nbsp; {{"labels.inputs.Amount Collected"  |translate}}
+      &nbsp;&nbsp; {{"labels.inputs.Amount Collected" | translate }}
       <div>
         <mat-form-field id="office" fxFlex="94%">
-          <mat-label>{{"labels.inputs.Office"  |translate}}</mat-label>
+          <mat-label>{{"labels.inputs.Office" | translate }}</mat-label>
           <mat-select [formControl]="officeId">
             <mat-option *ngFor="let office of officeData" [value]="office.id">
               {{ office.name }}
@@ -23,8 +23,8 @@
       <canvas id="collection-pie" width="800" height="600"></canvas>
     </div>
     <div *ngIf="showFallback" class="fallback" fxLayoutAlign="center center">
-      <p>{{"labels.text.No Data"  |translate}}</p>
-    </div>     
+      <p>{{"labels.text.No Data" | translate }}</p>
+    </div>
   </mat-card-content>
 
 </mat-card>

src/app/home/dashboard/amount-disbursed-pie/amount-disbursed-pie.component.html

@@ -3,10 +3,10 @@
   <mat-card-header class="header">
     <h3 fxFlex="100%">
       <fa-icon icon="money-bill"></fa-icon>
-      &nbsp;&nbsp; {{"labels.inputs.Amount Pending / Disbursed"  |translate}}
+      &nbsp;&nbsp; {{"labels.inputs.Amount Pending / Disbursed" | translate }}
       <div>
         <mat-form-field id="office" fxFlex="94%">
-          <mat-label>{{"labels.inputs.Office"  |translate}}</mat-label>
+          <mat-label>{{"labels.inputs.Office" | translate }}</mat-label>
           <mat-select [formControl]="officeId">
             <mat-option *ngFor="let office of officeData" [value]="office.id">
               {{ office.name }}
@@ -23,7 +23,7 @@
       <canvas id="disbursement-pie" width="800" height="600"></canvas>
     </div>
     <div *ngIf="showFallback" class="fallback" fxLayoutAlign="center center">
-      <p>{{"labels.text.No Data"  |translate}}</p>
+      <p>{{"labels.text.No Data" | translate }}</p>
     </div>
   </mat-card-content>
 

src/app/home/dashboard/client-trends-bar/client-trends-bar.component.html

@@ -3,10 +3,10 @@
   <mat-card-header class="header">
     <h3 fxFlex="100%">
       <fa-icon icon="chart-line"></fa-icon>
-      &nbsp;&nbsp; {{"labels.inputs.Client Trends"  |translate}}
+      &nbsp;&nbsp; {{"labels.inputs.Client Trends" | translate }}
       <div>
         <mat-form-field id="office" fxFlex="94%">
-          <mat-label>{{"labels.inputs.Office"  |translate}}</mat-label>
+          <mat-label>{{"labels.inputs.Office" | translate }}</mat-label>
           <mat-select [formControl]="officeId">
             <mat-option *ngFor="let office of officeData" [value]="office.id">
               {{ office.name }}
@@ -23,9 +23,9 @@
       <canvas id="client-trends-bar" width="800" height="465"></canvas>
     </div>
     <mat-button-toggle-group [formControl]="timescale" id='timescale' appearance="legacy">
-      <mat-button-toggle value="Day">{{"labels.buttons.Day"  |translate}}</mat-button-toggle>
-      <mat-button-toggle value="Week">{{"labels.buttons.Week"  |translate}}</mat-button-toggle>
-      <mat-button-toggle value="Month">{{"labels.buttons.Month"  |translate}}</mat-button-toggle>
+      <mat-button-toggle value="Day">{{"labels.buttons.Day" | translate }}</mat-button-toggle>
+      <mat-button-toggle value="Week">{{"labels.buttons.Week" | translate }}</mat-button-toggle>
+      <mat-button-toggle value="Month">{{"labels.buttons.Month" | translate }}</mat-button-toggle>
     </mat-button-toggle-group>
   </mat-card-content>
 

src/app/home/dashboard/dashboard.component.html

@@ -8,7 +8,7 @@
 
         <mat-card-header class="header">
           <h3><fa-icon icon="bolt"></fa-icon>
-          &nbsp;&nbsp; {{"labels.heading.Recent Activities"  |translate}}</h3>
+          &nbsp;&nbsp; {{"labels.heading.Recent Activities" | translate }}</h3>
         </mat-card-header>
 
         <mat-card-content>
@@ -23,7 +23,7 @@
 
         <mat-card-header class="header">
           <h3><fa-icon icon="laptop"></fa-icon>
-          &nbsp;&nbsp; {{"labels.heading.Frequent Activities"  |translate}}</h3>
+          &nbsp;&nbsp; {{"labels.heading.Frequent Activities" | translate }}</h3>
         </mat-card-header>
 
         <mat-card-content>
@@ -32,7 +32,7 @@
             [routerLink]="activity"> {{ activity | urlToString }} </button>
           </mat-action-list>
         </mat-card-content>
-        
+
       </mat-card>
 
       <mifosx-amount-disbursed-pie></mifosx-amount-disbursed-pie>
@@ -46,7 +46,7 @@
       <mifosx-amount-collected-pie></mifosx-amount-collected-pie>
 
     </div>
-    
+
   </mat-card>
 
 </div>

src/app/home/home.component.html

@@ -43,21 +43,21 @@
 </div>
 
 <ng-template #templateButtonDashboard let-popover="popover">
-  <h2>{{"labels.heading.Dashboard"  |translate}}</h2>
-  <p class="mw300">{{"labels.text.This will navigate the user to the dashboard component."  |translate}}</p>
+  <h2>{{"labels.heading.Dashboard" | translate }}</h2>
+  <p class="mw300">{{"labels.text.This will navigate the user to the dashboard component." | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <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(templateSearchActivity, searchActivity,'bottom',true)">{{"labels.buttons.Next"  |translate}}</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(templateSearchActivity, searchActivity,'bottom',true)">{{"labels.buttons.Next" | translate }}</button>
   </div>
 </ng-template>
 
 <ng-template #templateSearchActivity let-popover="popover">
-  <h2>{{"labels.heading.Search Activity"  |translate}}</h2>
-  <p class="mw300">{{"labels.text.This will navigate the user to the searched activity."  |translate}}</p>
+  <h2>{{"labels.heading.Search Activity" | translate }}</h2>
+  <p class="mw300">{{"labels.text.This will navigate the user to the searched activity." | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <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(templateButtonDashboard, buttonDashboard,'bottom',true)">{{"labels.buttons.Back"  |translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">{{"labels.buttons.Next"  |translate}}</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(templateButtonDashboard, buttonDashboard,'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/loans/create-loans-account/create-loans-account.component.html

@@ -23,7 +23,7 @@
 
     <mat-step [stepControl]="loansAccountDetailsForm">
 
-      <ng-template matStepLabel>{{"labels.inputs.DETAILS"  |translate}}</ng-template>
+      <ng-template matStepLabel>{{"labels.inputs.DETAILS" | translate }}</ng-template>
 
       <mifosx-loans-account-details-step [loansAccountTemplate]="loansAccountTemplate"
         (loansAccountProductTemplate)="setTemplate($event)" #loansAccountDetailsForm>
@@ -33,7 +33,7 @@
 
     <mat-step [stepControl]="loansAccountTermsForm">
 
-      <ng-template matStepLabel>{{"labels.inputs.TERMS"  |translate}}</ng-template>
+      <ng-template matStepLabel>{{"labels.inputs.TERMS" | translate }}</ng-template>
 
       <mifosx-loans-account-terms-step #loanAccountTerms [loansAccountProductTemplate]="loansAccountProductTemplate"
       [loansAccountTemplate] = "loansAccountTemplate" [collateralOptions]="collateralOptions"
@@ -44,7 +44,7 @@
 
     <mat-step>
 
-      <ng-template matStepLabel>{{"labels.inputs.CHARGES"  |translate}}</ng-template>
+      <ng-template matStepLabel>{{"labels.inputs.CHARGES" | translate }}</ng-template>
 
       <mifosx-loans-account-charges-step #loanAccountCharges [loansAccountProductTemplate]="loansAccountProductTemplate"
         [loansAccountTemplate]="loansAccountTemplate"
@@ -55,7 +55,7 @@
 
     <mat-step state="repayment" *ngIf="loansAccountFormValid" completed>
 
-      <ng-template matStepLabel>{{"labels.inputs.REPAYMENT SCHEDULE"  |translate}}</ng-template>
+      <ng-template matStepLabel>{{"labels.inputs.REPAYMENT SCHEDULE" | translate }}</ng-template>
 
       <mifosx-loans-account-schedule-step #loanAccountSchedule [loansAccountTemplate]="loansAccountTemplate"
         [loansAccountProductTemplate]="loansAccountProductTemplate" [loansAccount]="loansAccount" [currencyCode]="currencyCode">
@@ -73,7 +73,7 @@
 
     <mat-step state="preview" *ngIf="loansAccountFormValid" completed>
 
-      <ng-template matStepLabel>{{"labels.inputs.PREVIEW"  |translate}}</ng-template>
+      <ng-template matStepLabel>{{"labels.inputs.PREVIEW" | translate }}</ng-template>
 
       <mifosx-loans-account-preview-step [loansAccountTemplate]="loansAccountTemplate"
         [loansAccountProductTemplate]="loansAccountProductTemplate" [loansAccount]="loansAccount" (submit)="submit()">

src/app/loans/custom-dialog/loans-account-add-collateral-dialog/loans-account-add-collateral-dialog.component.html

@@ -1,44 +1,44 @@
-<h1 mat-dialog-title>{{"labels.heading.Add Loan Collateral"  |translate}}</h1>
+<h1 mat-dialog-title>{{"labels.heading.Add Loan Collateral" | translate }}</h1>
 
 <div mat-dialog-content [formGroup]="addCollateralForm" fxLayout="column">
 
   <mat-form-field>
-    <mat-label>{{"labels.inputs.Collateral"  |translate}}</mat-label>
+    <mat-label>{{"labels.inputs.Collateral" | translate }}</mat-label>
     <mat-select formControlName="collateral" required>
       <mat-option *ngFor="let collateralType of collateralTypeData" [value]="collateralType" >
         {{ collateralType.name }}
       </mat-option>
     </mat-select>
     <mat-error>
-      {{"labels.inputs.Collateral"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+      {{"labels.inputs.Collateral" | translate }} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate }}</strong>
     </mat-error>
   </mat-form-field>
 
   <mat-form-field>
-    <mat-label>{{"labels.inputs.Quantity"  |translate}}</mat-label>
+    <mat-label>{{"labels.inputs.Quantity" | translate }}</mat-label>
     <input type="number" [max]="maxQuantity" [min]="0" matInput formControlName="quantity" required>
     <mat-error *ngIf="addCollateralForm.controls.quantity.hasError('required')">
-      {{"labels.inputs.Quantity"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+      {{"labels.inputs.Quantity" | translate }} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate }}</strong>
     </mat-error>
     <mat-error *ngIf="addCollateralForm.controls.quantity.hasError('max')">
-      {{"labels.inputs.Quantity can not be more than"  |translate}} <strong>{{ maxQuantity }}</strong>
+      {{"labels.inputs.Quantity can not be more than" | translate }} <strong>{{ maxQuantity }}</strong>
     </mat-error>
   </mat-form-field>
 
   <mat-form-field>
-    <mat-label>{{"labels.inputs.Total Value"  |translate}}</mat-label>
+    <mat-label>{{"labels.inputs.Total Value" | translate }}</mat-label>
     <input type="text" matInput formControlName="totalValue" [disabled]="true">
   </mat-form-field>
 
   <mat-form-field>
-    <mat-label>{{"labels.inputs.Total Collateral Value"  |translate}}</mat-label>
+    <mat-label>{{"labels.inputs.Total Collateral Value" | translate }}</mat-label>
     <input type="text" matInput formControlName="totalCollateralValue" [disabled]="true">
   </mat-form-field>
 
 </div>
 
 <mat-dialog-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
-  <button mat-raised-button mat-dialog-close> {{"labels.buttons.Cancel"  |translate}} </button>
+  <button mat-raised-button mat-dialog-close> {{"labels.buttons.Cancel" | translate }} </button>
   <button mat-raised-button color="primary" [mat-dialog-close]="{ data: addCollateralForm }"
     [disabled]="!addCollateralForm.valid || addCollateralForm.pristine">{{ layout.addButtonText }}</button>
 </mat-dialog-actions>

src/app/loans/custom-dialog/loans-account-view-guarantor-details-dialog/loans-account-view-guarantor-details-dialog.component.html

@@ -1,37 +1,37 @@
-<h1 mat-dialog-title>{{"labels.heading.Guarantor Detail"  |translate}}</h1>
+<h1 mat-dialog-title>{{"labels.heading.Guarantor Detail" | translate }}</h1>
 
 <div mat-dialog-content fxLayout="column">
 
   <div fxLayout="row wrap" fxLayout.lt-md="column">
 
     <div fxFlexFill>
-      <span fxFlex="50%">{{"labels.inputs.First Name"  |translate}}:</span>
+      <span fxFlex="50%">{{"labels.inputs.First Name" | translate }}:</span>
       <span fxFlex="50%">{{ data.guarantorData.firstname }}</span>
     </div>
 
     <div fxFlexFill>
-      <span fxFlex="50%">{{"labels.inputs.Last Name"  |translate}}:</span>
+      <span fxFlex="50%">{{"labels.inputs.Last Name" | translate }}:</span>
       <span fxFlex="50%">{{ data.guarantorData.lastname }}</span>
     </div>
 
     <div fxFlexFill>
-      <span fxFlex="50%">{{"labels.inputs.Relationship"  |translate}}:</span>
+      <span fxFlex="50%">{{"labels.inputs.Relationship" | translate }}:</span>
       <span fxFlex="50%">{{ data.guarantorData.clientRelationshipType.name }}</span>
     </div>
 
     <div fxFlexFill>
-      <span fxFlex="50%">{{"labels.inputs.Guarantor Type"  |translate}}:</span>
+      <span fxFlex="50%">{{"labels.inputs.Guarantor Type" | translate }}:</span>
       <span fxFlex="50%">{{ data.guarantorData.guarantorType.value }}</span>
     </div>
 
     <div fxFlexFill>
-      <span fxFlex="50%">{{"labels.inputs.Status"  |translate}}:</span>
+      <span fxFlex="50%">{{"labels.inputs.Status" | translate }}:</span>
       <span fxFlex="50%">
         <span *ngIf="data.guarantorData.status">
-          {{"labels.inputs.Active"  |translate}}
+          {{"labels.inputs.Active" | translate }}
         </span>
         <span *ngIf="!data.guarantorData.status">
-          {{"labels.inputs.Deleted"  |translate}}
+          {{"labels.inputs.Deleted" | translate }}
         </span></span>
     </div>
 
@@ -40,5 +40,5 @@
 </div>
 
 <mat-dialog-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
-  <button mat-raised-button mat-dialog-close> {{"labels.buttons.Cancel"  |translate}} </button>
+  <button mat-raised-button mat-dialog-close> {{"labels.buttons.Cancel" | translate }} </button>
 </mat-dialog-actions>

src/app/loans/edit-loans-account/edit-loans-account.component.html

@@ -23,7 +23,7 @@
 
     <mat-step [stepControl]="loansAccountDetailsForm">
 
-      <ng-template matStepLabel>{{"labels.inputs.DETAILS"  |translate}}</ng-template>
+      <ng-template matStepLabel>{{"labels.inputs.DETAILS" | translate }}</ng-template>
 
       <mifosx-loans-account-details-step [loansAccountTemplate]="loansAccountAndTemplate"
         (loansAccountProductTemplate)="setTemplate($event)">
@@ -33,7 +33,7 @@
 
     <mat-step [stepControl]="loansAccountTermsForm">
 
-      <ng-template matStepLabel>{{"labels.inputs.TERMS"  |translate}}</ng-template>
+      <ng-template matStepLabel>{{"labels.inputs.TERMS" | translate }}</ng-template>
 
       <mifosx-loans-account-terms-step [loansAccountProductTemplate]="loansAccountProductTemplate"
       [loansAccountTemplate]="loansAccountAndTemplate" [collateralOptions]="collateralOptions">
@@ -43,7 +43,7 @@
 
     <mat-step>
 
-      <ng-template matStepLabel>{{"labels.inputs.CHARGES"  |translate}}</ng-template>
+      <ng-template matStepLabel>{{"labels.inputs.CHARGES" | translate }}</ng-template>
 
       <mifosx-loans-account-charges-step [loansAccountProductTemplate]="loansAccountProductTemplate"
         [loansAccountTemplate]="loansAccountAndTemplate"
@@ -54,7 +54,7 @@
 
     <mat-step>
 
-      <ng-template matStepLabel>{{"labels.inputs.REPAYMENT SCHEDULE"  |translate}}</ng-template>
+      <ng-template matStepLabel>{{"labels.inputs.REPAYMENT SCHEDULE" | translate }}</ng-template>
 
       <mifosx-loans-account-schedule-step [loansAccountTemplate]="loansAccountAndTemplate"
         [loansAccountProductTemplate]="loansAccountProductTemplate" [loansAccount]="loansAccount"
@@ -65,7 +65,7 @@
 
     <mat-step state="preview" *ngIf="loansAccountFormValidAndNotPristine" completed>
 
-      <ng-template matStepLabel>{{"labels.inputs.PREVIEW"  |translate}}</ng-template>
+      <ng-template matStepLabel>{{"labels.inputs.PREVIEW" | translate }}</ng-template>
 
       <mifosx-loans-account-preview-step [loansAccountTemplate]="loansAccountAndTemplate"
         [loansAccountProductTemplate]="loansAccountProductTemplate" [loansAccount]="loansAccount" (submit)="submit()">

src/app/loans/glim-account/create-glim-account/create-glim-account.component.html

@@ -23,7 +23,7 @@
 
     <mat-step [stepControl]="loansAccountDetailsForm">
 
-      <ng-template matStepLabel>{{"labels.inputs.DETAILS"  |translate}}</ng-template>
+      <ng-template matStepLabel>{{"labels.inputs.DETAILS" | translate }}</ng-template>
 
       <mifosx-glim-details-step [loansAccountTemplate]="loansAccountTemplate"
         (loansAccountProductTemplate)="setTemplate($event)" [gsimData]="gsimData">
@@ -33,7 +33,7 @@
 
     <mat-step [stepControl]="loansAccountTermsForm">
 
-      <ng-template matStepLabel>{{"labels.inputs.TERMS"  |translate}}</ng-template>
+      <ng-template matStepLabel>{{"labels.inputs.TERMS" | translate }}</ng-template>
 
       <mifosx-glim-terms-step [loansAccountProductTemplate]="loansAccountProductTemplate"
       [loansAccountTemplate] = "loansAccountTemplate">
@@ -43,7 +43,7 @@
 
     <mat-step>
 
-      <ng-template matStepLabel>{{"labels.inputs.CHARGES"  |translate}}</ng-template>
+      <ng-template matStepLabel>{{"labels.inputs.CHARGES" | translate }}</ng-template>
 
       <mifosx-glim-charges-step [loansAccountProductTemplate]="loansAccountProductTemplate"
         [loansAccountTemplate]="loansAccountTemplate"
@@ -55,7 +55,7 @@
 
     <mat-step state="preview" *ngIf="loansAccountFormValid" completed>
 
-      <ng-template matStepLabel>{{"labels.inputs.PREVIEW"  |translate}}</ng-template>
+      <ng-template matStepLabel>{{"labels.inputs.PREVIEW" | translate }}</ng-template>
 
       <mifosx-loans-account-preview-step [loansAccountTemplate]="loansAccountTemplate"
         [loansAccountProductTemplate]="loansAccountProductTemplate" [loansAccount]="loansAccount" (submit)="submit()">

src/app/loans/glim-account/create-glim-account/glim-account-stepper/glim-charges-step/glim-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>{{"labels.inputs.Charge"  |translate}}</mat-label>
+      <mat-label>{{"labels.inputs.Charge" | translate }}</mat-label>
       <mat-select #charge>
         <mat-option *ngFor="let charge of chargeData" [value]="charge">
           {{ charge.name }}
@@ -12,28 +12,28 @@
     <div fxFlex="48%" fxFlexAlign="center">
       <button type="button" mat-raised-button color="primary" (click)="addCharge(charge)" [disabled]="!charge.value">
         <fa-icon icon="plus" class="m-r-10"></fa-icon>
-        {{"labels.buttons.Add"  |translate}}
+        {{"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> {{"labels.inputs.name"  |translate}} </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> {{"labels.inputs.Type"  |translate}} </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> {{"labels.inputs.Amount"  |translate}} </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Amount" | translate }} </th>
         <td mat-cell *matCellDef="let charge">
           {{ charge.amount }}
           <button mat-icon-button color="primary" (click)="editChargeAmount(charge)">
@@ -43,14 +43,14 @@
       </ng-container>
 
       <ng-container matColumnDef="chargeTimeType">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Collected On"  |translate}} </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> {{"labels.inputs.Date"  |translate}} </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Date" | translate }} </th>
         <td mat-cell *matCellDef="let charge">
           <span *ngIf="charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee'">
             {{(charge.dueDate  | dateFormat) || 'Unassigned'}}
@@ -61,7 +61,7 @@
           <span
             *ngIf="!(charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'
               || charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee')">
-              {{"labels.inputs.N/A"  |translate}}
+              {{"labels.inputs.N/A" | translate }}
           </span>
           <button mat-icon-button color="primary"
             *ngIf="charge.chargeTimeType.value === 'Weekly Fee' || charge.chargeTimeType.value === 'Annual Fee'
@@ -73,7 +73,7 @@
       </ng-container>
 
       <ng-container matColumnDef="repaymentsEvery">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Repayments Every"  |translate}} </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Repayments Every" | translate }} </th>
         <td mat-cell *matCellDef="let charge">
           {{ charge.feeInterval || 'Not Provided' }}
           <button mat-icon-button color="primary"
@@ -85,7 +85,7 @@
       </ng-container>
 
       <ng-container matColumnDef="action">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Actions"  |translate}} </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>
@@ -113,22 +113,22 @@
 
         <!-- Position Column -->
         <ng-container matColumnDef="id">
-          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Client ID"  |translate}} </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> {{"labels.inputs.Client Name"  |translate}} </th>
+          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Client Name" | translate }} </th>
           <td mat-cell *matCellDef="let element"> {{element.displayName}} </td>
         </ng-container>
 
          <!-- Weight Column -->
          <ng-container matColumnDef="purpose">
-          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Loan Purpose"  |translate}} </th>
+          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Loan Purpose" | translate }} </th>
           <td mat-cell *matCellDef="let element">
             <mat-form-field>
-                <mat-label>{{"labels.inputs.Select Purpose"  |translate}}</mat-label>
+                <mat-label>{{"labels.inputs.Select Purpose" | translate }}</mat-label>
                 <mat-select [(ngModel)]="element.loanPurposeId">
                 <mat-option *ngFor="let purpose of loanPurposeOptions" [value]="purpose.id">
                     {{ purpose.name }}
@@ -140,7 +140,7 @@
 
         <!-- Symbol Column -->
         <ng-container matColumnDef="amount">
-          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Original Loan"  |translate}} </th>
+          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Original Loan" | translate }} </th>
           <td mat-cell *matCellDef="let element">
             <mat-form-field>
                 <input type="number" matInput [(ngModel)]="element.principal">
@@ -160,10 +160,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>
-      {{"labels.buttons.Previous"  |translate}}
+      {{"labels.buttons.Previous" | translate }}
     </button>
     <button mat-raised-button matStepperNext>
-      {{"labels.buttons.Next"  |translate}}
+      {{"labels.buttons.Next" | translate }}
       <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
     </button>
   </div>

src/app/loans/glim-account/create-glim-account/glim-account-stepper/glim-details-step/glim-details-step.component.html

@@ -3,19 +3,19 @@
     <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
       <mat-form-field fxFlex="48%">
-        <mat-label>{{"labels.inputs.Product Name"  |translate}}</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>
-          {{"labels.inputs.Product Name"  |translate}} {{ "labels.commons.is"  |translate}}  <strong>{{ "labels.commons.required"  |translate}}</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>{{"labels.inputs.Loan officer"  |translate}}</mat-label>
+        <mat-label>{{"labels.inputs.Loan officer" | translate }}</mat-label>
         <mat-select formControlName="loanOfficerId">
           <mat-option *ngFor="let loanOfficer of loanOfficerOptions" [value]="loanOfficer.id">
             {{ loanOfficer.displayName }}
@@ -25,7 +25,7 @@
 
 
       <mat-form-field fxFlex="48%">
-        <mat-label>{{"labels.inputs.Fund"  |translate}}</mat-label>
+        <mat-label>{{"labels.inputs.Fund" | translate }}</mat-label>
         <mat-select formControlName="fundId">
           <mat-option *ngFor="let fund of fundOptions" [value]="fund.id">
             {{ fund.name }}
@@ -34,24 +34,24 @@
       </mat-form-field>
 
       <mat-form-field fxFlex="48%" (click)="submitPicker.open()">
-        <mat-label>{{"labels.inputs.Submitted on"  |translate}}</mat-label>
+        <mat-label>{{"labels.inputs.Submitted on" | translate }}</mat-label>
         <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="submitPicker" required
           formControlName="submittedOnDate">
         <mat-datepicker-toggle matSuffix [for]="submitPicker"></mat-datepicker-toggle>
         <mat-datepicker #submitPicker></mat-datepicker>
         <mat-error *ngIf="loansAccountDetailsForm.controls.submittedOnDate?.hasError('required')">
-          {{"labels.inputs.Submitted on"  |translate}} {{ "labels.commons.is"  |translate}}  <strong>{{ "labels.commons.required"  |translate}}</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%" (click)="disbursementPicker.open()">
-        <mat-label>{{"labels.inputs.Disbursement on"  |translate}}</mat-label>
+        <mat-label>{{"labels.inputs.Disbursement on" | translate }}</mat-label>
         <input matInput [min]="loansAccountDetailsForm.value.submittedOnDate" [max]="maxDate" [matDatepicker]="disbursementPicker" required
           formControlName="expectedDisbursementDate">
         <mat-datepicker-toggle matSuffix [for]="disbursementPicker"></mat-datepicker-toggle>
         <mat-datepicker #disbursementPicker></mat-datepicker>
         <mat-error *ngIf="loansAccountDetailsForm.controls.submittedOnDate?.hasError('required')">
-          {{"labels.inputs.Disbursement on"  |translate}} {{ "labels.commons.is"  |translate}}  <strong>{{ "labels.commons.required"  |translate}}</strong>
+          {{"labels.inputs.Disbursement on" | translate }} {{ "labels.commons.is" | translate }}  <strong>{{ "labels.commons.required" | translate }}</strong>
         </mat-error>
       </mat-form-field>
 
@@ -59,10 +59,10 @@
 
       <mat-divider fxFlex="98%"></mat-divider>
 
-      <h3 class="mat-h3" fxFlexFill>{{"labels.heading.Savings Linkage"  |translate}}</h3>
+      <h3 class="mat-h3" fxFlexFill>{{"labels.heading.Savings Linkage" | translate }}</h3>
 
       <mat-form-field fxFlex="48%">
-        <mat-label>{{"labels.inputs.Link savings"  |translate}}</mat-label>
+        <mat-label>{{"labels.inputs.Link savings" | translate }}</mat-label>
         <mat-select formControlName="linkAccountId">
           <mat-option *ngFor="let savingaccount of gsimData" [value]="savingaccount.id">
             {{ savingaccount.accountNumber }}
@@ -77,10 +77,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>
-        {{"labels.buttons.Previous"  |translate}}
+        {{"labels.buttons.Previous" | translate }}
       </button>
       <button mat-raised-button matStepperNext>
-        {{"labels.buttons.Next"  |translate}}
+        {{"labels.buttons.Next" | translate }}
         <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
       </button>
     </div>

src/app/loans/glim-account/create-glim-account/glim-account-stepper/glim-preview-step/glim-preview-step.component.html

@@ -1,70 +1,70 @@
 <div fxLayout="row wrap" fxLayout.lt-md="column">
 
-    <h3 class="mat-h3" fxFlexFill>{{"labels.heading.Details"  |translate}}</h3>
+    <h3 class="mat-h3" fxFlexFill>{{"labels.heading.Details" | translate }}</h3>
 
     <mat-divider fxFlexFill></mat-divider>
 
     <div fxFlexFill>
-      <span fxFlex="40%">{{"labels.inputs.Product"  |translate}}:</span>
+      <span fxFlex="40%">{{"labels.inputs.Product" | translate }}:</span>
       <span fxFlex="60%">{{ loansAccount.productId | find:loansAccountTemplate.productOptions:'id':'name' }}</span>
     </div>
 
     <div fxFlexFill *ngIf="loansAccount.loanOfficerId">
-      <span fxFlex="40%">{{"labels.inputs.Loan officer"  |translate}}:</span>
+      <span fxFlex="40%">{{"labels.inputs.Loan officer" | translate }}:</span>
       <span
         fxFlex="60%">{{ loansAccount.loanOfficerId | find:loansAccountProductTemplate.loanOfficerOptions:'id':'displayName'}}</span>
     </div>
 
     <div fxFlexFill *ngIf="loansAccount.loanPurposeId">
-      <span fxFlex="40%">{{"labels.inputs.Loan purpose"  |translate}}:</span>
+      <span fxFlex="40%">{{"labels.inputs.Loan purpose" | translate }}:</span>
       <span
         fxFlex="60%">{{ loansAccount.loanPurposeId | find:loansAccountProductTemplate.loanPurposeOptions:'id':'name'}}</span>
     </div>
 
     <div fxFlexFill *ngIf="loansAccount.fundId">
-      <span fxFlex="40%">{{"labels.inputs.Fund"  |translate}}:</span>
+      <span fxFlex="40%">{{"labels.inputs.Fund" | translate }}:</span>
       <span fxFlex="60%">{{ loansAccount.fundId | find:loansAccountProductTemplate.fundOptions:'id':'name'}}</span>
     </div>
 
     <div fxFlexFill>
-      <span fxFlex="40%">{{"labels.inputs.Submitted on"  |translate}}:</span>
+      <span fxFlex="40%">{{"labels.inputs.Submitted on" | translate }}:</span>
       <span fxFlex="60%">{{ loansAccount.submittedOnDate  | dateFormat }}</span>
     </div>
 
     <div fxFlexFill>
-      <span fxFlex="40%">{{"labels.inputs.Disbursement on"  |translate}}:</span>
+      <span fxFlex="40%">{{"labels.inputs.Disbursement on" | translate }}:</span>
       <span fxFlex="60%">{{ loansAccount.expectedDisbursementDate  | dateFormat }}</span>
     </div>
 
     <div fxFlexFill *ngIf="loansAccount.externalId">
-      <span fxFlex="40%">{{"labels.inputs.External id"  |translate}}:</span>
+      <span fxFlex="40%">{{"labels.inputs.External id" | translate }}:</span>
       <span fxFlex="60%">
         <mifosx-external-identifier externalId="{{loansAccount.externalId}}"></mifosx-external-identifier>
       </span>
     </div>
 
-    <h3 class="mat-h3" fxFlexFill>{{"labels.heading.Terms"  |translate}}</h3>
+    <h3 class="mat-h3" fxFlexFill>{{"labels.heading.Terms" | translate }}</h3>
 
     <mat-divider fxFlexFill></mat-divider>
 
     <div fxFlexFill>
-      <span fxFlex="40%">{{"labels.inputs.Principal"  |translate}}:</span>
+      <span fxFlex="40%">{{"labels.inputs.Principal" | translate }}:</span>
       <span fxFlex="60%">{{ loansAccount.principal }} {{loansAccountProductTemplate.currency.DisplaySymbol}}</span>
     </div>
 
     <div fxFlexFill>
-      <span fxFlex="40%">{{"labels.inputs.Loan term"  |translate}}:</span>
+      <span fxFlex="40%">{{"labels.inputs.Loan term" | translate }}:</span>
       <span fxFlex="60%">{{ loansAccount.loanTermFrequency }}
         {{loansAccount.loanTermFrequencyType | find: loansAccountProductTemplate.termFrequencyTypeOptions:'id':'name'}}</span>
     </div>
 
     <div fxFlexFill>
-      <span fxFlex="40%">{{"labels.inputs.Number of repayments"  |translate}}:</span>
+      <span fxFlex="40%">{{"labels.inputs.Number of repayments" | translate }}:</span>
       <span fxFlex="60%">{{ loansAccount.numberOfRepayments }}</span>
     </div>
 
     <div fxFlexFill>
-      <span fxFlex="40%">{{"labels.inputs.Repaid every"  |translate}}:</span>
+      <span fxFlex="40%">{{"labels.inputs.Repaid every" | translate }}:</span>
       <span fxFlex="60%">{{loansAccount.repaymentEvery}}
         {{loansAccount.repaymentFrequencyType | find: loansAccountProductTemplate.termFrequencyTypeOptions:'id':'name'}}
         {{loansAccount.repaymentFrequencyNthDayType | find: loansAccountProductTemplate.repaymentFrequencyNthDayTypeOptions:'id': 'name'}}
@@ -72,137 +72,137 @@
     </div>
 
     <div fxFlexFill *ngIf="loansAccount.repaymentsStartingFromDate">
-      <span fxFlex="40%">{{"labels.inputs.First repayment on"  |translate}}:</span>
+      <span fxFlex="40%">{{"labels.inputs.First repayment on" | translate }}:</span>
       <span fxFlex="60%">{{ loansAccount.repaymentsStartingFromDate  | dateFormat }}</span>
     </div>
 
     <div fxFlexFill *ngIf="loansAccount.interestChargedFromDate">
-      <span fxFlex="40%">{{"labels.inputs.Interest charged from"  |translate}}:</span>
+      <span fxFlex="40%">{{"labels.inputs.Interest charged from" | translate }}:</span>
       <span fxFlex="60%">{{ loansAccount.interestChargedFromDate  | dateFormat }}</span>
     </div>
 
     <div fxFlexFill *ngIf="loansAccount.interestRatePerPeriod">
-      <span fxFlex="40%">{{"labels.inputs.Nominal interest rate"  |translate}}:</span>
+      <span fxFlex="40%">{{"labels.inputs.Nominal interest rate" | translate }}:</span>
       <span
         fxFlex="60%">{{loansAccount.interestRatePerPeriod}}&nbsp;&nbsp;{{loansAccountProductTemplate.interestRateFrequencyType.value}}</span>
     </div>
 
     <div fxFlexFill *ngIf="loansAccount.interestType">
-      <span fxFlex="40%">{{"labels.inputs.Interest method"  |translate}}: </span>
+      <span fxFlex="40%">{{"labels.inputs.Interest method" | translate }}: </span>
       <span fxFlex="60%">{{loansAccount.interestType}}</span>
     </div>
 
     <div fxFlexFill *ngIf="loansAccount.isEqualAmortization">
-      <span fxFlex="40%">{{"labels.inputs.Is Equal Amortization"  |translate}}:</span>
+      <span fxFlex="40%">{{"labels.inputs.Is Equal Amortization" | translate }}:</span>
       <span fxFlex="60%">{{loansAccount.isEqualAmortization}}</span>
     </div>
 
     <div fxFlexFill>
-      <span fxFlex="40%">{{"labels.inputs.Amortization"  |translate}}</span>
+      <span fxFlex="40%">{{"labels.inputs.Amortization" | translate }}</span>
       <span
         fxFlex="60%">{{ loansAccount.amortizationType | find:loansAccountProductTemplate.amortizationTypeOptions:'id':'value' }}</span>
     </div>
 
     <div fxFlexFill>
-      <span fxFlex="40%">{{"labels.inputs.Interest calculation period"  |translate}}: </span>
+      <span fxFlex="40%">{{"labels.inputs.Interest calculation period" | translate }}: </span>
       <span
         fxFlex="60%">{{ loansAccount.interestCalculationPeriodType | find:loansAccountProductTemplate.interestCalculationPeriodTypeOptions:'id':'value'  }}</span>
     </div>
 
     <div fxFlexFill *ngIf="loansAccount.allowPartialPeriodInterestCalcualtion">
-      <span fxFlex="40%">{{"labels.inputs.Calculate interest for exact days in partial period"  |translate}}:</span>
+      <span fxFlex="40%">{{"labels.inputs.Calculate interest for exact days in partial period" | translate }}:</span>
       <span fxFlex="60%">{{ loansAccount.allowPartialPeriodInterestCalcualtion }}</span>
     </div>
 
     <div fxFlexFill *ngIf="loansAccount.inArrearsTolerance">
-      <span fxFlex="40%">{{"labels.inputs.Arrears tolerance"  |translate}}: </span>
+      <span fxFlex="40%">{{"labels.inputs.Arrears tolerance" | translate }}: </span>
       <span
         fxFlex="60%">{{loansAccount.inArrearsTolerance}}&nbsp;{{loansAccountProductTemplate.currency.displaySymbol}}</span>
     </div>
 
     <div fxFlexFill *ngIf="loansAccount.graceOnInterestCharged">
-      <span fxFlex="40%">{{"labels.inputs.Interest free period"  |translate}}: </span>
+      <span fxFlex="40%">{{"labels.inputs.Interest free period" | translate }}: </span>
       <span fxFlex="60%">{{ loansAccount.graceOnInterestCharged }}</span>
     </div>
 
     <div fxFlexFill>
-      <span fxFlex="40%">{{"labels.inputs.Repayment strategy"  |translate}}: </span>
+      <span fxFlex="40%">{{"labels.inputs.Repayment strategy" | translate }}: </span>
       <span
         fxFlex="60%">{{ loansAccount.transactionProcessingStrategyCode | find:loansAccountTemplate.transactionProcessingStrategyOptions:'code':'name' }}</span>
     </div>
 
-    <h3 class="mat-h3" fxFlexFill>{{"labels.heading.Moratorium"  |translate}}</h3>
+    <h3 class="mat-h3" fxFlexFill>{{"labels.heading.Moratorium" | translate }}</h3>
 
     <mat-divider fxFlexFill></mat-divider>
 
     <div fxFlexFill *ngIf="loansAccount.graceOnPrincipalPayment">
-      <span fxFlex="40%">{{"labels.inputs.On principal payment"  |translate}}: </span>
+      <span fxFlex="40%">{{"labels.inputs.On principal payment" | translate }}: </span>
       <span fxFlex="60%">{{ loansAccount.graceOnPrincipalPayment }}</span>
     </div>
 
     <div fxFlexFill *ngIf="loansAccount.graceOnInterestPayment">
-      <span fxFlex="40%">{{"labels.inputs.On interest payment"  |translate}}: </span>
+      <span fxFlex="40%">{{"labels.inputs.On interest payment" | translate }}: </span>
       <span fxFlex="60%">{{ loansAccount.graceOnInterestPayment }}</span>
     </div>
 
     <div fxFlexFill *ngIf="loansAccount.graceOnArrearsAgeing">
-      <span fxFlex="40%">{{"labels.inputs.On Arrears Aging"  |translate}}: </span>
+      <span fxFlex="40%">{{"labels.inputs.On Arrears Aging" | translate }}: </span>
       <span fxFlex="60%">{{ loansAccount.graceOnArrearsAgeing }}</span>
     </div>
 
     <div fxFlexFill *ngIf="loansAccount.isTopup">
-      <span fxFlex="40%">{{"labels.inputs.Is Topup Loan"  |translate}}? </span>
+      <span fxFlex="40%">{{"labels.inputs.Is Topup Loan" | translate }}? </span>
       <span fxFlex="60%">{{ loansAccount.isTopup }}</span>
     </div>
 
     <div fxFlexFill>
-      <span fxFlex="40%">{{"labels.inputs.Recalculate Interest"  |translate}}: </span>
-      <span fxFlex="60%">{{ loansAccountProductTemplate?.isInterestRecalculationEnabled? 'Yes' : 'No' }}</span>
+      <span fxFlex="40%">{{"labels.inputs.Recalculate Interest" | translate }}: </span>
+      <span fxFlex="60%">{{ loansAccountProductTemplate?.isInterestRecalculationEnabled| yesNo }}</span>
     </div>
 
     <div fxFlexFill *ngIf="loansAccountProductTemplate?.daysInMonthType">
-      <span fxFlex="40%">{{"labels.inputs.Days in month"  |translate}}: </span>
+      <span fxFlex="40%">{{"labels.inputs.Days in month" | translate }}: </span>
       <span fxFlex="60%">{{ loansAccountProductTemplate?.daysInMonthType.value }}</span>
     </div>
 
     <div fxFlexFill *ngIf="loansAccount.charges.length" fxLayout="row wrap" fxLayout.lt-md="column">
 
-      <h3 class="mat-h3" fxFlexFill>{{"labels.heading.Charges"  |translate}}</h3>
+      <h3 class="mat-h3" fxFlexFill>{{"labels.heading.Charges" | translate }}</h3>
 
       <mat-divider fxFlexFill></mat-divider>
 
       <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="loansAccount.charges">
 
         <ng-container matColumnDef="name">
-          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.name"  |translate}} </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> {{"labels.inputs.Type"  |translate}} </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> {{"labels.inputs.Amount"  |translate}} </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> {{"labels.inputs.Collected On"  |translate}} </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> {{"labels.inputs.Date"  |translate}} </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'">
@@ -214,7 +214,7 @@
             <span
               *ngIf="!(charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'
                     || charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee')">
-                    {{"labels.inputs.N/A"  |translate}}
+                    {{"labels.inputs.N/A" | translate }}
             </span>
           </td>
         </ng-container>
@@ -228,29 +228,29 @@
 
     <div fxFlexFill *ngIf="loansAccountProductTemplate.overdueCharges.length" fxLayout="row wrap" fxLayout.lt-md="column">
 
-      <h3 fxFlex="98%" class="mat-h3">{{"labels.heading.Overdue Charges"  |translate}}</h3>
+      <h3 fxFlex="98%" class="mat-h3">{{"labels.heading.Overdue Charges" | translate }}</h3>
 
       <mat-divider fxFlex="98%"></mat-divider>
 
       <table mat-table class="mat-elevation-z1" [dataSource]="loansAccountProductTemplate.overdueCharges">
 
         <ng-container matColumnDef="name">
-          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.name"  |translate}} </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="type">
-          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Type"  |translate}} </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> {{"labels.inputs.Amount"  |translate}} </th>
+          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Amount" | translate }} </th>
           <td mat-cell *matCellDef="let charge"> {{ charge.amount| formatNumber }} </td>
         </ng-container>
 
         <ng-container matColumnDef="collectedon">
-          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Collected On"  |translate}} </th>
+          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Collected On" | translate }} </th>
           <td mat-cell *matCellDef="let charge"> {{ charge.chargeTimeType.value }} </td>
         </ng-container>
 
@@ -264,12 +264,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>
-      {{"labels.buttons.Previous"  |translate}}
+      {{"labels.buttons.Previous" | translate }}
     </button>
     <button mat-raised-button [routerLink]="['../']">
-      {{"labels.buttons.Cancel"  |translate}}
+      {{"labels.buttons.Cancel" | translate }}
     </button>
     <button mat-raised-button color="primary" (click)="submit.emit()">
-      {{"labels.buttons.Submit"  |translate}}
+      {{"labels.buttons.Submit" | translate }}
     </button>
   </div>

src/app/loans/glim-account/create-glim-account/glim-account-stepper/glim-terms-step/glim-terms-step.component.html

@@ -2,57 +2,57 @@
 
     <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
-      <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.Term Options"  |translate}}</h4>
+      <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.Term Options" | translate }}</h4>
 
       <mat-form-field fxFlex="48%">
-        <mat-label>{{"labels.inputs.Loan Term"  |translate}}</mat-label>
+        <mat-label>{{"labels.inputs.Loan Term" | translate }}</mat-label>
         <input matInput required formControlName="loanTermFrequency">
         <mat-error *ngIf="loansAccountTermsForm.controls.loanTermFrequency.hasError('required')">
-          {{"labels.inputs.Loan Term"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+          {{"labels.inputs.Loan Term" | translate }} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate }}</strong>
         </mat-error>
       </mat-form-field>
 
       <mat-form-field fxFlex="48%">
-        <mat-label>{{"labels.inputs.Frequency"  |translate}}</mat-label>
+        <mat-label>{{"labels.inputs.Frequency" | translate }}</mat-label>
         <mat-select required formControlName="loanTermFrequencyType">
           <mat-option *ngFor="let type of termFrequencyTypeData" [value]="type.id">
             {{ type.value }}
           </mat-option>
         </mat-select>
         <mat-error *ngIf="loansAccountTermsForm.controls.loanTermFrequencyType.hasError('required')">
-          {{"labels.inputs.Frequency"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+          {{"labels.inputs.Frequency" | translate }} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate }}</strong>
         </mat-error>
       </mat-form-field>
 
       <mat-form-field fxFlex="48%">
-        <mat-label>{{"labels.inputs.Number of repayments"  |translate}}</mat-label>
+        <mat-label>{{"labels.inputs.Number of repayments" | translate }}</mat-label>
         <input type="number" matInput formControlName="numberOfRepayments">
         <mat-error *ngIf="loansAccountTermsForm.controls.numberOfRepayments.hasError('required')">
-          {{"labels.inputs.Number of repayments"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+          {{"labels.inputs.Number of repayments" | translate }} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate }}</strong>
         </mat-error>
       </mat-form-field>
 
       <mat-form-field fxFlex="48%" (click)="repaymentsPicker.open()">
-        <mat-label>{{"labels.inputs.First repayment on"  |translate}}</mat-label>
+        <mat-label>{{"labels.inputs.First repayment on" | translate }}</mat-label>
         <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="repaymentsPicker"
           formControlName="repaymentsStartingFromDate">
         <mat-datepicker-toggle matSuffix [for]="repaymentsPicker"></mat-datepicker-toggle>
         <mat-datepicker #repaymentsPicker></mat-datepicker>
       </mat-form-field>
 
-      <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.Repaid Every"  |translate}}</h4>
+      <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.Repaid Every" | translate }}</h4>
 
       <mat-form-field fxFlex="48%">
-        <mat-label>{{"labels.inputs.Repaid every"  |translate}}</mat-label>
+        <mat-label>{{"labels.inputs.Repaid every" | translate }}</mat-label>
         <input matInput required formControlName="repaymentEvery"
           [disabled]="!loansAccountProductTemplate?.product.allowAttributeOverrides.repaymentEvery">
         <mat-error *ngIf="loansAccountTermsForm.controls.repaymentEvery.hasError('required')">
-          {{"labels.inputs.Repaid every"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+          {{"labels.inputs.Repaid every" | translate }} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate }}</strong>
         </mat-error>
       </mat-form-field>
 
       <mat-form-field fxFlex="48%">
-        <mat-label>{{"labels.inputs.Frequency"  |translate}}</mat-label>
+        <mat-label>{{"labels.inputs.Frequency" | translate }}</mat-label>
         <mat-select formControlName="repaymentFrequencyType" required
           [disabled]="!loansAccountProductTemplate?.product.allowAttributeOverrides.repaymentEvery">
           <mat-option *ngFor="let repaymentFrequencyType of termFrequencyTypeData"
@@ -63,7 +63,7 @@
       </mat-form-field>
 
       <mat-form-field fxFlex="48%" *ngIf="loansAccountTermsForm.controls.repaymentFrequencyType.value == 2">
-        <mat-label>{{"labels.inputs.Select On"  |translate}}</mat-label>
+        <mat-label>{{"labels.inputs.Select On" | translate }}</mat-label>
         <mat-select formControlName="repaymentFrequencyNthDayType">
           <mat-option
             *ngFor="let repaymentFrequencyNthDayType of repaymentFrequencyNthDayTypeData"
@@ -74,7 +74,7 @@
       </mat-form-field>
 
       <mat-form-field fxFlex="48%" *ngIf="loansAccountTermsForm.controls.repaymentFrequencyType.value == 2">
-        <mat-label>{{"labels.inputs.Select Day"  |translate}}</mat-label>
+        <mat-label>{{"labels.inputs.Select Day" | translate }}</mat-label>
         <mat-select formControlName="repaymentFrequencyDayOfWeekType">
           <mat-option
             *ngFor="let repaymentFrequencyDayOfWeekType of repaymentFrequencyDaysOfWeekTypeData"
@@ -85,7 +85,7 @@
       </mat-form-field>
 
       <mat-form-field fxFlex="48%" (click)="interestPicker.open()">
-        <mat-label>{{"labels.inputs.Interest charged from"  |translate}}</mat-label>
+        <mat-label>{{"labels.inputs.Interest charged from" | translate }}</mat-label>
         <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="interestPicker"
           formControlName="interestChargedFromDate">
         <mat-datepicker-toggle matSuffix [for]="interestPicker"></mat-datepicker-toggle>
@@ -95,12 +95,12 @@
     <ng-container *ngIf="!loansAccountProductTemplate?.isLoanProductLinkedToFloatingRate">
 
       <mat-form-field fxFlex="48%">
-        <mat-label>{{"labels.inputs.Nominal interest rate"  |translate}}</mat-label>
+        <mat-label>{{"labels.inputs.Nominal interest rate" | translate }}</mat-label>
         <input type="number" matInput formControlName="interestRatePerPeriod">
       </mat-form-field>
 
         <mat-form-field fxFlex="48%">
-          <mat-label>{{"labels.inputs.Interest method"  |translate}}</mat-label>
+          <mat-label>{{"labels.inputs.Interest method" | translate }}</mat-label>
           <mat-select [disabled]="!loansAccountProductTemplate?.product.allowAttributeOverrides.interestType"
             formControlName="interestType">
             <mat-option *ngFor="let interestType of interestTypeData"
@@ -118,10 +118,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>
-        {{"labels.buttons.Previous"  |translate}}
+        {{"labels.buttons.Previous" | translate }}
       </button>
       <button mat-raised-button matStepperNext>
-        {{"labels.buttons.Next"  |translate}}
+        {{"labels.buttons.Next" | translate }}
         <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
       </button>
     </div>

src/app/loans/glim-account/glim-account.component.html

@@ -2,38 +2,38 @@
 
   <mat-card-content>
 
-    <h2> {{"labels.heading.GLIM Account Overview"  |translate}}</h2>
+    <h2> {{"labels.heading.GLIM Account Overview" | translate }}</h2>
 
     <table mat-table [dataSource]="dataSource">
 
       <ng-container matColumnDef="loanId">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Loan Id"  |translate}} </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Loan Id" | translate }} </th>
         <td mat-cell *matCellDef="let element">
           {{element.childLoanId}} </td>
       </ng-container>
 
       <ng-container matColumnDef="clientId">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Client ID"  |translate}} </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Client ID" | translate }} </th>
         <td mat-cell *matCellDef="let element">{{element.clientId}} </td>
       </ng-container>
 
       <ng-container matColumnDef="clientName">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Client Name"  |translate}} </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Client Name" | translate }} </th>
         <td mat-cell *matCellDef="let element">{{element.clientName}} </td>
       </ng-container>
 
       <ng-container matColumnDef="loanAccountNumber">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Loan Account Number"  |translate}} </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Loan Account Number" | translate }} </th>
         <td mat-cell *matCellDef="let element"> {{element.childLoanAccountNo}} </td>
       </ng-container>
 
       <ng-container matColumnDef="clientPrincipalLoan">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Client Principal Loan"  |translate}} </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Client Principal Loan" | translate }} </th>
         <td mat-cell *matCellDef="let element" > {{element.childPrincipalAmount}} </td>
       </ng-container>
 
       <ng-container matColumnDef="groupPrincipalLoan">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Group Principal Loan"  |translate}} </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Group Principal Loan" | translate }} </th>
         <td mat-cell *matCellDef="let element" > {{element.parentPrincipalAmount}} </td>
       </ng-container>
 

src/app/loans/loans-account-stepper/loans-account-charges-step/loans-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>{{"labels.inputs.Charge"  |translate}}</mat-label>
+    <mat-label>{{"labels.inputs.Charge" | translate }}</mat-label>
     <mat-select #charge>
       <mat-option *ngFor="let charge of chargeData" [value]="charge">
         {{ charge.name }}
@@ -12,7 +12,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>
-      {{"labels.buttons.Add"  |translate}}
+      {{"labels.buttons.Add" | translate }}
     </button>
   </div>
 
@@ -20,21 +20,21 @@
     [hidden]="chargesDataSource.length === 0">
 
     <ng-container matColumnDef="name">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.name"  |translate}} </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> {{"labels.inputs.Type"  |translate}} </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> {{"labels.inputs.Amount"  |translate}} </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Amount" | translate }} </th>
       <td mat-cell *matCellDef="let charge">
         {{ charge.amount }}
         <button mat-icon-button color="primary" (click)="editChargeAmount(charge)">
@@ -44,14 +44,14 @@
     </ng-container>
 
     <ng-container matColumnDef="chargeTimeType">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Collected On"  |translate}} </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> {{"labels.inputs.Date"  |translate}} </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'">
@@ -63,7 +63,7 @@
         <span
           *ngIf="!(charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'
                       || charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee')">
-                      {{"labels.inputs.N/A"  |translate}}
+                      {{"labels.inputs.N/A" | translate }}
         </span>
         <button mat-icon-button color="primary" *ngIf="charge.chargeTimeType.value === 'Weekly Fee' || charge.chargeTimeType.value === 'Annual Fee'
               || charge.chargeTimeType.value === 'Specified due date'" (click)="editChargeDate(charge)">
@@ -73,7 +73,7 @@
     </ng-container>
 
     <ng-container matColumnDef="action">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Actions"  |translate}} </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>
@@ -88,27 +88,27 @@
 
   <mat-divider fxFlex="98%"></mat-divider>
 
-  <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.Overdue Charges"  |translate}}</h4>
+  <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.Overdue Charges" | translate }}</h4>
 
   <table mat-table class="mat-elevation-z1" [dataSource]="overDueChargesDataSource">
 
     <ng-container matColumnDef="name">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.name"  |translate}} </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="type">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Type"  |translate}} </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> {{"labels.inputs.Amount"  |translate}} </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Amount" | translate }} </th>
       <td mat-cell *matCellDef="let charge"> {{ charge.amount| formatNumber }} </td>
     </ng-container>
 
     <ng-container matColumnDef="collectedon">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Collected On"  |translate}} </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Collected On" | translate }} </th>
       <td mat-cell *matCellDef="let charge"> {{ charge.chargeTimeType.value }} </td>
     </ng-container>
 
@@ -121,13 +121,13 @@
 <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>
-    {{"labels.buttons.Previous"  |translate}}
+    {{"labels.buttons.Previous" | translate }}
   </button>
   <button mat-raised-button matStepperNext [disabled]="!loansAccountFormValid">
-    {{"labels.buttons.Next"  |translate}}
+    {{"labels.buttons.Next" | translate }}
     <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
   </button>
   <button mat-raised-button *ngIf="loanId" [routerLink]="['../', 'general']">
-    {{"labels.buttons.Cancel"  |translate}}
+    {{"labels.buttons.Cancel" | translate }}
   </button>
 </div>

src/app/loans/loans-account-stepper/loans-account-datatable-step/loans-account-datatable-step.component.html

@@ -40,10 +40,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>
-      {{"labels.buttons.Previous"  |translate}}
+      {{"labels.buttons.Previous" | translate }}
     </button>
     <button mat-raised-button matStepperNext>
-      {{"labels.buttons.Next"  |translate}}
+      {{"labels.buttons.Next" | translate }}
       <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
     </button>
   </div>

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

@@ -3,19 +3,19 @@
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Product Name"  |translate}}</mat-label>
+      <mat-label>{{"labels.inputs.Product Name" | translate }}</mat-label>
       <mat-select formControlName="productId" matTooltip="{{ 'tooltips.Name of the loan product' | translate }}" required>
         <mat-option *ngFor="let product of productData" [value]="product.id">
           {{ product.name }}
         </mat-option>
       </mat-select>
       <mat-error>
-        {{"labels.inputs.Product Name"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</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%" *ngIf="loanProductSelected">
-      <mat-label>{{"labels.inputs.Loan officer"  |translate}}</mat-label>
+      <mat-label>{{"labels.inputs.Loan officer" | translate }}</mat-label>
       <mat-select formControlName="loanOfficerId" matTooltip="{{ 'tooltips.Financial institution representative' | translate }}">
         <mat-option *ngFor="let loanOfficer of loanOfficerOptions" [value]="loanOfficer.id">
           {{ loanOfficer.displayName }}
@@ -27,7 +27,7 @@
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" *ngIf="loanProductSelected">
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Loan purpose"  |translate}}</mat-label>
+      <mat-label>{{"labels.inputs.Loan purpose" | translate }}</mat-label>
       <mat-select formControlName="loanPurposeId" matTooltip="{{ 'tooltips.Provides an indication' | translate }}">
         <mat-option *ngFor="let loanPurpose of loanPurposeOptions" [value]="loanPurpose.id">
           {{ loanPurpose.name }}
@@ -36,7 +36,7 @@
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Fund"  |translate}}</mat-label>
+      <mat-label>{{"labels.inputs.Fund" | translate }}</mat-label>
       <mat-select formControlName="fundId">
         <mat-option *ngFor="let fund of fundOptions" [value]="fund.id">
           {{ fund.name }}
@@ -45,38 +45,38 @@
     </mat-form-field>
 
     <mat-form-field fxFlex="48%" (click)="submitPicker.open()">
-      <mat-label>{{"labels.inputs.Submitted on"  |translate}}</mat-label>
+      <mat-label>{{"labels.inputs.Submitted on" | translate }}</mat-label>
       <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="submitPicker" matTooltip="{{ 'tooltips.Date the loan account application' | translate }}" required
         formControlName="submittedOnDate">
       <mat-datepicker-toggle matSuffix [for]="submitPicker"></mat-datepicker-toggle>
       <mat-datepicker #submitPicker></mat-datepicker>
       <mat-error *ngIf="loansAccountDetailsForm.controls.submittedOnDate?.hasError('required')">
-        {{"labels.inputs.Submitted on"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</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%" (click)="disbursementPicker.open()">
-      <mat-label>{{"labels.inputs.Disbursement on"  |translate}}</mat-label>
+      <mat-label>{{"labels.inputs.Disbursement on" | translate }}</mat-label>
       <input matInput [min]="loansAccountDetailsForm.value.submittedOnDate" [max]="maxDate" [matDatepicker]="disbursementPicker" matTooltip="{{ 'tooltips.Date that the loan account disbursed' | translate }}" required
         formControlName="expectedDisbursementDate">
       <mat-datepicker-toggle matSuffix [for]="disbursementPicker"></mat-datepicker-toggle>
       <mat-datepicker #disbursementPicker></mat-datepicker>
       <mat-error *ngIf="loansAccountDetailsForm.controls.submittedOnDate?.hasError('required')">
-        {{"labels.inputs.Disbursement on"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+        {{"labels.inputs.Disbursement on" | translate }} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.External id"  |translate}}</mat-label>
+      <mat-label>{{"labels.inputs.External id" | translate }}</mat-label>
       <input matInput formControlName="externalId" matTooltip="{{ 'tooltips.Provides an external id' | translate }}">
     </mat-form-field>
 
     <mat-divider fxFlex="98%"></mat-divider>
 
-    <h3 class="mat-h3" fxFlexFill>{{"labels.heading.Savings Linkage"  |translate}}</h3>
+    <h3 class="mat-h3" fxFlexFill>{{"labels.heading.Savings Linkage" | translate }}</h3>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Link savings"  |translate}}</mat-label>
+      <mat-label>{{"labels.inputs.Link savings" | translate }}</mat-label>
       <mat-select formControlName="linkAccountId">
         <mat-option *ngFor="let savingaccount of accountLinkingOptions" [value]="savingaccount.id">
           ({{ savingaccount.accountNo }}) {{ savingaccount.productName }}
@@ -85,21 +85,21 @@
     </mat-form-field>
 
     <mat-checkbox fxFlex="48%" formControlName="createStandingInstructionAtDisbursement">
-      <p>{{"labels.inputs.Create standing instructions at disbursement"  |translate}}</p>
+      <p>{{"labels.inputs.Create standing instructions at disbursement" | translate }}</p>
     </mat-checkbox>
   </div>
 
   <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>
-      {{"labels.buttons.Previous"  |translate}}
+      {{"labels.buttons.Previous" | translate }}
     </button>
     <button mat-raised-button matStepperNext>
-      {{"labels.buttons.Next"  |translate}}
+      {{"labels.buttons.Next" | translate }}
       <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
     </button>
     <button mat-raised-button *ngIf="loanId" [routerLink]="['../', 'general']">
-      {{"labels.buttons.Cancel"  |translate}}
+      {{"labels.buttons.Cancel" | translate }}
     </button>
   </div>
 

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

@@ -1,52 +1,52 @@
 <div fxLayout="row wrap" fxLayout.lt-md="column">
 
-  <h3 class="mat-h3" fxFlexFill>{{"labels.heading.Details"  |translate}}</h3>
+  <h3 class="mat-h3" fxFlexFill>{{"labels.heading.Details" | translate }}</h3>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{"labels.inputs.Product"  |translate}}:</span>
+    <span fxFlex="40%">{{"labels.inputs.Product" | translate }}:</span>
     <span fxFlex="60%">{{ loansAccount.productId | find:loansAccountTemplate.productOptions:'id':'name' }}</span>
   </div>
 
   <div fxFlexFill *ngIf="loansAccount.loanOfficerId">
-    <span fxFlex="40%">{{"labels.inputs.Loan officer"  |translate}}:</span>
+    <span fxFlex="40%">{{"labels.inputs.Loan officer" | translate }}:</span>
     <span
       fxFlex="60%">{{ loansAccount.loanOfficerId | find:loansAccountProductTemplate.loanOfficerOptions:'id':'displayName'}}</span>
   </div>
 
   <div fxFlexFill *ngIf="loansAccount.loanPurposeId">
-    <span fxFlex="40%">{{"labels.inputs.Loan purpose"  |translate}}:</span>
+    <span fxFlex="40%">{{"labels.inputs.Loan purpose" | translate }}:</span>
     <span
       fxFlex="60%">{{ loansAccount.loanPurposeId | find:loansAccountProductTemplate.loanPurposeOptions:'id':'name'}}</span>
   </div>
 
   <div fxFlexFill *ngIf="loansAccount.fundId">
-    <span fxFlex="40%">{{"labels.inputs.Fund"  |translate}}:</span>
+    <span fxFlex="40%">{{"labels.inputs.Fund" | translate }}:</span>
     <span fxFlex="60%">{{ loansAccount.fundId | find:loansAccountProductTemplate.fundOptions:'id':'name'}}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{"labels.inputs.Submitted on"  |translate}}:</span>
+    <span fxFlex="40%">{{"labels.inputs.Submitted on" | translate }}:</span>
     <span fxFlex="60%">{{ loansAccount.submittedOnDate  | dateFormat }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{"labels.inputs.Disbursement on"  |translate}}:</span>
+    <span fxFlex="40%">{{"labels.inputs.Disbursement on" | translate }}:</span>
     <span fxFlex="60%">{{ loansAccount.expectedDisbursementDate  | dateFormat }}</span>
   </div>
 
   <div fxFlexFill *ngIf="loansAccount.externalId">
-    <span fxFlex="40%">{{"labels.inputs.External id"  |translate}}:</span>
+    <span fxFlex="40%">{{"labels.inputs.External id" | translate }}:</span>
     <span fxFlex="60%">
       <mifosx-external-identifier externalId="{{loansAccount.externalId}}"></mifosx-external-identifier>
     </span>
   </div>
 
-  <h3 class="mat-h3" fxFlexFill>{{"labels.heading.Terms"  |translate}}</h3>
+  <h3 class="mat-h3" fxFlexFill>{{"labels.heading.Terms" | translate }}</h3>
 
   <mat-divider fxFlexFill></mat-divider>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{"labels.inputs.Principal"  |translate}}:</span>
+    <span fxFlex="40%">{{"labels.inputs.Principal" | translate }}:</span>
     <span fxFlex="60%">
       {{ loansAccount.principalAmount | currency:loansAccountProductTemplate.currency.code:'symbol-narrow':'1.2-2'}}
       <span class="m-l-5">{{loansAccountProductTemplate.currency.code}}</span>
@@ -54,18 +54,18 @@
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{"labels.inputs.Loan term"  |translate}}:</span>
+    <span fxFlex="40%">{{"labels.inputs.Loan term" | translate }}:</span>
     <span fxFlex="60%">{{ loansAccount.loanTermFrequency }}
       {{loansAccount.loanTermFrequencyType | find: loansAccountProductTemplate.termFrequencyTypeOptions:'id':'name'}}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{"labels.inputs.Number of repayments"  |translate}}:</span>
+    <span fxFlex="40%">{{"labels.inputs.Number of repayments" | translate }}:</span>
     <span fxFlex="60%">{{ loansAccount.numberOfRepayments }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{"labels.inputs.Repaid every"  |translate}}:</span>
+    <span fxFlex="40%">{{"labels.inputs.Repaid every" | translate }}:</span>
     <span fxFlex="60%">{{loansAccount.repaymentEvery}}
       {{loansAccount.repaymentFrequencyType | find: loansAccountProductTemplate.termFrequencyTypeOptions:'id':'name'}}
       {{loansAccount.repaymentFrequencyNthDayType | find: loansAccountProductTemplate.repaymentFrequencyNthDayTypeOptions:'id': 'name'}}
@@ -73,137 +73,137 @@
   </div>
 
   <div fxFlexFill *ngIf="loansAccount.repaymentsStartingFromDate">
-    <span fxFlex="40%">{{"labels.inputs.First repayment on"  |translate}}:</span>
+    <span fxFlex="40%">{{"labels.inputs.First repayment on" | translate }}:</span>
     <span fxFlex="60%">{{ loansAccount.repaymentsStartingFromDate  | dateFormat }}</span>
   </div>
 
   <div fxFlexFill *ngIf="loansAccount.interestChargedFromDate">
-    <span fxFlex="40%">{{"labels.inputs.Interest charged from"  |translate}}:</span>
+    <span fxFlex="40%">{{"labels.inputs.Interest charged from" | translate }}:</span>
     <span fxFlex="60%">{{ loansAccount.interestChargedFromDate  | dateFormat }}</span>
   </div>
 
   <div fxFlexFill *ngIf="loansAccount.interestRatePerPeriod">
-    <span fxFlex="40%">{{"labels.inputs.Nominal interest rate"  |translate}}:</span>
+    <span fxFlex="40%">{{"labels.inputs.Nominal interest rate" | translate }}:</span>
     <span
       fxFlex="60%">{{loansAccount.interestRatePerPeriod}}&nbsp;&nbsp;{{loansAccountProductTemplate.interestRateFrequencyType.value}}</span>
   </div>
 
   <div fxFlexFill *ngIf="loansAccount.interestType">
-    <span fxFlex="40%">{{"labels.inputs.Interest method"  |translate}}: </span>
+    <span fxFlex="40%">{{"labels.inputs.Interest method" | translate }}: </span>
     <span fxFlex="60%">{{loansAccount.interestType}}</span>
   </div>
 
   <div fxFlexFill *ngIf="loansAccount.isEqualAmortization">
-    <span fxFlex="40%">{{"labels.inputs.Is Equal Amortization"  |translate}}:</span>
+    <span fxFlex="40%">{{"labels.inputs.Is Equal Amortization" | translate }}:</span>
     <span fxFlex="60%">{{loansAccount.isEqualAmortization}}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{"labels.inputs.Amortization"  |translate}}</span>
+    <span fxFlex="40%">{{"labels.inputs.Amortization" | translate }}</span>
     <span
       fxFlex="60%">{{ loansAccount.amortizationType | find:loansAccountProductTemplate.amortizationTypeOptions:'id':'value' }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{"labels.inputs.Interest calculation period"  |translate}}: </span>
+    <span fxFlex="40%">{{"labels.inputs.Interest calculation period" | translate }}: </span>
     <span
       fxFlex="60%">{{ loansAccount.interestCalculationPeriodType | find:loansAccountProductTemplate.interestCalculationPeriodTypeOptions:'id':'value'  }}</span>
   </div>
 
   <div fxFlexFill *ngIf="loansAccount.allowPartialPeriodInterestCalcualtion">
-    <span fxFlex="40%">{{"labels.inputs.Calculate interest for exact days in partial period"  |translate}}:</span>
+    <span fxFlex="40%">{{"labels.inputs.Calculate interest for exact days in partial period" | translate }}:</span>
     <span fxFlex="60%">{{ loansAccount.allowPartialPeriodInterestCalcualtion }}</span>
   </div>
 
   <div fxFlexFill *ngIf="loansAccount.inArrearsTolerance">
-    <span fxFlex="40%">{{"labels.inputs.Arrears tolerance"  |translate}}: </span>
+    <span fxFlex="40%">{{"labels.inputs.Arrears tolerance" | translate }}: </span>
     <span
       fxFlex="60%">{{loansAccount.inArrearsTolerance}}</span>
   </div>
 
   <div fxFlexFill *ngIf="loansAccount.graceOnInterestCharged">
-    <span fxFlex="40%">{{"labels.inputs.Interest free period"  |translate}}: </span>
+    <span fxFlex="40%">{{"labels.inputs.Interest free period" | translate }}: </span>
     <span fxFlex="60%">{{ loansAccount.graceOnInterestCharged }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{"labels.inputs.Repayment strategy"  |translate}}: </span>
+    <span fxFlex="40%">{{"labels.inputs.Repayment strategy" | translate }}: </span>
     <span
       fxFlex="60%">{{ loansAccount.transactionProcessingStrategyCode | find:loansAccountTemplate.transactionProcessingStrategyOptions:'code':'name' }}</span>
   </div>
 
-  <h3 class="mat-h3" fxFlexFill>{{"labels.heading.Moratorium"  |translate}}</h3>
+  <h3 class="mat-h3" fxFlexFill>{{"labels.heading.Moratorium" | translate }}</h3>
 
   <mat-divider fxFlexFill></mat-divider>
 
   <div fxFlexFill *ngIf="loansAccount.graceOnPrincipalPayment">
-    <span fxFlex="40%">{{"labels.inputs.On principal payment"  |translate}}: </span>
+    <span fxFlex="40%">{{"labels.inputs.On principal payment" | translate }}: </span>
     <span fxFlex="60%">{{ loansAccount.graceOnPrincipalPayment }}</span>
   </div>
 
   <div fxFlexFill *ngIf="loansAccount.graceOnInterestPayment">
-    <span fxFlex="40%">{{"labels.inputs.On interest payment"  |translate}}: </span>
+    <span fxFlex="40%">{{"labels.inputs.On interest payment" | translate }}: </span>
     <span fxFlex="60%">{{ loansAccount.graceOnInterestPayment }}</span>
   </div>
 
   <div fxFlexFill *ngIf="loansAccount.graceOnArrearsAgeing">
-    <span fxFlex="40%">{{"labels.inputs.On Arrears Aging"  |translate}}: </span>
+    <span fxFlex="40%">{{"labels.inputs.On Arrears Aging" | translate }}: </span>
     <span fxFlex="60%">{{ loansAccount.graceOnArrearsAgeing }}</span>
   </div>
 
   <div fxFlexFill *ngIf="loansAccount.isTopup">
-    <span fxFlex="40%">{{"labels.inputs.Is Topup Loan"  |translate}}? </span>
+    <span fxFlex="40%">{{"labels.inputs.Is Topup Loan" | translate }}? </span>
     <span fxFlex="60%">{{ loansAccount.isTopup }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{"labels.inputs.Recalculate Interest"  |translate}}: </span>
-    <span fxFlex="60%">{{ loansAccountProductTemplate?.isInterestRecalculationEnabled? 'Yes' : 'No' }}</span>
+    <span fxFlex="40%">{{"labels.inputs.Recalculate Interest" | translate }}: </span>
+    <span fxFlex="60%">{{ loansAccountProductTemplate?.isInterestRecalculationEnabled| yesNo }}</span>
   </div>
 
   <div fxFlexFill *ngIf="loansAccountProductTemplate?.daysInMonthType">
-    <span fxFlex="40%">{{"labels.inputs.Days in month"  |translate}}: </span>
+    <span fxFlex="40%">{{"labels.inputs.Days in month" | translate }}: </span>
     <span fxFlex="60%">{{ loansAccountProductTemplate?.daysInMonthType.value }}</span>
   </div>
 
   <div fxFlexFill *ngIf="loansAccount.charges.length" fxLayout="row wrap" fxLayout.lt-md="column">
 
-    <h3 class="mat-h3" fxFlexFill>{{"labels.heading.Charges"  |translate}}</h3>
+    <h3 class="mat-h3" fxFlexFill>{{"labels.heading.Charges" | translate }}</h3>
 
     <mat-divider fxFlexFill></mat-divider>
 
     <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="loansAccount.charges">
 
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.name"  |translate}} </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> {{"labels.inputs.Type"  |translate}} </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> {{"labels.inputs.Amount"  |translate}} </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> {{"labels.inputs.Collected On"  |translate}} </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> {{"labels.inputs.Date"  |translate}} </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'">
@@ -215,7 +215,7 @@
           <span
             *ngIf="!(charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'
                   || charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee')">
-                  {{"labels.inputs.N/A"  |translate}}
+                  {{"labels.inputs.N/A" | translate }}
           </span>
         </td>
       </ng-container>
@@ -229,29 +229,29 @@
 
   <div fxFlexFill *ngIf="loansAccountProductTemplate.overdueCharges.length" fxLayout="row wrap" fxLayout.lt-md="column">
 
-    <h3 fxFlex="98%" class="mat-h3">{{"labels.heading.Overdue Charges"  |translate}}</h3>
+    <h3 fxFlex="98%" class="mat-h3">{{"labels.heading.Overdue Charges" | translate }}</h3>
 
     <mat-divider fxFlex="98%"></mat-divider>
 
     <table mat-table class="mat-elevation-z1" [dataSource]="loansAccountProductTemplate.overdueCharges">
 
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.name"  |translate}} </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="type">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Type"  |translate}} </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> {{"labels.inputs.Amount"  |translate}} </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Amount" | translate }} </th>
         <td mat-cell *matCellDef="let charge"> {{ charge.amount| formatNumber }} </td>
       </ng-container>
 
       <ng-container matColumnDef="collectedon">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Collected On"  |translate}} </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Collected On" | translate }} </th>
         <td mat-cell *matCellDef="let charge"> {{ charge.chargeTimeType.value }} </td>
       </ng-container>
 
@@ -265,12 +265,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>
-    {{"labels.buttons.Previous"  |translate}}
+    {{"labels.buttons.Previous" | translate }}
   </button>
   <button mat-raised-button [routerLink]="['../']">
-    {{"labels.buttons.Cancel"  |translate}}
+    {{"labels.buttons.Cancel" | translate }}
   </button>
   <button mat-raised-button color="primary" (click)="submit.emit()">
-    {{"labels.buttons.Submit"  |translate}}
+    {{"labels.buttons.Submit" | translate }}
   </button>
 </div>

src/app/loans/loans-account-stepper/loans-account-schedule-step/loans-account-schedule-step.component.html

@@ -1,7 +1,7 @@
 <div fxLayout="row wrap" fxLayout.lt-md="column">
 
   <a mat-button (click)="showRepaymentInfo()">
-    {{"labels.inputs.Repayment Info"  |translate}}
+    {{"labels.inputs.Repayment Info" | translate }}
   </a>
 
   <mifosx-repayment-schedule-tab fxFlex="100%" [repaymentScheduleDetails]="repaymentScheduleDetails"
@@ -13,13 +13,13 @@
 <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>
-    {{"labels.buttons.Previous"  |translate}}
+    {{"labels.buttons.Previous" | translate }}
   </button>
   <button mat-raised-button matStepperNext>
-    {{"labels.buttons.Next"  |translate}}
+    {{"labels.buttons.Next" | translate }}
     <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
   </button>
   <button mat-raised-button *ngIf="loanId" [routerLink]="['../', 'general']">
-    {{"labels.buttons.Cancel"  |translate}}
+    {{"labels.buttons.Cancel" | translate }}
   </button>
 </div>

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

@@ -3,68 +3,68 @@
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Principal"  |translate}} {{currencyDisplaySymbol}}</mat-label>
+      <mat-label>{{"labels.inputs.Principal" | translate }} {{currencyDisplaySymbol}}</mat-label>
       <input type="number" matInput formControlName="principalAmount">
       <mat-error *ngIf="loansAccountTermsForm.controls.principalAmount.hasError('required')">
-        {{"labels.inputs.Principal"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+        {{"labels.inputs.Principal" | translate }} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.Term Options <i class="fas fa-question" matTooltip="The loan term parameter in loan accounts
-      is the default-calculated field based on the number of repayments and repaid every value entered by the user"></i>"  |translate}}</h4>
+      is the default-calculated field based on the number of repayments and repaid every value entered by the user"></i>" | translate }}</h4>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Loan Term"  |translate}}</mat-label>
+      <mat-label>{{"labels.inputs.Loan Term" | translate }}</mat-label>
       <input type="number" matInput required disabled formControlName="loanTermFrequency">
       <mat-error *ngIf="loansAccountTermsForm.controls.loanTermFrequency.hasError('required')">
-        {{"labels.inputs.Loan Term"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+        {{"labels.inputs.Loan Term" | translate }} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Frequency"  |translate}}</mat-label>
+      <mat-label>{{"labels.inputs.Frequency" | translate }}</mat-label>
       <mat-select required formControlName="loanTermFrequencyType">
         <mat-option *ngFor="let type of termFrequencyTypeData" [value]="type.id">
           {{ type.value }}
         </mat-option>
       </mat-select>
       <mat-error *ngIf="loansAccountTermsForm.controls.loanTermFrequencyType.hasError('required')">
-        {{"labels.inputs.Frequency"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+        {{"labels.inputs.Frequency" | translate }} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <h4 fxFlex="98%" class="mat-h4">Repayments </h4>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Number of repayments"  |translate}}</mat-label>
+      <mat-label>{{"labels.inputs.Number of repayments" | translate }}</mat-label>
       <input type="number" matInput formControlName="numberOfRepayments" matTooltip="Enter the total count of repayments that loan schedule has excluding the down-payment. Example:
       If the loan account has 4 Installments including down-payment then number of repayments is equal to 3">
       <mat-error *ngIf="loansAccountTermsForm.controls.numberOfRepayments.hasError('required')">
-        {{"labels.inputs.Number of repayments"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+        {{"labels.inputs.Number of repayments" | translate }} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%" (click)="repaymentsPicker.open()">
-      <mat-label>{{"labels.inputs.First repayment on"  |translate}}</mat-label>
+      <mat-label>{{"labels.inputs.First repayment on" | translate }}</mat-label>
       <input matInput [min]="minDate" [max]="maxDate" matTooltip="{{ 'tooltips.May be entered to override' | translate }}" [matDatepicker]="repaymentsPicker"
         formControlName="repaymentsStartingFromDate">
       <mat-datepicker-toggle matSuffix [for]="repaymentsPicker"></mat-datepicker-toggle>
       <mat-datepicker #repaymentsPicker></mat-datepicker>
     </mat-form-field>
 
-    <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.Repaid Every"  |translate}} <i class="fas fa-question" matTooltip="{{ 'tooltips.Fields are input to calculating the repayment schedule' | translate }}"></i></h4>
+    <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.Repaid Every" | translate }} <i class="fas fa-question" matTooltip="{{ 'tooltips.Fields are input to calculating the repayment schedule' | translate }}"></i></h4>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Repaid every"  |translate}}</mat-label>
+      <mat-label>{{"labels.inputs.Repaid every" | translate }}</mat-label>
       <input type="number" matInput required formControlName="repaymentEvery"
       matTooltip="These fields are input to calculating the repayment schedule for a loan account and are used to determine when payments are due.">
       <mat-error *ngIf="loansAccountTermsForm.controls.repaymentEvery.hasError('required')">
-        {{"labels.inputs.Repaid every"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+        {{"labels.inputs.Repaid every" | translate }} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Frequency"  |translate}}</mat-label>
+      <mat-label>{{"labels.inputs.Frequency" | translate }}</mat-label>
       <mat-select formControlName="repaymentFrequencyType" disabled required>
         <mat-option *ngFor="let repaymentFrequencyType of termFrequencyTypeData" [value]="repaymentFrequencyType.id">
           {{ repaymentFrequencyType.value }}
@@ -73,7 +73,7 @@
     </mat-form-field>
 
     <mat-form-field fxFlex="48%" *ngIf="loansAccountTermsForm.controls.repaymentFrequencyType.value == 2">
-      <mat-label>{{"labels.inputs.Select On"  |translate}}</mat-label>
+      <mat-label>{{"labels.inputs.Select On" | translate }}</mat-label>
       <mat-select formControlName="repaymentFrequencyNthDayType">
         <mat-option *ngFor="let repaymentFrequencyNthDayType of repaymentFrequencyNthDayTypeData"
           [value]="repaymentFrequencyNthDayType.id">
@@ -83,7 +83,7 @@
     </mat-form-field>
 
     <mat-form-field fxFlex="48%" *ngIf="loansAccountTermsForm.controls.repaymentFrequencyType.value == 2">
-      <mat-label>{{"labels.inputs.Select Day"  |translate}}</mat-label>
+      <mat-label>{{"labels.inputs.Select Day" | translate }}</mat-label>
       <mat-select formControlName="repaymentFrequencyDayOfWeekType">
         <mat-option *ngFor="let repaymentFrequencyDayOfWeekType of repaymentFrequencyDaysOfWeekTypeData"
           [value]="repaymentFrequencyDayOfWeekType.id">
@@ -93,7 +93,7 @@
     </mat-form-field>
 
     <mat-form-field fxFlex="48%" (click)="interestPicker.open()">
-      <mat-label>{{"labels.inputs.Interest charged from"  |translate}}</mat-label>
+      <mat-label>{{"labels.inputs.Interest charged from" | translate }}</mat-label>
       <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="interestPicker" matTooltip="{{ 'tooltips.May be entered to override the date' | translate }}"
         formControlName="interestChargedFromDate">
       <mat-datepicker-toggle matSuffix [for]="interestPicker"></mat-datepicker-toggle>
@@ -103,12 +103,12 @@
     <ng-container *ngIf="!loansAccountTemplate?.isLoanProductLinkedToFloatingRate">
 
       <mat-form-field fxFlex="48%">
-        <mat-label>{{"labels.inputs.Nominal interest rate"  |translate}}</mat-label>
+        <mat-label>{{"labels.inputs.Nominal interest rate" | translate }}</mat-label>
         <input type="number" matInput formControlName="interestRatePerPeriod">
       </mat-form-field>
 
       <mat-form-field fxFlex="48%">
-        <mat-label>{{"labels.inputs.Interest method"  |translate}}</mat-label>
+        <mat-label>{{"labels.inputs.Interest method" | translate }}</mat-label>
         <mat-select formControlName="interestType" matTooltip="{{ 'tooltips.The Interest method value' | translate }}">
           <mat-option *ngFor="let interestType of interestTypeData" [value]="interestType.id">
             {{ interestType.value }}
@@ -118,7 +118,7 @@
 
       <mat-checkbox fxFlex="48%" formControlName="isEqualAmortization"
         [checked]="loansAccountTermsData?.isEqualAmortization">
-        <p>{{"labels.inputs.Is Equal Amortization"  |translate}}</p>
+        <p>{{"labels.inputs.Is Equal Amortization" | translate }}</p>
       </mat-checkbox>
 
     </ng-container>
@@ -128,7 +128,7 @@
       <div fxFlex="48%" fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
         <mat-form-field fxFlex="48%">
-          <mat-label>{{"labels.inputs.Interest Method"  |translate}}</mat-label>
+          <mat-label>{{"labels.inputs.Interest Method" | translate }}</mat-label>
           <mat-select formControlName="interestType">
             <mat-option *ngFor="let interestType of interestTypeData" [value]="interestType.id">
               {{ interestType.value }}
@@ -137,7 +137,7 @@
         </mat-form-field>
 
         <mat-checkbox fxFlex="48%" formControlName="isFloatingInterestRate">
-          <p>{{"labels.inputs.Is Floating Rate"  |translate}}?</p>
+          <p>{{"labels.inputs.Is Floating Rate" | translate }}?</p>
         </mat-checkbox>
 
       </div>
@@ -145,21 +145,21 @@
     </ng-container>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Amortization"  |translate}}</mat-label>
+      <mat-label>{{"labels.inputs.Amortization" | translate }}</mat-label>
       <mat-select required matTooltip="{{ 'tooltips.The Amortization value' | translate }}" formControlName="amortizationType">
         <mat-option *ngFor="let amortizationType of amortizationTypeData" [value]="amortizationType.id">
           {{ amortizationType.value }}
         </mat-option>
       </mat-select>
       <mat-error *ngIf="loansAccountTermsForm.controls.amortizationType.hasError('required')">
-        {{"labels.inputs.Amortization Type"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+        {{"labels.inputs.Amortization Type" | translate }} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
-    <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.Interest Calculations"  |translate}}</h4>
+    <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.Interest Calculations" | translate }}</h4>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Interest calculation period"  |translate}}</mat-label>
+      <mat-label>{{"labels.inputs.Interest calculation period" | translate }}</mat-label>
       <mat-select formControlName="interestCalculationPeriodType" matTooltip="{{ 'tooltips.Daily - Will Calculate the interest' | translate }}">
         <mat-option *ngFor="let interestCalculationPeriodType of interestCalculationPeriodTypeData"
           [value]="interestCalculationPeriodType.id">
@@ -169,61 +169,61 @@
     </mat-form-field>
 
     <mat-checkbox fxFlex="48%" formControlName="allowPartialPeriodInterestCalcualtion" matTooltip="{{ 'tooltips.To be used with SAME AS REPAYMENT PERIOD' | translate }}">
-      <p>{{"labels.inputs.Calculate interest for exact days in partial period"  |translate}}</p>
+      <p>{{"labels.inputs.Calculate interest for exact days in partial period" | translate }}</p>
     </mat-checkbox>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Arrears tolerance"  |translate}} {{currencyDisplaySymbol}}</mat-label>
+      <mat-label>{{"labels.inputs.Arrears tolerance" | translate }} {{currencyDisplaySymbol}}</mat-label>
       <input matInput type="number" formControlName="inArrearsTolerance" matTooltip="{{ 'tooltips.With Arrears tolerance' | translate }}">
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Interest free period"  |translate}}</mat-label>
+      <mat-label>{{"labels.inputs.Interest free period" | translate }}</mat-label>
       <input matInput formControlName="graceOnInterestCharged" matTooltip="{{ 'tooltips.If the Interest Free Period' | translate }}">
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Repayment strategy"  |translate}}</mat-label>
+      <mat-label>{{"labels.inputs.Repayment strategy" | translate }}</mat-label>
       <mat-select formControlName="transactionProcessingStrategyCode" matTooltip="{{ 'tooltips.The repayment strategy' | translate }}">
         <mat-option *ngFor="let transactionProcessingStrategy of transactionProcessingStrategyOptions" [value]="transactionProcessingStrategy.code">
           {{ transactionProcessingStrategy.name }}
         </mat-option>
       </mat-select>
       <mat-error *ngIf="loansAccountTermsForm.controls.transactionProcessingStrategyCode.hasError('required')">
-        {{"labels.inputs.Repayment Strategy"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+        {{"labels.inputs.Repayment Strategy" | translate }} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
-    <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.Moratorium"  |translate}} <i class="fas fa-question" matTooltip="{{ 'tooltips.The moratorium information' | translate }}"></i></h4>
+    <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.Moratorium" | translate }} <i class="fas fa-question" matTooltip="{{ 'tooltips.The moratorium information' | translate }}"></i></h4>
 
     <mat-form-field fxFlex="23%">
-      <mat-label>{{"labels.inputs.Grace on principal payment"  |translate}}</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="23%">
-      <mat-label>{{"labels.inputs.Grace on interest payment"  |translate}}</mat-label>
+      <mat-label>{{"labels.inputs.Grace on interest payment" | translate }}</mat-label>
       <input type="number" matInput formControlName="graceOnInterestPayment">
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.On arrears ageing"  |translate}}</mat-label>
+      <mat-label>{{"labels.inputs.On arrears ageing" | translate }}</mat-label>
       <input type="number" matInput formControlName="graceOnArrearsAgeing">
     </mat-form-field>
 
     <mat-form-field fxFlex="48%" *ngIf="loansAccountTermsData?.canDefineInstallmentAmount">
-      <mat-label>{{"labels.inputs.Installment Amount"  |translate}}</mat-label>
+      <mat-label>{{"labels.inputs.Installment Amount" | translate }}</mat-label>
       <input type="number" matInput formControlName="fixedEmiAmount">
     </mat-form-field>
 
     <ng-container *ngIf="loansAccountTermsData?.canUseForTopup">
 
       <mat-checkbox fxFlex="48%" formControlName="isTopup">
-        <p>{{"labels.inputs.Is Topup Loan"  |translate}}?</p>
+        <p>{{"labels.inputs.Is Topup Loan" | translate }}?</p>
       </mat-checkbox>
 
       <mat-form-field fxFlex="48%" *ngIf="loansAccountTermsForm.controls.isTopup.value">
-        <mat-label>{{"labels.inputs.Loan closed with Topup"  |translate}}</mat-label>
+        <mat-label>{{"labels.inputs.Loan closed with Topup" | translate }}</mat-label>
         <mat-select formControlName="loanIdToClose">
           <mat-option *ngFor="let clientActiveLoan of clientActiveLoanData" [value]="clientActiveLoan.id">
             {{ clientActiveLoan.accountNo }}
@@ -236,24 +236,24 @@
     <mat-divider fxFlex="98%"></mat-divider>
 
     <div fxFlexFill>
-      <span fxFlex="40%">{{"labels.inputs.Recalculate Interest"  |translate}}</span>
-      <span fxFlex="60%">{{ loansAccountTermsData?.isInterestRecalculationEnabled? 'Yes' : 'No' }}</span>
+      <span fxFlex="40%">{{"labels.inputs.Recalculate Interest" | translate }}</span>
+      <span fxFlex="60%">{{ loansAccountTermsData?.isInterestRecalculationEnabled| yesNo }}</span>
     </div>
 
     <div fxFlexFill *ngIf="loansAccountTermsData?.isInterestRecalculationEnabled">
-      <span fxFlex="40%">{{"labels.inputs.Days in year"  |translate}}</span>
+      <span fxFlex="40%">{{"labels.inputs.Days in year" | translate }}</span>
       <span fxFlex="60%">{{ loansAccountTermsData.daysInYearType.value}}</span>
     </div>
 
     <ng-container *ngIf="loansAccountTermsData?.isInterestRecalculationEnabled">
 
       <div fxFlexFill *ngIf="loansAccountTermsData?.isInterestRecalculationEnabled">
-        <span fxFlex="40%">{{"labels.inputs.Advance payments adjustment type"  |translate}}</span>
+        <span fxFlex="40%">{{"labels.inputs.Advance payments adjustment type" | translate }}</span>
         <span fxFlex="60%">{{ loansAccountTermsData.interestRecalculationData.rescheduleStrategyType.value }}</span>
       </div>
 
       <div fxFlexFill *ngIf="loansAccountTermsData?.isInterestRecalculationEnabled">
-        <span fxFlex="40%">{{"labels.inputs.Days in month"  |translate}}</span>
+        <span fxFlex="40%">{{"labels.inputs.Days in month" | translate }}</span>
         <span fxFlex="60%">{{ loansAccountTermsData.daysInMonthType.value }}</span>
       </div>
 
@@ -262,13 +262,13 @@
     <ng-container *ngIf="loansAccountTermsData?.isInterestRecalculationEnabled">
 
       <div fxFlexFill>
-        <span fxFlex="40%">{{"labels.inputs.Interest recalculation compounding on"  |translate}}</span>
+        <span fxFlex="40%">{{"labels.inputs.Interest recalculation compounding on" | translate }}</span>
         <span fxFlex="60%">{{ loansAccountTermsData.interestRecalculationData.interestRecalculationCompoundingType.value
           }}</span>
       </div>
 
       <div fxFlexFill>
-        <span fxFlex="40%">{{"labels.inputs.Frequency Interval for recalculation"  |translate}}</span>
+        <span fxFlex="40%">{{"labels.inputs.Frequency Interval for recalculation" | translate }}</span>
         <span fxFlex="60%">
           <span>{{ loansAccountTermsData.interestRecalculationData.recalculationRestFrequencyType.value}}</span>
           <span *ngIf="loansAccountTermsData.interestRecalculationData.recalculationRestFrequencyType.id == 3 &&
@@ -289,16 +289,16 @@
 
     <div fxFlexFill
       *ngIf="loansAccountTermsData?.isInterestRecalculationEnabled && loansAccountTermsData.interestRecalculationData.recalculationRestFrequencyType.id != 1">
-      <span fxFlex="40%">{{"labels.inputs.Frequency Interval for recalculation"  |translate}}</span>
+      <span fxFlex="40%">{{"labels.inputs.Frequency Interval for recalculation" | translate }}</span>
       <span fxFlex="60%">{{ loansAccountTermsData.interestRecalculationData.recalculationRestFrequencyInterval}}</span>
     </div>
 
     <ng-container *ngIf="multiDisburseLoan">
       <mat-divider fxFlex="98%"></mat-divider>
       <div fxFlexFill *ngIf="allowAddDisbursementDetails()">
-        <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.Loan Tranche Details"  |translate}}</h4>
+        <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.Loan Tranche Details" | translate }}</h4>
         <mat-form-field fxFlex="48%">
-          <mat-label>{{"labels.inputs.Maximum allowed outstanding balance"  |translate}}</mat-label>
+          <mat-label>{{"labels.inputs.Maximum allowed outstanding balance" | translate }}</mat-label>
           <input matInput required formControlName="maxOutstandingLoanBalance">
         </mat-form-field>
         <span fxFlex>
@@ -309,25 +309,25 @@
         </span>
       </div>
       <div fxFlexFill *ngIf="!allowAddDisbursementDetails()">
-        <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.Loan Tranche Details are not allowed for this Loan Product"  |translate}}</h4>
+        <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.Loan Tranche Details are not allowed for this Loan Product" | translate }}</h4>
       </div>
 
       <table mat-table [dataSource]="disbursementDataSource" [hidden]="disbursementDataSource.length === 0">
 
         <ng-container matColumnDef="expectedDisbursementDate">
-          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Eexpected Disbursement Date"  |translate}} </th>
+          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Eexpected Disbursement Date" | translate }} </th>
           <td mat-cell *matCellDef="let row">
             {{ row.expectedDisbursementDate | dateFormat }} </td>
         </ng-container>
 
         <ng-container matColumnDef="principal">
-          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Principal"  |translate}} </th>
+          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Principal" | translate }} </th>
           <td mat-cell *matCellDef="let row">
             {{ row.principal }} </td>
         </ng-container>
 
         <ng-container matColumnDef="actions">
-          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Actions"  |translate}} </th>
+          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Actions" | translate }} </th>
           <td mat-cell *matCellDef="let row; let rowIndex = index">
             <button type="button" mat-icon-button color="warn" (click)="removeDisbursementDataEntry(rowIndex)"
               matTooltip="{{ 'tooltips.Delete' | translate }}" matTooltipPosition="left">
@@ -346,7 +346,7 @@
       *ngIf="loansAccountTermsData?.isInterestRecalculationEnabled  && loansAccountTermsData.interestRecalculationData.interestRecalculationCompoundingType.id != 0">
 
       <div fxFlexFill>
-        <span fxFlex="40%">{{"labels.inputs.Frequency for compounding"  |translate}}</span>
+        <span fxFlex="40%">{{"labels.inputs.Frequency for compounding" | translate }}</span>
         <span fxFlex="60%">{{
           loansAccountTermsData.interestRecalculationData.recalculationCompoundingFrequencyType.value}}
           <span *ngIf="loansAccountTermsData.interestRecalculationData.recalculationCompoundingFrequencyType.id == 3 &&
@@ -369,7 +369,7 @@
 
     <div fxFlexFill
       *ngIf="loansAccountTermsData?.isInterestRecalculationEnabled && loansAccountTermsData.interestRecalculationData.interestRecalculationCompoundingType.id != 0 && loansAccountTermsData.interestRecalculationData.recalculationCompoundingFrequencyType.id != 1">
-      <span fxFlex="40%">{{"labels.inputs.Frequency Interval for compounding"  |translate}}</span>
+      <span fxFlex="40%">{{"labels.inputs.Frequency Interval for compounding" | translate }}</span>
       <span fxFlex="60%">{{
         loansAccountTermsData.interestRecalculationData.recalculationCompoundingFrequencyInterval}}</span>
     </div>
@@ -378,13 +378,13 @@
 
     <div fxFlex="50%">
       <div fxLayout="column" fxFlex="50%" class="table_name">
-        <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.Collaterals Data"  |translate}}</h4>
+        <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.Collaterals Data" | translate }}</h4>
       </div>
 
       <div fxLayout="column" fxFlex="50%">
         <div fxLayout="row" fxLayoutAlign="flex-end">
           <button mat-raised-button color="primary" (click)="addCollateral()">
-            <fa-icon icon="plus" class="m-r-10"></fa-icon>{{"labels.buttons.Add"  |translate}}
+            <fa-icon icon="plus" class="m-r-10"></fa-icon>{{"labels.buttons.Add" | translate }}
           </button>
         </div>
       </div>
@@ -392,27 +392,27 @@
     <table mat-table class="mat-elevation-z1" [dataSource]="collateralDataSource">
 
       <ng-container matColumnDef="type">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.name"  |translate}} </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.name" | translate }} </th>
         <td mat-cell *matCellDef="let ele"> {{ ele.type.name }} </td>
       </ng-container>
 
       <ng-container matColumnDef="value">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Quantity"  |translate}} </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Quantity" | translate }} </th>
         <td mat-cell *matCellDef="let ele"> {{ ele.value }} </td>
       </ng-container>
 
       <ng-container matColumnDef="totalValue">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Total Value"  |translate}} </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Total Value" | translate }} </th>
         <td mat-cell *matCellDef="let ele"> {{ ele.type.basePrice*ele.value }} </td>
       </ng-container>
 
       <ng-container matColumnDef="totalCollateralValue">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Total Collateral Value"  |translate}} </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Total Collateral Value" | translate }} </th>
         <td mat-cell *matCellDef="let ele"> {{ ele.type.pctToBase*ele.type.basePrice*ele.value/100 }} </td>
       </ng-container>
 
       <ng-container matColumnDef="action">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Actions"  |translate}} </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Actions" | translate }} </th>
         <td mat-cell *matCellDef="let ele; let collateralIndex = index">
           <button mat-icon-button color="warn" (click)="deleteCollateral(collateralIndex)">
             <fa-icon icon="trash"></fa-icon>
@@ -428,14 +428,14 @@
   <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>
-      {{"labels.buttons.Previous"  |translate}}
+      {{"labels.buttons.Previous" | translate }}
     </button>
     <button mat-raised-button matStepperNext>
-      {{"labels.buttons.Next"  |translate}}
+      {{"labels.buttons.Next" | translate }}
       <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
     </button>
     <button mat-raised-button *ngIf="loanId" [routerLink]="['../', 'general']">
-      {{"labels.buttons.Cancel"  |translate}}
+      {{"labels.buttons.Cancel" | translate }}
     </button>
   </div>
 

src/app/loans/loans-view/account-details/account-details.component.html

@@ -3,12 +3,12 @@
     <div fxLayout="row wrap" fxLayout.lt-md="column">
 
         <div fxFlexFill>
-            <span fxFlex="50%">{{"labels.inputs.Repayment Strategy"  |translate}}:</span>
+            <span fxFlex="50%">{{"labels.inputs.Repayment Strategy" | translate }}:</span>
             <span fxFlex="50%">{{ loanDetails.transactionProcessingStrategyName }}</span>
         </div>
 
         <div fxFlexFill>
-            <span fxFlex="50%">{{"labels.inputs.Repayments"  |translate}}:</span>
+            <span fxFlex="50%">{{"labels.inputs.Repayments" | translate }}:</span>
             <span fxFlex="50%">{{loanDetails.numberOfRepayments}} every {{loanDetails.repaymentEvery}}&nbsp;{{loanDetails.repaymentFrequencyType.value}}
             <span *ngIf="loanDetails.repaymentFrequencyType?.id == 2 && loanDetails.repaymentFrequencyNthDayType?.id != 0 && loanDetails.repaymentFrequencyDayOfWeekType?.id != 0">
               &nbsp;on&nbsp;{{loanDetails.repaymentFrequencyNthDayType?.value}}&nbsp;{{loanDetails.repaymentFrequencyDayOfWeekType?.value}}
@@ -17,32 +17,32 @@
         </div>
 
         <div fxFlexFill>
-            <span fxFlex="50%"> {{"labels.inputs.Amortization"  |translate}} </span>
+            <span fxFlex="50%"> {{"labels.inputs.Amortization" | translate }} </span>
             <span fxFlex="50%"> {{loanDetails.amortizationType.value}} </span>
         </div>
 
         <div fxFlexFill>
-            <span fxFlex="50%"> {{"labels.inputs.Equal Amortization"  |translate}} </span>
+            <span fxFlex="50%"> {{"labels.inputs.Equal Amortization" | translate }} </span>
             <span fxFlex="50%"> {{loanDetails.isEqualAmortization | yesNo}} </span>
         </div>
 
         <div fxFlexFill>
-            <span fxFlex="50%"> {{"labels.inputs.Interest"  |translate}} </span>
+            <span fxFlex="50%"> {{"labels.inputs.Interest" | translate }} </span>
             <span fxFlex="50%"> {{loanDetails.annualInterestRate}} per annum ({{loanDetails.interestRatePerPeriod}}%&nbsp; {{loanDetails.interestRateFrequencyType.value}}) - {{loanDetails.interestType.value}} </span>
         </div>
 
         <div fxFlexFill>
-            <span fxFlex="50%"> {{"labels.inputs.Grace: On Principal Payment"  |translate}}</span>
+            <span fxFlex="50%"> {{"labels.inputs.Grace: On Principal Payment" | translate }}</span>
             <span fxFlex="50%"> {{loanDetails.graceOnPrincipalPayment}} </span>
         </div>
 
         <div fxFlexFill>
-            <span fxFlex="50%"> {{"labels.inputs.Grace: On Interest Payment"  |translate}}</span>
+            <span fxFlex="50%"> {{"labels.inputs.Grace: On Interest Payment" | translate }}</span>
             <span fxFlex="50%"> {{loanDetails.graceOnInterestPayment}} </span>
         </div>
 
         <div fxFlexFill>
-            <span fxFlex="50%"> {{"labels.inputs.Grace on Arrears Ageing"  |translate}}</span>
+            <span fxFlex="50%"> {{"labels.inputs.Grace on Arrears Ageing" | translate }}</span>
             <span fxFlex="50%"> {{loanDetails.graceOnArrearsAgeing}} </span>
         </div>
 
@@ -57,107 +57,107 @@
         </div>
 
         <div fxFlexFill>
-            <span fxFlex="50%"> {{"labels.inputs.Interest Free Period"  |translate}}</span>
+            <span fxFlex="50%"> {{"labels.inputs.Interest Free Period" | translate }}</span>
             <span fxFlex="50%"> {{loanDetails.graceOnInterestCharged}} </span>
         </div>
 
         <div fxFlexFill>
-            <span fxFlex="50%"> {{"labels.inputs.Interest Calculation Period"  |translate}}</span>
+            <span fxFlex="50%"> {{"labels.inputs.Interest Calculation Period" | translate }}</span>
             <span fxFlex="50%"> {{loanDetails.interestCalculationPeriodType.value}} </span>
         </div>
 
         <div fxFlexFill>
-            <span fxFlex="50%"> {{"labels.inputs.Allow Partial Interest Calculation with same as repayment"  |translate}}</span>
+            <span fxFlex="50%"> {{"labels.inputs.Allow Partial Interest Calculation with same as repayment" | translate }}</span>
             <span fxFlex="50%"> {{loanDetails.allowPartialPeriodInterestCalcualtion}} </span>
         </div>
 
         <div fxFlexFill>
-            <span fxFlex="50%"> {{"labels.inputs.Interest Type"  |translate}}</span>
+            <span fxFlex="50%"> {{"labels.inputs.Interest Type" | translate }}</span>
             <span fxFlex="50%"> {{loanDetails.interestType.value}} </span>
         </div>
 
         <div fxFlexFill>
-            <span fxFlex="50%"> {{"labels.inputs.Submitted on"  |translate}}</span>
+            <span fxFlex="50%"> {{"labels.inputs.Submitted on" | translate }}</span>
             <span fxFlex="50%"> {{loanDetails.timeline.submittedOnDate  | dateFormat }} </span>
         </div>
 
         <div fxFlexFill>
-            <span fxFlex="50%"> {{"labels.inputs.Approved on"  |translate}}</span>
+            <span fxFlex="50%"> {{"labels.inputs.Approved on" | translate }}</span>
             <span fxFlex="50%"> {{loanDetails.timeline.approvedOnDate  | dateFormat }} </span>
         </div>
 
         <div fxFlexFill>
-            <span fxFlex="50%"> {{"labels.inputs.Disbursed on"  |translate}}</span>
+            <span fxFlex="50%"> {{"labels.inputs.Disbursed on" | translate }}</span>
             <span fxFlex="50%"> {{loanDetails.timeline.actualDisbursementDate  | dateFormat }} </span>
         </div>
 
         <div fxFlexFill>
-            <span fxFlex="50%"> {{"labels.inputs.Matures on"  |translate}}</span>
+            <span fxFlex="50%"> {{"labels.inputs.Matures on" | translate }}</span>
             <span fxFlex="50%"> {{loanDetails.timeline.expectedMaturityDate  | dateFormat }} </span>
         </div>
 
         <div fxFlexFill *ngIf="loanDetails.canDefineInstallmentAmount">
-            <span fxFlex="50%"> {{"labels.inputs.Fixed EMI amount"  |translate}}</span>
+            <span fxFlex="50%"> {{"labels.inputs.Fixed EMI amount" | translate }}</span>
             <span fxFlex="50%"> {{loanDetails.fixedEmiAmount | formatNumber}} </span>
         </div>
 
         <div fxFlexFill *ngIf="loanDetails.isTopup">
-            <span fxFlex="50%"> {{"labels.inputs.Is Topup Loan"  |translate}}?</span>
+            <span fxFlex="50%"> {{"labels.inputs.Is Topup Loan" | translate }}?</span>
             <span fxFlex="50%"> {{loanDetails.isTopup | yesNo}} </span>
         </div>
 
         <div fxFlexFill *ngIf="loanDetails.isTopup">
-            <span fxFlex="50%"> {{"labels.inputs.Loan closed with Topup"  |translate}} </span>
+            <span fxFlex="50%"> {{"labels.inputs.Loan closed with Topup" | translate }} </span>
             <span fxFlex="50%"> <a href="#">{{loanDetails.closureLoanAccountNo}}</a> </span>
         </div>
 
         <div fxFlexFill *ngIf="loanDetails.isTopup">
-            <span fxFlex="50%"> {{"labels.inputs.Topup closure amount"  |translate}}</span>
+            <span fxFlex="50%"> {{"labels.inputs.Topup closure amount" | translate }}</span>
             <span fxFlex="50%"> {{loanDetails.topupAmount| formatNumber}} </span>
         </div>
 
         <div fxFlexFill>
-            <span fxFlex="50%"> {{"labels.inputs.Recalculate Interest based on new terms"  |translate}}</span>
+            <span fxFlex="50%"> {{"labels.inputs.Recalculate Interest based on new terms" | translate }}</span>
             <span fxFlex="50%">  {{loanDetails.isInterestRecalculationEnabled | yesNo}} </span>
         </div>
 
         <div fxFlexFill>
-            <span fxFlex="50%"> {{"labels.inputs.Days in year"  |translate}}</span>
+            <span fxFlex="50%"> {{"labels.inputs.Days in year" | translate }}</span>
             <span fxFlex="50%"> {{loanDetails.daysInYearType.value}} </span>
         </div>
 
         <div fxFlexFill>
-            <span fxFlex="50%"> {{"labels.inputs.Days in month"  |translate}}</span>
+            <span fxFlex="50%"> {{"labels.inputs.Days in month" | translate }}</span>
             <span fxFlex="50%"> {{loanDetails.daysInMonthType.value }} </span>
         </div>
 
         <div fxFlexFill *ngIf="loanDetails.isInterestRecalculationEnabled">
-            <span fxFlex="50%"> {{"labels.inputs.Interest recalculation compounding on"  |translate}}</span>
+            <span fxFlex="50%"> {{"labels.inputs.Interest recalculation compounding on" | translate }}</span>
             <span fxFlex="50%"> {{loanDetails.interestRecalculationData.interestRecalculationCompoundingType.value}} </span>
         </div>
 
         <div fxFlexFill *ngIf="loanDetails.isInterestRecalculationEnabled">
-            <span fxFlex="50%"> {{"labels.inputs.Advance payments adjustment type"  |translate}}</span>
+            <span fxFlex="50%"> {{"labels.inputs.Advance payments adjustment type" | translate }}</span>
             <span fxFlex="50%"> {{loanDetails.interestRecalculationData.rescheduleStrategyType.value}} </span>
         </div>
 
         <div fxFlexFill *ngIf="loanDetails.isInterestRecalculationEnabled">
-            <span fxFlex="50%"> {{"labels.inputs.Frequency for recalculate Outstanding Principal"  |translate}}</span>
+            <span fxFlex="50%"> {{"labels.inputs.Frequency for recalculate Outstanding Principal" | translate }}</span>
             <span fxFlex="50%"> {{loanDetails.interestRecalculationData.calendarData.humanReadable}} </span>
         </div>
 
         <div fxFlexFill *ngIf="loanDetails.isInterestRecalculationEnabled && loanDetails.interestRecalculationData.interestRecalculationCompoundingType.id !=0">
-            <span fxFlex="50%"> {{"labels.inputs.Frequency for compounding"  |translate}}</span>
+            <span fxFlex="50%"> {{"labels.inputs.Frequency for compounding" | translate }}</span>
             <span fxFlex="50%"> {{loanDetails.interestRecalculationData.compoundingCalendarData.humanReadable}} </span>
         </div>
 
         <div fxFlexFill *ngIf="loanDetails.isVariableInstallmentsAllowed">
-            <span fxFlex="50%"> {{"labels.inputs.Variable Installments Allowed"  |translate}}</span>
+            <span fxFlex="50%"> {{"labels.inputs.Variable Installments Allowed" | translate }}</span>
             <span fxFlex="50%"> {{loanDetails.isVariableInstallmentsAllowed | yesNo}} </span>
         </div>
 
         <div fxFlexFill *ngIf="loanDetails.isVariableInstallmentsAllowed">
-            <span fxFlex="50%"> {{"labels.inputs.Gap between Installments"  |translate}}</span>
+            <span fxFlex="50%"> {{"labels.inputs.Gap between Installments" | translate }}</span>
             <span fxFlex="50%"> {{loanDetails.minimumGap}}&nbsp;Days&nbsp;, Max:{{loanDetails.maximumGap}}&nbsp;Days) </span>
         </div>
 

src/app/loans/loans-view/charges-tab/charges-tab.component.html

@@ -3,25 +3,25 @@
   <table mat-table [dataSource]="dataSource" matSort>
 
     <ng-container matColumnDef="name">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.name"  |translate}} </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.name" | translate }} </th>
       <td mat-cell *matCellDef="let charge"> {{ charge.name }} </td>
     </ng-container>
 
     <ng-container matColumnDef="feepenalty">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Fee/Penalty"  |translate}} </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Fee/Penalty" | translate }} </th>
       <td mat-cell *matCellDef="let charge">
-        <span *ngIf="charge.penalty">{{"labels.inputs.Penalty"  |translate}}</span>
-        <span *ngIf="!charge.penalty">{{"labels.inputs.Fee"  |translate}}</span>
+        <span *ngIf="charge.penalty">{{"labels.inputs.Penalty" | translate }}</span>
+        <span *ngIf="!charge.penalty">{{"labels.inputs.Fee" | translate }}</span>
       </td>
     </ng-container>
 
     <ng-container matColumnDef="paymentdueat">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Payment due at"  |translate}} </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Payment due at" | translate }} </th>
       <td mat-cell *matCellDef="let charge"> {{ charge.chargeTimeType.value }} </td>
     </ng-container>
 
     <ng-container matColumnDef="submittedDate">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Submitted On"  |translate}} </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Submitted On" | translate }} </th>
       <td mat-cell *matCellDef="let charge"> {{ charge.submittedOnDate | dateFormat }} </td>
     </ng-container>
 
@@ -37,36 +37,36 @@
     </ng-container>
 
     <ng-container matColumnDef="calculationtype">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Calculation Type"  |translate}} </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Calculation Type" | translate }} </th>
       <td mat-cell *matCellDef="let charge"> {{ charge.chargeCalculationType.value }} </td>
     </ng-container>
 
     <ng-container matColumnDef="due">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef mat-sort-header> {{"labels.inputs.Due"  |translate}} </th>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef mat-sort-header> {{"labels.inputs.Due" | translate }} </th>
       <td mat-cell class="r-amount" *matCellDef="let charge">  {{ charge.amount |
         currency:charge.currency.code:'symbol-narrow':'1.2-2' }} </td>
     </ng-container>
 
     <ng-container matColumnDef="paid">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef mat-sort-header> {{"labels.inputs.Paid"  |translate}} </th>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef mat-sort-header> {{"labels.inputs.Paid" | translate }} </th>
       <td mat-cell class="r-amount" *matCellDef="let charge"> {{ charge.amountPaid |
         currency:charge.currency.code:'symbol-narrow':'1.2-2' }} </td>
     </ng-container>
 
     <ng-container matColumnDef="waived">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef mat-sort-header> {{"labels.inputs.Waived"  |translate}} </th>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef mat-sort-header> {{"labels.inputs.Waived" | translate }} </th>
       <td mat-cell class="r-amount" *matCellDef="let charge"> {{ charge.amountWaived |
         currency:charge.currency.code:'symbol-narrow':'1.2-2' }} </td>
     </ng-container>
 
     <ng-container matColumnDef="outstanding">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef mat-sort-header> {{"labels.inputs.Outstanding"  |translate}} </th>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef mat-sort-header> {{"labels.inputs.Outstanding" | translate }} </th>
       <td mat-cell class="r-amount" *matCellDef="let charge"> {{charge.amountOutstanding |
         currency:charge.currency.code:'symbol-narrow':'1.2-2' }} </td>
     </ng-container>
 
     <ng-container matColumnDef="actions">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef mat-sort-header> {{"labels.inputs.Actions"  |translate}} </th>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef mat-sort-header> {{"labels.inputs.Actions" | translate }} </th>
       <td mat-cell class="center" *matCellDef="let charge">
         <span *ngIf="status === 'Submitted and pending approval'">
           <button class="account-action-button" mat-raised-button color="primary" matTooltip="{{ 'tooltips.Edit Charge' | translate }}"

src/app/loans/loans-view/external-asset-owner-tab/external-asset-owner-tab.component.html

@@ -1,12 +1,12 @@
 <div class="tab-container mat-typography">
   <div fxFlexFill *ngIf="existActiveTransfer">
-    <h3>{{"labels.heading.Active Asset Transfer"  |translate}}</h3>
+    <h3>{{"labels.heading.Active Asset Transfer" | translate }}</h3>
     <div fxLayout="row" fxLayoutGap="32px" class="asset-transfer-container">
       <table>
         <tbody>
           <tr>
             <td fxFlex="25%">
-              <b>{{"labels.inputs.Status"  |translate}} :</b>
+              <b>{{"labels.inputs.Status" | translate }} :</b>
             </td>
             <td fxFlex="25%" class="left">
               <div [ngClass]="itemStatus(activeTransferData.status)">
@@ -15,7 +15,7 @@
               </div>
             </td>
             <td fxFlex="25%">
-              <b>{{"labels.inputs.Owner External Id"  |translate}} :</b>
+              <b>{{"labels.inputs.Owner External Id" | translate }} :</b>
             </td>
             <td fxFlex="25%" class="left">
               <mifosx-external-identifier externalId="{{activeTransferData.owner.externalId}}" completed="true"></mifosx-external-identifier>
@@ -23,13 +23,13 @@
           </tr>
           <tr>
             <td fxFlex="25%">
-              <b>{{"labels.inputs.Settlement Date"  |translate}} :</b>
+              <b>{{"labels.inputs.Settlement Date" | translate }} :</b>
             </td>
             <td fxFlex="25%" class="left">
               {{activeTransferData.settlementDate | dateFormat}}
             </td>
             <td fxFlex="25%">
-              <b>{{"labels.inputs.Effective Date"  |translate}} :</b>
+              <b>{{"labels.inputs.Effective Date" | translate }} :</b>
             </td>
             <td fxFlex="25%" class="left">
               {{activeTransferData.effectiveFrom | dateFormat}}
@@ -37,33 +37,33 @@
           </tr>
           <tr>
             <td fxFlex="25%">
-              <b>{{"labels.inputs.Details"  |translate}} :</b>
+              <b>{{"labels.inputs.Details" | translate }} :</b>
             </td>
             <td fxFlex="75%" class="left">
               <table>
                 <tbody>
                   <tr>
-                    <td fxFlex="50%"><b>{{"labels.inputs.Principal Outstanding"  |translate}} :</b></td>
+                    <td fxFlex="50%"><b>{{"labels.inputs.Principal Outstanding" | translate }} :</b></td>
                     <td fxFlex="50%" class="r-amount">{{activeTransferData.details.totalPrincipalOutstanding | formatNumber}}</td>
                   </tr>
                   <tr>
-                    <td fxFlex="50%"><b>{{"labels.inputs.Interest Outstanding"  |translate}} :</b></td>
+                    <td fxFlex="50%"><b>{{"labels.inputs.Interest Outstanding" | translate }} :</b></td>
                     <td fxFlex="50%" class="r-amount">{{activeTransferData.details.totalInterestOutstanding | formatNumber}}</td>
                   </tr>
                   <tr>
-                    <td fxFlex="50%"><b>{{"labels.inputs.Fees Outstanding"  |translate}} :</b></td>
+                    <td fxFlex="50%"><b>{{"labels.inputs.Fees Outstanding" | translate }} :</b></td>
                     <td fxFlex="50%" class="r-amount">{{activeTransferData.details.totalFeeChargesOutstanding | formatNumber}}</td>
                   </tr>
                   <tr>
-                    <td fxFlex="50%"><b>{{"labels.inputs.Penalties Outstanding"  |translate}} :</b></td>
+                    <td fxFlex="50%"><b>{{"labels.inputs.Penalties Outstanding" | translate }} :</b></td>
                     <td fxFlex="50%" class="r-amount">{{activeTransferData.details.totalPenaltyChargesOutstanding | formatNumber}}</td>
                   </tr>
                   <tr>
-                    <td fxFlex="50%"><b>{{"labels.inputs.Outstanding"  |translate}} :</b></td>
+                    <td fxFlex="50%"><b>{{"labels.inputs.Outstanding" | translate }} :</b></td>
                     <td fxFlex="50%" class="r-amount">{{activeTransferData.details.totalOutstanding | formatNumber}}</td>
                   </tr>
                   <tr>
-                    <td fxFlex="50%"><b>{{"labels.inputs.Overpaid"  |translate}} :</b></td>
+                    <td fxFlex="50%"><b>{{"labels.inputs.Overpaid" | translate }} :</b></td>
                     <td fxFlex="50%" class="r-amount">{{activeTransferData.details.totalOverpaid | formatNumber}}</td>
                   </tr>
                 </tbody>
@@ -77,23 +77,23 @@
 
   <div fxLayout="row" fxLayoutAlign="start center">
 
-    <h3 fxFlex="90%">{{"labels.heading.External Asset Owner"  |translate}}</h3>
+    <h3 fxFlex="90%">{{"labels.heading.External Asset Owner" | translate }}</h3>
 
     <div fxFlex="10%" *ngIf="canBeSold()" >
       <button mat-raised-button class="f-right" color="primary" (click)="saleLoan()" *mifosxHasPermission="'SALE_LOAN'">
-        <fa-icon icon="dollar-sign" class="m-r-10"></fa-icon>{{"labels.buttons.Sale Loan"  |translate}}
+        <fa-icon icon="dollar-sign" class="m-r-10"></fa-icon>{{"labels.buttons.Sale Loan" | translate }}
       </button>
     </div>
 
     <div fxFlex="10%" *ngIf="canBeCancelled()" >
       <button mat-raised-button class="f-right" color="warn" (click)="cancelSaleLoan()" *mifosxHasPermission="'SALE_LOAN'">
-        <fa-icon icon="trash" class="m-r-10"></fa-icon>{{"labels.buttons.Cancel Sale Loan"  |translate}}
+        <fa-icon icon="trash" class="m-r-10"></fa-icon>{{"labels.buttons.Cancel Sale Loan" | translate }}
       </button>
     </div>
 
     <div fxFlex="10%" *ngIf="canBeBuyed()" >
       <button mat-raised-button class="f-right" color="primary" (click)="buyBackLoan()" *mifosxHasPermission="'SALE_LOAN'">
-        <fa-icon icon="dollar-sign" class="m-r-10"></fa-icon>{{"labels.buttons.Buy Back Loan"  |translate}}
+        <fa-icon icon="dollar-sign" class="m-r-10"></fa-icon>{{"labels.buttons.Buy Back Loan" | translate }}
       </button>
     </div>
   </div>
@@ -101,7 +101,7 @@
   <table mat-table mat-sort [dataSource]="loanTransfersData" *ngIf="loanTransfersData.length>0">
 
     <ng-container matColumnDef="status">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Status"  |translate}} </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Status" | translate }} </th>
       <td mat-cell *matCellDef="let item">
         <div [ngClass]="itemStatus(item.status)">
           <fa-icon icon="stop"></fa-icon>
@@ -113,36 +113,36 @@
     </ng-container>
 
     <ng-container matColumnDef="effectiveFrom">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Effective From"  |translate}} </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Effective From" | translate }} </th>
       <td mat-cell *matCellDef="let item"> {{ item.effectiveFrom | dateFormat }}</td>
     </ng-container>
 
     <ng-container matColumnDef="ownerExternalId">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Owner External Id"  |translate}} </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Owner External Id" | translate }} </th>
       <td mat-cell *matCellDef="let item">
         <mifosx-external-identifier externalId="{{item.owner.externalId}}"></mifosx-external-identifier>
       </td>
     </ng-container>
 
     <ng-container matColumnDef="transferExternalId">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Transfer External Id"  |translate}} </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Transfer External Id" | translate }} </th>
       <td mat-cell *matCellDef="let item">
         <mifosx-external-identifier externalId="{{item.transferExternalId}}"></mifosx-external-identifier>
       </td>
     </ng-container>
 
     <ng-container matColumnDef="settlementDate">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Settlement Date"  |translate}} </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Settlement Date" | translate }} </th>
       <td mat-cell *matCellDef="let item"> {{ item.settlementDate | dateFormat }}</td>
     </ng-container>
 
     <ng-container matColumnDef="purchasePriceRatio">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Purchase Price Ratio"  |translate}} </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Purchase Price Ratio" | translate }} </th>
       <td mat-cell *matCellDef="let item"> {{ item.purchasePriceRatio | number }}</td>
     </ng-container>
 
     <ng-container matColumnDef="actions">
-      <th mat-header-cell class="center" *matHeaderCellDef> {{"labels.inputs.Actions"  |translate}} </th>
+      <th mat-header-cell class="center" *matHeaderCellDef> {{"labels.inputs.Actions" | translate }} </th>
       <td mat-cell *matCellDef="let item" class="center td-min-space">
         <button class="account-action-button" *ngIf="!isPendingOrCanceled(item)" mat-raised-button color="primary" matTooltip="{{ 'tooltips.View Journal Entries' | translate }}"
           matTooltipPosition="left" (click)="routeJournalEntry($event)" [routerLink]="['/', 'journal-entry', 'view-transfer', item.transferId]">

src/app/loans/loans-view/floating-interest-rates/floating-interest-rates.component.html

@@ -3,12 +3,12 @@
   <table mat-table [dataSource]="interestRateData">
 
     <ng-container matColumnDef="fromDate">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.From Date"  |translate}} </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.From Date" | translate }} </th>
       <td mat-cell *matCellDef="let ele"> {{ ele.fromDate  | dateFormat}} </td>
     </ng-container>
 
     <ng-container matColumnDef="interestRate">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Interest Rate"  |translate}} </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Interest Rate" | translate }} </th>
       <td mat-cell *matCellDef="let ele"> {{ ele.effectiveInterestRate }} </td>
     </ng-container>
 

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

@@ -1,19 +1,19 @@
 <div class="tab-container mat-typography">
 
   <ng-container *ngIf="loanDetails.summary">
-    <h3>{{"labels.heading.Performance History"  |translate}}</h3>
+    <h3>{{"labels.heading.Performance History" | translate }}</h3>
     <div fxLayout="row" fxLayoutGap="32px" class="performance-history-container">
       <table>
         <tbody>
           <tr>
             <td fxFlex="25%">
-              <b>{{"labels.inputs.Number of Repayments"  |translate}} :</b>
+              <b>{{"labels.inputs.Number of Repayments" | translate }} :</b>
             </td>
             <td fxFlex="25%" class="left">
               {{loanDetails?.numberOfRepayments | formatNumber}}
             </td>
             <td fxFlex="25%">
-              <b>{{"labels.inputs.Maturity Date"  |translate}} :</b>
+              <b>{{"labels.inputs.Maturity Date" | translate }} :</b>
             </td>
             <td fxFlex="25%" class="left">
               {{loanDetails?.timeline.expectedMaturityDate | dateFormat}}
@@ -26,7 +26,7 @@
 
   <div *ngIf="loanDetails.summary">
 
-    <h3> {{"labels.heading.Loan Summary"  |translate}} </h3>
+    <h3> {{"labels.heading.Loan Summary" | translate }} </h3>
 
     <table mat-table [dataSource]="dataSource">
       <ng-container matColumnDef="Empty">
@@ -35,37 +35,37 @@
       </ng-container>
 
       <ng-container matColumnDef="Original">
-        <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Original"  |translate}} </th>
+        <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Original" | translate }} </th>
         <td mat-cell class="r-amount" *matCellDef="let ele"> {{ ele.original | currency:currencyCode:'symbol-narrow':'1.2-2' }} </td>
       </ng-container>
 
       <ng-container matColumnDef="Paid">
-        <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Paid"  |translate}} </th>
+        <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Paid" | translate }} </th>
         <td mat-cell class="r-amount amount-minus" *matCellDef="let ele"> {{ ele.paid | currency:currencyCode:'symbol-narrow':'1.2-2' }} </td>
       </ng-container>
 
       <ng-container matColumnDef="Adjustments">
-        <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Credit Adjustments"  |translate}} </th>
+        <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Credit Adjustments" | translate }} </th>
         <td mat-cell class="r-amount amount-plus" *matCellDef="let ele"> {{ ele.adjustment | currency:currencyCode:'symbol-narrow':'1.2-2' }} </td>
       </ng-container>
 
       <ng-container matColumnDef="Waived">
-        <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Waived"  |translate}} </th>
+        <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Waived" | translate }} </th>
         <td mat-cell class="r-amount amount-minus" *matCellDef="let ele"> {{ ele.waived | currency:currencyCode:'symbol-narrow':'1.2-2' }} </td>
       </ng-container>
 
       <ng-container matColumnDef="Written Off">
-        <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Written Off"  |translate}} </th>
+        <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Written Off" | translate }} </th>
         <td mat-cell class="r-amount amount-minus" *matCellDef="let ele"> {{ ele.writtenOff | currency:currencyCode:'symbol-narrow':'1.2-2' }} </td>
       </ng-container>
 
       <ng-container matColumnDef="Outstanding">
-        <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Outstanding"  |translate}} </th>
+        <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Outstanding" | translate }} </th>
         <td mat-cell class="r-amount" *matCellDef="let ele"> {{ ele.outstanding | currency:currencyCode:'symbol-narrow':'1.2-2' }} </td>
       </ng-container>
 
       <ng-container matColumnDef="Over Due">
-        <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Over Due"  |translate}} </th>
+        <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Over Due" | translate }} </th>
         <td mat-cell class="r-amount" *matCellDef="let ele"> {{ ele.overdue | currency:currencyCode:'symbol-narrow':'1.2-2' }} </td>
       </ng-container>
 
@@ -77,29 +77,29 @@
 
   <div *ngIf="loanDetails.summary">
 
-    <h3> {{"labels.heading.Loan Details"  |translate}} </h3>
+    <h3> {{"labels.heading.Loan Details" | translate }} </h3>
     <table mat-table [dataSource]="detailsDataSource">
 
       <ng-container matColumnDef="Key">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Key"  |translate}} </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Key" | translate }} </th>
         <td mat-cell *matCellDef="let ele"> {{ ele.key }} </td>
       </ng-container>
 
       <ng-container matColumnDef="Value">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Value"  |translate}} </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Value" | translate }} </th>
         <td mat-cell *matCellDef="let ele">
           <ng-container *ngIf="ele.key === 'Disbursement Date'" >
             <span *ngIf="loanDetails.timeline.actualDisbursementDate"> {{loanDetails.timeline.actualDisbursementDate  | dateFormat}} </span>
-            <span *ngIf="!loanDetails.timeline.actualDisbursementDate"> {{"labels.inputs.Not Available"  |translate}} </span>
+            <span *ngIf="!loanDetails.timeline.actualDisbursementDate"> {{"labels.inputs.Not Available" | translate }} </span>
           </ng-container>
 
           <ng-container *ngIf="ele.key === 'Loan Purpose'">
             <span *ngIf="loanDetails.loanPurposeName"> {{loanDetails.loanPurposeName}} </span>
-            <span *ngIf="!loanDetails.loanPurposeName"> {{"labels.inputs.Not Available"  |translate}} </span>
+            <span *ngIf="!loanDetails.loanPurposeName"> {{"labels.inputs.Not Available" | translate }} </span>
           </ng-container>
 
           <ng-container *ngIf="ele.key === 'Loan Officer'">
-            <span *ngIf="!loanDetails.loanOfficerName"> {{"labels.inputs.Unassigned"  |translate}} </span>
+            <span *ngIf="!loanDetails.loanOfficerName"> {{"labels.inputs.Unassigned" | translate }} </span>
             <span *ngIf="loanDetails.loanOfficerName"> {{loanDetails.loanOfficerName}} &nbsp;
               <span *ngIf="loanDetails.loanOfficerName">
                     <!-- <a ng-click="clickEvent('unassignloanofficer', loanDetails.id)" *mifosxHasPermission = "'REMOVELOANOFFICER_LOAN'"><i
@@ -116,7 +116,7 @@
             <span *ngIf="loanDetails.externalId">
               <mifosx-external-identifier externalId="{{loanDetails.externalId}}" completed="true"></mifosx-external-identifier>
             </span>
-            <span *ngIf="!loanDetails.externalId"> {{"labels.inputs.Not Available"  |translate}} </span>
+            <span *ngIf="!loanDetails.externalId"> {{"labels.inputs.Not Available" | translate }} </span>
           </ng-container>
 
           <ng-container *ngIf="ele.key === 'Proposed Amount' || ele.key === 'Approved Amount' || ele.key === 'Disburse Amount'">
@@ -134,24 +134,24 @@
 
   <div *ngIf="!loanDetails.summary">
 
-    <h3> {{"labels.heading.Loan Details"  |translate}} </h3>
+    <h3> {{"labels.heading.Loan Details" | translate }} </h3>
     <table mat-table [dataSource]="detailsDataSource">
 
       <ng-container matColumnDef="Key">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Key"  |translate}} </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Key" | translate }} </th>
         <td mat-cell *matCellDef="let ele"> {{ ele.key }} </td>
       </ng-container>
 
       <ng-container matColumnDef="Value">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Value"  |translate}} </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Value" | translate }} </th>
         <td mat-cell *matCellDef="let ele">
           <ng-container *ngIf="ele.key === 'Disbursement Date'" >
             <span *ngIf="loanDetails.timeline.actualDisbursementDate"> {{loanDetails.timeline.actualDisbursementDate  | dateFormat}} </span>
-            <span *ngIf="!loanDetails.timeline.actualDisbursementDate"> {{"labels.inputs.Not Available"  |translate}} </span>
+            <span *ngIf="!loanDetails.timeline.actualDisbursementDate"> {{"labels.inputs.Not Available" | translate }} </span>
           </ng-container>
 
           <ng-container *ngIf="ele.key === 'Loan Officer'">
-            <span *ngIf="!loanDetails.loanOfficerName"> {{"labels.inputs.Unassigned"  |translate}} </span>
+            <span *ngIf="!loanDetails.loanOfficerName"> {{"labels.inputs.Unassigned" | translate }} </span>
             <span *ngIf="loanDetails.loanOfficerName"> {{loanDetails.loanOfficerName}} &nbsp;
               <span *ngIf="loanDetails.loanOfficerName">
                     <!-- <a ng-click="clickEvent('unassignloanofficer', loanDetails.id)" *mifosxHasPermission = "'REMOVELOANOFFICER_LOAN'"><i
@@ -168,7 +168,7 @@
             <span *ngIf="loanDetails.externalId">
               <mifosx-external-identifier externalId="{{loanDetails.externalId}}" completed="true"></mifosx-external-identifier>
             </span>
-            <span *ngIf="!loanDetails.externalId"> {{"labels.inputs.Not Available"  |translate}} </span>
+            <span *ngIf="!loanDetails.externalId"> {{"labels.inputs.Not Available" | translate }} </span>
           </ng-container>
 
         </td>
@@ -181,38 +181,38 @@
   </div>
 
   <div *ngIf="!loanDetails.summary">
-    <h3> {{"labels.heading.Loan Purpose"  |translate}} </h3>
+    <h3> {{"labels.heading.Loan Purpose" | translate }} </h3>
     <div class="container">
       <div fxLayout="row wrap" fxLayout.lt-md="column">
 
         <div fxFlexFill>
-            <span fxFlex="50%">{{"labels.inputs.Loan Purpose"  |translate}}:</span>
+            <span fxFlex="50%">{{"labels.inputs.Loan Purpose" | translate }}:</span>
             <span fxFlex="50%" *ngIf="loanDetails.loanPurposeName">
               {{ loanDetails.loanPurposeName }}
             </span>
             <span fxFlex="50%" *ngIf="!loanDetails.loanPurposeName">
-              {{"labels.inputs.Not Provided"  |translate}}
+              {{"labels.inputs.Not Provided" | translate }}
             </span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="50%">{{"labels.inputs.Proposed Amount"  |translate}}:</span>
+          <span fxFlex="50%">{{"labels.inputs.Proposed Amount" | translate }}:</span>
           <span fxFlex="50%">{{ loanDetails.proposedPrincipal | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span>
         </div>
 
         <div fxFlexFill *ngIf="showApprovedAmountBasedOnStatus()">
-          <span fxFlex="50%">{{"labels.inputs.Approved Amount"  |translate}}:</span>
+          <span fxFlex="50%">{{"labels.inputs.Approved Amount" | translate }}:</span>
           <span fxFlex="50%">{{ loanDetails.approvedPrincipal | currency:currencyCode:'symbol-narrow':'1.2-2' }}</span>
         </div>
 
         <div fxFlexFill *ngIf="showDisbursedAmountBasedOnStatus()">
-          <span fxFlex="50%">{{"labels.inputs.Disburse Amount"  |translate}}:</span>
+          <span fxFlex="50%">{{"labels.inputs.Disburse Amount" | translate }}:</span>
           <span fxFlex="50%">{{ loanDetails.principal | currency:currencyCode:'symbol-narrow':'1.2-2' }}</span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="50%">{{"labels.inputs.Arrears By"  |translate}}:</span>
-          <span fxFlex="50%">{{"labels.inputs.Not Provided"  |translate}}</span>
+          <span fxFlex="50%">{{"labels.inputs.Arrears By" | translate }}:</span>
+          <span fxFlex="50%">{{"labels.inputs.Not Provided" | translate }}</span>
         </div>
 
       </div>

src/app/loans/loans-view/loan-account-actions/add-collateral/add-collateral.component.html

@@ -9,26 +9,26 @@
         <div fxLayout="column">
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Collateral Type"  |translate}}</mat-label>
+            <mat-label>{{"labels.inputs.Collateral Type" | translate }}</mat-label>
             <mat-select required formControlName="collateralTypeId">
               <mat-option *ngFor="let collateral of dataObject.allowedCollateralTypes" [value]="collateral.id">
                 {{ collateral.name }}</mat-option>
             </mat-select>
             <mat-error *ngIf="collateralForm.controls.collateralTypeId.hasError('required')">
-              {{"labels.inputs.Collateral type"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+              {{"labels.inputs.Collateral type" | translate }} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Value"  |translate}}</mat-label>
+            <mat-label>{{"labels.inputs.Value" | translate }}</mat-label>
             <input matInput required formControlName="value">
             <mat-error *ngIf="collateralForm.controls.value.hasError('required')">
-              {{"labels.inputs.Value"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+              {{"labels.inputs.Value" | translate }} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Description"  |translate}}</mat-label>
+            <mat-label>{{"labels.inputs.Description" | translate }}</mat-label>
             <textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
 
@@ -36,9 +36,9 @@
         </div>
 
         <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <button type="button" mat-raised-button [routerLink]="['../../loan-collateral']">{{"labels.buttons.Cancel"  |translate}}</button>
+          <button type="button" mat-raised-button [routerLink]="['../../loan-collateral']">{{"labels.buttons.Cancel" | translate }}</button>
           <button mat-raised-button color="primary" [disabled]="!collateralForm.valid"
-            *mifosxHasPermission="'CREATE_COLLATERAL'">{{"labels.buttons.Submit"  |translate}}</button>
+            *mifosxHasPermission="'CREATE_COLLATERAL'">{{"labels.buttons.Submit" | translate }}</button>
         </mat-card-actions>
 
       </mat-card-content>

src/app/loans/loans-view/loan-account-actions/add-loan-charge/add-loan-charge.component.html

@@ -8,52 +8,52 @@
 
         <div fxLayout="column">
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Charge"  |translate}}</mat-label>
+            <mat-label>{{"labels.inputs.Charge" | translate }}</mat-label>
             <mat-select required formControlName="chargeId">
               <mat-option *ngFor="let loanCharge of loanChargeOptions" [value]="loanCharge.id">
                 {{ loanCharge.name + ' (' + loanCharge?.currency.name + ')' }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="loanChargeForm.controls.chargeId.hasError('required')">
-              {{"labels.inputs.Charge"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+              {{"labels.inputs.Charge" | translate }} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Amount"  |translate}}</mat-label>
+            <mat-label>{{"labels.inputs.Amount" | translate }}</mat-label>
             <input type="number" required matInput formControlName="amount" />
             <mat-error *ngIf="loanChargeForm.controls.amount.hasError('required')">
-              {{"labels.inputs.Amount"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+              {{"labels.inputs.Amount" | translate }} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Charge Calculation"  |translate}}</mat-label>
+            <mat-label>{{"labels.inputs.Charge Calculation" | translate }}</mat-label>
             <input matInput formControlName="chargeCalculation" />
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Charge Time"  |translate}}</mat-label>
+            <mat-label>{{"labels.inputs.Charge Time" | translate }}</mat-label>
             <input matInput formControlName="chargeTime" />
           </mat-form-field>
 
           <mat-form-field *ngIf="loanChargeForm.controls['dueDate']" (click)="dueDatePicker.open()">
-            <mat-label>{{"labels.inputs.Due On"  |translate}}</mat-label>
+            <mat-label>{{"labels.inputs.Due On" | translate }}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="dueDatePicker" required
               formControlName="dueDate">
             <mat-datepicker-toggle matSuffix [for]="dueDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #dueDatePicker></mat-datepicker>
             <mat-error *ngIf="loanChargeForm.controls.dueDate.hasError('required')">
-              {{"labels.inputs.Due Date"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+              {{"labels.inputs.Due Date" | translate }} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
         </div>
 
         <mat-card-actions fxLayoutGap="5px" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center">
-          <button type="button" mat-raised-button [routerLink]="['../../general']">{{"labels.buttons.Cancel"  |translate}}</button>
+          <button type="button" mat-raised-button [routerLink]="['../../general']">{{"labels.buttons.Cancel" | translate }}</button>
           <button mat-raised-button color="primary" [disabled]="!loanChargeForm.valid"
-            *mifosxHasPermission="'CREATE_LOANCHARGE'">{{"labels.buttons.Submit"  |translate}}</button>
+            *mifosxHasPermission="'CREATE_LOANCHARGE'">{{"labels.buttons.Submit" | translate }}</button>
         </mat-card-actions>
 
       </mat-card-content>

src/app/loans/loans-view/loan-account-actions/adjust-loan-charge/adjust-loan-charge.component.html

@@ -9,22 +9,22 @@
         <div fxLayout="column">
 
           <mat-form-field appearance="fill">
-            <mat-label>{{"labels.inputs.Amount"  |translate}}</mat-label>
+            <mat-label>{{"labels.inputs.Amount" | translate }}</mat-label>
             <span matTextSuffix class="m-l-10">{{ loanDetailsData.currency.code }}</span>
             <span fxFlex="auto"></span>
             <input type="number" matInput required class="right-input" formControlName="amount">
             <mat-error *ngIf="adjustLoanChargeForm.controls.amount.hasError('required')">
-              {{"labels.inputs.Amount"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+              {{"labels.inputs.Amount" | translate }} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.External Id"  |translate}}</mat-label>
+            <mat-label>{{"labels.inputs.External Id" | translate }}</mat-label>
             <input matInput formControlName="externalId">
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Payment Type"  |translate}}</mat-label>
+            <mat-label>{{"labels.inputs.Payment Type" | translate }}</mat-label>
             <mat-select formControlName="paymentTypeId">
               <mat-option *ngFor="let paymentType of paymentTypes" [value]="paymentType.id">
                 {{ paymentType.name }}
@@ -36,7 +36,7 @@
             <span fxFlex="75%" class="expandcollapsebutton m-l-10 m-t-40" (click)="addPaymentDetails()">
               <mat-slide-toggle>
                 <div [className]="showPaymentDetails ? 'enabled' : 'disabled'">
-                  <span class="m-l-10">{{"labels.inputs.Show Payment Details"  |translate}}</span>
+                  <span class="m-l-10">{{"labels.inputs.Show Payment Details" | translate }}</span>
                 </div>
               </mat-slide-toggle>
             </span>
@@ -44,42 +44,42 @@
 
           <ng-container *ngIf="showPaymentDetails">
             <mat-form-field>
-              <mat-label> {{"labels.inputs.Account"  |translate}} #</mat-label>
+              <mat-label> {{"labels.inputs.Account" | translate }} #</mat-label>
               <input matInput formControlName="accountNumber">
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>{{"labels.inputs.Cheque"  |translate}} #</mat-label>
+              <mat-label>{{"labels.inputs.Cheque" | translate }} #</mat-label>
               <input matInput formControlName="checkNumber">
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>{{"labels.inputs.Routing Code"  |translate}}</mat-label>
+              <mat-label>{{"labels.inputs.Routing Code" | translate }}</mat-label>
               <input matInput formControlName="routingCode">
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>{{"labels.inputs.Reciept"  |translate}} #</mat-label>
+              <mat-label>{{"labels.inputs.Reciept" | translate }} #</mat-label>
               <input matInput formControlName="receiptNumber">
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>{{"labels.inputs.Bank"  |translate}} #</mat-label>
+              <mat-label>{{"labels.inputs.Bank" | translate }} #</mat-label>
               <input matInput formControlName="bankNumber">
             </mat-form-field>
           </ng-container>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Note"  |translate}}</mat-label>
+            <mat-label>{{"labels.inputs.Note" | translate }}</mat-label>
             <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
 
         </div>
 
         <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <button type="button" mat-raised-button [routerLink]="['../..']">{{"labels.buttons.Cancel"  |translate}}</button>
+          <button type="button" mat-raised-button [routerLink]="['../..']">{{"labels.buttons.Cancel" | translate }}</button>
           <button mat-raised-button color="primary" [disabled]="!adjustLoanChargeForm.valid"
-            *mifosxHasPermission="'ADJUSTMENT_LOANCHARGE'">{{"labels.buttons.Submit"  |translate}}</button>
+            *mifosxHasPermission="'ADJUSTMENT_LOANCHARGE'">{{"labels.buttons.Submit" | translate }}</button>
         </mat-card-actions>
 
       </mat-card-content>

src/app/loans/loans-view/loan-account-actions/approve-loan/approve-loan.component.html

@@ -9,18 +9,18 @@
         <div fxLayout="column">
 
           <mat-form-field (click)="approvedDatePicker.open()">
-            <mat-label>{{"labels.inputs.Approved On"  |translate}}</mat-label>
+            <mat-label>{{"labels.inputs.Approved On" | translate }}</mat-label>
             <input matInput [min]="minDate" [matDatepicker]="approvedDatePicker" required
               formControlName="approvedOnDate">
             <mat-datepicker-toggle matSuffix [for]="approvedDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #approvedDatePicker></mat-datepicker>
             <mat-error *ngIf="approveLoanForm.controls.approvedOnDate.hasError('required')">
-              {{"labels.inputs.Approved Date"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+              {{"labels.inputs.Approved Date" | translate }} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field (click)="disbursementDatePicker.open()">
-            <mat-label>{{"labels.inputs.Expected disbursement on"  |translate}}</mat-label>
+            <mat-label>{{"labels.inputs.Expected disbursement on" | translate }}</mat-label>
             <input matInput [min]="minDate" [matDatepicker]="disbursementDatePicker"
               formControlName="expectedDisbursementDate">
             <mat-datepicker-toggle matSuffix [for]="disbursementDatePicker"></mat-datepicker-toggle>
@@ -28,29 +28,29 @@
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Approved Amount"  |translate}}</mat-label>
+            <mat-label>{{"labels.inputs.Approved Amount" | translate }}</mat-label>
             <input matInput type="number" formControlName="approvedLoanAmount">
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Transaction Amount"  |translate}}</mat-label>
+            <mat-label>{{"labels.inputs.Transaction Amount" | translate }}</mat-label>
             <input matInput type="number" required formControlName="approvedLoanAmount">
             <mat-error *ngIf="approveLoanForm.controls.approvedLoanAmount.hasError('required')">
-              {{"labels.inputs.Transaction Amount"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+              {{"labels.inputs.Transaction Amount" | translate }} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Note"  |translate}}</mat-label>
+            <mat-label>{{"labels.inputs.Note" | translate }}</mat-label>
             <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
 
         </div>
 
         <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <button type="button" mat-raised-button [routerLink]="['../../general']">{{"labels.buttons.Cancel"  |translate}}</button>
+          <button type="button" mat-raised-button [routerLink]="['../../general']">{{"labels.buttons.Cancel" | translate }}</button>
           <button mat-raised-button color="primary" [disabled]="!approveLoanForm.valid"
-            *mifosxHasPermission="'APPROVE_LOAN'">{{"labels.buttons.Submit"  |translate}}</button>
+            *mifosxHasPermission="'APPROVE_LOAN'">{{"labels.buttons.Submit" | translate }}</button>
         </mat-card-actions>
 
       </mat-card-content>

src/app/loans/loans-view/loan-account-actions/asset-transfer-loan/asset-transfer-loan.component.html

@@ -9,43 +9,43 @@
         <div fxLayout="column">
 
           <mat-form-field (click)="settlementDatePicker.open()">
-            <mat-label>{{"labels.inputs.Settlement Date"  |translate}}</mat-label>
+            <mat-label>{{"labels.inputs.Settlement Date" | translate }}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="settlementDatePicker" required
               formControlName="settlementDate">
             <mat-datepicker-toggle matSuffix [for]="settlementDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #settlementDatePicker></mat-datepicker>
             <mat-error *ngIf="saleLoanForm.controls.settlementDate.hasError('required')">
-              {{"labels.inputs.Settlement Date"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+              {{"labels.inputs.Settlement Date" | translate }} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field *ngIf="!isBuyBack()">
-            <mat-label>{{"labels.inputs.Purchase Price Ratio"  |translate}}</mat-label>
+            <mat-label>{{"labels.inputs.Purchase Price Ratio" | translate }}</mat-label>
             <input type="number" matInput required formControlName="purchasePriceRatio">
             <mat-error *ngIf="saleLoanForm.controls.purchasePriceRatio.hasError('required')">
-              {{"labels.inputs.Purchase Price Ratio"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+              {{"labels.inputs.Purchase Price Ratio" | translate }} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field *ngIf="!isBuyBack()">
-            <mat-label>{{"labels.inputs.Owner External Id"  |translate}}</mat-label>
+            <mat-label>{{"labels.inputs.Owner External Id" | translate }}</mat-label>
             <input matInput formControlName="ownerExternalId">
             <mat-error *ngIf="saleLoanForm.controls.ownerExternalId.hasError('required')">
-              {{"labels.inputs.Owner External Id"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+              {{"labels.inputs.Owner External Id" | translate }} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Transfer External Id"  |translate}}</mat-label>
+            <mat-label>{{"labels.inputs.Transfer External Id" | translate }}</mat-label>
             <input matInput formControlName="transferExternalId">
           </mat-form-field>
 
         </div>
 
         <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <button type="button" mat-raised-button [routerLink]="['../../general']">{{"labels.buttons.Cancel"  |translate}}</button>
+          <button type="button" mat-raised-button [routerLink]="['../../general']">{{"labels.buttons.Cancel" | translate }}</button>
           <button mat-raised-button color="primary" [disabled]="!saleLoanForm.valid"
-            *mifosxHasPermission="'SALE_LOAN'">{{"labels.buttons.Submit"  |translate}}</button>
+            *mifosxHasPermission="'SALE_LOAN'">{{"labels.buttons.Submit" | translate }}</button>
         </mat-card-actions>
 
       </mat-card-content>

src/app/loans/loans-view/loan-account-actions/assign-loan-officer/assign-loan-officer.component.html

@@ -9,34 +9,34 @@
         <div fxLayout="column">
 
           <mat-form-field>
-            <mat-label> {{"labels.inputs.To Loan Officer"  |translate}}</mat-label>
+            <mat-label> {{"labels.inputs.To Loan Officer" | translate }}</mat-label>
             <mat-select required formControlName="toLoanOfficerId">
               <mat-option *ngFor="let loanOfficer of loanOfficers" [value]="loanOfficer.id">
                 {{ loanOfficer.displayName }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="assignOfficerForm.controls.toLoanOfficerId.hasError('required')">
-              {{"labels.inputs.Loan Officer"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+              {{"labels.inputs.Loan Officer" | translate }} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field (click)="assignOnDatePicker.open()">
-            <mat-label>{{"labels.inputs.Assignment Date"  |translate}}</mat-label>
+            <mat-label>{{"labels.inputs.Assignment Date" | translate }}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="assignOnDatePicker" required
               formControlName="assignmentDate">
             <mat-datepicker-toggle matSuffix [for]="assignOnDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #assignOnDatePicker></mat-datepicker>
             <mat-error *ngIf="assignOfficerForm.controls.assignmentDate.hasError('required')">
-              {{"labels.inputs.Assignment Date"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+              {{"labels.inputs.Assignment Date" | translate }} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
         </div>
 
         <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <button type="button" mat-raised-button [routerLink]="['../../general']">{{"labels.buttons.Cancel"  |translate}}</button>
+          <button type="button" mat-raised-button [routerLink]="['../../general']">{{"labels.buttons.Cancel" | translate }}</button>
           <button mat-raised-button color="primary" [disabled]="!assignOfficerForm.valid"
-            *mifosxHasPermission="'BULKREASSIGN_LOAN'">{{"labels.buttons.Submit"  |translate}}</button>
+            *mifosxHasPermission="'BULKREASSIGN_LOAN'">{{"labels.buttons.Submit" | translate }}</button>
         </mat-card-actions>
 
       </mat-card-content>

src/app/loans/loans-view/loan-account-actions/charge-off/charge-off.component.html

@@ -9,44 +9,44 @@
         <div fxLayout="column">
 
           <mat-form-field (click)="transactionDatePicker.open()">
-            <mat-label>{{"labels.inputs.Transaction Date"  |translate}}</mat-label>
+            <mat-label>{{"labels.inputs.Transaction Date" | translate }}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transactionDatePicker" required
               formControlName="transactionDate">
             <mat-datepicker-toggle matSuffix [for]="transactionDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #transactionDatePicker></mat-datepicker>
             <mat-error *ngIf="chargeoffLoanForm.controls.transactionDate.hasError('required')">
-              {{"labels.inputs.Transaction Date"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+              {{"labels.inputs.Transaction Date" | translate }} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Reason for Charge-Off"  |translate}}</mat-label>
+            <mat-label>{{"labels.inputs.Reason for Charge-Off" | translate }}</mat-label>
             <mat-select formControlName="chargeOffReasonId">
               <mat-option *ngFor="let chargeOffReason of chargeOffReasonOptions" [value]="chargeOffReason.id">
                 {{ chargeOffReason.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="chargeoffLoanForm.controls.chargeOffReasonId.hasError('required')">
-              {{"labels.inputs.Reason for Charge-Off"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+              {{"labels.inputs.Reason for Charge-Off" | translate }} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.External Id"  |translate}}</mat-label>
+            <mat-label>{{"labels.inputs.External Id" | translate }}</mat-label>
             <input matInput formControlName="externalId">
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Note"  |translate}}</mat-label>
+            <mat-label>{{"labels.inputs.Note" | translate }}</mat-label>
             <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
 
         </div>
 
         <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <button type="button" mat-raised-button [routerLink]="['../../general']">{{"labels.buttons.Cancel"  |translate}}</button>
+          <button type="button" mat-raised-button [routerLink]="['../../general']">{{"labels.buttons.Cancel" | translate }}</button>
           <button mat-raised-button color="primary" [disabled]="!chargeoffLoanForm.valid"
-            *mifosxHasPermission="'CHARGEOFF_LOAN'">{{"labels.buttons.Submit"  |translate}}</button>
+            *mifosxHasPermission="'CHARGEOFF_LOAN'">{{"labels.buttons.Submit" | translate }}</button>
         </mat-card-actions>
 
       </mat-card-content>

src/app/loans/loans-view/loan-account-actions/close-as-rescheduled/close-as-rescheduled.component.html

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