Use of account currency display symbol (#1724)

Co-authored-by: Jose Alberto Hernandez <alberto@MacBook-Pro.local>

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

@@ -58,7 +58,7 @@
       <ng-template matStepLabel>REPAYMENT SCHEDULE</ng-template>
 
       <mifosx-loans-account-schedule-step #loanAccountSchedule [loansAccountTemplate]="loansAccountTemplate"
-        [loansAccountProductTemplate]="loansAccountProductTemplate" [loansAccount]="loansAccount">
+        [loansAccountProductTemplate]="loansAccountProductTemplate" [loansAccount]="loansAccount" [currencyCode]="currencyCode">
       </mifosx-loans-account-schedule-step>
 
     </mat-step>

src/app/loans/create-loans-account/create-loans-account.component.ts

@@ -41,6 +41,8 @@ export class CreateLoansAccountComponent implements OnInit {
   /** Principal Amount */
   principal: any;
   datatables: any = [];
+  /** Currency Code */
+  currencyCode: string;
 
   /**
    * Sets loans account create form.
@@ -70,6 +72,7 @@ export class CreateLoansAccountComponent implements OnInit {
    */
   setTemplate($event: any) {
     this.loansAccountProductTemplate = $event;
+    this.currencyCode = this.loansAccountProductTemplate.currency.code;
     const clientId = this.loansAccountTemplate.clientId;
     this.clientService.getCollateralTemplate(clientId).subscribe((response: any) => {
       this.collateralOptions = response;

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

@@ -57,7 +57,8 @@
       <ng-template matStepLabel>REPAYMENT SCHEDULE</ng-template>
 
       <mifosx-loans-account-schedule-step [loansAccountTemplate]="loansAccountAndTemplate"
-        [loansAccountProductTemplate]="loansAccountProductTemplate" [loansAccount]="loansAccount">
+        [loansAccountProductTemplate]="loansAccountProductTemplate" [loansAccount]="loansAccount"
+        [currencyCode]="currencyCode">
       </mifosx-loans-account-schedule-step>
 
     </mat-step>

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

@@ -30,6 +30,8 @@ export class EditLoansAccountComponent implements OnInit {
   collateralOptions: any;
   /** Loan Id */
   loanId: any;
+  /** Currency Code */
+  currencyCode: string;
 
   /**
    * Sets loans account edit form.
@@ -60,6 +62,7 @@ export class EditLoansAccountComponent implements OnInit {
    */
   setTemplate($event: any) {
     this.loansAccountProductTemplate = $event;
+    this.currencyCode = this.loansAccountProductTemplate.currency.code;
     if (this.loansAccountProductTemplate.loanProductId) {
       this.loansService.getLoansCollateralTemplateResource(this.loansAccountProductTemplate.loanProductId).subscribe((response: any) => {
         this.collateralOptions = response.loanCollateralOptions;

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

@@ -4,7 +4,10 @@
     Repayment Info
   </a>
 
-  <mifosx-repayment-schedule-tab fxFlex="100%" [repaymentScheduleDetails]="repaymentScheduleDetails"></mifosx-repayment-schedule-tab>
+  <mifosx-repayment-schedule-tab fxFlex="100%"
+    [repaymentScheduleDetails]="repaymentScheduleDetails"
+    [currencyCode]="currencyCode">
+  </mifosx-repayment-schedule-tab>
 
 </div>
 

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

@@ -10,6 +10,8 @@ import { SettingsService } from 'app/settings/settings.service';
 })
 export class LoansAccountScheduleStepComponent implements OnInit {
 
+  /** Currency Code */
+  @Input() currencyCode: string;
   /** Loans Account Template */
   @Input() loansAccountTemplate: any;
   /** Loans Account Product Template */

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

@@ -32,26 +32,26 @@
 
     <ng-container matColumnDef="due">
       <th mat-header-cell class="r-amount" *matHeaderCellDef mat-sort-header> Due </th>
-      <td mat-cell class="r-amount" *matCellDef="let charge"> {{ charge.currency.displaySymbol }} {{ charge.amount|
-        number }} </td>
+      <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> Paid </th>
-      <td mat-cell class="r-amount" *matCellDef="let charge"> {{ charge.currency.displaySymbol }}{{ charge.amountPaid|
-        number }} </td>
+      <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> Waived </th>
-      <td mat-cell class="r-amount" *matCellDef="let charge"> {{ charge.currency.displaySymbol }}{{ charge.amountWaived|
-        number }} </td>
+      <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> Outstanding </th>
-      <td mat-cell class="r-amount" *matCellDef="let charge"> {{ charge.currency.displaySymbol }}{{
-        charge.amountOutstanding| formatNumber }} </td>
+      <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">

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

@@ -36,37 +36,37 @@
 
       <ng-container matColumnDef="Original">
         <th mat-header-cell class="r-amount" *matHeaderCellDef> Original </th>
-        <td mat-cell class="r-amount" *matCellDef="let ele"> {{ ele.original | currency }} </td>
+        <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> Paid </th>
-        <td mat-cell class="r-amount amount-minus" *matCellDef="let ele"> {{ ele.paid | currency }} </td>
+        <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> Credit Adjustments </th>
-        <td mat-cell class="r-amount amount-plus" *matCellDef="let ele"> {{ ele.adjustment | currency }} </td>
+        <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> Waived </th>
-        <td mat-cell class="r-amount amount-minus" *matCellDef="let ele"> {{ ele.waived | currency }} </td>
+        <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> Written Off </th>
-        <td mat-cell class="r-amount amount-minus" *matCellDef="let ele"> {{ ele.writtenOff | currency }} </td>
+        <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> Outstanding </th>
-        <td mat-cell class="r-amount" *matCellDef="let ele"> {{ ele.outstanding | currency }} </td>
+        <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> Over Due </th>
-        <td mat-cell class="r-amount" *matCellDef="let ele"> {{ ele.overdue | currency }} </td>
+        <td mat-cell class="r-amount" *matCellDef="let ele"> {{ ele.overdue | currency:currencyCode:'symbol-narrow':'1.2-2' }} </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="loanSummaryColumns"></tr>
@@ -193,17 +193,17 @@
 
         <div fxFlexFill>
           <span fxFlex="50%">Proposed Amount:</span>
-          <span fxFlex="50%">{{ loanDetails.proposedPrincipal | currency}}</span>
+          <span fxFlex="50%">{{ loanDetails.proposedPrincipal | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span>
         </div>
 
         <div fxFlexFill *ngIf="showApprovedAmountBasedOnStatus()">
           <span fxFlex="50%">Approved Amount:</span>
-          <span fxFlex="50%">{{ loanDetails.approvedPrincipal | currency }}</span>
+          <span fxFlex="50%">{{ loanDetails.approvedPrincipal | currency:currencyCode:'symbol-narrow':'1.2-2' }}</span>
         </div>
 
         <div fxFlexFill *ngIf="showDisbursedAmountBasedOnStatus()">
           <span fxFlex="50%">Disburse Amount:</span>
-          <span fxFlex="50%">{{ loanDetails.principal | currency }}</span>
+          <span fxFlex="50%">{{ loanDetails.principal | currency:currencyCode:'symbol-narrow':'1.2-2' }}</span>
         </div>
 
         <div fxFlexFill>

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

@@ -9,6 +9,8 @@ import { MatTableDataSource } from '@angular/material/table';
 })
 export class GeneralTabComponent implements OnInit {
 
+  /** Currency Code */
+  currencyCode: string;
   loanDetails: any;
   status: any;
   loanSummaryColumns: string[] = ['Empty', 'Original', 'Paid', 'Waived', 'Written Off', 'Outstanding', 'Over Due'];
@@ -35,6 +37,7 @@ export class GeneralTabComponent implements OnInit {
   constructor(private route: ActivatedRoute) {
     this.route.parent.data.subscribe((data: { loanDetailsData: any, }) => {
       this.loanDetails = data.loanDetailsData;
+      this.currencyCode = this.loanDetails.currency.code;
       if (this.loanDetails.transactions) {
         this.loanDetails.transactions.some((transaction: any) => {
           if (transaction.type.code === 'loanTransactionType.chargeback') {
@@ -67,7 +70,6 @@ export class GeneralTabComponent implements OnInit {
         'writtenOff': this.loanDetails.summary.principalWrittenOff,
         'outstanding': this.loanDetails.summary.principalOutstanding,
         'overdue': this.loanDetails.summary.principalOverdue,
-
     },
     {
         'property': 'Interest',

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

@@ -32,11 +32,11 @@
                 </span>
                 <span class="loans-overview"
                   *ngIf="loanDetailsData.delinquent && loanDetailsData.delinquent.pastDueDays > 0">
-                  Past Due Days : {{loanDetailsData?.delinquent.pastDueDays | formatNumber}}<br />
+                  Past Due Days : {{loanDetailsData?.delinquent.pastDueDays | formatNumber }}<br />
                 </span>
                 <span class="loans-overview" *ngIf="loanDetailsData.delinquent && loanDetailsData.delinquent.delinquentDays > 0
                   && loanDetailsData.delinquent.pastDueDays != loanDetailsData.delinquent.delinquentDays">
-                  Delinquent Days : {{loanDetailsData?.delinquent.delinquentDays | formatNumber}}
+                  Delinquent Days : {{loanDetailsData?.delinquent.delinquentDays | formatNumber }}
                 </span>
               </div>
             </div>
@@ -46,14 +46,14 @@
               <span>Current Balance: {{loanDetailsData.currency.displaySymbol}}
                 {{loanDetailsData.summary.totalOutstanding | formatNumber}}</span><br>
               <div *ngIf="loanDisplayArrearsDelinquency < 2">
-                <span *ngIf="loanDetailsData.inArrears">Arrears By: {{loanDetailsData.summary.totalOverdue | formatNumber}}
+                <span *ngIf="loanDetailsData.inArrears">Arrears By: {{loanDetailsData.summary.totalOverdue | currency:currencyCode:'symbol-narrow':'1.2-2' }}
                 <span *ngIf="!(loanDetailsData.summary.totalOverdue>=0)">Not Provided</span>
                 </span><br>
                 <span *ngIf="loanDetailsData.inArrears">Arrears Since: {{loanDetailsData.summary.overdueSinceDate |
                   dateFormat}}
                 </span>
                 <span *ngIf="loanDetailsData.totalOverpaid && loanDetailsData.totalOverpaid > 0">
-                  Overpaid By: {{loanDetailsData.currency.displaySymbol}} {{loanDetailsData.totalOverpaid | formatNumber}}
+                  Overpaid By: {{loanDetailsData.currency.displaySymbol}} {{loanDetailsData.totalOverpaid | formatNumber }}
                 </span>
               </div>
             </div>

src/app/loans/loans-view/repayment-schedule-tab/repayment-schedule-tab.component.html

@@ -43,56 +43,56 @@
     <ng-container matColumnDef="principalDue">
       <th mat-header-cell class="r-amount" *matHeaderCellDef> Principal Due </th>
       <td mat-cell class="check r-amount" *matCellDef="let ele" [ngClass]="installmentStyle(ele)"> {{ ele.principalDue | formatNumber }} </td>
-      <td mat-footer-cell class="check r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalPrincipalExpected | currency }}</b>  </td>
+      <td mat-footer-cell class="check r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalPrincipalExpected | currency:currencyCode:'symbol-narrow':'1.2-2' }}</b>  </td>
     </ng-container>
 
     <ng-container matColumnDef="interest">
       <th mat-header-cell class="r-amount" *matHeaderCellDef> Interest </th>
       <td mat-cell class="r-amount" *matCellDef="let ele" [ngClass]="installmentStyle(ele)"> {{ ele.interestOriginalDue | formatNumber}} </td>
-      <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalInterestCharged | currency }} </b> </td>
+      <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalInterestCharged | currency:currencyCode:'symbol-narrow':'1.2-2' }} </b> </td>
     </ng-container>
 
     <ng-container matColumnDef="fees">
       <th mat-header-cell class="r-amount" *matHeaderCellDef> Fees </th>
       <td mat-cell class="r-amount" *matCellDef="let ele" [ngClass]="installmentStyle(ele)"> {{ ele.feeChargesDue | formatNumber}} </td>
-      <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalFeeChargesCharged | currency }} </b> </td>
+      <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalFeeChargesCharged | currency:currencyCode:'symbol-narrow':'1.2-2' }} </b> </td>
     </ng-container>
 
     <ng-container matColumnDef="penalties">
       <th mat-header-cell class="r-amount" *matHeaderCellDef> Penalties </th>
       <td mat-cell class="r-amount" *matCellDef="let ele" [ngClass]="installmentStyle(ele)"> {{ ele.penaltyChargesDue | formatNumber}} </td>
-      <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalPenaltyChargesCharged | currency }} </b> </td>
+      <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalPenaltyChargesCharged | currency:currencyCode:'symbol-narrow':'1.2-2' }} </b> </td>
     </ng-container>
 
     <ng-container matColumnDef="due">
       <th mat-header-cell class="r-amount" *matHeaderCellDef> Due </th>
       <td mat-cell class="r-amount" *matCellDef="let ele" [ngClass]="installmentStyle(ele)"> {{ ele.totalDueForPeriod | formatNumber}} </td>
-      <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalRepaymentExpected | currency }} </b> </td>
+      <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalRepaymentExpected | currency:currencyCode:'symbol-narrow':'1.2-2' }} </b> </td>
     </ng-container>
 
     <ng-container matColumnDef="paid">
       <th mat-header-cell class="r-amount" *matHeaderCellDef> Paid </th>
       <td mat-cell class="r-amount" *matCellDef="let ele" [ngClass]="installmentStyle(ele)"> {{ ele.totalPaidForPeriod | formatNumber}} </td>
-      <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalRepayment | currency }} </b> </td>
+      <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalRepayment | currency:currencyCode:'symbol-narrow':'1.2-2' }} </b> </td>
     </ng-container>
 
     <ng-container matColumnDef="inadvance">
       <th mat-header-cell class="r-amount" *matHeaderCellDef> In advance </th>
       <td mat-cell class="r-amount" *matCellDef="let ele" [ngClass]="installmentStyle(ele)"> {{ ele.totalPaidInAdvanceForPeriod | formatNumber}} </td>
