create new translate pipe and remove TranslateCatalogPipe

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

@@ -25,7 +25,7 @@ <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.Term Options" | translate}} <i
       <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 | translateCatalog }}
+          {{ type.value | translateKey:'catalogs' }}
         </mat-option>
       </mat-select>
       <mat-error *ngIf="loansAccountTermsForm.controls.loanTermFrequencyType.hasError('required')">
@@ -81,7 +81,7 @@ <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.Repaid Every" | translate}} <i
       <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 | translateCatalog }}
+          {{ repaymentFrequencyType.value | translateKey:'catalogs' }}
         </mat-option>
       </mat-select>
     </mat-form-field>
@@ -91,7 +91,7 @@ <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.Repaid Every" | translate}} <i
       <mat-select formControlName="repaymentFrequencyNthDayType">
         <mat-option *ngFor="let repaymentFrequencyNthDayType of repaymentFrequencyNthDayTypeData"
           [value]="repaymentFrequencyNthDayType.id">
-          {{ repaymentFrequencyNthDayType.value | translateCatalog }}
+          {{ repaymentFrequencyNthDayType.value | translateKey:'catalogs' }}
         </mat-option>
       </mat-select>
     </mat-form-field>
@@ -101,7 +101,7 @@ <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.Repaid Every" | translate}} <i
       <mat-select formControlName="repaymentFrequencyDayOfWeekType">
         <mat-option *ngFor="let repaymentFrequencyDayOfWeekType of repaymentFrequencyDaysOfWeekTypeData"
           [value]="repaymentFrequencyDayOfWeekType.id">
-          {{ repaymentFrequencyDayOfWeekType.value | translateCatalog }}
+          {{ repaymentFrequencyDayOfWeekType.value | translateKey:'catalogs' }}
         </mat-option>
       </mat-select>
     </mat-form-field>
@@ -119,7 +119,7 @@ <h4 fxFlex="98%" class="mat-h4">{{"labels.inputs.Nominal interest rate" | transl
         <mat-label>{{'labels.inputs.Frequency' | translate}}</mat-label>
         <mat-select formControlName="interestRateFrequencyType">
           <mat-option *ngFor="let interestRateFrequencyType of interestRateFrequencyTypeData" [value]="interestRateFrequencyType.id">
-            {{ interestRateFrequencyType.value | translateCatalog }}
+            {{ interestRateFrequencyType.value | translateKey:'catalogs' }}
           </mat-option>
         </mat-select>
         <mat-error>
@@ -131,23 +131,23 @@ <h4 fxFlex="98%" class="mat-h4">{{"labels.inputs.Nominal interest rate" | transl
         <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 | translateCatalog }}
+            {{ interestType.value | translateKey:'catalogs' }}
           </mat-option>
         </mat-select>
       </mat-form-field>
-    
+
       <mat-form-field fxFlex="23%">
         <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 | translateCatalog }}
+            {{ amortizationType.value | translateKey:'catalogs' }}
           </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>
         </mat-error>
       </mat-form-field>
-      
+
       <mat-form-field fxFlex="23%" *ngIf="isEqualPrincipalPayments()">
         <mat-label>{{"labels.inputs.Principal Percentage Per Installment" | translate}}</mat-label>
         <input type="number" matInput formControlName="fixedPrincipalPercentagePerInstallment">
@@ -167,7 +167,7 @@ <h4 fxFlex="98%" class="mat-h4">{{"labels.inputs.Nominal interest rate" | transl
           <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 | translateCatalog }}
+              {{ interestType.value | translateKey:'catalogs' }}
             </mat-option>
           </mat-select>
         </mat-form-field>
@@ -176,14 +176,14 @@ <h4 fxFlex="98%" class="mat-h4">{{"labels.inputs.Nominal interest rate" | transl
           <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 | translateCatalog }}
+              {{ amortizationType.value | translateKey:'catalogs' }}
             </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>
           </mat-error>
         </mat-form-field>
-    
+
         <mat-checkbox fxFlex="48%" formControlName="isFloatingInterestRate">
           <p>{{"labels.inputs.Is Floating Rate" | translate}}?</p>
         </mat-checkbox>
@@ -194,14 +194,14 @@ <h4 fxFlex="98%" class="mat-h4">{{"labels.inputs.Loan Schedule" | translate}}</h
 
     <div fxFlex="48%" *ngIf="loanScheduleType">
       <span fxFlex="40%"><p>{{"labels.inputs.Loan Schedule Type" | translate}}</p></span>
