Accounting translate module (#1799)

* feat:Accounting Translate Module

* feat:Accounting Translate Module Updated Chart Account

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

@@ -1,7 +1,7 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
   <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_ACCOUNTINGRULE'">
     <fa-icon icon="plus" class="m-r-10"></fa-icon>
-    Add Rule
+    {{"labels.buttons.Add Rule" |translate}}
   </button>
 </div>
 
@@ -19,32 +19,32 @@
     <table mat-table [dataSource]="dataSource" matSort>
 
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.name" |translate}} </th>
         <td mat-cell *matCellDef="let accountingRule"> {{ accountingRule.name }} </td>
       </ng-container>
 
       <ng-container matColumnDef="officeName">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Office </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Office" |translate}} </th>
         <td mat-cell *matCellDef="let accountingRule"> {{ accountingRule.officeName }} </td>
       </ng-container>
 
       <ng-container matColumnDef="debitTags">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Debit Tags </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Debit Tags" |translate}} </th>
         <td mat-cell *matCellDef="let accountingRule"> {{ accountingRule.debitTags }} </td>
       </ng-container>
 
       <ng-container matColumnDef="debitAccount">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Debit Account </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Debit Account" |translate}} </th>
         <td mat-cell *matCellDef="let accountingRule"> {{ accountingRule.debitAccounts ? accountingRule.debitAccounts[0].name : '' }} </td>
       </ng-container>
 
       <ng-container matColumnDef="creditTags">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Credit Tags </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Credit Tags" |translate}} </th>
         <td mat-cell *matCellDef="let accountingRule"> {{ accountingRule.creditTags }} </td>
       </ng-container>
 
       <ng-container matColumnDef="creditAccount">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Credit Account </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Credit Account" |translate}} </th>
         <td mat-cell *matCellDef="let accountingRule"> {{ accountingRule.creditAccounts ? accountingRule.creditAccounts[0].name : '' }} </td>
       </ng-container>
 

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

@@ -9,35 +9,35 @@
         <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Accounting Rule Name</mat-label>
+            <mat-label>{{"labels.inputs.Accounting Rule Name" |translate}}</mat-label>
             <input matInput required formControlName="name">
             <mat-error *ngIf="accountingRuleForm.controls.name.hasError('required')">
-              Accounting Rule Name is <strong>required</strong>
+              {{"labels.inputs.Accounting Rule Name" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Office</mat-label>
+            <mat-label>{{"labels.inputs.Office" |translate}}</mat-label>
             <mat-select required formControlName="officeId">
               <mat-option *ngFor="let office of officeData" [value]="office.id">
                 {{ office.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="accountingRuleForm.controls.officeId.hasError('required')">
-              Office is <strong>required</strong>
+              {{"labels.inputs.Office" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <div fxFlex="48%" fxLayout="row" fxLayout.lt-md="column" class="rule-wrapper">
-            <mat-label fxFlex="50%">Affected GL Entry (Debit) Rule Type *</mat-label>
+            <mat-label fxFlex="50%">{{"labels.inputs.Affected GL Entry (Debit) Rule Type" |translate}} *</mat-label>
             <mat-radio-group fxFlex="50%" fxLayout="row" fxLayoutGap="5%" formControlName="debitRuleType">
-              <mat-radio-button value="fixedAccount">Fixed Account</mat-radio-button>
+              <mat-radio-button value="fixedAccount">{{"labels.inputs.Fixed Account" |translate}}</mat-radio-button>
-              <mat-radio-button value="listOfAccounts">List of Accounts</mat-radio-button>
+              <mat-radio-button value="listOfAccounts">{{"labels.inputs.List of Accounts"|translate}}</mat-radio-button>
             </mat-radio-group>
           </div>
 
           <mat-form-field fxFlex="48%" *ngIf="accountingRuleForm.controls.debitRuleType.value === 'fixedAccount'">
-            <mat-label>Account to Debit</mat-label>
+            <mat-label>{{"labels.inputs.Account to Debit"|translate}}</mat-label>
             <mat-select formControlName="accountToDebit">
               <mat-option *ngFor="let glAccount of glAccountData" [value]="glAccount.id">
                 {{ glAccount.name }}
@@ -47,7 +47,7 @@
 
           <div fxFlex="48%" fxLayout="row" fxLayoutGap="2%" fxLayout.lt-md="column" *ngIf="accountingRuleForm.controls.debitRuleType.value === 'listOfAccounts'">
             <mat-form-field fxFlex="50%">
-              <mat-label>Debit Tags</mat-label>
+              <mat-label>{{"labels.inputs.Debit Tags" |translate}}</mat-label>
               <mat-select formControlName="debitTags" multiple>
                 <mat-option *ngFor="let debitTag of debitTagData" [value]="debitTag.id">
                   {{ debitTag.name }}
@@ -57,21 +57,21 @@
 
             <div fxFlex="50%" ngClass.gt-md="entries-wrapper">
               <mat-checkbox labelPosition="before" formControlName="allowMultipleDebitEntries" class="entries">
-                Multiple Debit Entries Allowed
+                {{"labels.inputs.Multiple Debit Entries Allowed" |translate}}
               </mat-checkbox>
             </div>
           </div>
 
           <div fxFlex="48%" fxLayout="row" fxLayout.lt-md="column" class="rule-wrapper">
-            <mat-label fxFlex="50%">Affected GL Entry (Credit) Rule Type *</mat-label>
+            <mat-label fxFlex="50%">{{"labels.inputs.Affected GL Entry (Credit) Rule Type" |translate}} *</mat-label>
             <mat-radio-group fxFlex="50%" fxLayout="row" fxLayoutGap="5%" formControlName="creditRuleType">
-              <mat-radio-button value="fixedAccount">Fixed Account</mat-radio-button>
+              <mat-radio-button value="fixedAccount">{{"labels.inputs.Fixed Account" |translate}}</mat-radio-button>
-              <mat-radio-button value="listOfAccounts">List of Accounts</mat-radio-button>
+              <mat-radio-button value="listOfAccounts">{{"labels.inputs.List of Accounts"|translate}}</mat-radio-button>
             </mat-radio-group>
           </div>
 
           <mat-form-field fxFlex="48%" *ngIf="accountingRuleForm.controls.creditRuleType.value === 'fixedAccount'">
-            <mat-label>Account to Credit</mat-label>
+            <mat-label>{{"labels.inputs.Account to Credit" |translate}}</mat-label>
             <mat-select formControlName="accountToCredit">
               <mat-option *ngFor="let glAccount of glAccountData" [value]="glAccount.id">
                 {{ glAccount.name }}
@@ -81,7 +81,7 @@
 
           <div fxFlex="48%" fxLayout="row" fxLayoutGap="2%" fxLayout.lt-md="column" *ngIf="accountingRuleForm.controls.creditRuleType.value === 'listOfAccounts'">
             <mat-form-field fxFlex="50%">
-              <mat-label>Credit Tags</mat-label>
+              <mat-label>{{"labels.inputs.Credit Tags" |translate}}</mat-label>
               <mat-select formControlName="creditTags" multiple>
                 <mat-option *ngFor="let creditTag of creditTagData" [value]="creditTag.id">
                   {{ creditTag.name }}
@@ -91,13 +91,13 @@
 
             <div fxFlex="50%" ngClass.gt-md="entries-wrapper">
               <mat-checkbox labelPosition="before" formControlName="allowMultipleCreditEntries" class="entries">
-                Multiple Credit Entries Allowed
+                {{"labels.inputs.Multiple Credit Entries Allowed" |translate}}
               </mat-checkbox>
             </div>
           </div>
 
           <mat-form-field fxFlex="98%">
-            <mat-label>Description</mat-label>
+            <mat-label>{{"labels.inputs.Description" |translate}}</mat-label>
             <textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
 
@@ -106,8 +106,8 @@
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{ "labels.buttons.Cancel" | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!accountingRuleForm.valid" *mifosxHasPermission="'CREATE_ACCOUNTINGRULE'">Submit</button>
+        <button mat-raised-button color="primary" [disabled]="!accountingRuleForm.valid" *mifosxHasPermission="'CREATE_ACCOUNTINGRULE'">{{"labels.buttons.Submit" | translate}}</button>
       </mat-card-actions>
 
     </form>

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

@@ -9,35 +9,35 @@
         <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Accounting Rule Name</mat-label>
+            <mat-label>{{"labels.inputs.Accounting Rule Name" |translate}}</mat-label>
             <input matInput required formControlName="name">
             <mat-error *ngIf="accountingRuleForm.controls.name.hasError('required')">
-              Accounting Rule Name is <strong>required</strong>
+              {{"labels.inputs.Accounting Rule Name" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Office</mat-label>
+            <mat-label>{{"labels.inputs.Office" |translate}}</mat-label>
             <mat-select required formControlName="officeId">
               <mat-option *ngFor="let office of officeData" [value]="office.id">
                 {{ office.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="accountingRuleForm.controls.officeId.hasError('required')">
-              Office is <strong>required</strong>
+              {{"labels.inputs.Office" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <div fxFlex="48%" fxLayout="row" fxLayout.lt-md="column" class="rule-wrapper">
-            <mat-label fxFlex="50%">Affected GL Entry (Debit) Rule Type *</mat-label>
+            <mat-label fxFlex="50%">{{"labels.inputs.Affected GL Entry (Debit) Rule Type" |translate}} *</mat-label>
             <mat-radio-group fxFlex="50%" fxLayout="row" fxLayoutGap="5%" formControlName="debitRuleType">
-              <mat-radio-button value="fixedAccount">Fixed Account</mat-radio-button>
+              <mat-radio-button value="fixedAccount">{{"labels.inputs.Fixed Account" |translate}}</mat-radio-button>
-              <mat-radio-button value="listOfAccounts">List of Accounts</mat-radio-button>
+              <mat-radio-button value="listOfAccounts">{{"labels.inputs.List of Accounts"|translate}}</mat-radio-button>
             </mat-radio-group>
           </div>
 
           <mat-form-field fxFlex="48%" *ngIf="accountingRuleForm.controls.debitRuleType.value === 'fixedAccount'">
-            <mat-label>Account to Debit</mat-label>
+            <mat-label>{{"labels.inputs.Account to Debit"|translate}}</mat-label>
             <mat-select formControlName="accountToDebit">
               <mat-option *ngFor="let glAccount of glAccountData" [value]="glAccount.id">
                 {{ glAccount.name }}
@@ -47,7 +47,7 @@
 
           <div fxFlex="48%" fxLayout="row" fxLayoutGap="2%" fxLayout.lt-md="column" *ngIf="accountingRuleForm.controls.debitRuleType.value === 'listOfAccounts'">
             <mat-form-field fxFlex="50%">
-              <mat-label>Debit Tags</mat-label>
+              <mat-label>{{"labels.inputs.Debit Tags" |translate}}</mat-label>
               <mat-select formControlName="debitTags" multiple>
                 <mat-option *ngFor="let debitTag of debitTagData" [value]="debitTag.id">
                   {{ debitTag.name }}
@@ -57,21 +57,21 @@
 
             <div fxFlex="50%" ngClass.gt-md="entries-wrapper">
               <mat-checkbox labelPosition="before" formControlName="allowMultipleDebitEntries" class="entries">
-                Multiple Debit Entries Allowed
+                {{"labels.inputs.Multiple Debit Entries Allowed" |translate}}
               </mat-checkbox>
             </div>
           </div>
 
           <div fxFlex="48%" fxLayout="row" fxLayout.lt-md="column" class="rule-wrapper">
-            <mat-label fxFlex="50%">Affected GL Entry (Credit) Rule Type *</mat-label>
+            <mat-label fxFlex="50%">{{"labels.inputs.Affected GL Entry (Credit) Rule Type" |translate}} *</mat-label>
             <mat-radio-group fxFlex="50%" fxLayout="row" fxLayoutGap="5%" formControlName="creditRuleType">
-              <mat-radio-button value="fixedAccount">Fixed Account</mat-radio-button>
+              <mat-radio-button value="fixedAccount">{{"labels.inputs.Fixed Account" |translate}}</mat-radio-button>
-              <mat-radio-button value="listOfAccounts">List of Accounts</mat-radio-button>
+              <mat-radio-button value="listOfAccounts">{{"labels.inputs.List of Accounts"|translate}}</mat-radio-button>
             </mat-radio-group>
           </div>
 
           <mat-form-field fxFlex="48%" *ngIf="accountingRuleForm.controls.creditRuleType.value === 'fixedAccount'">
-            <mat-label>Account to Credit</mat-label>
+            <mat-label>{{"labels.inputs.Account to Credit" |translate}}</mat-label>
             <mat-select formControlName="accountToCredit">
               <mat-option *ngFor="let glAccount of glAccountData" [value]="glAccount.id">
                 {{ glAccount.name }}
@@ -81,7 +81,7 @@
 
           <div fxFlex="48%" fxLayout="row" fxLayoutGap="2%" fxLayout.lt-md="column" *ngIf="accountingRuleForm.controls.creditRuleType.value === 'listOfAccounts'">
             <mat-form-field fxFlex="50%">
-              <mat-label>Credit Tags</mat-label>
+              <mat-label>{{"labels.inputs.Credit Tags" |translate}}</mat-label>
               <mat-select formControlName="creditTags" multiple>
                 <mat-option *ngFor="let creditTag of creditTagData" [value]="creditTag.id">
                   {{ creditTag.name }}
@@ -91,13 +91,13 @@
 
             <div fxFlex="50%" ngClass.gt-md="entries-wrapper">
               <mat-checkbox labelPosition="before" formControlName="allowMultipleCreditEntries" class="entries">
-                Multiple Credit Entries Allowed
+                {{"labels.inputs.Multiple Credit Entries Allowed" |translate}}
               </mat-checkbox>
             </div>
           </div>
 
           <mat-form-field fxFlex="98%">
-            <mat-label>Description</mat-label>
+            <mat-label>{{"labels.inputs.Description" |translate}}</mat-label>
             <textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
 
@@ -106,8 +106,8 @@
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{ "labels.buttons.Cancel" | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="accountingRuleForm.pristine || !accountingRuleForm.valid" *mifosxHasPermission="'UPDATE_ACCOUNTINGRULE'">Submit</button>
+        <button mat-raised-button color="primary" [disabled]="accountingRuleForm.pristine || !accountingRuleForm.valid" *mifosxHasPermission="'UPDATE_ACCOUNTINGRULE'">{{"labels.buttons.Submit" | translate}}</button>
       </mat-card-actions>
 
     </form>

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

@@ -1,11 +1,11 @@
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
   <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_ACCOUNTINGRULE'">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    Edit
+    {{"labels.buttons.Edit"|translate}}
   </button>
   <button mat-raised-button color="warn" (click)="deleteAccountingRule()" *mifosxHasPermission="'DELETE_ACCOUNTINGRULE'">
     <fa-icon icon="trash" class="m-r-10"></fa-icon>
-    Delete
+    {{"labels.buttons.Delete" |translate}}
   </button>
 </div>
 
@@ -20,7 +20,7 @@
         <div fxLayout="row wrap" class="content">
 
           <div fxFlex="50%" class="header">
-            Office
+            {{"labels.inputs.Office" |translate}}
           </div>
 
           <div fxFlex="50%">
@@ -28,7 +28,7 @@
           </div>
 
           <div fxFlex="50%" class="header" *ngIf="accountingRule.description">
-            Description
+            {{"labels.inputs.Description" |translate}}
           </div>
 
           <div fxFlex="50%" *ngIf="accountingRule.description">
@@ -36,7 +36,7 @@
           </div>
 
           <div fxFlex="50%" class="header">
-            Multiple Debit Entries Allowed
+            {{"labels.inputs.Multiple Debit Entries Allowed" |translate}}
           </div>
 
           <div fxFlex="50%">
@@ -44,7 +44,7 @@
           </div>
 
           <div fxFlex="50%" class="header">
-            Multiple Credit Entries Allowed
+            {{"labels.inputs.Multiple Credit Entries Allowed" |translate}}
           </div>
 
           <div fxFlex="50%">
@@ -69,7 +69,7 @@
 
           <div fxFlex="50%" fxLayout="column" *ngIf="accountingRule.debitTags">
             <div class="header">
-              Debit Tags
+              {{"labels.inputs.Debit Tags" |translate}}
             </div>
             <div *ngFor="let debitTag of accountingRule.debitTags">
               {{ debitTag.tag.name }}
@@ -78,7 +78,7 @@
 
           <div fxFlex="50%" fxLayout="column" *ngIf="accountingRule.debitAccounts">
             <div class="header">
-              Debit Account Name
+              {{"labels.inputs.Debit Account Name" |translate}}
             </div>
             <div *ngFor="let debitAccount of accountingRule.debitAccounts">
               {{ debitAccount.name + ' (' + debitAccount.glCode + ')' }}
@@ -87,7 +87,7 @@
 
           <div fxFlex="50%" fxLayout="column" *ngIf="accountingRule.creditTags">
             <div class="header">
-              Credit Tags
+              {{"labels.inputs.Credit Tags" |translate}}
             </div>
             <div *ngFor="let creditTag of accountingRule.creditTags">
               {{ creditTag.tag.name }}
@@ -96,7 +96,7 @@
 
           <div fxFlex="50%" fxLayout="column" *ngIf="accountingRule.creditAccounts">
             <div class="header">
-              Credit Account Name
+              {{"labels.inputs.Credit Account Name" |translate}}
             </div>
             <div *ngFor="let creditAccount of accountingRule.creditAccounts">
               {{ creditAccount.name + ' (' + creditAccount.glCode + ')' }}

src/app/accounting/accounting.component.html

@@ -12,8 +12,8 @@
             <mat-icon matListIcon>
               <fa-icon icon="sync" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>Frequent Postings</h4>
+            <h4 matLine>{{"labels.heading.Frequent Postings" |translate}}</h4>
-            <p matLine>These are predefined postings</p>
+            <p matLine>{{"labels.text.These are predefined postings" |translate}}</p>
           </mat-list-item>
 
           <div #createJournalEntries>
@@ -21,8 +21,8 @@
               <mat-icon matListIcon>
                 <fa-icon icon="plus" size="sm"></fa-icon>
               </mat-icon>
-              <h4 matLine>Create Journal Entries</h4>
+              <h4 matLine>{{"labels.heading.Create Journal Entries" |translate}}</h4>
-              <p matLine>Manual journal entry transactions recorded in a journal</p>
+              <p matLine>{{"labels.text.Manual journal entry transactions recorded in a journal" |translate}}</p>
             </mat-list-item>
           </div>
 
@@ -30,8 +30,8 @@
             <mat-icon matListIcon>
               <fa-icon icon="search" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>Search Journal Entries</h4>
+            <h4 matLine>{{"labels.heading.Search Journal Entries" |translate}}</h4>
-            <p matLine>Advanced search option for journal entries</p>
+            <p matLine>{{"labels.text.Advanced search option for journal entries" |translate}}</p>
           </mat-list-item>
 
           <div #accountsLinked>
@@ -39,8 +39,8 @@
               <mat-icon matListIcon>
                 <fa-icon icon="link" size="sm"></fa-icon>
               </mat-icon>
-              <h4 matLine>Accounts Linked to Financial Activities</h4>
+              <h4 matLine>{{"labels.heading.Accounts Linked to Financial Activities" |translate}}</h4>
-              <p matLine>List of Financial Activities and GL Account Mappings</p>
+              <p matLine>{{"labels.text.List of Financial Activities and GL Account Mappings" |translate}}</p>
             </mat-list-item>
           </div>
 
@@ -49,8 +49,8 @@
               <mat-icon matListIcon>
                 <fa-icon icon="hand-holding-usd" size="sm"></fa-icon>
               </mat-icon>
-              <h4 matLine>Migrate Opening Balances (Office-wise)</h4>
+              <h4 matLine>{{"labels.heading.Migrate Opening Balances (Office-wise)" |translate}}</h4>
-              <p matLine>Set or update office-level opening balances for GL accounts</p>
+              <p matLine>{{"labels.text.Set or update office-level opening balances for GL accounts" |translate}}</p>
             </mat-list-item>
           </div>
 
@@ -67,8 +67,8 @@
               <mat-icon matListIcon>
                 <fa-icon icon="sitemap" size="sm"></fa-icon>
               </mat-icon>
-              <h4 matLine>Chart of Accounts</h4>
+              <h4 matLine>{{"labels.heading.Chart of Accounts" |translate}}</h4>
-              <p matLine>List of accounts used by the organization</p>
+              <p matLine>{{"labels.text.List of accounts used by the organization" |translate}}</p>
             </mat-list-item>
           </div>
 
@@ -77,8 +77,8 @@
               <mat-icon matListIcon>
                 <fa-icon icon="archive" size="sm"></fa-icon>
               </mat-icon>
-              <h4 matLine>Closing Entries</h4>
+              <h4 matLine>{{"labels.heading.Closing Entries" |translate}}</h4>
-              <p matLine>Journal entries made at the end of accounting period</p>
+              <p matLine>{{"labels.text.Journal entries made at the end of accounting period" |translate}}</p>
             </mat-list-item>
           </div>
 
@@ -86,24 +86,24 @@
             <mat-icon matListIcon>
               <fa-icon icon="list" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>Accounting Rules</h4>
+            <h4 matLine>{{"labels.heading.Accounting Rules" |translate}}</h4>
-            <p matLine>List of all accounting rules</p>
+            <p matLine>{{"labels.text.List of all accounting rules" |translate}}</p>
           </mat-list-item>
 
           <mat-list-item *mifosxHasPermission="'EXECUTE_PERIODICACCRUALACCOUNTING'" [routerLink]="['periodic-accruals']">
             <mat-icon matListIcon>
               <fa-icon icon="calendar" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>Accruals</h4>
+            <h4 matLine>{{"labels.heading.Accruals" |translate}}</h4>
-            <p matLine>Accrues income, expenses and liabilities as on the provided date</p>
+            <p matLine>{{"labels.text.Accrues income, expenses and liabilities" |translate}}</p>
           </mat-list-item>
 
           <mat-list-item *mifosxHasPermission="'VIEW_PROVISIONING_ENTRIES'" [routerLink]="['provisioning-entries']">
             <mat-icon matListIcon>
               <fa-icon icon="cogs" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>Provisioning Entries</h4>
+            <h4 matLine>{{"labels.heading.Provisioning Entries" |translate}}</h4>
-            <p matLine>Create provisioning entries</p>
+            <p matLine>{{"labels.text.Create provisioning entries" |translate}}</p>
           </mat-list-item>
 
         </mat-nav-list>
@@ -117,51 +117,51 @@
 </div>
 
 <ng-template #templateChartofAccounts let-popover="popover">
-  <h2>Chart of Accounts</h2>
+  <h2>{{"labels.heading.Chart of Accounts" |translate}}</h2>
-  <p class="mw300">The Chart of Accounts - General Ledger Setup allows you to organize your different accounts within Mifos X.</p>
+  <p class="mw300">{{"labels.text.The Chart of Accounts - General Ledger Setup" |translate}}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" |translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStepChartofAccounts()">Back</button>
+    <button mat-raised-button color="primary" (click)="popover.close();previousStepChartofAccounts()">{{"labels.buttons.Back" |translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStepChartofAccounts()">Next</button>
+    <button mat-raised-button color="primary" (click)="popover.close();nextStepChartofAccounts()">{{"labels.buttons.Next" |translate}}</button>
   </div>
 </ng-template>
 
 <ng-template #templateAccountsLinked let-popover="popover">
-  <h2>Accounts linked to Financial Activities</h2>
+  <h2>{{"labels.heading.Accounts Linked to Financial Activities" |translate}}</h2>
-  <p class="mw400">Accounts linked to Financial Activities are mapped accounts which are needed to do system generating accounting transaction.</p>
+  <p class="mw400">{{"labels.text.Accounts linked to Financial Activities" |translate}}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" |translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStepAccountsLinked()">Back</button>
+    <button mat-raised-button color="primary" (click)="popover.close();previousStepAccountsLinked()">{{"labels.buttons.Back" |translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStepAccountsLinked()">Next</button>
+    <button mat-raised-button color="primary" (click)="popover.close();nextStepAccountsLinked()">{{"labels.buttons.Next" |translate}}</button>
   </div>
 </ng-template>
 
 <ng-template #templateMigrateOpeningBalances let-popover="popover">
-  <h2>Migrate opening balances (Office-wise)</h2>
+  <h2>{{"labels.heading.Migrate Opening Balances (Office-wise)" |translate}}</h2>
-  <p class="mw400">This makes it easier for an organization wanting to move to Mifos to transfer GL account balances (from their existing accounting application or manual system) to Mifos X Accounting.</p>
+  <p class="mw400">{{"labels.text.GLAccount Balances Application" |translate}}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" |translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStepMigrateOpeningBalances()">Back</button>
+    <button mat-raised-button color="primary" (click)="popover.close();previousStepMigrateOpeningBalances()">{{"labels.buttons.Back" |translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStepMigrateOpeningBalances()">Next</button>
+    <button mat-raised-button color="primary" (click)="popover.close();nextStepMigrateOpeningBalances()">{{"labels.buttons.Next" |translate}}</button>
   </div>
 </ng-template>
 
 <ng-template #templateClosingEntries let-popover="popover">
-  <h2>Closing Entries</h2>
+  <h2>{{"labels.heading.Closing Entries" |translate}}</h2>
-  <p class="mw300">In Mifos X, you can close accounting to journal entries. Closures can be applied to all branches or to each branch separately. It is important for organizations to close accounting periodically to prevent transactions that affect the accounting books.</p>
+  <p class="mw300">{{"labels.text.Accounting to journal entries" |translate}}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" |translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStepClosingEntries()">Back</button>
+    <button mat-raised-button color="primary" (click)="popover.close();previousStepClosingEntries()">{{"labels.buttons.Back" |translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStepClosingEntries()">Next</button>
+    <button mat-raised-button color="primary" (click)="popover.close();nextStepClosingEntries()">{{"labels.buttons.Next" |translate}}</button>
   </div>
 </ng-template>
 
 <ng-template #templateCreateJournalEntries let-popover="popover">
-  <h2>Create Journal Entries</h2>
+  <h2>{{"labels.heading.Create Journal Entries" |translate}}</h2>
-  <p class="mw300">Journal Entries are essentially logs of all the transactions in your organization that have accounting implications.</p>
+  <p class="mw300">{{"labels.text.Journal Entries Transactions" |translate}}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" |translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStepCreateJournalEntries()">Back</button>
+    <button mat-raised-button color="primary" (click)="popover.close();previousStepCreateJournalEntries()">{{"labels.buttons.Back" |translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStepCreateJournalEntries()">Next</button>
+    <button mat-raised-button color="primary" (click)="popover.close();nextStepCreateJournalEntries()">{{"labels.buttons.Next" |translate}}</button>
   </div>
 </ng-template>

src/app/accounting/chart-of-accounts/chart-of-accounts.component.html

@@ -12,7 +12,7 @@
   <div #buttonAddAccount>
     <button mat-raised-button color="primary" [routerLink]="['gl-accounts/create']" *mifosxHasPermission="'CREATE_GLACCOUNT'">
       <fa-icon icon="plus" class="m-r-10"></fa-icon>
-      Add Account
+      {{"labels.buttons.Add Account" |translate}}
     </button>
   </div>
 </div>
@@ -33,22 +33,22 @@
     <table mat-table [dataSource]="tableDataSource" matSort>
 
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Account </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Account" |translate}} </th>
         <td mat-cell *matCellDef="let glAccount"> {{ glAccount.name }} </td>
       </ng-container>
 
       <ng-container matColumnDef="glCode">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> GL Code </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.GL Code" |translate}} </th>
         <td mat-cell *matCellDef="let glAccount"> {{ glAccount.glCode }} </td>
       </ng-container>
 
       <ng-container matColumnDef="glAccountType">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Type </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Type" |translate}} </th>
         <td mat-cell *matCellDef="let glAccount"> {{ glAccount.type.value }} </td>
       </ng-container>
 
       <ng-container matColumnDef="disabled">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Disabled </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Disabled" |translate}} </th>
         <td mat-cell *matCellDef="let glAccount">
           <div [className]="glAccount.disabled === true ? 'disabled' : 'enabled'">
             <fa-icon matTooltip="{{ glAccount.disabled === true ? 'Disabled' : 'Enabled' }}" matTooltipPosition="right" icon="circle" size="lg"></fa-icon>
@@ -57,15 +57,15 @@
       </ng-container>
 
       <ng-container matColumnDef="manualEntriesAllowed">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Manual Entries Allowed </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Manual Entries Allowed" |translate}} </th>
         <td mat-cell *matCellDef="let glAccount">
-          <fa-icon *ngIf="glAccount.manualEntriesAllowed" class="manual-entries-allowed" matTooltip="Allowed" matTooltipPosition="right" icon="check-circle" size="lg"></fa-icon>
+          <fa-icon *ngIf="glAccount.manualEntriesAllowed" class="manual-entries-allowed" matTooltip="{{ 'tooltips.Allowed' | translate }}" matTooltipPosition="right" icon="check-circle" size="lg"></fa-icon>
-          <fa-icon *ngIf="!glAccount.manualEntriesAllowed" class="manual-entries-not-allowed" matTooltip="Not Allowed" matTooltipPosition="right" icon="times-circle" size="lg"></fa-icon>
+          <fa-icon *ngIf="!glAccount.manualEntriesAllowed" class="manual-entries-not-allowed" matTooltip="{{ 'tooltips.' | translate }}" matTooltipPosition="right" icon="times-circle" size="lg"></fa-icon>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="usedAs">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Used as </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Used as" |translate}} </th>
         <td mat-cell *matCellDef="let glAccount"> {{ glAccount.usage.value }} </td>
       </ng-container>
 
@@ -87,10 +87,10 @@
 
   <div class="m-b-20"  fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
     <button mat-raised-button (click)="nestedTreeControl.expandAll()">  <!-- Bug(angular-material): https://github.com/angular/material2/issues/12170 -->
-      Expand All
+      {{"labels.buttons.Expand All" |translate}}
     </button>
     <button mat-raised-button (click)="nestedTreeControl.collapseAll()">
-      Collapse All
+      {{"labels.buttons.Collapse All" |translate}}
     </button>
   </div>
 
@@ -140,7 +140,7 @@
           <div fxLayout="row wrap" class="content">
 
             <div fxFlex="50%" class="header">
-              Account Name
+              {{"labels.inputs.Account Name" |translate}}
             </div>
 
             <div fxFlex="50%">
@@ -148,7 +148,7 @@
             </div>
 
             <div fxFlex="50%" class="header">
-              GL Code
+              {{"labels.inputs.GL Code" |translate}}
             </div>
 
             <div fxFlex="50%">
@@ -156,7 +156,7 @@
             </div>
 
             <div fxFlex="50%" class="header">
-              Account Type
+              {{"labels.inputs.Account Type" |translate}}
             </div>
 
             <div fxFlex="50%">
@@ -164,7 +164,7 @@
             </div>
 
             <div fxFlex="50%" class="header">
-              Account Usage
+              {{"labels.inputs.Account Usage" |translate}}
             </div>
 
             <div fxFlex="50%">
@@ -172,7 +172,7 @@
             </div>
 
             <div fxFlex="50%" class="header">
-              Manual Entries Allowed
+              {{"labels.inputs.Manual Entries Allowed" |translate}}
             </div>
 
             <div fxFlex="50%">
@@ -180,7 +180,7 @@
             </div>
 
             <div fxFlex="50%" class="header">
-              Description
+              {{"labels.inputs.Description" |translate}}
             </div>
 
             <div fxFlex="50%">
@@ -200,39 +200,39 @@
 </div>
 
 <ng-template #templateButtonTreeView let-popover="popover">
-  <h2>Tree View</h2>
+  <h2>{{"labels.heading.Tree View" |translate}}</h2>
-  <p class="mw300">There is an alternative way to view your accounts - using the Tree View.</p>
+  <p class="mw300">{{"labels.text.Alternative way-Tree view" |translate}}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" |translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStep();">Back</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( templateButtonAddAccount, buttonAddAccount, 'bottom', true);">Next</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover( templateButtonAddAccount, buttonAddAccount, 'bottom', true);">{{"labels.buttons.Next" |translate}}</button>
   </div>
 </ng-template>
 
 <ng-template #templateButtonAddAccount let-popover="popover">
-  <h2>Add Account</h2>
+  <h2>{{"labels.heading.Add Account" |translate}}</h2>
-  <p class="mw300">This option allows you to create new GL accounts.</p>
+  <p class="mw300">{{"labels.text.Create New GL Account"|translate}}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" |translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonTreeView, buttonTreeView , 'bottom', true);">Back</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonTreeView, buttonTreeView , 'bottom', true);">{{"labels.buttons.Back" |translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter, filter, 'bottom', true);">Next</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter, filter, 'bottom', true);">{{"labels.buttons.Next" |translate}}</button>
   </div>
 </ng-template>
 
 <ng-template #templateFilter let-popover="popover">
-  <h4>Search bar to filter GL accounts.</h4>
+  <h4>{{"labels.heading.Search bar to filter GL accounts." |translate}}</h4>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" |translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover( templateButtonAddAccount, buttonAddAccount, 'bottom', true);">Back</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover( templateButtonAddAccount, buttonAddAccount, 'bottom', true);">{{"labels.buttons.Back" |translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateAccountsTable, accountsTable, 'top', true);">Next</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateAccountsTable, accountsTable, 'top', true);">{{"labels.buttons.Next" |translate}}</button>
   </div>
 </ng-template>
 
 <ng-template #templateAccountsTable let-popover="popover">
-  <h4 class="mw300">List of chart of all the accounts being used by your organization.</h4>
+  <h4 class="mw300">{{ "labels.heading.List of chart of all the accounts being used by your organization." |translate}}</h4>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" |translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter, filter, 'bottom', true);">Back</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter, filter, 'bottom', true);">{{"labels.buttons.Back" |translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">Next</button>
+    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">{{"labels.buttons.Next" |translate}}</button>
   </div>
 </ng-template>

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

@@ -9,47 +9,47 @@
         <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Account Type</mat-label>
+            <mat-label>{{"labels.inputs.Account Type" |translate}}</mat-label>
             <mat-select required formControlName="type">
               <mat-option *ngFor="let accountType of accountTypeData" [value]="accountType.id">
                 {{ accountType.value }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="glAccountForm.controls.type.hasError('required')">
-              Account Type is <strong>required</strong>
+              {{"labels.inputs.Account Type" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Account Name</mat-label>
+            <mat-label>{{"labels.inputs.Account Name" |translate}}</mat-label>
             <input matInput required formControlName="name">
             <mat-error *ngIf="glAccountForm.controls.name.hasError('required')">
-              Account Name is <strong>required</strong>
+              {{"labels.inputs.Account Name" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Account Usage</mat-label>
+            <mat-label>{{"labels.inputs.Account Usage" |translate}}</mat-label>
             <mat-select required formControlName="usage">
               <mat-option *ngFor="let accountUsage of accountUsageData" [value]="accountUsage.id">
                 {{ accountUsage.value }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="glAccountForm.controls.usage.hasError('required')">
-              Account Usage is <strong>required</strong>
+              {{"labels.inputs.Account Usage" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>GL Code</mat-label>
+            <mat-label>{{"labels.inputs.GL Code" |translate}}</mat-label>
             <input matInput required formControlName="glCode">
             <mat-error *ngIf="glAccountForm.controls.glCode.hasError('required')">
-              GL Code is <strong>required</strong>
+              {{"labels.inputs.GL Code" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Parent</mat-label>
+            <mat-label>{{"labels.inputs.Parent" |translate}}</mat-label>
             <mat-select formControlName="parentId">
               <mat-option *ngFor="let parent of parentData" [value]="parent.id">
                 ({{ parent.glCode }}) {{ parent.name }}
@@ -58,7 +58,7 @@
           </mat-form-field>
 
           <mat-form-field fxFlex="28%">
-            <mat-label>Tag</mat-label>
+            <mat-label>{{"labels.inputs.Tag" |translate}}</mat-label>
             <mat-select formControlName="tagId">
               <mat-option *ngFor="let tag of tagData" [value]="tag.id">
                 {{ tag.name }}
@@ -68,12 +68,12 @@
 
           <div fxFlex="18%" class="manual-entries-allowed-wrapper">
             <mat-checkbox labelPosition="before" required formControlName="manualEntriesAllowed" class="manual-entries-allowed">
-              Manual Entries Allowed
+              {{"labels.inputs.Manual Entries Allowed" |translate}}
             </mat-checkbox>
           </div>
 
           <mat-form-field fxFlex="98%">
-            <mat-label>Description</mat-label>
+            <mat-label>{{"labels.inputs.Description" |translate}}</mat-label>
             <textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
 
@@ -82,8 +82,8 @@
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="[cancelRoute]">Cancel</button>
+        <button type="button" mat-raised-button [routerLink]="[cancelRoute]">{{ "labels.buttons.Cancel" | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!glAccountForm.valid" *mifosxHasPermission="'CREATE_GLACCOUNT'">Submit</button>
+        <button mat-raised-button color="primary" [disabled]="!glAccountForm.valid" *mifosxHasPermission="'CREATE_GLACCOUNT'">{{"labels.buttons.Submit" | translate}}</button>
       </mat-card-actions>
 
     </form>
@@ -93,12 +93,12 @@
 </div>
 
 <ng-template #templateAccountFormRef let-popover="popover">
-  <h2>Create GL account</h2>
+  <h2>{{"labels.heading.Create GL account" |translate}}</h2>
-  <p class="mw400">Click to start filling the details. * mark fields are neccessary. For more details click: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67141745/Chart+of+Accounts+-+General+Ledger+Setup" target="_blank">Chart of Accounts</a></p>
+  <p class="mw400">{{"labels.text.Filling Details" |translate}} <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67141745/Chart+of+Accounts+-+General+Ledger+Setup" target="_blank">{{"labels.inputs.Chart of Accounts" |translate}}</a></p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" |translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close()">Create GL Account</button>
+    <button mat-raised-button color="primary" (click)="popover.close()">{{"labels.buttons.Create GL Account" |translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">Back</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();nextStep()">Next</button>
+    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">{{"labels.buttons.Next" |translate}}</button>
   </div>
 </ng-template>

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

@@ -9,47 +9,47 @@
         <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Account Type</mat-label>
+            <mat-label>{{"labels.inputs.Account Type" |translate}}</mat-label>
             <mat-select required formControlName="type">
               <mat-option *ngFor="let accountType of accountTypeData" [value]="accountType.id">
                 {{ accountType.value }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="glAccountForm.controls.type.hasError('required')">
-              Account Type is <strong>required</strong>
+              {{"labels.inputs.Account Type" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Account Name</mat-label>
+            <mat-label>{{"labels.inputs.Account Name" |translate}}</mat-label>
             <input matInput required formControlName="name">
             <mat-error *ngIf="glAccountForm.controls.name.hasError('required')">
-              Account Name is <strong>required</strong>
+              {{"labels.inputs.Account Name" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Account Usage</mat-label>
+            <mat-label>{{"labels.inputs.Account Usage" |translate}}</mat-label>
             <mat-select required formControlName="usage">
               <mat-option *ngFor="let accountUsage of accountUsageData" [value]="accountUsage.id">
                 {{ accountUsage.value }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="glAccountForm.controls.usage.hasError('required')">
-              Account Usage is <strong>required</strong>
+              {{"labels.inputs.Account Usage" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>GL Code</mat-label>
+            <mat-label>{{"labels.inputs.GL Code" |translate}}</mat-label>
             <input matInput required formControlName="glCode">
             <mat-error *ngIf="glAccountForm.controls.glCode.hasError('required')">
-              GL Code is <strong>required</strong>
+              {{"labels.inputs.GL Code" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Parent</mat-label>
+            <mat-label>{{"labels.inputs.Parent" |translate}}</mat-label>
             <mat-select formControlName="parentId">
               <mat-option *ngFor="let parent of parentData" [value]="parent.id">
                 ({{ parent.glCode }}) {{ parent.name }}
@@ -58,7 +58,7 @@
           </mat-form-field>
 
           <mat-form-field fxFlex="28%">
-            <mat-label>Tag</mat-label>
+            <mat-label>{{"labels.inputs.Tag" |translate}}</mat-label>
             <mat-select formControlName="tagId">
               <mat-option *ngFor="let tag of tagData" [value]="tag.id">
                 {{ tag.name }}
@@ -68,12 +68,12 @@
 
           <div fxFlex="18%" class="manual-entries-allowed-wrapper">
             <mat-checkbox labelPosition="before" required formControlName="manualEntriesAllowed" class="manual-entries-allowed">
-              Manual Entries Allowed
+              {{"labels.inputs.Manual Entries Allowed" |translate}}
             </mat-checkbox>
           </div>
 
           <mat-form-field fxFlex="98%">
-            <mat-label>Description</mat-label>
+            <mat-label>{{"labels.inputs.Description" |translate}}</mat-label>
             <textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
 
@@ -82,8 +82,8 @@
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">{{ "labels.buttons.Cancel" | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="glAccountForm.pristine" *mifosxHasPermission="'UPDATE_GLACCOUNT'">Submit</button>
+        <button mat-raised-button color="primary" [disabled]="glAccountForm.pristine" *mifosxHasPermission="'UPDATE_GLACCOUNT'">{{"labels.buttons.Submit" | translate}}</button>
       </mat-card-actions>
 
     </form>

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

@@ -2,30 +2,30 @@
   <span *mifosxHasPermission="'CREATE_GLACCOUNT'">
     <button mat-raised-button color="primary" *ngIf="glAccount.usage.value === 'HEADER'" [routerLink]="['/accounting/chart-of-accounts/gl-accounts/create']" [queryParams]="{ parent: glAccount.id, accountType: glAccount.type.id }">
       <fa-icon icon="plus" class="m-r-10"></fa-icon>
-      Subledger Account
+      {{"labels.buttons.Subledger Account" |translate}}
     </button>
   </span>
   <span *mifosxHasPermission="'UPDATE_GLACCOUNT'">
     <button mat-raised-button color="primary" [routerLink]="['edit']">
       <fa-icon icon="edit" class="m-r-10"></fa-icon>
-      Edit
+      {{"labels.buttons.Edit" |translate}}
     </button>
   </span>
   <span *mifosxHasPermission="'UPDATE_GLACCOUNT'">
     <button mat-raised-button color="warn" *ngIf="!glAccount.disabled" (click)="changeGlAccountState()">
       <fa-icon icon="lock" class="m-r-10"></fa-icon>
-      Disable
+      {{"labels.buttons.Disable" |translate}}
     </button>
   </span>
   <span *mifosxHasPermission="'UPDATE_GLACCOUNT'">
     <button mat-raised-button color="accent" *ngIf="glAccount.disabled" (click)="changeGlAccountState()">
       <fa-icon icon="lock-open" class="m-r-10"></fa-icon>
-      Enable
+      {{"labels.buttons.Enable" |translate}}
     </button>
   </span>
   <button mat-raised-button color="warn" (click)="deleteGlAccount()" *mifosxHasPermission="'DELETE_GLACCOUNT'">
     <fa-icon icon="trash" class="m-r-10"></fa-icon>
-    Delete
+    {{"labels.buttons.Delete" |translate}}
   </button>
 </div>
 
@@ -38,7 +38,7 @@
       <div fxLayout="row wrap" class="content">
 
         <div fxFlex="50%" class="header">
-          Account Type
+          {{"labels.inputs.Account Type" |translate}}
         </div>
 
         <div fxFlex="50%">
@@ -46,7 +46,7 @@
         </div>
 
         <div fxFlex="50%" class="header">
-          GL Code
+          {{"labels.inputs.GL Code" |translate}}        
         </div>
 
         <div fxFlex="50%">
@@ -54,7 +54,7 @@
         </div>
 
         <div fxFlex="50%" class="header" *ngIf="glAccount.parent">
-          Parent Account Name
+          {{"labels.inputs.Parent Account Name" |translate}}
         </div>
 
         <div fxFlex="50%" *ngIf="glAccount.parent">
@@ -64,7 +64,7 @@
         </div>
 
         <div fxFlex="50%" class="header" *ngIf="glAccount.tagId.id">
-          Tag
+           {{"labels.inputs.Tag" |translate}}
         </div>
 
         <div fxFlex="50%" *ngIf="glAccount.tagId.id">
@@ -72,7 +72,7 @@
         </div>
 
         <div fxFlex="50%" class="header">
-          Account Usage
+          {{"labels.inputs.Account Usage" |translate}}
         </div>
 
         <div fxFlex="50%">
@@ -80,7 +80,7 @@
         </div>
 
         <div fxFlex="50%" class="header">
-          Manual Entries Allowed
+          {{"labels.inputs.Manual Entries Allowed" |translate}}
         </div>
 
         <div fxFlex="50%">
@@ -88,7 +88,7 @@
         </div>
 
         <div fxFlex="50%" class="header" *ngIf="glAccount.description">
-          Description
+          {{"labels.inputs.Description" |translate}}
         </div>
 
         <div fxFlex="50%" *ngIf="glAccount.description">

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

@@ -2,14 +2,14 @@
   <div #buttonCreateClosure>
     <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_GLCLOSURE'">
       <fa-icon icon="plus" class="m-r-10"></fa-icon>
-      Create Closure
+      {{"labels.buttons.Create Closure" |translate}}
     </button>
   </div>
 </div>
 
 <div #filter class="container" fxLayout="row">
   <mat-form-field fxFlex>
-    <mat-label>Office Name</mat-label>
+    <mat-label>{{"labels.inputs.Office Name" |translate}}</mat-label>
     <input matInput [formControl]="officeName" [matAutocomplete]="officeNameAutocomplete">
   </mat-form-field>
 </div>
@@ -28,22 +28,22 @@
     <table mat-table [dataSource]="dataSource" matSort>
 
       <ng-container matColumnDef="officeName">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Office </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Office" |translate}} </th>
         <td mat-cell *matCellDef="let glAccountClosure"> {{ glAccountClosure.officeName }} </td>
       </ng-container>
 
       <ng-container matColumnDef="closingDate">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Closure Date </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ "labels.inputs.Closure Date"| translate}} </th>
         <td mat-cell *matCellDef="let glAccountClosure"> {{ glAccountClosure.closingDate }} </td>
       </ng-container>
 
       <ng-container matColumnDef="comments">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Comments </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ "labels.inputs.Comments" |translate}} </th>
         <td mat-cell *matCellDef="let glAccountClosure"> {{ glAccountClosure.comments }} </td>
       </ng-container>
 
       <ng-container matColumnDef="createdByUsername">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Created By </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ "labels.inputs.Created By" |translate}} </th>
         <td mat-cell *matCellDef="let glAccountClosure">{{ glAccountClosure.createdByUsername }}</td>
       </ng-container>
 
@@ -59,29 +59,29 @@
 </div>
 
 <ng-template #templateButtonCreateClosure let-popover="popover">
-  <h2>Create Closure</h2>
+  <h2>{{"labels.heading.Create Closure" |translate}}</h2>
-  <p class="mw300">This option allows you to create new closure.</p>
+  <p class="mw300">{{"labels.text.Create new closure" |translate}}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" |translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStep();">Back</button>
+    <button mat-raised-button color="primary" (click)="popover.close();previousStep();">{{"labels.buttons.Back" |translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter,filter, 'bottom', true);">Next</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter,filter, 'bottom', true);">{{"labels.buttons.Next" |translate}}</button>
   </div>
 </ng-template>
 
 <ng-template #templateFilter let-popover="popover">
-  <h4>Search bar to filter closures by office.</h4>
+  <h4>{{"labels.heading.Search bar to filter closures by office."|translate}}</h4>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" |translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonCreateClosure, buttonCreateClosure, 'bottom', true);">Back</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonCreateClosure, buttonCreateClosure, 'bottom', true);">{{"labels.buttons.Back" |translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateClosuresTable,closuresTable, 'top', true);">Next</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateClosuresTable,closuresTable, 'top', true);">{{"labels.buttons.Next" |translate}}</button>
   </div>
 </ng-template>
 
 <ng-template #templateClosuresTable let-popover="popover">
-  <h4>List of closures. To know more click: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67895316/Closing+Entries" target="_blank">Closing Entries</a></h4>
+  <h4>{{"labels.heading.List of closures. To know more click" |translate}}: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67895316/Closing+Entries" target="_blank">{{"labels.inputs.Closing Entries" |translate}}</a></h4>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" |translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter,filter, 'bottom', true);">Back</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter,filter, 'bottom', true);">{{"labels.buttons.Back" |translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">Next</button>
+    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">{{"labels.buttons.Next" |translate}}</button>
   </div>
 </ng-template>

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

@@ -9,29 +9,29 @@
         <div fxLayout="column">
 
           <mat-form-field>
-            <mat-label>Office</mat-label>
+            <mat-label>{{"labels.inputs.Office" |translate}}</mat-label>
             <mat-select required formControlName="officeId">
               <mat-option *ngFor="let office of officeData" [value]="office.id">
                 {{ office.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="accountingClosureForm.controls.officeId.hasError('required')">
-              Office is <strong>required</strong>
+              {{"labels.inputs.Office" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field (click)="closingDatePicker.open()">
-            <mat-label>Closing Date</mat-label>
+            <mat-label>{{ "labels.inputs.Closing Date" |translate}}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="closingDatePicker" required formControlName="closingDate">
             <mat-datepicker-toggle matSuffix [for]="closingDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #closingDatePicker></mat-datepicker>
             <mat-error *ngIf="accountingClosureForm.controls.closingDate.hasError('required')">
-              Closing Date is <strong>required</strong>
+              {{ "labels.inputs.Closing Date" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Comments</mat-label>
+            <mat-label>{{ "labels.inputs.Comments" |translate}}</mat-label>
             <textarea matInput formControlName="comments" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
 
@@ -40,8 +40,8 @@
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">{{ "labels.buttons.Cancel" | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!accountingClosureForm.valid" *mifosxHasPermission="'CREATE_GLCLOSURE'">Submit</button>
+        <button mat-raised-button color="primary" [disabled]="!accountingClosureForm.valid" *mifosxHasPermission="'CREATE_GLCLOSURE'">{{"labels.buttons.Submit" | translate}}</button>
       </mat-card-actions>
 
     </form>

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

@@ -9,7 +9,7 @@
         <div fxLayout="column">
 
           <mat-form-field>
-            <mat-label>Office</mat-label>
+            <mat-label>{{"labels.inputs.Office" |translate}}</mat-label>
             <mat-select required formControlName="officeId">
               <mat-option *ngFor="let office of officeData" [value]="office.id">
                 {{ office.name }}
@@ -18,14 +18,14 @@
           </mat-form-field>
 
           <mat-form-field (click)="closingDatePicker.open()">
-            <mat-label>Closing Date</mat-label>
+            <mat-label>{{ "labels.inputs.Closing Date" |translate}}</mat-label>
             <input matInput [matDatepicker]="closingDatePicker" required formControlName="closingDate">
             <mat-datepicker-toggle matSuffix [for]="closingDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #closingDatePicker></mat-datepicker>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Comments</mat-label>
+            <mat-label>{{ "labels.inputs.Comments" |translate}}</mat-label>
             <textarea matInput formControlName="comments" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
 
@@ -34,8 +34,8 @@
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">{{ "labels.buttons.Cancel" | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="accountingClosureForm.pristine">Submit</button>
+        <button mat-raised-button color="primary" [disabled]="accountingClosureForm.pristine">{{"labels.buttons.Submit" | translate}}</button>
       </mat-card-actions>
 
     </form>

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

@@ -1,11 +1,11 @@
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
   <button mat-raised-button color="primary" [routerLink]="['edit']">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    Edit
+    {{"labels.buttons.Edit" |translate}}
   </button>
   <button mat-raised-button color="warn" (click)="deleteAccountingClosure()" *mifosxHasPermission="'DELETE_GLCLOSURE'">
     <fa-icon icon="trash" class="m-r-10"></fa-icon>
-    Delete
+    {{"labels.buttons.Delete" |translate}}
   </button>
 </div>
 
@@ -18,7 +18,7 @@
       <div fxLayout="row wrap" class="content">
 
         <div fxFlex="50%" class="header">
-          Office
+         {{"labels.inputs.Office" |translate}}
         </div>
 
         <div fxFlex="50%">
@@ -26,7 +26,7 @@
         </div>
 
         <div fxFlex="50%" class="header">
-          Closure Date
+          {{ "labels.inputs.Closure Date"| translate}}
         </div>
 
         <div fxFlex="50%">
@@ -34,7 +34,7 @@
         </div>
 
         <div fxFlex="50%" class="header">
-          Closed By
+          {{ "labels.inputs.Closed By" |translate}}
         </div>
 
         <div fxFlex="50%">
@@ -42,7 +42,7 @@
         </div>
 
         <div fxFlex="50%" class="header">
-          Updated By
+          {{ "labels.inputs.Updated By" |translate}}
         </div>
 
         <div fxFlex="50%">
@@ -50,7 +50,7 @@
         </div>
 
         <div fxFlex="50%" class="header">
-          Updated On
+          {{ "labels.inputs.Updated On"|translate}}
         </div>
 
         <div fxFlex="50%">
@@ -58,7 +58,7 @@
         </div>
 
         <div fxFlex="50%" class="header">
-          Closure Creation Date
+          {{ "labels.inputs.Closure Creation Date"|translate}}
         </div>
 
         <div fxFlex="50%">
@@ -66,7 +66,7 @@
         </div>
 
         <div fxFlex="50%" class="header">
-          Comments
+          {{ "labels.inputs.Comments" |translate}}
         </div>
 
         <div fxFlex="50%">

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

@@ -9,26 +9,26 @@
         <div #createJournalFormRef fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Office</mat-label>
+            <mat-label>{{"labels.inputs.Office" |translate}}</mat-label>
             <mat-select required formControlName="officeId">
               <mat-option *ngFor="let office of officeData" [value]="office.id">
                 {{ office.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="journalEntryForm.controls.officeId.hasError('required')">
-              Office is <strong>required</strong>
+              {{"labels.inputs.Office" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Currency</mat-label>
+            <mat-label>{{"labels.inputs.Currency" |translate}}</mat-label>
             <mat-select required formControlName="currencyCode">
               <mat-option *ngFor="let currency of currencyData" [value]="currency.code">
                 {{ currency.displayLabel }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="journalEntryForm.controls.currencyCode.hasError('required')">
-              Currency is <strong>required</strong>
+              {{"labels.inputs.Currency" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -38,22 +38,22 @@
             <div fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" [formGroupName]="i">
 
               <mat-form-field fxFlex="48%">
-                <mat-label>Affected GL Entry (Debit)</mat-label>
+                <mat-label>{{"labels.inputs.Affected GL Entry (Debit)" |translate}}</mat-label>
                 <mat-select required formControlName="glAccountId">
                   <mat-option *ngFor="let affectedGLEntryDebit of glAccountData" [value]="affectedGLEntryDebit.id">
                     {{ affectedGLEntryDebit.name + ' (' + affectedGLEntryDebit.glCode + ')' }}
                   </mat-option>
                 </mat-select>
                 <mat-error *ngIf="debits.at(i).controls.glAccountId.hasError('required')">
-                  Affected GL Entry (Debit) is <strong>required</strong>
+                  {{"labels.inputs.Affected GL Entry (Debit)" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
                 </mat-error>
               </mat-form-field>
 
               <mat-form-field fxFlex="43%">
-                <mat-label>Debit Amount</mat-label>
+                <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')">
-                  Debit Amount is <strong>required</strong>
+                  {{"labels.inputs.Debit Amount" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
                 </mat-error>
               </mat-form-field>
 
@@ -76,22 +76,22 @@
             <div fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" [formGroupName]="i">
 
               <mat-form-field fxFlex="48%">
-                <mat-label>Affected GL Entry (Credit)</mat-label>
+                <mat-label>{{"labels.inputs.Affected GL Entry (Credit)" |translate}}</mat-label>
                 <mat-select required formControlName="glAccountId">
                   <mat-option *ngFor="let affectedGLEntryCredit of glAccountData" [value]="affectedGLEntryCredit.id">
                     {{ affectedGLEntryCredit.name + ' (' + affectedGLEntryCredit.glCode + ')' }}
                   </mat-option>
                 </mat-select>
                 <mat-error *ngIf="credits.at(i).controls.glAccountId.hasError('required')">
-                  Affected GL Entry (Credit) is <strong>required</strong>
+                  {{"labels.inputs.Affected GL Entry (Credit)" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
                 </mat-error>
               </mat-form-field>
 
               <mat-form-field fxFlex="43%">
-                <mat-label>Credit Amount</mat-label>
+                <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')">
-                  Credit Amount is <strong>required</strong>
+                  {{"labels.inputs.Credit Amount"|translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
                 </mat-error>
               </mat-form-field>
 
@@ -109,22 +109,22 @@
           </div>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Reference Number</mat-label>
+            <mat-label>{{"labels.inputs.Reference Number"|translate}}</mat-label>
             <input matInput formControlName="referenceNumber">
           </mat-form-field>
 
           <mat-form-field fxFlex="48%" (click)="transactionDatePicker.open()">
-            <mat-label>Transaction Date</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="journalEntryForm.controls.transactionDate.hasError('required')">
-              Transaction Date is <strong>required</strong>
+              {{"labels.inputs.Transaction Date"|translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Payment Type</mat-label>
+            <mat-label>{{"labels.inputs.Payment Type"|translate}}</mat-label>
             <mat-select formControlName="paymentTypeId">
               <mat-option *ngFor="let paymentType of paymentTypeData" [value]="paymentType.id">
                 {{ paymentType.name }}
@@ -133,32 +133,32 @@
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Account Number</mat-label>
+            <mat-label>{{"labels.inputs.Account Number"|translate}}</mat-label>
             <input matInput formControlName="accountNumber">
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Cheque Number</mat-label>
+            <mat-label>{{"labels.inputs.Cheque Number"|translate}}</mat-label>
             <input matInput formControlName="checkNumber">
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Routing Code</mat-label>
+            <mat-label>{{"labels.inputs.Routing Code"|translate}}</mat-label>
             <input matInput formControlName="routingCode">
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Receipt Number</mat-label>
+            <mat-label>{{"labels.inputs.Receipt Number"|translate}}</mat-label>
             <input matInput formControlName="receiptNumber">
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Bank Number</mat-label>
+            <mat-label>{{"labels.inputs.Bank Number"|translate}}</mat-label>
             <input matInput formControlName="bankNumber">
           </mat-form-field>
 
           <mat-form-field fxFlex="98%">
-            <mat-label>Comments</mat-label>
+            <mat-label>{{"labels.inputs.Comments"|translate}}</mat-label>
             <textarea matInput formControlName="comments" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
 
@@ -167,8 +167,8 @@
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{ "labels.buttons.Cancel" | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!journalEntryForm.valid" *mifosxHasPermission="'CREATE_JOURNALENTRY'">Submit</button>
+        <button mat-raised-button color="primary" [disabled]="!journalEntryForm.valid" *mifosxHasPermission="'CREATE_JOURNALENTRY'">{{"labels.buttons.Submit" | translate}}</button>
       </mat-card-actions>
 
     </form>
@@ -178,11 +178,11 @@
 </div>
 
 <ng-template #templateCreateJournalFormRef let-popover="popover">
-  <h2>Add Journal Entry Form</h2>
+  <h2>{{"labels.heading.Add Journal Entry Form" |translate}}</h2>
-  <p class="mw300">Fields with a red asterisk (*) are required. To know more click: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67895310/Add+Journal+Entries" target="_blank">Add Journal Entries</a></p>
+  <p class="mw300">{{"labels.text.Red asterisk field" |translate}} <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67895310/Add+Journal+Entries" target="_blank">{{ "labels.inputs.Add Journal Entries" |translate}}</a></p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" |translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">Back</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();nextStep()">Next</button>
+    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">{{"labels.buttons.Next" |translate}}</button>
   </div>
 </ng-template>

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

@@ -9,26 +9,26 @@
         <div fxLayout="column">
 
           <mat-form-field>
-            <mat-label>Financial Activity</mat-label>
+            <mat-label>{{"labels.inputs.Financial Activity" |translate}}</mat-label>
             <mat-select required formControlName="financialActivityId">
               <mat-option *ngFor="let financialActivity of financialActivityData" [value]="financialActivity.id">
                 {{ financialActivity.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="financialActivityMappingForm.controls.financialActivityId.hasError('required')">
-              Financial Activity is <strong>required</strong>
+              {{"labels.inputs.Financial Activity" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Account</mat-label>
+            <mat-label>{{"labels.inputs.Account"|translate}}</mat-label>
             <mat-select required formControlName="glAccountId">
               <mat-option *ngFor="let glAccount of glAccountData" [value]="glAccount.id">
                 {{ glAccount.name + ' (' + glAccount.glCode + ')' }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="financialActivityMappingForm.controls.glAccountId.hasError('required')">
-              Account is <strong>required</strong>
+              {{"labels.inputs.Account"|translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -37,8 +37,8 @@
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">{{ "labels.buttons.Cancel" | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!financialActivityMappingForm.valid" *mifosxHasPermission="'CREATE_FINANCIALACTIVITYACCOUNT'">Submit</button>
+        <button mat-raised-button color="primary" [disabled]="!financialActivityMappingForm.valid" *mifosxHasPermission="'CREATE_FINANCIALACTIVITYACCOUNT'">{{"labels.buttons.Submit" | translate}}</button>
       </mat-card-actions>
 
     </form>

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

@@ -9,7 +9,7 @@
         <div fxLayout="column">
 
           <mat-form-field>
-            <mat-label>Financial Activity</mat-label>
+            <mat-label>{{"labels.inputs.Financial Activity" |translate}}</mat-label>
             <mat-select required formControlName="financialActivityId">
               <mat-option *ngFor="let financialActivity of financialActivityData" [value]="financialActivity.id">
                 {{ financialActivity.name }}
@@ -18,7 +18,7 @@
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Account</mat-label>
+            <mat-label>{{"labels.inputs.Account"|translate}}</mat-label>
             <mat-select required formControlName="glAccountId">
               <mat-option *ngFor="let glAccount of glAccountData" [value]="glAccount.id">
                 {{ glAccount.name + ' (' + glAccount.glCode + ')' }}
@@ -31,8 +31,8 @@
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">{{ "labels.buttons.Cancel" | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="financialActivityMappingForm.pristine" *mifosxHasPermission="'UPDATE_FINANCIALACTIVITYACCOUNT'">Submit</button>
+        <button mat-raised-button color="primary" [disabled]="financialActivityMappingForm.pristine" *mifosxHasPermission="'UPDATE_FINANCIALACTIVITYACCOUNT'">{{"labels.buttons.Submit" | translate}}</button>
       </mat-card-actions>
 
     </form>

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

@@ -1,7 +1,8 @@
 <div fxLayout="row" fxLayoutAlign="end" class="container m-b-20">
   <div #buttonDefineMapping>
     <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_FINANCIALACTIVITYACCOUNT'">
-      <fa-icon icon="plus" class="m-r-10"></fa-icon>Define New Mapping
+      <fa-icon icon="plus" class="m-r-10"></fa-icon>
+      {{"labels.buttons.Define New Mapping" |translate}}
     </button>
   </div>
 </div>
@@ -11,17 +12,17 @@
   <table mat-table [dataSource]="dataSource" matSort>
 
     <ng-container matColumnDef="financialActivity">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Financial Activity </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Financial Activity" |translate}} </th>
       <td mat-cell *matCellDef="let financialActivityAccount"> {{ financialActivityAccount.financialActivityData.name }} </td>
     </ng-container>
 
     <ng-container matColumnDef="glAccountName">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Account Name </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Account Name" |translate}} </th>
       <td mat-cell *matCellDef="let financialActivityAccount"> {{ financialActivityAccount.glAccountData.name }} </td>
     </ng-container>
 
     <ng-container matColumnDef="glAccountCode">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Account Code </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Account Code" |translate}} </th>
       <td mat-cell *matCellDef="let financialActivityAccount"> {{ financialActivityAccount.glAccountData.glCode }} </td>
     </ng-container>
 
@@ -35,20 +36,20 @@
 </div>
 
 <ng-template #templateButtonDefineMapping let-popover="popover">
-  <h2>Define New Mapping</h2>
+  <h2>{{"labels.heading.Define New Mapping"|translate}}</h2>
-  <p class="mw300">To define new mapping.</p>
+  <p class="mw300">{{"labels.text.To define new mapping." |translate}}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" |translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">Back</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(templateActivitiesTable, activitiesTable, 'top', true)">Next</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateActivitiesTable, activitiesTable, 'top', true)">{{"labels.buttons.Next" |translate}}</button>
   </div>
 </ng-template>
 
 <ng-template #templateActivitiesTable let-popover="popover">
-  <h4 class="mw300">List of accounts linked to different financial activities. To know more click: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/106430472/Accounts+linked+to+Financial+Activities" target="_blank">Accounts linked to Financial Activities</a> </h4>
+  <h4 class="mw300">{{"labels.heading.Account Linked Financial" |translate}} <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/106430472/Accounts+linked+to+Financial+Activities" target="_blank">{{"labels.heading.Accounts linked to Financial Activities" |translate}}</a> </h4>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" |translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonDefineMapping, buttonDefineMapping , 'bottom', true)">Back</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonDefineMapping, buttonDefineMapping , 'bottom', true)">{{"labels.buttons.Back" |translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">Next</button>
+    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">{{"labels.buttons.Next" |translate}}</button>
   </div>
 </ng-template>

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

@@ -1,11 +1,11 @@
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" class="container m-b-20">
   <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_FINANCIALACTIVITYACCOUNT'">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    Edit
+    {{"labels.buttons.Edit" |translate}}
   </button>
   <button mat-raised-button color="warn" (click)="deleteFinancialActivityAccount()" *mifosxHasPermission="'DELETE_FINANCIALACTIVITYACCOUNT'">
     <fa-icon icon="trash" class="m-r-10"></fa-icon>
-    Delete
+    {{"labels.buttons.Delete" |translate}}
   </button>
 </div>
 
@@ -18,7 +18,7 @@
       <div fxLayout="row wrap" class="content">
 
         <div fxFlex="50%" class="header">
-          Financial Activity
+          {{"labels.inputs.Financial Activity" |translate}}
         </div>
 
         <div fxFlex="50%">
@@ -26,7 +26,7 @@
         </div>
 
         <div fxFlex="50%" class="header">
-          Account Name
+          {{"labels.inputs.Account Name" |translate}}
         </div>
 
         <div fxFlex="50%">

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

@@ -9,38 +9,38 @@
         <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Office</mat-label>
+            <mat-label>{{"labels.inputs.Office" |translate}}</mat-label>
             <mat-select required formControlName="officeId">
               <mat-option *ngFor="let office of officeData" [value]="office.id">
                 {{ office.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="frequentPostingsForm.controls.officeId.hasError('required')">
-              Office is <strong>required</strong>
+              {{"labels.inputs.Office" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Accounting Rule</mat-label>
+            <mat-label>{{"labels.inputs.Accounting Rule" |translate}}</mat-label>
             <mat-select required formControlName="accountingRule">
               <mat-option *ngFor="let accountingRule of accountingRuleData" [value]="accountingRule">
                 {{ accountingRule.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="frequentPostingsForm.controls.accountingRule.hasError('required')">
-              Accounting Rule is <strong>required</strong>
+              {{"labels.inputs.Accounting Rule" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Currency</mat-label>
+            <mat-label>{{"labels.inputs.Currency" |translate}}</mat-label>
             <mat-select required formControlName="currencyCode">
               <mat-option *ngFor="let currency of currencyData" [value]="currency.code">
                 {{ currency.displayLabel }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="frequentPostingsForm.controls.currencyCode.hasError('required')">
-              Currency is <strong>required</strong>
+              {{"labels.inputs.Currency" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -52,22 +52,22 @@
             <div fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" [formGroupName]="i">
 
               <mat-form-field fxFlex="48%">
-                <mat-label>Affected GL Entry (Debit)</mat-label>
+                <mat-label>{{"labels.inputs.Affected GL Entry (Debit)" |translate}}</mat-label>
                 <mat-select required formControlName="glAccountId">
                   <mat-option *ngFor="let affectedGLEntryDebit of debitAccountData" [value]="affectedGLEntryDebit.id">
                     {{ affectedGLEntryDebit.name }}
                   </mat-option>
                 </mat-select>
                 <mat-error *ngIf="debits.at(i).controls.glAccountId.hasError('required')">
-                  Affected GL Entry (Debit) is <strong>required</strong>
+                  {{"labels.inputs.Affected GL Entry (Debit)" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
                 </mat-error>
               </mat-form-field>
 
               <mat-form-field fxFlex="43%">
-                <mat-label>Debit Amount</mat-label>
+                <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')">
-                  Debit Amount is <strong>required</strong>
+                  {{"labels.inputs.Debit Amount" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
                 </mat-error>
               </mat-form-field>
 
@@ -90,22 +90,22 @@
             <div fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" [formGroupName]="i">
 
               <mat-form-field fxFlex="48%">
-                <mat-label>Affected GL Entry (Credit)</mat-label>
+                <mat-label>{{"labels.inputs.Affected GL Entry (Credit)" |translate}}</mat-label>
                 <mat-select required formControlName="glAccountId">
                   <mat-option *ngFor="let affectedGLEntryCredit of creditAccountData" [value]="affectedGLEntryCredit.id">
                     {{ affectedGLEntryCredit.name }}
                   </mat-option>
                 </mat-select>
                 <mat-error *ngIf="credits.at(i).controls.glAccountId.hasError('required')">
-                  Affected GL Entry (Credit) is <strong>required</strong>
+                  {{"labels.inputs.Affected GL Entry (Credit)" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
                 </mat-error>
               </mat-form-field>
 
               <mat-form-field fxFlex="43%">
-                <mat-label>Credit Amount</mat-label>
+                <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')">
-                  Credit Amount is <strong>required</strong>
+                  {{"labels.inputs.Credit Amount"|translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
                 </mat-error>
               </mat-form-field>
 
@@ -123,22 +123,22 @@
           </div>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Reference Number</mat-label>
+            <mat-label>{{"labels.inputs.Reference Number"|translate}}</mat-label>
             <input matInput formControlName="referenceNumber">
           </mat-form-field>
 
           <mat-form-field fxFlex="48%" (click)="transactionDatePicker.open()">
-            <mat-label>Transaction Date</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="frequentPostingsForm.controls.transactionDate.hasError('required')">
-              Transaction Date is <strong>required</strong>
+              {{"labels.inputs.Transaction Date"|translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Payment Type</mat-label>
+            <mat-label>{{"labels.inputs.Payment Type"|translate}}</mat-label>
             <mat-select formControlName="paymentTypeId">
               <mat-option *ngFor="let paymentType of paymentTypeData" [value]="paymentType.id">
                 {{ paymentType.name }}
@@ -147,32 +147,32 @@
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Account Number</mat-label>
+            <mat-label>{{"labels.inputs.Account Number"|translate}}</mat-label>
             <input matInput formControlName="accountNumber">
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Cheque Number</mat-label>
+            <mat-label>{{"labels.inputs.Cheque Number"|translate}}</mat-label>
             <input matInput formControlName="checkNumber">
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Routing Code</mat-label>
+            <mat-label>{{"labels.inputs.Routing Code"|translate}}</mat-label>
             <input matInput formControlName="routingCode">
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Receipt Number</mat-label>
+            <mat-label>{{"labels.inputs.Receipt Number"|translate}}</mat-label>
             <input matInput formControlName="receiptNumber">
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Bank Number</mat-label>
+            <mat-label>{{"labels.inputs.Bank Number"|translate}}</mat-label>
             <input matInput formControlName="bankNumber">
           </mat-form-field>
 
           <mat-form-field fxFlex="98%">
-            <mat-label>Comments</mat-label>
+            <mat-label>{{"labels.inputs.Comments"|translate}}</mat-label>
             <textarea matInput formControlName="comments" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
 
@@ -181,8 +181,8 @@
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{ "labels.buttons.Cancel" | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!frequentPostingsForm.valid" *mifosxHasPermission="'CREATE_JOURNALENTRY'">Submit</button>
+        <button mat-raised-button color="primary" [disabled]="!frequentPostingsForm.valid" *mifosxHasPermission="'CREATE_JOURNALENTRY'">{{"labels.buttons.Submit" | translate}}</button>
       </mat-card-actions>
 
     </form>

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

@@ -10,69 +10,70 @@
         <div #searchFormRef fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
           <mat-form-field fxFlex="88%">
-            <mat-label>Office</mat-label>
+            <mat-label>{{"labels.inputs.Office" |translate}}</mat-label>
             <mat-select required formControlName="officeId">
               <mat-option *ngFor="let office of officeData" [value]="office.id">
                 {{ office.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="openingBalancesForm.controls.officeId.hasError('required')">
-              Office is <strong>required</strong>
+              {{"labels.inputs.Office" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <div>
-            <button mat-button type="button" color="primary" fxFlex="8%" (click)="retrieveOpeningBalances()">Retrieve</button>
+            <button mat-button type="button" color="primary" fxFlex="8%" (click)="retrieveOpeningBalances()">{{ "labels.buttons.Retrieve" | translate}}</button>
           </div>
 
         </div>
 
         <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" *ngIf="openingBalancesData">
 
-          <label fxFlex="98%" class="content"><span class="header">Opening Balances Contra Account:</span>&nbsp;&nbsp;{{ openingBalancesData.contraAccount.name + ' (' + openingBalancesData.contraAccount.glCode + ')' }}</label>
+          <label fxFlex="98%" class="content"><span class="header">{{"labels.inputs.Opening Balances Contra Account:" |translate}}</span>&nbsp;&nbsp;{{ openingBalancesData.contraAccount.name + ' (' + openingBalancesData.contraAccount.glCode + ')' }}</label>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Currency</mat-label>
+            <mat-label>{{"labels.inputs.Currency" |translate}}</mat-label>
             <mat-select required formControlName="currencyCode">
               <mat-option *ngFor="let currency of currencyData" [value]="currency.code">
                 {{ currency.displayLabel }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="openingBalancesForm.controls.currencyCode.hasError('required')">
-              Currency is <strong>required</strong>
+              {{"labels.inputs.Currency" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%" (click)="openingBalancesDatePicker.open()">
-            <mat-label>Opening Balances Date</mat-label>
+            <mat-label>{{"labels.inputs.Opening Balances Date" |translate}}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="openingBalancesDatePicker" required formControlName="transactionDate">
             <mat-datepicker-toggle matSuffix [for]="openingBalancesDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #openingBalancesDatePicker></mat-datepicker>
             <mat-error *ngIf="openingBalancesForm.controls.transactionDate.hasError('required')">
-              Opening Balances Date is <strong>required</strong>
+              {{"labels.inputs.Opening Balances Date" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" class="content" fxFlex="100%">
 
             <div class="header" fxFlex="8%">
-              Type
+              {{"labels.inputs.Type" |translate}}
             </div>
 
             <div class="header" fxFlex="18%">
-              GL Code
+              {{"labels.inputs.GL Code" |translate}}
             </div>
 
             <div class="header" fxFlex="18%">
-              Account
+              {{"labels.inputs.Account" |translate}}
+              
             </div>
 
             <div class="header" fxFlex="23%">
-              Total Debit: {{ debitsSum }}
+              {{"labels.inputs.Total Debit" |translate}}: {{ debitsSum }}
             </div>
 
             <div class="header" fxFlex="23%">
-              Total Credit: {{ creditsSum }}
+              {{"labels.inputs.Total Credit" |translate}}: {{ creditsSum }}
             </div>
 
           </div>
@@ -96,14 +97,14 @@
 
               <div fxFlex="23%">
                 <mat-form-field>
-                  <mat-label>Debit</mat-label>
+                  <mat-label>{{"labels.inputs.Debit" |translate}}</mat-label>
                   <input matInput type="number" formControlName="debit">
                 </mat-form-field>
               </div>
 
               <div fxFlex="23%">
                 <mat-form-field>
-                  <mat-label>Credit</mat-label>
+                  <mat-label>{{"labels.inputs.Credit" |translate}}</mat-label>
                   <input matInput type="number" formControlName="credit">
                 </mat-form-field>
               </div>
@@ -117,8 +118,8 @@
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px" *ngIf="openingBalancesData">
-        <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">{{ "labels.buttons.Cancel" | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!openingBalancesForm.valid" *mifosxHasPermission="'DEFINEOPENINGBALANCE_JOURNALENTRY'">Submit</button>
+        <button mat-raised-button color="primary" [disabled]="!openingBalancesForm.valid" *mifosxHasPermission="'DEFINEOPENINGBALANCE_JOURNALENTRY'">{{"labels.buttons.Submit | translate}}</button>
       </mat-card-actions>
 
     </form>
@@ -128,11 +129,11 @@
 </div>
 
 <ng-template #templateSearchFormRef let-popover="popover">
-  <h2>Migrate opening balances (Office-wise)</h2>
+  <h2>{{"labels.heading.Migrate opening balances (Office-wise)" |translate}}</h2>
-  <p class="mw300">This form will be used to migrate opening balances. To know more click: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/90243328/Migrate+opening+balances+Office-wise" target="_blank">Migrate opening balances (Office-wise)</a></p>
+  <p class="mw300">{{"labels.text.Migrate Opening Balances" |translate}} <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/90243328/Migrate+opening+balances+Office-wise" target="_blank">{{"labels.inputs.Migrate opening balances (Office-wise)" |translate}}</a></p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" |translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();popover.close();previousStep();">Back</button>
+    <button mat-raised-button color="primary" (click)="popover.close();popover.close();previousStep();">{{"labels.buttons.Back" |translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();popover.close();nextStep();">Next</button>
+    <button mat-raised-button color="primary" (click)="popover.close();popover.close();nextStep();">{{"labels.buttons.Next" |translate}}</button>
   </div>
 </ng-template>

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

@@ -9,12 +9,12 @@
         <div fxLayout="row">
 
           <mat-form-field fxFlex (click)="tillDatePicker.open()">
-            <mat-label>Accrue Till Date</mat-label>
+            <mat-label>{{"labels.inputs.Accrue Till Date" |translate}}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="tillDatePicker" required formControlName="tillDate">
             <mat-datepicker-toggle matSuffix [for]="tillDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #tillDatePicker></mat-datepicker>
             <mat-error *ngIf="periodicAccrualsForm.controls.tillDate.hasError('required')">
-              Accrue Date is <strong>required</strong>
+              {{"labels.inputs.Accrue Date" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -23,10 +23,10 @@
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">{{ "labels.buttons.Cancel" | translate}}</button>
         <button mat-raised-button color="primary" [disabled]="!periodicAccrualsForm.valid" *mifosxHasPermission="'EXECUTE_PERIODICACCRUALACCOUNTING'">
           <fa-icon icon="play" class="m-r-10"></fa-icon>
-          Run Periodic Accruals
+          {{ "labels.buttons.Run Periodic Accruals" | translate}}
         </button>
       </mat-card-actions>
 

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

@@ -9,18 +9,18 @@
         <div fxLayout="column">
 
           <mat-form-field fxFlex (click)="datePicker.open()">
-            <mat-label>Date</mat-label>
+            <mat-label>{{"labels.inputs.Date" |translate}}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="datePicker" required formControlName="date">
             <mat-datepicker-toggle matSuffix [for]="datePicker"></mat-datepicker-toggle>
             <mat-datepicker #datePicker></mat-datepicker>
             <mat-error *ngIf="provisioningEntryForm.controls.date.hasError('required')">
-              Date is <strong>required</strong>
+              {{"labels.inputs.Date" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <div fxFlex>
             <mat-checkbox labelPosition="before" formControlName="createjournalentries">
-              Create Journal Entries
+              {{"labels.inputs.Create Journal Entries" |translate}}
             </mat-checkbox>
           </div>
 
@@ -29,8 +29,8 @@
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">{{ "labels.buttons.Cancel" | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!provisioningEntryForm.valid" *mifosxHasPermission="'CREATE_PROVISIONING_ENTRIES'">Submit</button>
+        <button mat-raised-button color="primary" [disabled]="!provisioningEntryForm.valid" *mifosxHasPermission="'CREATE_PROVISIONING_ENTRIES'">{{"labels.buttons.Submit" | translate}}</button>
       </mat-card-actions>
 
     </form>

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

@@ -1,7 +1,7 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
   <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'VIEW_ALL_PROVISIONING_ENTRIES'">
     <fa-icon icon="plus" class="m-r-10"></fa-icon>
-    Create Provisioning Entry
+    {{"labels.buttons.Create Provisioning Entry" |translate}}
   </button>
 </div>
 
@@ -19,45 +19,45 @@
     <table mat-table [dataSource]="dataSource" matSort>
 
       <ng-container matColumnDef="createdUser">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Created By </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Created By" |translate}} </th>
         <td mat-cell *matCellDef="let provisioningEntry"> {{ provisioningEntry.createdUser }} </td>
       </ng-container>
 
       <ng-container matColumnDef="createdDate">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Created On </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Created On" |translate}} </th>
         <td mat-cell *matCellDef="let provisioningEntry"> {{ provisioningEntry.createdDate }} </td>
       </ng-container>
 
       <ng-container matColumnDef="journalEntry">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Journal Entry Created </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Journal Entry Created" |translate}} </th>
         <td mat-cell *matCellDef="let provisioningEntry">
           <mat-checkbox [disabled]="true" [checked]="provisioningEntry.journalEntry"></mat-checkbox>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="viewReport">
-        <th mat-header-cell *matHeaderCellDef> View Report </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.View Report" |translate}} </th>
         <td mat-cell *matCellDef="let provisioningEntry">
           <button mat-button color="primary" [routerLink]="['view', provisioningEntry.id]">
-            <fa-icon icon="eye" class="m-r-10"></fa-icon>View
+            <fa-icon icon="eye" class="m-r-10"></fa-icon>{{"labels.buttons.View" |translate}}
           </button>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="recreateProvisioning">
-        <th mat-header-cell *matHeaderCellDef> Recreate Provisioning </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Recreate Provisioning" |translate}} </th>
         <td mat-cell *matCellDef="let provisioningEntry">
           <button mat-button (click)="recreateProvisioning($event, provisioningEntry.id)" [disabled]="provisioningEntry.journalEntry" color="primary">
-            <fa-icon icon="edit" class="m-r-10"></fa-icon>Recreate
+            <fa-icon icon="edit" class="m-r-10"></fa-icon>{{"labels.buttons.Recreate" |translate}}
           </button>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="viewJournalEntry">
-        <th mat-header-cell *matHeaderCellDef> View Journal Entry </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.View Journal Entry" |translate}} </th>
         <td mat-cell *matCellDef="let provisioningEntry">
           <button mat-button (click)="viewJournalEntry($event, provisioningEntry.id)" [disabled]="!provisioningEntry.journalEntry" color="primary">
-            <fa-icon icon="eye" class="m-r-10"></fa-icon>View
+            <fa-icon icon="eye" class="m-r-10"></fa-icon>{{"labels.buttons.View" |translate}}
           </button>
         </td>
       </ng-container>

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

@@ -3,7 +3,7 @@
   <div class="m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
     <button mat-raised-button color="primary" (click)="createProvisioningJournalEntries()" [disabled]="provisioningEntry.journalEntry" *mifosxHasPermission="'CREATE_JOURNAL_ENTRY'">
       <fa-icon icon="plus" class="m-r-10"></fa-icon>
-      Create Journal Entries
+      {{"labels.buttons.Create Journal Entries" |translate}}
     </button>
   </div>
 
@@ -14,7 +14,7 @@
       <div fxLayout="row wrap" class="content" fxLayout.lt-md="column">
 
         <div fxFlex="16%" class="header">
-          Created By
+          {{"labels.inputs.Created By" |translate}}
         </div>
 
         <div fxFlex="16%">
@@ -22,7 +22,7 @@
         </div>
 
         <div fxFlex="16%" class="header">
-          Created On
+          {{"labels.inputs.Created On" |translate}}
         </div>
 
         <div fxFlex="16%">
@@ -30,7 +30,7 @@
         </div>
 
         <div fxFlex="18%" class="header">
-          Amount to be Reserved
+          {{"labels.inputs.Amount to be Reserved" |translate}}
         </div>
 
         <div fxFlex="18%">
@@ -49,17 +49,17 @@
 <div class="container m-t-20" fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
   <mat-form-field fxFlex="31%">
-    <mat-label>Office Name</mat-label>
+    <mat-label>{{"labels.inputs.Office Name" |translate}}</mat-label>
     <input matInput [formControl]="officeName" [matAutocomplete]="officeNameAutocomplete">
   </mat-form-field>
 
   <mat-form-field fxFlex="31%">
-    <mat-label>Loan Product</mat-label>
+    <mat-label>{{"labels.inputs.Loan Product" |translate}}</mat-label>
     <input matInput [formControl]="loanProduct" [matAutocomplete]="loanProductAutocomplete">
   </mat-form-field>
 
   <mat-form-field fxFlex="31%">
-    <mat-label>Provisioning Category</mat-label>
+    <mat-label>{{"labels.inputs.Provisioning Category" |translate}}</mat-label>
     <input matInput [formControl]="provisioningCategory" [matAutocomplete]="provisioningCategoryAutocomplete">
   </mat-form-field>
 
@@ -91,37 +91,37 @@
   <table mat-table [dataSource]="dataSource" matSort>
 
     <ng-container matColumnDef="officeName">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Office Name </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Office Name" |translate}} </th>
       <td mat-cell *matCellDef="let provisioningEntry"> {{ provisioningEntry.officeName }} </td>
     </ng-container>
 
     <ng-container matColumnDef="productName">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Product Name </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Product Name" |translate}}</th>
       <td mat-cell *matCellDef="let provisioningEntry"> {{ provisioningEntry.productName }} </td>
     </ng-container>
 
     <ng-container matColumnDef="currencyCode">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Currency Code </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Currency Code" |translate}} </th>
       <td mat-cell *matCellDef="let provisioningEntry"> {{ provisioningEntry.currencyCode }} </td>
     </ng-container>
 
     <ng-container matColumnDef="categoryName">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Category Name </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Category Name" |translate}} </th>
       <td mat-cell *matCellDef="let provisioningEntry"> {{ provisioningEntry.categoryName }} </td>
     </ng-container>
 
     <ng-container matColumnDef="amountreserved">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Provisioning Amount </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Provisioning Amount" |translate}} </th>
       <td mat-cell *matCellDef="let provisioningEntry"> {{ provisioningEntry.amountreserved }} </td>
     </ng-container>
 
     <ng-container matColumnDef="liabilityAccountName">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Liability Account (CR) </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Liability Account (CR)" |translate}} </th>
       <td mat-cell *matCellDef="let provisioningEntry"> {{ provisioningEntry.liabilityAccountName }} </td>
     </ng-container>
 
     <ng-container matColumnDef="expenseAccountName">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Expense Account (DR) </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Expense Account (DR)" |translate}} </th>
       <td mat-cell *matCellDef="let provisioningEntry"> {{ provisioningEntry.expenseAccountName }} </td>
     </ng-container>
 

src/app/accounting/provisioning-entries/view-provisioning-journal-entries/view-provisioning-journal-entries.component.html

@@ -12,52 +12,52 @@
     <table mat-table [dataSource]="dataSource" matSort>
 
       <ng-container matColumnDef="id">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Entry ID </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Entry ID" |translate}} </th>
         <td mat-cell *matCellDef="let provisioningJournalEntry"> {{ provisioningJournalEntry.id }} </td>
       </ng-container>
 
       <ng-container matColumnDef="officeName">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Office </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Office" |translate}} </th>
         <td mat-cell *matCellDef="let provisioningJournalEntry"> {{ provisioningJournalEntry.officeName }} </td>
       </ng-container>
 
       <ng-container matColumnDef="transactionDate">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Transaction Date </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Transaction Date" |translate}} </th>
         <td mat-cell *matCellDef="let provisioningJournalEntry"> {{ provisioningJournalEntry.transactionDate }} </td>
       </ng-container>
 
       <ng-container matColumnDef="transactionId">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Transaction ID </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Transaction ID" |translate}} </th>
         <td mat-cell *matCellDef="let provisioningJournalEntry"> {{ provisioningJournalEntry.transactionId }} </td>
       </ng-container>
 
       <ng-container matColumnDef="glAccountType">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Type </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Type" |translate}} </th>
         <td mat-cell *matCellDef="let provisioningJournalEntry"> {{ provisioningJournalEntry.glAccountType.value }} </td>
       </ng-container>
 
       <ng-container matColumnDef="createdByUserName">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Type </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Type" |translate}} </th>
         <td mat-cell *matCellDef="let provisioningJournalEntry"> {{ provisioningJournalEntry.createdByUserName }} </td>
       </ng-container>
 
       <ng-container matColumnDef="glAccountCode">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Account Code </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Account Code" |translate}} </th>
         <td mat-cell *matCellDef="let provisioningJournalEntry"> {{ provisioningJournalEntry.glAccountCode }} </td>
       </ng-container>
 
       <ng-container matColumnDef="glAccountName">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Account Name </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Account Name" |translate}} </th>
         <td mat-cell *matCellDef="let provisioningJournalEntry"> {{ provisioningJournalEntry.glAccountName }} </td>
       </ng-container>
 
       <ng-container matColumnDef="debit">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Debit </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Debit" |translate}} </th>
         <td mat-cell *matCellDef="let provisioningJournalEntry"><span *ngIf="provisioningJournalEntry.entryType.value === 'DEBIT'"> {{ (provisioningJournalEntry.currency.displaySymbol || provisioningJournalEntry.currency.code) + ' ' + provisioningJournalEntry.amount }} </span></td>
       </ng-container>
 
       <ng-container matColumnDef="credit">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Credit </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Credit" |translate}} </th>
         <td mat-cell *matCellDef="let provisioningJournalEntry"><span *ngIf="provisioningJournalEntry.entryType.value === 'CREDIT'"> {{ (provisioningJournalEntry.currency.displaySymbol || provisioningJournalEntry.currency.code) + ' ' + provisioningJournalEntry.amount }} </span></td>
       </ng-container>
 

src/app/accounting/revert-transaction/revert-transaction.component.html

@@ -1,31 +1,31 @@
 <div *ngIf="!data.reverted; else reverted">
 
-  <h1 mat-dialog-title>Revert Transaction</h1>
+  <h1 mat-dialog-title>{{ "labels.heading.Revert Transaction" |translate}}</h1>
   <div mat-dialog-content>
-    <p>Are you sure you want to revert this transaction?</p>
+    <p>{{"labels.text.Revert this transaction?" |translate}}</p>
     <mat-form-field fxFlexFill>
-      <mat-label>Comments</mat-label>
+      <mat-label>{{"labels.inputs.Comments" |translate}}</mat-label>
       <textarea matInput [formControl]="comments"></textarea>
     </mat-form-field>
   </div>
   <mat-dialog-actions align="end">
-    <button mat-button mat-dialog-close>No</button>
+    <button mat-button mat-dialog-close>{{"labels.buttons.No" |translate}}</button>
-    <button mat-button [mat-dialog-close]="{ revert: true, comments: comments.value }">Yes</button>
+    <button mat-button [mat-dialog-close]="{ revert: true, comments: comments.value }">{{"labels.buttons.Yes" |translate}}</button>
   </mat-dialog-actions>
 
 </div>
 
 <ng-template #reverted>
 
-    <h1 mat-dialog-title>Transaction Reverted</h1>
+    <h1 mat-dialog-title>{{ "labels.heading.Transaction Reverted" |translate}}</h1>
     <div mat-dialog-content>
-      <h4>Success!</h4>
+      <h4>{{ "labels.heading.Success!" |translate}}</h4>
-      <p>A new journal entry has been created to reverse this transaction:</p>
+      <p>{{"labels.text.Journal entry reverse transaction" |translate}}</p>
-      <p>Transaction ID: {{ data.transactionId }}</p>
+      <p>{{"labels.text.Transaction ID" |translate}}: {{ data.transactionId }}</p>
     </div>
     <mat-dialog-actions align="end">
-      <button mat-button mat-dialog-close>Close</button>
+      <button mat-button mat-dialog-close>{{"labels.buttons.Close" |translate}}</button>
-      <button mat-button [mat-dialog-close]="{ redirect: true }">Redirect to New Transaction</button>
+      <button mat-button [mat-dialog-close]="{ redirect: true }">{{"labels.buttons.Redirect to New Transaction" |translate}}</button>
     </mat-dialog-actions>
 
 </ng-template>

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

@@ -1,12 +1,12 @@
 <div class="container" fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
   <mat-form-field fxFlex="31%">
-    <mat-label>Office Name</mat-label>
+    <mat-label>{{"labels.inputs.Office Name" |translate}}</mat-label>
     <input matInput [formControl]="officeName" [matAutocomplete]="officeNameAutocomplete">
   </mat-form-field>
 
   <mat-form-field fxFlex="31%">
-    <mat-label>GL Account Name or Code</mat-label>
+    <mat-label>{{"labels.inputs.GL Account Name or Code" |translate}}</mat-label>
     <input matInput [formControl]="glAccount" [matAutocomplete]="glAccountAutocomplete">
   </mat-form-field>
 
@@ -20,33 +20,33 @@
   </mat-form-field>
 
   <mat-form-field fxFlex="31%" (click)="transactionDateFromPicker.open()">
-    <mat-label>Transaction Date From</mat-label>
+    <mat-label>{{"labels.inputs.Transaction Date From" |translate}}</mat-label>
     <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transactionDateFromPicker" [formControl]="transactionDateFrom">
     <mat-datepicker-toggle matSuffix [for]="transactionDateFromPicker"></mat-datepicker-toggle>
     <mat-datepicker #transactionDateFromPicker></mat-datepicker>
   </mat-form-field>
 
   <mat-form-field fxFlex="31%" (click)="transactionDateToPicker.open()">
-    <mat-label>Transaction Date To</mat-label>
+    <mat-label>{{"labels.inputs.Transaction Date To" |translate}}</mat-label>
     <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transactionDateToPicker" [formControl]="transactionDateTo">
     <mat-datepicker-toggle matSuffix [for]="transactionDateToPicker"></mat-datepicker-toggle>
     <mat-datepicker #transactionDateToPicker></mat-datepicker>
   </mat-form-field>
 
   <mat-form-field fxFlex="31%">
-    <mat-label>Transaction ID</mat-label>
+    <mat-label>{{"labels.inputs.Transaction ID" |translate}}</mat-label>
     <input matInput [formControl]="transactionId">
   </mat-form-field>
 
   <mat-form-field fxFlex="31%" (click)="submittedOnDateFromPicker.open()">
-    <mat-label>Submitted on Date From</mat-label>
+    <mat-label>{{"labels.inputs.Submitted on Date From" |translate}}</mat-label>
     <input matInput [max]="submittedOnDateTo.value" [matDatepicker]="submittedOnDateFromPicker" [formControl]="submittedOnDateFrom">
     <mat-datepicker-toggle matSuffix [for]="submittedOnDateFromPicker"></mat-datepicker-toggle>
     <mat-datepicker #submittedOnDateFromPicker></mat-datepicker>
   </mat-form-field>
 
   <mat-form-field fxFlex="31%" (click)="submittedOnDateToPicker.open()">
-    <mat-label>Submitted on Date To</mat-label>
+    <mat-label>{{"labels.inputs.Submitted on Date To" |translate}} </mat-label>
     <input matInput [min]="submittedOnDateFrom.value"  [matDatepicker]="submittedOnDateToPicker" [formControl]="submittedOnDateTo">
     <mat-datepicker-toggle matSuffix [for]="submittedOnDateToPicker"></mat-datepicker-toggle>
     <mat-datepicker #submittedOnDateToPicker></mat-datepicker>
@@ -74,62 +74,62 @@
   <table mat-table [dataSource]="dataSource" matSort>
 
     <ng-container matColumnDef="id">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Entry ID </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>  {{"labels.inputs.Entry ID" |translate}} </th>
       <td mat-cell *matCellDef="let journalEntry"> {{ journalEntry.id }} </td>
     </ng-container>
 
     <ng-container matColumnDef="officeName">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Office </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Office" |translate}}  </th>
       <td mat-cell *matCellDef="let journalEntry"> {{ journalEntry.officeName }} </td>
     </ng-container>
 
     <ng-container matColumnDef="transactionId">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Transaction ID </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Transaction ID" |translate}} </th>
       <td mat-cell *matCellDef="let journalEntry"> {{ journalEntry.transactionId }} </td>
     </ng-container>
 
     <ng-container matColumnDef="transactionDate">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Transaction Date </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Transaction Date" |translate}} </th>
       <td mat-cell *matCellDef="let journalEntry"> {{ journalEntry.transactionDate | dateFormat }} </td>
     </ng-container>
 
     <ng-container matColumnDef="glAccountType">
-      <th mat-header-cell *matHeaderCellDef> Type </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Type" |translate}} </th>
       <td mat-cell *matCellDef="let journalEntry"> {{ journalEntry.glAccountType.value }} </td>
     </ng-container>
 
     <ng-container matColumnDef="createdByUserName">
-      <th mat-header-cell *matHeaderCellDef> Created by </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Created By" |translate}} </th>
       <td mat-cell *matCellDef="let journalEntry"> {{ journalEntry.createdByUserName }} </td>
     </ng-container>
 
     <ng-container matColumnDef="submittedOnDate">
-      <th mat-header-cell *matHeaderCellDef> Submitted on date </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Submitted on date" |translate}}  </th>
       <td mat-cell *matCellDef="let journalEntry"> {{ journalEntry.submittedOnDate | datetimeFormat }} </td>
     </ng-container>
 
     <ng-container matColumnDef="glAccountCode">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Account Code </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Account Code" |translate}} </th>
       <td mat-cell *matCellDef="let journalEntry"> {{ journalEntry.glAccountCode }} </td>
     </ng-container>
 
     <ng-container matColumnDef="glAccountName">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Account Name </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Account Name" |translate}} </th>
       <td mat-cell *matCellDef="let journalEntry"> {{ journalEntry.glAccountName }} </td>
     </ng-container>
 
     <ng-container matColumnDef="currency">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Currency </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Currency" |translate}} </th>
       <td mat-cell *matCellDef="let journalEntry">{{ journalEntry.currency.code }}</td>
     </ng-container>
 
     <ng-container matColumnDef="debit">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Debit </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Debit" |translate}} </th>
       <td mat-cell *matCellDef="let journalEntry"><span *ngIf="journalEntry.entryType.value === 'DEBIT'"> {{ journalEntry.amount | formatNumber }} </span></td>
     </ng-container>
 
     <ng-container matColumnDef="credit">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Credit </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Credit" |translate}} </th>
       <td mat-cell *matCellDef="let journalEntry"><span *ngIf="journalEntry.entryType.value === 'CREDIT'"> {{ journalEntry.amount | formatNumber }} </span></td>
     </ng-container>