-      <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalPaidInAdvance | currency }} </b> </td>
+      <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalPaidInAdvance | currency:currencyCode:'symbol-narrow':'1.2-2' }} </b> </td>
     </ng-container>
 
     <ng-container matColumnDef="late">
       <th mat-header-cell class="r-amount" *matHeaderCellDef> Late </th>
       <td mat-cell class="r-amount" *matCellDef="let ele" [ngClass]="installmentStyle(ele)"> {{ ele.totalPaidLateForPeriod | formatNumber}} </td>
-      <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalPaidLate | currency }} </b> </td>
+      <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalPaidLate | currency:currencyCode:'symbol-narrow':'1.2-2' }} </b> </td>
     </ng-container>
 
     <ng-container *ngIf="isWaived">
       <ng-container matColumnDef="waived">
         <th mat-header-cell class="r-amount" *matHeaderCellDef> Waived </th>
         <td mat-cell class="r-amount" *matCellDef="let ele" [ngClass]="installmentStyle(ele)"> {{ ele.totalWaivedForPeriod | formatNumber}} </td>
-        <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalWaived | currency }} </b> </td>
+        <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalWaived | currency:currencyCode:'symbol-narrow':'1.2-2' }} </b> </td>
       </ng-container>
     </ng-container>
 
@@ -107,7 +107,7 @@
     <ng-container matColumnDef="outstanding">
       <th mat-header-cell class="r-amount" *matHeaderCellDef> Outstanding </th>
       <td mat-cell class="r-amount" *matCellDef="let ele"> {{ ele.totalOutstandingForPeriod | formatNumber}} </td>