-      <span fxFlex="60%"><p>{{ loanScheduleType.value | translateCatalog }}</p></span>
+      <span fxFlex="60%"><p>{{ loanScheduleType.value | translateKey:'catalogs' }}</p></span>
     </div>
 
     <mat-form-field fxFlex="48%">
       <mat-label>{{"labels.inputs.Repayment Strategy" | translate}}</mat-label>
       <mat-select formControlName="transactionProcessingStrategyCode" matTooltip="{{ 'tooltips.The repayment strategy' | translate}}" [disabled]="repaymentStrategyDisabled">
         <mat-option *ngFor="let transactionProcessingStrategy of transactionProcessingStrategyOptions" [value]="transactionProcessingStrategy.code">
-          {{ transactionProcessingStrategy.name | translateCatalog }}
+          {{ transactionProcessingStrategy.name | translateKey:'catalogs' }}
         </mat-option>
       </mat-select>
       <mat-error *ngIf="loansAccountTermsForm.controls.transactionProcessingStrategyCode.hasError('required')">
@@ -226,7 +226,7 @@ <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.Interest Calculations" | trans
       <mat-select formControlName="interestCalculationPeriodType" matTooltip="{{ 'tooltips.Daily - Will Calculate the interest' | translate}}">
         <mat-option *ngFor="let interestCalculationPeriodType of interestCalculationPeriodTypeData"
           [value]="interestCalculationPeriodType.id">
-          {{ interestCalculationPeriodType.value | translateCatalog }}
+          {{ interestCalculationPeriodType.value | translateKey:'catalogs' }}
         </mat-option>
       </mat-select>
     </mat-form-field>
@@ -299,7 +299,7 @@ <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.Moratorium" | translate}} <i c
 
     <div fxFlexFill *ngIf="loansAccountTermsData?.isInterestRecalculationEnabled">
       <span fxFlex="40%">{{"labels.inputs.Days in year" | translate}}</span>
-      <span fxFlex="60%">{{ loansAccountTermsData.daysInYearType.value | translateCatalog }}</span>
+      <span fxFlex="60%">{{ loansAccountTermsData.daysInYearType.value | translateKey:'catalogs' }}</span>
     </div>
 
     <ng-container *ngIf="loansAccountTermsData?.isInterestRecalculationEnabled">
@@ -311,7 +311,7 @@ <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.Moratorium" | translate}} <i c
 
       <div fxFlexFill *ngIf="loansAccountTermsData?.isInterestRecalculationEnabled">
         <span fxFlex="40%">{{"labels.inputs.Days in month" | translate}}</span>
-        <span fxFlex="60%">{{ loansAccountTermsData.daysInMonthType.value | translateCatalog }}</span>
+        <span fxFlex="60%">{{ loansAccountTermsData.daysInMonthType.value | translateKey:'catalogs' }}</span>
       </div>
 
     </ng-container>
@@ -320,7 +320,7 @@ <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.Moratorium" | translate}} <i c
 
       <div fxFlexFill>
         <span fxFlex="40%">{{"labels.inputs.Interest recalculation compounding on" | translate}}</span>
-        <span fxFlex="60%">{{ loansAccountTermsData.interestRecalculationData.interestRecalculationCompoundingType.value | translateCatalog }}</span>
+        <span fxFlex="60%">{{ loansAccountTermsData.interestRecalculationData.interestRecalculationCompoundingType.value | translateKey:'catalogs' }}</span>
       </div>
 
       <div fxFlexFill>

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

@@ -5,26 +5,26 @@ <h3> {{"labels.heading.Loan Details" | translate}} </h3>
 
         <div fxFlexFill>
             <span fxFlex="50%">{{"labels.inputs.Repayment Strategy" | translate}}</span>
-            <span fxFlex="50%">{{ loanDetails.transactionProcessingStrategyName | translateCatalog }}</span>
+            <span fxFlex="50%">{{ loanDetails.transactionProcessingStrategyName | translateKey:'catalogs' }}</span>
         </div>
 
         <div fxFlexFill>
             <span fxFlex="50%">{{"labels.inputs.Repayments" | translate}}</span>
-            <span fxFlex="50%">{{loanDetails.numberOfRepayments}} every {{loanDetails.repaymentEvery}}&nbsp;{{loanDetails.repaymentFrequencyType.value | translateCatalog }}
+            <span fxFlex="50%">{{loanDetails.numberOfRepayments}} every {{loanDetails.repaymentEvery}}&nbsp;{{loanDetails.repaymentFrequencyType.value | translateKey:'catalogs' }}
             <span *ngIf="loanDetails.repaymentFrequencyType?.id == 2 && loanDetails.repaymentFrequencyNthDayType?.id != 0 && loanDetails.repaymentFrequencyDayOfWeekType?.id != 0" class="m-l-10">