-      <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalOutstanding | currency }} </b> </td>
+      <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalOutstanding | currency:currencyCode:'symbol-narrow':'1.2-2' }} </b> </td>
     </ng-container>
 
     <ng-container matColumnDef="header">
@@ -159,19 +159,19 @@
       <ng-container matColumnDef="principalDue">
         <th mat-header-cell class="r-amount" *matHeaderCellDef> Principal Due </th>
         <td mat-cell class="check r-amount" *matCellDef="let ele"> {{ ele.principalDue | formatNumber }} </td>
-        <td mat-footer-cell class="check r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalPrincipalExpected | currency }}</b>  </td>
+        <td mat-footer-cell class="check r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalPrincipalExpected | currency:currencyCode:'symbol-narrow':'1.2-2' }}</b>  </td>
       </ng-container>
 
       <ng-container matColumnDef="interest">
         <th mat-header-cell class="r-amount" *matHeaderCellDef> Interest </th>
         <td mat-cell class="r-amount" *matCellDef="let ele"> {{ ele.interestOriginalDue | formatNumber}} </td>
-        <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalInterestCharged | currency }} </b> </td>
+        <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalInterestCharged | currency:currencyCode:'symbol-narrow':'1.2-2' }} </b> </td>
       </ng-container>
 
       <ng-container matColumnDef="fees">
         <th mat-header-cell class="r-amount" *matHeaderCellDef> Fees </th>
         <td mat-cell class="r-amount" *matCellDef="let ele"> {{ ele.feeChargesDue | formatNumber}} </td>
-        <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalFeeChargesCharged | currency }} </b> </td>
+        <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalFeeChargesCharged | currency:currencyCode:'symbol-narrow':'1.2-2' }} </b> </td>
       </ng-container>
 
       <ng-container matColumnDef="due">
@@ -184,7 +184,7 @@
             <b>{{ ele.totalDueForPeriod | formatNumber}}</b>
           </span>
         </td>
-        <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalRepaymentExpected | currency }} </b> </td>
+        <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalRepaymentExpected | currency:currencyCode:'symbol-narrow':'1.2-2' }} </b> </td>
       </ng-container>
 
       <ng-container matColumnDef="actions">

src/app/loans/loans-view/repayment-schedule-tab/repayment-schedule-tab.component.ts

@@ -8,6 +8,8 @@ import { ActivatedRoute } from '@angular/router';
 })
 export class RepaymentScheduleTabComponent implements OnInit {
 
+  /** Currency Code */
+  @Input() currencyCode: string;
   /** Loan Repayment Schedule to be Edited */
   @Input() forEditing = false;
   /** Loan Repayment Schedule Details Data */
@@ -30,6 +32,9 @@ export class RepaymentScheduleTabComponent implements OnInit {
    */
   constructor(private route: ActivatedRoute) {
     this.route.parent.data.subscribe((data: { loanDetailsData: any }) => {
+      if (data.loanDetailsData) {
+        this.currencyCode = data.loanDetailsData.currency.code;
+      }
       this.loanDetailsDataRepaymentSchedule = data.loanDetailsData ? data.loanDetailsData.repaymentSchedule : [];
     });
   }

src/app/products/charges/edit-charge/edit-charge.component.ts

@@ -123,9 +123,9 @@ export class EditChargeComponent implements OnInit {
       }
     }
     if (this.chargeData.taxGroup) {
-      this.chargeForm.addControl('taxGroupId', this.formBuilder.control({ value: this.chargeData.taxGroup.id, disabled: true }, Validators.required));
+      this.chargeForm.addControl('taxGroupId', this.formBuilder.control({ value: this.chargeData.taxGroup.id }, Validators.required));
     } else {
-      this.chargeForm.addControl('taxGroupId', this.formBuilder.control({ value: '', disabled: true }));
+      this.chargeForm.addControl('taxGroupId', this.formBuilder.control({ value: '' }));
     }
   }
 

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