-              <span class="m-l-10">{{"labels.commons.on" | translate}}</span>{{loanDetails.repaymentFrequencyNthDayType?.value}}&nbsp;{{loanDetails.repaymentFrequencyDayOfWeekType?.value | translateCatalog }}
+              <span class="m-l-10">{{"labels.commons.on" | translate}}</span>{{loanDetails.repaymentFrequencyNthDayType?.value}}&nbsp;{{loanDetails.repaymentFrequencyDayOfWeekType?.value | translateKey:'catalogs' }}
             </span>
             </span>
         </div>
 
         <div fxFlexFill *ngIf="loanDetails.fixedLength">
             <span fxFlex="50%"> {{"labels.inputs.Fixed Length" | translate}} </span>
-            <span fxFlex="50%"> {{loanDetails.fixedLength}} {{loanDetails.repaymentFrequencyType.value | translateCatalog }}</span>
+            <span fxFlex="50%"> {{loanDetails.fixedLength}} {{loanDetails.repaymentFrequencyType.value | translateKey:'catalogs' }}</span>
         </div>
 
         <div fxFlexFill>
             <span fxFlex="50%"> {{"labels.inputs.Amortization" | translate}} </span>
-            <span fxFlex="50%"> {{loanDetails.amortizationType.value | translateCatalog }} </span>
+            <span fxFlex="50%"> {{loanDetails.amortizationType.value | translateKey:'catalogs' }} </span>
         </div>
 
         <div fxFlexFill *ngIf="loanDetails.fixedPrincipalPercentagePerInstallment">
@@ -39,7 +39,7 @@ <h3> {{"labels.heading.Loan Details" | translate}} </h3>
 
         <div fxFlexFill>
             <span fxFlex="50%"> {{"labels.inputs.Interest" | translate}} </span>
-            <span fxFlex="50%"> {{loanDetails.annualInterestRate | formatNumber}} % {{"labels.text.per annum" | translate}} ({{loanDetails.interestRatePerPeriod}} %&nbsp; {{loanDetails.interestRateFrequencyType.value | translateCatalog }}) </span>
+            <span fxFlex="50%"> {{loanDetails.annualInterestRate | formatNumber}} % {{"labels.text.per annum" | translate}} ({{loanDetails.interestRatePerPeriod}} %&nbsp; {{loanDetails.interestRateFrequencyType.value | translateKey:'catalogs' }}) </span>
         </div>
 
         <div fxFlexFill>
@@ -80,7 +80,7 @@ <h3> {{"labels.heading.Loan Details" | translate}} </h3>
 
         <div fxFlexFill>
             <span fxFlex="50%"> {{"labels.inputs.Interest Calculation Period" | translate}}</span>
-            <span fxFlex="50%"> {{loanDetails.interestCalculationPeriodType.value | translateCatalog }} </span>
+            <span fxFlex="50%"> {{loanDetails.interestCalculationPeriodType.value | translateKey:'catalogs' }} </span>
         </div>
 
         <div fxFlexFill>
@@ -135,22 +135,22 @@ <h3> {{"labels.heading.Loan Details" | translate}} </h3>
 
         <div fxFlexFill>
             <span fxFlex="50%"> {{"labels.inputs.Days in year" | translate}}</span>
-            <span fxFlex="50%"> {{loanDetails.daysInYearType.value | translateCatalog }} </span>
+            <span fxFlex="50%"> {{loanDetails.daysInYearType.value | translateKey:'catalogs' }} </span>
         </div>
 
         <div fxFlexFill>
             <span fxFlex="50%"> {{"labels.inputs.Days in month" | translate}}</span>
-            <span fxFlex="50%"> {{loanDetails.daysInMonthType.value | translateCatalog }} </span>
+            <span fxFlex="50%"> {{loanDetails.daysInMonthType.value | translateKey:'catalogs' }} </span>
         </div>
 
         <div fxFlexFill *ngIf="loanDetails.isInterestRecalculationEnabled">
             <span fxFlex="50%"> {{"labels.inputs.Interest recalculation compounding on" | translate}}</span>