@@ -46,22 +46,22 @@
 
       <ng-container matColumnDef="due">
         <th mat-header-cell *matHeaderCellDef> Due </th>
-        <td mat-cell *matCellDef="let charge"> {{charge.currency.displaySymbol}}&nbsp;{{charge.amount}} </td>
+        <td mat-cell *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 *matHeaderCellDef> Paid </th>
-        <td mat-cell *matCellDef="let charge"> {{charge.currency.displaySymbol}}&nbsp;{{charge.amountPaid}} </td>
+        <td mat-cell *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 *matHeaderCellDef> Waived </th>
-        <td mat-cell *matCellDef="let charge"> {{charge.currency.displaySymbol}}&nbsp;{{charge.amountWaived}} </td>
+        <td mat-cell *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 *matHeaderCellDef> Outstanding </th>
-        <td mat-cell *matCellDef="let charge"> {{charge.currency.displaySymbol}}&nbsp;{{charge.amountOutstanding}} </td>
+        <td mat-cell *matCellDef="let charge"> {{charge.amountOutstanding | currency:charge.currency.code:'symbol-narrow':'1.2-2'}} </td>
       </ng-container>
 
       <ng-container matColumnDef="actions">

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

@@ -81,46 +81,38 @@
           <tbody>
             <tr *ngIf="savingsAccountData.summary.totalWithdrawals">
               <td>Total Withdrawls</td>
-              <td>{{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.summary.totalWithdrawals |
-                number}}</td>
+              <td>{{savingsAccountData.summary.totalWithdrawals | currency:currencyCode:'symbol-narrow':'1.2-2'}}</td>
             </tr>
             <tr *ngIf="savingsAccountData.summary.totalWithdrawalFees">
               <td>Withdrawals Fees</td>
-              <td>{{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.summary.totalWithdrawalFees |
-                number}}</td>
+              <td>{{savingsAccountData.summary.totalWithdrawalFees | currency:currencyCode:'symbol-narrow':'1.2-2'}}</td>
             </tr>
             <tr *ngIf="savingsAccountData.summary.totalAnnualFees">
               <td>Annual Fees</td>
-              <td>{{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.summary.totalAnnualFees |
-                number}}</td>
+              <td>{{savingsAccountData.summary.totalAnnualFees | currency:currencyCode:'symbol-narrow':'1.2-2'}}</td>
             </tr>
             <tr *ngIf="savingsAccountData.summary.totalInterestEarned >= 0">
               <td>Interest Earned</td>
-              <td>{{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.summary.totalInterestEarned |
-                number}}</td>
+              <td>{{savingsAccountData.summary.totalInterestEarned | currency:currencyCode:'symbol-narrow':'1.2-2'}}</td>
             </tr>
             <tr *ngIf="savingsAccountData.summary.totalInterestPosted">
               <td>Interest Posted</td>
-              <td>{{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.summary.totalInterestPosted |
-                number}}</td>
+              <td>{{savingsAccountData.summary.totalInterestPosted | currency:currencyCode:'symbol-narrow':'1.2-2'}}</td>
             </tr>
             <tr *ngIf="savingsAccountData.summary.interestNotPosted >= 0">
               <td>Interest Earned Not Posted</td>
-              <td>{{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.summary.interestNotPosted |
-                number}}</td>
+              <td>{{savingsAccountData.summary.interestNotPosted | currency:currencyCode:'symbol-narrow':'1.2-2'}}</td>
             </tr>
             <tr *ngIf="savingsAccountData.summary.totalOverdraftInterestDerived">
               <td>Interest On Overdraft</td>
               <td>