-            <span fxFlex="50%"> {{loanDetails.interestRecalculationData.interestRecalculationCompoundingType.value | translateCatalog }} </span>
+            <span fxFlex="50%"> {{loanDetails.interestRecalculationData.interestRecalculationCompoundingType.value | translateKey:'catalogs' }} </span>
         </div>
 
         <div fxFlexFill *ngIf="loanDetails.isInterestRecalculationEnabled">
             <span fxFlex="50%"> {{"labels.inputs.Advance payments adjustment type" | translate}}</span>
-            <span fxFlex="50%"> {{loanDetails.interestRecalculationData.rescheduleStrategyType.value | translateCatalog }} </span>
+            <span fxFlex="50%"> {{loanDetails.interestRecalculationData.rescheduleStrategyType.value | translateKey:'catalogs' }} </span>
         </div>
 
         <div fxFlexFill *ngIf="loanDetails.isInterestRecalculationEnabled">

src/app/pipes/pipes.module.ts

@@ -1,25 +1,25 @@
-import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { StatusLookupPipe } from './status-lookup.pipe';
+import { NgModule } from '@angular/core';
 import { AccountsFilterPipe } from './accounts-filter.pipe';
 import { ChargesFilterPipe } from './charges-filter.pipe';
 import { ChargesPenaltyFilterPipe } from './charges-penalty-filter.pipe';
-import { FindPipe } from './find.pipe';
-import { UrlToStringPipe } from './url-to-string.pipe';
 import { DateFormatPipe } from './date-format.pipe';
 import { DatetimeFormatPipe } from './datetime-format.pipe';
 import { ExternalIdentifierPipe } from './external-identifier.pipe';
+import { FindPipe } from './find.pipe';
 import { FormatNumberPipe } from './format-number.pipe';
-import { YesnoPipe } from './yesno.pipe';
 import { PrettyPrintPipe } from './pretty-print.pipe';
-import { TranslateCatalogPipe } from './translate-catalog.pipe';
+import { StatusLookupPipe } from './status-lookup.pipe';
+import { TranslatePipe } from './translate.pipe';
 import { TruncateTextPipe } from './truncate-text.pipe';
+import { UrlToStringPipe } from './url-to-string.pipe';
+import { YesnoPipe } from './yesno.pipe';
 
 @NgModule({
   imports: [
     CommonModule
   ],
-  declarations: [StatusLookupPipe,
+  declarations: [	StatusLookupPipe,
   AccountsFilterPipe,
   ChargesFilterPipe,
   ChargesPenaltyFilterPipe,
@@ -31,8 +31,9 @@ import { TruncateTextPipe } from './truncate-text.pipe';
   FormatNumberPipe,
   YesnoPipe,
   PrettyPrintPipe,
-  TranslateCatalogPipe,
-  TruncateTextPipe],
+  TruncateTextPipe,
+      TranslatePipe
+   ],
   providers: [StatusLookupPipe,
   AccountsFilterPipe,
   ChargesFilterPipe,
@@ -45,7 +46,7 @@ import { TruncateTextPipe } from './truncate-text.pipe';
   FormatNumberPipe,
   YesnoPipe,
   PrettyPrintPipe,
-  TranslateCatalogPipe,
+  TranslatePipe,
   TruncateTextPipe],
   exports: [StatusLookupPipe,
   AccountsFilterPipe,
@@ -59,7 +60,7 @@ import { TruncateTextPipe } from './truncate-text.pipe';
   FormatNumberPipe,
   YesnoPipe,
   PrettyPrintPipe,
-  TranslateCatalogPipe,
+  TranslatePipe,
   TruncateTextPipe]
 })
 export class PipesModule { }

src/app/pipes/translate.pipe.spec.ts

@@ -0,0 +1,11 @@
+/* tslint:disable:no-unused-variable */
+
+import { TestBed, async } from '@angular/core/testing';
+import { TranslatePipe } from './translate.pipe';
+
+describe('Pipe: Translatee', () => {
+  it('create an instance', () => {
+    let pipe = new TranslatePipe();
+    expect(pipe).toBeTruthy();
+  });
+});

src/app/pipes/translate.pipe.ts

@@ -0,0 +1,16 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+
+@Pipe({
+  name: 'translateKey'
+})
+export class TranslatePipe implements PipeTransform {
+
+  constructor(private translateService: TranslateService) { }
+
+  transform(attributeValue: any, group: string, prefix: string = 'labels'): string {
+    const translationKey = `${prefix}.${group}.${attributeValue}`;
+    return this.translateService.instant(translationKey);
+  }
+
+}