-                {{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.summary.totalOverdraftInterestDerived
-                | formatNumber}}</td>
+                {{savingsAccountData.summary.totalOverdraftInterestDerived | currency:currencyCode:'symbol-narrow':'1.2-2'}}</td>
             </tr>
             <tr *ngIf="savingsAccountData.summary.interestNotPosted < 0">
               <td>Overdraft Interest Not Posted</td>
-              <td>{{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.summary.interestNotPosted |
-                number}}</td>
+              <td>{{savingsAccountData.summary.interestNotPosted | currency:currencyCode:'symbol-narrow':'1.2-2'}}</td>
             </tr>
-            <tr>
+            <tr *ngIf="savingsAccountData.nominalAnnualInterestRate">
               <td>Nominal Interest Rate</td>
               <td>{{savingsAccountData.nominalAnnualInterestRate | formatNumber}} %</td>
             </tr>
@@ -142,8 +134,7 @@
             </tr>
             <tr *ngIf="savingsAccountData.withdrawalFee">
               <td>Withdrawal Fee</td>
-              <td>{{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.withdrawalFee.amount |
-                number}}</td>
+              <td>{{savingsAccountData.withdrawalFee.amount | currency:currencyCode:'symbol-narrow':'1.2-2'}}</td>
             </tr>
             <tr *ngIf="savingsAccountData.lastActiveTransactionDate">
               <td>Last Active Transaction Date</td>
@@ -167,16 +158,16 @@
             </tr>
             <tr *ngIf="savingsAccountData.annualFee">
               <td>Annual Fee</td>
-              <td>{{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.annualFee.amount | formatNumber}}
+              <td>{{savingsAccountData.annualFee.amount | currency:currencyCode:'symbol-narrow':'1.2-2'}}
               </td>
             </tr>
             <tr *ngIf="savingsAccountData.allowOverdraft">
               <td>Over Draft Limit</td>
-              <td>{{savingsAccountData.overdraftLimit | formatNumber}}</td>
+              <td>{{savingsAccountData.overdraftLimit | currency:currencyCode:'symbol-narrow':'1.2-2'}}</td>
             </tr>
             <tr *ngIf="savingsAccountData.allowOverdraft">
               <td>Min Overdraft Required for Interest Calculation</td>
-              <td>{{savingsAccountData.minOverdraftForInterestCalculation | formatNumber}}</td>
+              <td>{{savingsAccountData.minOverdraftForInterestCalculation | currency:currencyCode:'symbol-narrow':'1.2-2'}}</td>
             </tr>
             <tr *ngIf="savingsAccountData.minBalanceForInterestCalculation">
               <td>Min Balance Required for Interest Calculation</td>
@@ -196,7 +187,7 @@
             </tr>
             <tr *ngIf="savingsAccountData.onHoldFunds">
               <td>On Hold Funds</td>
-              <td><a *mifosxHasPermission="'READ_SAVINGSACCOUNT'">{{savingsAccountData.onHoldFunds | formatNumber}}</a></td>
+              <td><a *mifosxHasPermission="'READ_SAVINGSACCOUNT'">{{savingsAccountData.onHoldFunds | currency:currencyCode:'symbol-narrow':'1.2-2'}}</a></td>
             </tr>
             <tr *ngIf="savingsAccountData.withHoldTax">
               <td>Withhold Tax Group</td>

src/app/savings/savings-account-view/savings-account-view.component.ts

@@ -34,6 +34,7 @@ export class SavingsAccountViewComponent implements OnInit {
   entityType: string;
 
   isActive = false;
+  currencyCode: string;
 
   /**
    * Fetches savings account data from `resolve`
@@ -47,6 +48,7 @@ export class SavingsAccountViewComponent implements OnInit {
               public dialog: MatDialog) {
     this.route.data.subscribe((data: { savingsAccountData: any, savingsDatatables: any }) => {
       this.savingsAccountData = data.savingsAccountData;
+      this.currencyCode = this.savingsAccountData.currency.code;
       this.savingsDatatables = data.savingsDatatables;
     });
     if (this.router.url.includes('clients')) {