i18n: Adding new languages: Part 2 (#1885)

Co-authored-by: radhathakare <radhathakare322@gmail.com>

src/app/organization/adhoc-query/adhoc-query.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_ADHOC'">
     <fa-icon icon="plus" class="m-r-10"></fa-icon>
-    Create AdHoc Query
+    {{"labels.buttons.Create AdHoc Query" | 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 adhocquery"> {{ adhocquery.name }} </td>
       </ng-container>
 
       <ng-container matColumnDef="query">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> SQL Query </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.SQL Query' | translate }} </th>
         <td mat-cell *matCellDef="let adhocquery"> {{ adhocquery.query }} </td>
       </ng-container>
 
       <ng-container matColumnDef="tableName">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Table Affected </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Table Affected' | translate }} </th>
         <td mat-cell *matCellDef="let adhocquery"> {{ adhocquery.tableName }} </td>
       </ng-container>
 
       <ng-container matColumnDef="email">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Email </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Email' | translate }} </th>
         <td mat-cell *matCellDef="let adhocquery"> {{ adhocquery.email }} </td>
       </ng-container>
 
       <ng-container matColumnDef="reportRunFrequency">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Report Run Frequency </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Report Run Frequency' | translate }} </th>
         <td mat-cell *matCellDef="let adhocquery"> {{ adhocquery.reportRunFrequency }} </td>
       </ng-container>
 
       <ng-container matColumnDef="isActive">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Status </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Status' | translate }} </th>
         <td mat-cell *matCellDef="let adhocquery">
           <div [className]="adhocquery.isActive === true ? 'true' : 'false'">
             <fa-icon matTooltip="{{ adhocquery.isActive === true ? 'Active' : 'Inactive' }}" matTooltipPosition="right" icon="circle" size="lg"></fa-icon>
@@ -53,7 +53,7 @@
       </ng-container>
 
       <ng-container matColumnDef="createdBy">
-        <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 adhocquery"> {{ adhocquery.createdBy }} </td>
       </ng-container>
 

src/app/organization/adhoc-query/create-adhoc-query/create-adhoc-query.component.html

@@ -9,47 +9,47 @@
         <div fxLayout="column">
 
           <mat-form-field>
-            <mat-label>Name</mat-label>
+            <mat-label>{{ 'labels.inputs.name' | translate }}</mat-label>
             <input matInput required formControlName="name">
             <mat-error *ngIf="adhocQueryForm.controls.name.hasError('required')">
-              Name is <strong>required</strong>
+              {{ 'labels.inputs.name' | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>SQL Query</mat-label>
+            <mat-label>{{ 'labels.inputs.SQL Query' | translate }}</mat-label>
             <textarea matInput required formControlName="query"></textarea>
             <mat-error *ngIf="adhocQueryForm.controls.query.hasError('required')">
-              SQL Query is <strong>required</strong>
+              {{ 'labels.inputs.SQL Query' | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Insert into table</mat-label>
+            <mat-label>{{ 'labels.inputs.Insert into table' | translate }}</mat-label>
             <input matInput required formControlName="tableName">
             <mat-error *ngIf="adhocQueryForm.controls.tableName.hasError('required')">
-              Insert into table is <strong>required</strong>
+              {{ 'labels.inputs.Insert into table' | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Table Fields</mat-label>
+            <mat-label>{{ 'labels.inputs.Table Fields' | translate }}</mat-label>
             <textarea matInput required formControlName="tableFields"></textarea>
             <mat-error *ngIf="adhocQueryForm.controls.tableFields.hasError('required')">
-              Table Fields are <strong>required</strong>
+              {{ 'labels.inputs.Table Fields' | translate }} {{ "labels.commons.are"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Email</mat-label>
+            <mat-label>{{ 'labels.inputs.Email' | translate }}</mat-label>
             <input matInput formControlName="email">
             <mat-error *ngIf="adhocQueryForm.controls.email.hasError('email')">
-              Email is <strong>invalid</strong>
+              {{ 'labels.inputs.Email' | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.invalid"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Report Run Frequency</mat-label>
+            <mat-label>{{ 'labels.inputs.Report Run Frequency' | translate }}</mat-label>
             <mat-select formControlName="reportRunFrequency">
               <mat-option *ngFor="let reportRunFrequency of reportRunFrequencyData" [value]="reportRunFrequency.id">
                 {{ reportRunFrequency.value }}
@@ -58,18 +58,18 @@
           </mat-form-field>
 
           <mat-form-field *ngIf="adhocQueryForm.controls.reportRunFrequency.value === 5">
-            <mat-label>Custom Report Run Frequency (Days)</mat-label>
+            <mat-label>{{ 'labels.inputs.Custom Report Run Frequency (Days)' | translate }}</mat-label>
             <input type="number" matInput required formControlName="reportRunEvery">
             <mat-error *ngIf="adhocQueryForm.controls.reportRunEvery.hasError('required')">
-              Custom Report Run Frequency is <strong>required</strong>
+              {{ 'labels.inputs.Custom Report Run Frequency' | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
             <mat-error *ngIf="adhocQueryForm.controls.reportRunEvery.hasError('min')">
-              Custom Report Run Frequency <strong>must be larger than 0</strong>
+              {{ 'labels.inputs.Custom Report Run Frequency' | translate }} <strong>{{ "labels.commons.must be larger than 0"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-checkbox labelPosition="before" formControlName="isActive">
-            Active
+            {{ 'labels.inputs.Active' | translate }}
           </mat-checkbox>
 
         </div>
@@ -77,8 +77,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 mat-raised-button color="primary" [disabled]="!adhocQueryForm.valid" *mifosxHasPermission="'CREATE_ADHOC'">Submit</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">{{"labels.buttons.Cancel" | translate }}</button>
+        <button mat-raised-button color="primary" [disabled]="!adhocQueryForm.valid" *mifosxHasPermission="'CREATE_ADHOC'">{{"labels.buttons.Submit" | translate }}</button>
       </mat-card-actions>
 
     </form>

src/app/organization/adhoc-query/edit-adhoc-query/edit-adhoc-query.component.html

@@ -9,47 +9,47 @@
         <div fxLayout="column">
 
           <mat-form-field>
-            <mat-label>Name</mat-label>
+            <mat-label>{{ 'labels.inputs.name' | translate }}</mat-label>
             <input matInput required formControlName="name">
             <mat-error *ngIf="editAdhocQueryForm.controls.name.hasError('required')">
-              Name is <strong>required</strong>
+              {{ 'labels.inputs.name' | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>SQL Query</mat-label>
+            <mat-label>{{ 'labels.inputs.SQL Query' | translate }}</mat-label>
             <textarea matInput required formControlName="query"></textarea>
             <mat-error *ngIf="editAdhocQueryForm.controls.query.hasError('required')">
-              SQL Query is <strong>required</strong>
+              {{ 'labels.inputs.SQL Query' | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Insert into table</mat-label>
+            <mat-label>{{ 'labels.inputs.Insert into table' | translate }}</mat-label>
             <input matInput required formControlName="tableName">
             <mat-error *ngIf="editAdhocQueryForm.controls.tableName.hasError('required')">
-              Insert into table is <strong>required</strong>
+              {{ 'labels.inputs.Insert into table' | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Table Fields</mat-label>
+            <mat-label>{{ 'labels.inputs.Table Fields' | translate }}</mat-label>
             <textarea matInput required formControlName="tableFields"></textarea>
             <mat-error *ngIf="editAdhocQueryForm.controls.tableFields.hasError('required')">
-              Table Fields are <strong>required</strong>
+              {{ 'labels.inputs.Table Fields' | translate }} {{ "labels.commons.are"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Email</mat-label>
+            <mat-label>{{ 'labels.inputs.Email' | translate }}</mat-label>
             <input matInput formControlName="email">
             <mat-error *ngIf="editAdhocQueryForm.controls.email.hasError('email')">
-              Email is <strong>invalid</strong>
+              {{ 'labels.inputs.Email' | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.invalid"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Report Run Frequency</mat-label>
+            <mat-label>{{ 'labels.inputs.Report Run Frequency' | translate }}</mat-label>
             <mat-select formControlName="reportRunFrequency">
               <mat-option *ngFor="let reportRunFrequency of reportRunFrequencyData" [value]="reportRunFrequency.id">
                 {{ reportRunFrequency.value }}
@@ -58,18 +58,18 @@
           </mat-form-field>
 
           <mat-form-field *ngIf="editAdhocQueryForm.controls.reportRunFrequency.value === 5">
-            <mat-label>Custom Report Run Frequency (Days)</mat-label>
+            <mat-label>{{ 'labels.inputs.Custom Report Run Frequency (Days)' | translate }}</mat-label>
             <input type="number" matInput required formControlName="reportRunEvery">
             <mat-error *ngIf="editAdhocQueryForm.controls.reportRunEvery.hasError('required')">
-              Custom Report Run Frequency is <strong>required</strong>
+              {{ 'labels.inputs.Custom Report Run Frequency' | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
             <mat-error *ngIf="editAdhocQueryForm.controls.reportRunEvery.hasError('min')">
-              Custom Report Run Frequency <strong>must be larger than 0</strong>
+              {{ 'labels.inputs.Custom Report Run Frequency' | translate }} <strong>{{ "labels.commons.must be larger than 0"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-checkbox labelPosition="before" formControlName="isActive">
-            Active
+            {{ 'labels.inputs.Active' | translate }}
           </mat-checkbox>
 
         </div>
@@ -77,8 +77,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 mat-raised-button color="primary" [disabled]="!editAdhocQueryForm.valid" *mifosxHasPermission="'UPDATE_ADHOC'">Submit</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">{{"labels.buttons.Cancel" | translate }}</button>
+        <button mat-raised-button color="primary" [disabled]="!editAdhocQueryForm.valid" *mifosxHasPermission="'UPDATE_ADHOC'">{{"labels.buttons.Submit" | translate }}</button>
       </mat-card-actions>
 
     </form>

src/app/organization/adhoc-query/view-adhoc-query/view-adhoc-query.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_ADHOC'">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    Edit
+    {{"labels.buttons.Edit" | translate }}
   </button>
   <button mat-raised-button color="warn" (click)="deleteAdhocQuery()" *mifosxHasPermission="'DELETE_ADHOC'">
     <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="mat-body-strong">
-          Name
+          {{ 'labels.inputs.name' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -26,7 +26,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Query
+          {{ 'labels.inputs.Query' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -34,7 +34,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Table Affected
+          {{ 'labels.inputs.Table Affected' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -42,7 +42,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong" *ngIf="adhocQueryData.reportRunFrequency">
-          Report Run Frequency
+          {{ 'labels.inputs.Report Run Frequency' | translate }}
         </div>
 
         <div fxFlex="50%" *ngIf="adhocQueryData.reportRunFrequency">
@@ -50,7 +50,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Status
+          {{ 'labels.inputs.Status' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -58,7 +58,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Created By
+          {{ 'labels.inputs.Created By' | translate }}
         </div>
 
         <div fxFlex="50%">

src/app/organization/bulk-import/bulk-import.component.html

@@ -13,56 +13,56 @@
             <mat-icon matListIcon>
               <fa-icon icon="building" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>Offices</h4>
+            <h4 matLine>{{'labels.heading.Offices' | translate }}</h4>
           </mat-list-item>
 
           <mat-list-item [routerLink]="['Users']" *mifosxHasPermission="'READ_OFFICE'">
             <mat-icon matListIcon>
               <fa-icon icon="user" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>Users</h4>
+            <h4 matLine>{{'labels.heading.Users' | translate }}</h4>
           </mat-list-item>
 
           <mat-list-item [routerLink]="['Groups']" *mifosxHasPermission="'READ_OFFICE'">
             <mat-icon matListIcon>
               <fa-icon icon="users" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>Groups</h4>
+            <h4 matLine>{{'labels.heading.Groups' | translate }}</h4>
           </mat-list-item>
 
           <mat-list-item [routerLink]="['Loan Accounts']" *mifosxHasPermission="'READ_OFFICE'">
             <mat-icon matListIcon>
               <fa-icon icon="money-bill-alt" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>Loan Accounts</h4>
+            <h4 matLine>{{'labels.heading.Loan Accounts' | translate }}</h4>
           </mat-list-item>
 
           <mat-list-item [routerLink]="['Savings Accounts']" *mifosxHasPermission="'READ_OFFICE'">
             <mat-icon matListIcon>
               <fa-icon icon="money-bill-alt" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>Savings Accounts</h4>
+            <h4 matLine>{{'labels.heading.Savings Accounts' | translate }}</h4>
           </mat-list-item>
 
           <mat-list-item [routerLink]="['Fixed Deposit Accounts']" *mifosxHasPermission="'READ_OFFICE'">
             <mat-icon matListIcon>
               <fa-icon icon="money-bill-alt" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>Fixed Deposit Accounts</h4>
+            <h4 matLine>{{'labels.heading.Fixed Deposit Accounts' | translate }}</h4>
           </mat-list-item>
 
           <mat-list-item [routerLink]="['Chart of Accounts']" *mifosxHasPermission="'READ_OFFICE'">
             <mat-icon matListIcon>
               <fa-icon icon="money-bill-alt" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>Chart of Accounts</h4>
+            <h4 matLine>{{'labels.heading.Chart of Accounts' | translate }}</h4>
           </mat-list-item>
 
           <mat-list-item [routerLink]="['Share Accounts']" *mifosxHasPermission="'READ_OFFICE'">
             <mat-icon matListIcon>
               <fa-icon icon="money-bill-alt" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>Share Accounts</h4>
+            <h4 matLine>{{'labels.heading.Share Accounts' | translate }}</h4>
           </mat-list-item>
 
         </mat-nav-list>
@@ -77,7 +77,7 @@
             <mat-icon matListIcon>
               <fa-icon icon="user" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>Employees</h4>
+            <h4 matLine>{{'labels.heading.Employees' | translate }}</h4>
           </mat-list-item>
 
 
@@ -85,56 +85,56 @@
             <mat-icon matListIcon>
               <fa-icon icon="user" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>Clients</h4>
+            <h4 matLine>{{'labels.heading.Clients' | translate }}</h4>
           </mat-list-item>
 
           <mat-list-item [routerLink]="['Centers']" *mifosxHasPermission="'READ_OFFICE'">
             <mat-icon matListIcon>
               <fa-icon icon="users" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>Centers</h4>
+            <h4 matLine>{{'labels.heading.Centers' | translate }}</h4>
           </mat-list-item>
 
           <mat-list-item [routerLink]="['Loan Repayments']" *mifosxHasPermission="'READ_OFFICE'">
             <mat-icon matListIcon>
               <fa-icon icon="chevron-right" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>Loan Repayments</h4>
+            <h4 matLine>{{'labels.heading.Loan Repayments' | translate }}</h4>
           </mat-list-item>
 
           <mat-list-item [routerLink]="['Savings Transactions']" *mifosxHasPermission="'READ_OFFICE'">
             <mat-icon matListIcon>
               <fa-icon icon="chevron-right" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>Savings Transactions</h4>
+            <h4 matLine>{{'labels.heading.Savings Transactions' | translate }}</h4>
           </mat-list-item>
 
           <mat-list-item [routerLink]="['Fixed Deposit Transactions']" *mifosxHasPermission="'READ_OFFICE'">
             <mat-icon matListIcon>
               <fa-icon icon="chevron-right" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>Fixed Deposit Transactions</h4>
+            <h4 matLine>{{'labels.heading.Fixed Deposit Transactions' | translate }}</h4>
           </mat-list-item>
 
           <mat-list-item [routerLink]="['Recurring Deposit Transactions']" *mifosxHasPermission="'READ_OFFICE'">
             <mat-icon matListIcon>
               <fa-icon icon="chevron-right" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>Recurring Deposit Transactions</h4>
+            <h4 matLine>{{'labels.heading.Recurring Deposit Transactions' | translate }}</h4>
           </mat-list-item>
 
           <mat-list-item [routerLink]="['Journal Entries']" *mifosxHasPermission="'READ_OFFICE'">
             <mat-icon matListIcon>
               <fa-icon icon="chevron-right" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>Journal Entries</h4>
+            <h4 matLine>{{'labels.heading.Journal Entries' | translate }}</h4>
           </mat-list-item>
 
           <mat-list-item [routerLink]="['Guarantors']" *mifosxHasPermission="'READ_OFFICE'">
             <mat-icon matListIcon>
               <fa-icon icon="chevron-right" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>Guarantors</h4>
+            <h4 matLine>{{'labels.heading.Guarantors' | translate }}</h4>
           </mat-list-item>
 
         </mat-nav-list>

src/app/organization/bulk-import/view-bulk-import/view-bulk-import.component.html

@@ -4,7 +4,7 @@
 
     <mat-card fxLayout="column" fxLayoutGap="2%" fxFlex="50%">
 
-      <h3><strong>{{bulkImport.name}} Template</strong></h3>
+      <h3><strong>{{bulkImport.name}} {{ 'labels.heading.Template' | translate }}</strong></h3>
 
       <form [formGroup]="bulkImportForm">
 
@@ -12,7 +12,7 @@
 
           <div *ngIf="bulkImport.formFields >= 1">
             <mat-form-field fxFlex>
-              <mat-label>Office</mat-label>
+              <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
               <mat-select formControlName="officeId">
                 <mat-option *ngFor="let office of officeData" [value]="office.id">
                 {{ office.name }}
@@ -23,7 +23,7 @@
 
           <div *ngIf="bulkImport.formFields >= 2">
             <mat-form-field fxFlex>
-              <mat-label>Staff</mat-label>
+              <mat-label>{{ 'labels.inputs.Staff' | translate }}</mat-label>
               <mat-select formControlName="staffId">
                 <mat-option *ngFor="let staff of staffData" [value]="staff.id">
                 {{ staff.displayName }}
@@ -34,10 +34,10 @@
 
           <div *ngIf="bulkImport.formFields === 3">
             <mat-form-field fxFlex>
-              <mat-label>Legal Form</mat-label>
+              <mat-label>{{ 'labels.inputs.Legal Form' | translate }}</mat-label>
               <mat-select required formControlName="legalForm">
-                <mat-option value="Entity">Entity</mat-option>
-                <mat-option value="Person">Person</mat-option>
+                <mat-option value="Entity">{{ 'labels.inputs.Entity' | translate }}</mat-option>
+                <mat-option value="Person">{{ 'labels.inputs.Person' | translate }}</mat-option>
               </mat-select>
             </mat-form-field>
           </div>
@@ -48,7 +48,7 @@
 
       <div fxFlex="13%">
         <button mat-raised-button color="primary" (click)="downloadTemplate()" *mifosxHasPermission="bulkImport.permission">
-          <i class="fa fa-download"></i>&nbsp;&nbsp;Download
+          <i class="fa fa-download"></i>&nbsp;&nbsp;{{'labels.buttons.Download' | translate }}
         </button>
       </div>
 
@@ -58,15 +58,15 @@
 
       <h3><strong>{{bulkImport.name}}</strong></h3>
 
-      <h4>Select Excel File</h4>
+      <h4>{{'labels.heading.Select Excel File' | translate }}</h4>
 
       <mifosx-file-upload flex="75%" (change)="onFileSelect($event)" acceptFilter=".xls,.xlsx"></mifosx-file-upload>
 
-      <mat-hint *ngIf="bulkImport.name === 'Clients'">Please retain the value Entity/Person in the filename.</mat-hint>
+      <mat-hint *ngIf="bulkImport.name === 'Clients'">{{ 'labels.text.Please retain the value Entity/Person in the filename.' | translate }}</mat-hint>
 
       <div fxFlex="13%">
         <button mat-raised-button color="primary" [disabled]="!template" (click)="uploadTemplate()">
-          <i class="fa fa-upload"></i>&nbsp;&nbsp;Upload
+          <i class="fa fa-upload"></i>&nbsp;&nbsp;{{'labels.buttons.Upload' | translate }}
         </button>
       </div>
 
@@ -79,12 +79,12 @@
   <mat-card>
 
     <div>
-      <h3 class="documents"><strong>Documents</strong></h3>
+      <h3 class="documents"><strong>{{ 'labels.heading.Documents' | translate }}</strong></h3>
     </div>
 
     <div class="m-b-10" fxLayoutAlign="end">
       <button  mat-raised-button color="primary" (click)="refreshDocuments()">
-        <i class="fa fa-repeat"></i>&nbsp;&nbsp;Refresh
+        <i class="fa fa-repeat"></i>&nbsp;&nbsp;{{'labels.buttons.Refresh' | translate }}
       </button>
     </div>
 
@@ -93,42 +93,42 @@
       <table #importsTable 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 import"> {{ import.name }} </td>
         </ng-container>
 
         <ng-container matColumnDef="importTime">
-          <th mat-header-cell *matHeaderCellDef mat-sort-header> Import Time </th>
-          <td mat-cell *matCellDef="let import"> {{ import.importTime | dateFormat }} </td>
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Import Time' | translate }} </th>
+          <td mat-cell *matCellDef="let import"> {{ import.importTime  | dateFormat }} </td>
         </ng-container>
 
         <ng-container matColumnDef="endTime">
-          <th mat-header-cell *matHeaderCellDef mat-sort-header> End Time </th>
-          <td mat-cell *matCellDef="let import"> {{ import.endTime | dateFormat }} </td>
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.End Time' | translate }} </th>
+          <td mat-cell *matCellDef="let import"> {{ import.endTime  | dateFormat }} </td>
         </ng-container>
 
         <ng-container matColumnDef="completed">
-          <th mat-header-cell *matHeaderCellDef mat-sort-header> Completed </th>
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Completed' | translate }} </th>
           <td mat-cell *matCellDef="let import"> {{ import.completed }} </td>
         </ng-container>
 
         <ng-container matColumnDef="totalRecords">
-          <th mat-header-cell *matHeaderCellDef mat-sort-header> Total Records </th>
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Total Records' | translate }} </th>
           <td mat-cell *matCellDef="let import"> {{ import.totalRecords }} </td>
         </ng-container>
 
         <ng-container matColumnDef="successCount">
-          <th mat-header-cell *matHeaderCellDef mat-sort-header> Success Count </th>
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Success Count' | translate }} </th>
           <td mat-cell *matCellDef="let import"> {{ import.successCount }} </td>
         </ng-container>
 
         <ng-container matColumnDef="failureCount">
-          <th mat-header-cell *matHeaderCellDef mat-sort-header> Failure Count </th>
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Failure Count' | translate }} </th>
           <td mat-cell *matCellDef="let import"> {{ import.failureCount }} </td>
         </ng-container>
 
         <ng-container matColumnDef="download">
-          <th mat-header-cell *matHeaderCellDef mat-sort-header> Download </th>
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Download' | translate }} </th>
           <td mat-cell *matCellDef="let import">
             <button mat-icon-button (click)="downloadDocument(import.name, import.importId)" *mifosxHasPermission="'READ_DOCUMENT'">
               <fa-icon icon="cloud-download-alt"></fa-icon>

src/app/organization/bulk-loan-reassignmnet/bulk-loan-reassignmnet.component.html

@@ -9,7 +9,7 @@
         <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 (selectionChange)="getOffice($event.value)">
               <mat-option *ngFor="let office of offices" [value]="office.id">
                 {{ office.name }} 
@@ -22,12 +22,12 @@
         <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
           <mat-form-field fxFlex="48%" (click)="assignmentDatePicker.open()">
-            <mat-label>Assignment Date</mat-label>
+            <mat-label>{{ 'labels.inputs.Assignment Date' | translate }}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="assignmentDatePicker" required formControlName="assignmentDate">
             <mat-datepicker-toggle matSuffix [for]="assignmentDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #assignmentDatePicker></mat-datepicker>
             <mat-error *ngIf="bulkLoanForm.controls.assignmentDate.hasError('required')">
-              Assignment Date <strong>is required</strong>
+              {{ 'labels.inputs.Assignment Date' | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -36,14 +36,14 @@
         <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
           <mat-form-field fxFlex="48%" *ngIf="fromLoanOfficers !== undefined">
-            <mat-label>From loan officer</mat-label>
+            <mat-label>{{ 'labels.inputs.From loan officer' | translate }}</mat-label>
             <mat-select required formControlName="fromLoanOfficerId" (selectionChange)="getFromOfficers($event.value)">
               <mat-option *ngFor="let fromOfficers of fromLoanOfficers" [value]="fromOfficers.id">
                 {{ fromOfficers.displayName }} 
               </mat-option>
             </mat-select>
             <mat-error *ngIf="bulkLoanForm.controls.fromLoanOfficerId.hasError('required')">
-              From Loan Officer is <strong>required</strong>
+              {{ 'labels.inputs.From Loan Officer' | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -52,14 +52,14 @@
         <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
           <mat-form-field fxFlex="48%">
-            <mat-label>To loan officer</mat-label>
+            <mat-label>{{ 'labels.inputs.To loan officer' | translate }}</mat-label>
             <mat-select required formControlName="toLoanOfficerId">
               <mat-option *ngFor="let toOfficers of toLoanOfficers" [value]="toOfficers.id">
                 {{ toOfficers.displayName }} 
               </mat-option>
             </mat-select>
             <mat-error *ngIf="bulkLoanForm.controls.toLoanOfficerId.hasError('required')">
-              To Loan Officer is <strong>required</strong>
+              {{ 'labels.inputs.To Loan Officer' | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -71,7 +71,7 @@
 
             <thead>
 
-              <th> Clients </th>
+              <th> {{ 'labels.inputs.Clients' | translate }} </th>
 
             </thead>
 
@@ -109,7 +109,7 @@
 
             <thead>
 
-              <th> Groups </th>
+              <th> {{ 'labels.inputs.Groups' | translate }} </th>
 
             </thead>
 
@@ -148,8 +148,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 mat-raised-button color="primary" [disabled]="!bulkLoanForm.valid" *mifosxHasPermission="'BULKREASSIGN_LOAN'">Submit</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate }}</button>
+        <button mat-raised-button color="primary" [disabled]="!bulkLoanForm.valid" *mifosxHasPermission="'BULKREASSIGN_LOAN'">{{'labels.buttons.Submit' | translate }}</button>
       </mat-card-actions>
 
     </form>

src/app/organization/currencies/currencies.component.html

@@ -2,7 +2,7 @@
 <div #buttonAddEdit class="in-block">
   <button mat-raised-button color="primary" [routerLink]="'manage'" *mifosxHasPermission="'UPDATE_CURRENCY'">
     <fa-icon icon="plus" class="m-r-10"></fa-icon>
-    Add/Edit
+    {{'labels.buttons.Add/Edit' | translate }}
   </button>
   </div>
 </div>
@@ -11,7 +11,7 @@
 
   <div #filter fxLayout="row" fxLayoutGap="20px">
     <mat-form-field fxFlex>
-      <mat-label >Filter</mat-label>
+      <mat-label >{{ 'labels.inputs.Filter' | translate }}</mat-label>
       <input matInput (keyup)="applyFilter($event.target.value)">
     </mat-form-field>
   </div>
@@ -21,12 +21,12 @@
     <table mat-table [dataSource]="dataSource" matSort>
 
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Currency Name </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Currency Name' | translate }} </th>
         <td mat-cell *matCellDef="let currency"> {{ currency.name }} </td>
       </ng-container>
 
       <ng-container matColumnDef="code">
-        <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 currency"> {{ currency.code }} </td>
       </ng-container>
 
@@ -42,29 +42,29 @@
 </div>
 
 <ng-template #templateButtonAddEdit let-popover="popover">
-  <h2>Add/Edit Currency</h2>
-  <p class="mw300">This will display a list of all currencies currently in use.</p>
+  <h2>{{ 'labels.heading.Add/Edit Currency' | translate }}</h2>
+  <p class="mw300">{{ 'labels.text.List of all currencies currently in use' | 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="primary" (click)="popover.close();previousStep()">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter, filter, 'bottom', true)">Next</button>
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate }}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">{{'labels.buttons.Back' | translate }}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter, filter, 'bottom', true)">{{'labels.buttons.Next' | translate }}</button>
   </div>
 </ng-template>
 
 <ng-template #templateFilter let-popover="popover">
-  <h4>Search bar to filter currencies.</h4>
+  <h4>{{ 'labels.heading.Search bar to filter currencies.' | 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="primary" (click)="popover.close();showPopover(templateButtonAddEdit,buttonAddEdit, 'bottom', true)">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateTableCurrencies, tableCurrencies, 'top', true)">Next</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(templateButtonAddEdit,buttonAddEdit, 'bottom', true)">{{'labels.buttons.Back' | translate }}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateTableCurrencies, tableCurrencies, 'top', true)">{{'labels.buttons.Next' | translate }}</button>
   </div>
 </ng-template>
 
 <ng-template #templateTableCurrencies let-popover="popover">
-  <h4>List of currencies available.</h4>
+  <h4>{{ 'labels.heading.List of currencies available.' | 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="primary" (click)="popover.close();showPopover(templateFilter, filter, 'bottom', true)">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">Next</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)">{{'labels.buttons.Back' | translate }}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">{{'labels.buttons.Next' | translate }}</button>
   </div>
 </ng-template>

src/app/organization/currencies/manage-currencies/manage-currencies.component.html

@@ -8,14 +8,14 @@
         fxFlex="48%" (ngSubmit)="addCurrency()">
 
         <mat-form-field fxFlex="calc(90%-20px)">
-            <mat-label>Currency</mat-label>
+            <mat-label>{{ 'labels.inputs.Currency' | translate }}</mat-label>
             <mat-select required formControlName="currency">
               <mat-option *ngFor="let currency of currencyData" [value]="currency">
                 {{ currency.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="currencyForm.controls.currency.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>
 
@@ -49,12 +49,12 @@
 </div>
 
 <ng-template #templateCurrencyFormRef let-popover="popover">
-  <h4>Add Currency Form</h4>
-  <p class="mw400">This form will be used to add currency. To add currency click on add currency and fill the form and then click add else click back or next. For more details click: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67141734/Currency+Configuration" target="_blank">Currency Configuration</a></p>
+  <h4>{{'labels.heading.Add Currency Form' | translate }}</h4>
+  <p class="mw400">{{ 'labels.text.Used to add currency' | translate }}: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67141734/Currency+Configuration" target="_blank">{{ 'labels.inputs.Currency Configuration' | 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="primary" (click)="popover.close();">Add Currency</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">Next</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();">{{"labels.buttons.Add Currency' | translate }}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">{{"labels.buttons.Back' | translate }}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">{{"labels.buttons.Next' | translate }}</button>
   </div>
 </ng-template>

src/app/organization/employees/create-employee/create-employee.component.html

@@ -9,55 +9,55 @@
         <div #createEmployeeFormRef 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="employeeForm.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>
-            <mat-label>First Name</mat-label>
+            <mat-label>{{'labels.inputs.First Name' | translate }}</mat-label>
             <input matInput required formControlName="firstname">
             <mat-error *ngIf="employeeForm.controls.firstname.hasError('required')">
-              First Name is <strong>required</strong>
+              {{'labels.inputs.First Name' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
             <mat-error *ngIf="employeeForm.controls.firstname.hasError('pattern')">
-              First Name <strong>cannot</strong> begin with a special character or number
+              {{'labels.inputs.First Name' | translate }} <strong>{{'labels.inputs.cannot' | translate }}</strong> {{'labels.inputs.begin with a special character or number' | translate }}
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Last Name</mat-label>
+            <mat-label>{{'labels.inputs.Last Name' | translate }}</mat-label>
             <input matInput required formControlName="lastname">
             <mat-error *ngIf="employeeForm.controls.lastname.hasError('required')">
-              Last Name is <strong>required</strong>
+              {{'labels.inputs.Last Name' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
             <mat-error *ngIf="employeeForm.controls.lastname.hasError('pattern')">
-              Last Name <strong>cannot</strong> begin with a special character or number
+              {{'labels.inputs.Last Name' | translate }} <strong>{{'labels.inputs.cannot' | translate }}</strong> {{'labels.inputs.begin with a special character or number' | translate }}
             </mat-error>
           </mat-form-field>
 
           <mat-checkbox labelPosition="before" formControlName="isLoanOfficer" class="loan-officer">
-            Is Loan Officer
+            {{'labels.inputs.Is Loan Officer' | translate }}
           </mat-checkbox>
 
           <mat-form-field>
-            <mat-label>Mobile Number for SMS</mat-label>
+            <mat-label>{{'labels.inputs.Mobile Number for SMS' | translate }}</mat-label>
             <input matInput formControlName="mobileNo">
           </mat-form-field>
 
           <mat-form-field (click)="joiningDatePicker.open()">
-            <mat-label>Joining Date</mat-label>
+            <mat-label>{{'labels.inputs.Joining Date' | translate }}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="joiningDatePicker" required formControlName="joiningDate">
             <mat-datepicker-toggle matSuffix [for]="joiningDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #joiningDatePicker></mat-datepicker>
             <mat-error *ngIf="employeeForm.controls.joiningDate.hasError('required')">
-              Joining Date is <strong>required</strong>
+              {{'labels.inputs.Joining Date' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -66,8 +66,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 mat-raised-button color="primary" [disabled]="!employeeForm.valid" *mifosxHasPermission="'CREATE_STAFF'">Submit</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate }}</button>
+        <button mat-raised-button color="primary" [disabled]="!employeeForm.valid" *mifosxHasPermission="'CREATE_STAFF'">{{'labels.buttons.Submit' | translate }}</button>
       </mat-card-actions>
 
     </form>
@@ -77,12 +77,12 @@
 </div>
 
 <ng-template #templateCreateEmployeeForm let-popover="popover">
-  <h2>Create Employee</h2>
-  <p class="mw400">Click to start filling the details. * mark fields are neccessary. <br> For more details click: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67141732/Manage+Employees" target="_blank">Manage Employees</a></p>
+  <h2>{{ 'labels.heading.Create Employee' | translate }}</h2>
+  <p class="mw400">{{'labels.text.Start filling the details' | translate }} <br> {{'labels.text.For more details click' | translate }}: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67141732/Manage+Employees" target="_blank">{{'labels.inputs.Manage Employees' | 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="primary" (click)="popover.close()">Create Employee</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">Back</button> 
-    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">Next</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()">{{'labels.buttons.Create Employee' | translate }}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">{{'labels.buttons.Back' | translate }}</button> 
+    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">{{'labels.buttons.Next' | translate }}</button>
   </div>
 </ng-template>

src/app/organization/employees/edit-employee/edit-employee.component.html

@@ -9,59 +9,59 @@
         <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="editEmployeeForm.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>
-            <mat-label>First Name</mat-label>
+            <mat-label>{{'labels.inputs.First Name' | translate }}</mat-label>
             <input matInput required formControlName="firstname">
             <mat-error *ngIf="editEmployeeForm.controls.firstname.hasError('required')">
-              First Name is <strong>required</strong>
+              {{'labels.inputs.First Name' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
             <mat-error *ngIf="editEmployeeForm.controls.firstname.hasError('pattern')">
-              First Name <strong>cannot</strong> begin with a special character or number
+              {{'labels.inputs.First Name' | translate }} <strong>{{'labels.inputs.cannot' | translate }}</strong> {{'labels.inputs.begin with a special character or number' | translate }}
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Last Name</mat-label>
+            <mat-label>{{'labels.inputs.Last Name' | translate }}</mat-label>
             <input matInput required formControlName="lastname">
             <mat-error *ngIf="editEmployeeForm.controls.lastname.hasError('required')">
-              Last Name is <strong>required</strong>
+              {{'labels.inputs.Last Name' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
             <mat-error *ngIf="editEmployeeForm.controls.lastname.hasError('pattern')">
-              Last Name <strong>cannot</strong> begin with a special character or number
+              {{'labels.inputs.Last Name' | translate }} <strong>{{'labels.inputs.cannot' | translate }}</strong> {{'labels.inputs.begin with a special character or number' | translate }}
             </mat-error>
           </mat-form-field>
 
           <mat-checkbox labelPosition="before" formControlName="isLoanOfficer" class="m-b-10">
-            Is Loan Officer
+            {{'labels.inputs.Is Loan Officer' | translate }}
           </mat-checkbox>
 
           <mat-form-field>
-            <mat-label>Mobile Number for SMS</mat-label>
+            <mat-label>{{'labels.inputs.Mobile Number for SMS' | translate }}</mat-label>
             <input matInput formControlName="mobileNo">
           </mat-form-field>
 
           <mat-checkbox labelPosition="before" formControlName="isActive">
-            Active
+            {{'labels.inputs.Active' | translate }}
           </mat-checkbox>
 
           <mat-form-field (click)="joiningDatePicker.open()">
-            <mat-label>Joining Date</mat-label>
+            <mat-label>{{'labels.inputs.Joining Date' | translate }}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="joiningDatePicker" required formControlName="joiningDate">
             <mat-datepicker-toggle matSuffix [for]="joiningDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #joiningDatePicker></mat-datepicker>
             <mat-error *ngIf="editEmployeeForm.controls.joiningDate.hasError('required')">
-              Joining Date is <strong>required</strong>
+              {{'labels.inputs.Joining Date' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -70,8 +70,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 mat-raised-button color="primary" [disabled]="!editEmployeeForm.valid" *mifosxHasPermission="'UPDATE_STAFF'">Submit</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate }}</button>
+        <button mat-raised-button color="primary" [disabled]="!editEmployeeForm.valid" *mifosxHasPermission="'UPDATE_STAFF'">{{'labels.buttons.Submit' | translate }}</button>
       </mat-card-actions>
 
     </form>

src/app/organization/employees/employees.component.html

@@ -3,13 +3,13 @@
   <div #buttonImportEmployees>
     <button mat-raised-button color="primary" *mifosxHasPermission="'CREATE_STAFF'" [routerLink]="['/', 'organization', 'bulk-import', 'Employees']">
     <fa-icon icon="upload" class="m-r-10"></fa-icon>
-    Import Employees
+    {{'labels.buttons.Import Employees' | translate }}
   </button>
   </div>
   <div #buttonCreateEmployee>
     <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_STAFF'">
     <fa-icon icon="plus" class="m-r-10"></fa-icon>
-    Create Employee
+    {{'labels.buttons.Create Employee' | translate }}
   </button>
   </div>
 
@@ -29,27 +29,27 @@
         <table mat-table [dataSource]="dataSource" matSort>
 
             <ng-container matColumnDef="displayName">
-                <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 employee"> {{ employee.displayName }} </td>
             </ng-container>
 
             <ng-container matColumnDef="isLoanOfficer">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header> Loan Officer </th>
+                <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Loan Officer' | translate }} </th>
                 <td mat-cell *matCellDef="let employee">
                     <div [className]="employee.isLoanOfficer === true ? 'true' : 'false'">
-                        <fa-icon *ngIf="employee.isLoanOfficer" icon="check-circle" size="lg" matTooltip="Yes" matTooltipPosition="right"></fa-icon>
-                        <fa-icon *ngIf="!employee.isLoanOfficer" icon="times-circle" size="lg" matTooltip="No" matTooltipPosition="right"></fa-icon>
+                        <fa-icon *ngIf="employee.isLoanOfficer" icon="check-circle" size="lg" matTooltip="{{ 'tooltips.Yes' | translate }}" matTooltipPosition="right"></fa-icon>
+                        <fa-icon *ngIf="!employee.isLoanOfficer" icon="times-circle" size="lg" matTooltip="{{ 'tooltips.No' | translate }}" matTooltipPosition="right"></fa-icon>
                     </div>
                 </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 employees"> {{ employees.officeName }} </td>
             </ng-container>
 
             <ng-container matColumnDef="isActive">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header> Status </th>
+                <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Status' | translate }} </th>
                 <td mat-cell *matCellDef="let employee">
                     <div [className]="employee.isActive === true ? 'true' : 'false'">
                         <fa-icon matTooltip="{{ employee.isActive === true ? 'Active' : 'Inactive' }}" matTooltipPosition="right" icon="circle" size="lg"></fa-icon>
@@ -69,39 +69,39 @@
 </div>
 
 <ng-template #templateButtonImportEmployees let-data let-popover="popover">
-  <h2>Import Employees</h2>
-  <p class="mw300">This button is used to import employee details from your local device.</p>
+  <h2>{{ 'labels.heading.Import Employees' | translate }}</h2>
+  <p class="mw300">{{'labels.text.Import employee details from your local device' | 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="primary" (click)="popover.close();previousStep()">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonCreateEmployee,buttonCreateEmployee,'bottom', true)">Next</button>
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate }}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">{{'labels.buttons.Back' | translate }}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonCreateEmployee,buttonCreateEmployee,'bottom', true)">{{'labels.buttons.Next' | translate }}</button>
   </div>
 </ng-template>
 
 <ng-template #templateButtonCreateEmployee let-popover="popover">
-  <h2>Create Employee</h2>
-  <p class="mw300">This option allows you to create new employees in your organization.</p>
+  <h2>{{ 'labels.heading.Create Employee' | translate }}</h2>
+  <p class="mw300">{{'labels.text.Create new employees in your organization' | 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="primary" (click)="popover.close();showPopover(templateButtonImportEmployees,buttonImportEmployees,'bottom', true)">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter,filter,'bottom', true)">Next</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(templateButtonImportEmployees,buttonImportEmployees,'bottom', true)">{{'labels.buttons.Back' | translate }}</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 employees.</h4>
+  <h4>{{ 'labels.heading.Search bar to filter employees.' | 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="primary" (click)="popover.close();showPopover(templateButtonCreateEmployee,buttonCreateEmployee,'bottom', true)">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateTableEmployees,tableEmployees,'top', true)">Next</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(templateButtonCreateEmployee,buttonCreateEmployee,'bottom', true)">{{'labels.buttons.Back' | translate }}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateTableEmployees,tableEmployees,'top', true)">{{'labels.buttons.Next' | translate }}</button>
   </div>
 </ng-template>
 
 <ng-template #templateTableEmployees let-popover="popover">
-  <h4>List of employees in the organization.</h4>
+  <h4>{{ 'labels.heading.List of employees in the 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="primary" (click)="popover.close();showPopover(templateFilter,filter,'bottom', true)">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">Next</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)">{{'labels.buttons.Back' | translate }}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">{{'labels.buttons.Next' | translate }}</button>
   </div>
 </ng-template>

src/app/organization/employees/view-employee/view-employee.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]="['edit']" *mifosxHasPermission="'UPDATE_STAFF'">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    Edit
+    {{'labels.buttons.Edit' | translate }}
   </button>
 </div>
 
@@ -14,7 +14,7 @@
       <div fxLayout="row wrap" class="content">
 
         <div fxFlex="50%" class="mat-body-strong">
-          First Name
+          {{'labels.inputs.First Name' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -22,7 +22,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Last Name
+          {{'labels.inputs.Last Name' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -30,7 +30,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Office
+          {{'labels.inputs.Office' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -38,7 +38,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Is Loan Officer
+          {{'labels.inputs.Is Loan Officer' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -46,7 +46,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong" *ngIf="employeeData.mobileNo">
-          Mobile Number for SMS
+          {{'labels.inputs.Mobile Number for SMS' | translate }}
         </div>
 
         <div fxFlex="50%" *ngIf="employeeData.mobileNo">
@@ -54,7 +54,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Status
+          {{'labels.inputs.Status' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -62,7 +62,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Joining Date
+          {{'labels.inputs.Joining Date' | translate }}
         </div>
 
         <div fxFlex="50%">

src/app/organization/entity-data-table-checks/create-enity-data-table-checks/create-enity-data-table-checks.component.html

@@ -9,62 +9,62 @@
         <div fxLayout="column">
 
           <mat-form-field>
-            <mat-label>Entity</mat-label>
+            <mat-label>{{ 'labels.inputs.Entity' | translate }}</mat-label>
             <mat-select required formControlName="entity">
               <mat-option *ngFor="let entity of entityTypes" [value]="entity.value">
                 {{ entity.name }} 
               </mat-option>
             </mat-select>
             <mat-error *ngIf="createEntityForm.controls.entity.hasError('required')">
-              Entity is <strong>required</strong>
+              {{ 'labels.inputs.Entity' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Status</mat-label>
+            <mat-label>{{ 'labels.inputs.Status' | translate }}</mat-label>
             <mat-select required formControlName="status">
               <mat-option *ngFor="let status of statusList" [value]="status.code">
                 {{ status.name }} 
               </mat-option>
             </mat-select>
             <mat-error *ngIf="createEntityForm.controls.status.hasError('required')">
-              Status is <strong>required</strong>
+              {{ 'labels.inputs.Status' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Data Table</mat-label>
+            <mat-label>{{ 'labels.inputs.Data Table' | translate }}</mat-label>
             <mat-select required formControlName="datatableName">
               <mat-option *ngFor="let dataTable of dataTableList" [value]="dataTable.dataTableName">
                 {{ dataTable.dataTableName }} 
               </mat-option>
             </mat-select>
             <mat-error *ngIf="createEntityForm.controls.datatableName.hasError('required')">
-              Data Table is <strong>required</strong>
+              {{ 'labels.inputs.Data Table' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field *ngIf="entityType === 'm_loan'">
-            <mat-label>Products</mat-label>
+            <mat-label>{{ 'labels.inputs.Products' | translate }}</mat-label>
             <mat-select required formControlName="productId">
               <mat-option *ngFor="let loanProducts of createEntityData.loanProductDatas" [value]="loanProducts.id">
                 {{ loanProducts.name }} 
               </mat-option>
             </mat-select>
             <mat-error *ngIf="createEntityForm.controls.productId.hasError('required')">
-              Loan Product is <strong>required</strong>
+              {{ 'labels.inputs.Loan Product' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field *ngIf="entityType === 'm_savings_account'">
-            <mat-label>Products</mat-label>
+            <mat-label>{{ 'labels.inputs.Products' | translate }}</mat-label>
             <mat-select required formControlName="productId">
               <mat-option *ngFor="let savingsProducts of createEntityData.savingsProductDatas" [value]="savingsProducts.id">
                 {{ savingsProducts.name }} 
               </mat-option>
             </mat-select>
             <mat-error *ngIf="createEntityForm.controls.productId.hasError('required')">
-              Loan Product is <strong>required</strong>
+              {{ 'labels.inputs.Loan Product' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -73,8 +73,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 mat-raised-button color="primary" [disabled]="!createEntityForm.valid">Submit</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate }}</button>
+        <button mat-raised-button color="primary" [disabled]="!createEntityForm.valid">{{'labels.buttons.Submit' | translate }}</button>
       </mat-card-actions>
 
     </form>

src/app/organization/entity-data-table-checks/entity-data-table-checks.component.html

@@ -2,7 +2,7 @@
 
   <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_ENTITY_DATATABLE_CHECK'">
     <fa-icon icon="plus" class="m-r-10"></fa-icon>
-    Create
+    {{'labels.buttons.Create' | translate }}
   </button>
 
 </div>
@@ -21,40 +21,40 @@
     <table mat-table [dataSource]="dataSource" matSort>
 
       <ng-container matColumnDef="entity">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Entity </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Entity' | translate }} </th>
         <td mat-cell *matCellDef="let entityDataTableCheck"> {{ entityDataTableCheck.entity }} </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 entityDataTableCheck"> {{ entityDataTableCheck.productName }} </td>
       </ng-container>
 
       <ng-container matColumnDef="datatableName">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Data Table </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Data Table' | translate }} </th>
         <td mat-cell *matCellDef="let entityDataTableCheck"> {{ entityDataTableCheck.datatableName }} </td>
       </ng-container>
 
       <ng-container matColumnDef="status">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Status </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Status' | translate }} </th>
         <td mat-cell *matCellDef="let entityDataTableCheck"> {{ entityDataTableCheck.status.value }} </td>
       </ng-container>
 
       <ng-container matColumnDef="systemDefined">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> System Defined </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.System Defined' | translate }} </th>
         <td mat-cell *matCellDef="let entityDataTableCheck">
           <div [className]="entityDataTableCheck.systemDefined === true ? 'true' : 'false'">
-            <fa-icon *ngIf="entityDataTableCheck.systemDefined" icon="check-circle" size="lg" matTooltip="Yes" matTooltipPosition="right"></fa-icon>
-            <fa-icon *ngIf="!entityDataTableCheck.systemDefined" icon="times-circle" size="lg" matTooltip="No" matTooltipPosition="right"></fa-icon>
+            <fa-icon *ngIf="entityDataTableCheck.systemDefined" icon="check-circle" size="lg" matTooltip="{{ 'tooltips.Yes' | translate }}" matTooltipPosition="right"></fa-icon>
+            <fa-icon *ngIf="!entityDataTableCheck.systemDefined" icon="times-circle" size="lg" matTooltip="{{ 'tooltips.No' | translate }}" matTooltipPosition="right"></fa-icon>
           </div>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="actions">
-        <th mat-header-cell *matHeaderCellDef> Actions </th>
+        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Actions' | translate }} </th>
         <td mat-cell *matCellDef="let entityDataTableCheck">
           <button mat-button (click)="deleteEntityDataTableCheck(entityDataTableCheck.id)" color="warn" *mifosxHasPermission="'DELETE_ENTITY_DATATABLE_CHECK'">
-            <fa-icon icon="trash" class="m-r-10"></fa-icon>Delete
+            <fa-icon icon="trash" class="m-r-10"></fa-icon>{{'labels.buttons.Delete' | translate }}
           </button>
         </td>
       </ng-container>

src/app/organization/fund-mapping/fund-mapping.component.html

@@ -5,20 +5,20 @@
     <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" fxLayoutAlign.gt-sm="start center">
   
       <mat-form-field fxFlex="48%">
-        <mat-label>Loan Status</mat-label>
+        <mat-label>{{ 'labels.inputs.Loan Status' | translate }}</mat-label>
         <mat-select formControlName="loanStatus" multiple>
-          <mat-option value="all">All</mat-option>
-          <mat-option value="active">Active</mat-option>
-          <mat-option value="closed">Overpaid</mat-option>
-          <mat-option value="overpaid">Closed (obligations met)</mat-option>
-          <mat-option value="writeoff">Closed (written-off)</mat-option>
+          <mat-option value="all">{{ 'labels.inputs.All' | translate }}</mat-option>
+          <mat-option value="active">{{ 'labels.inputs.Active' | translate }}</mat-option>
+          <mat-option value="closed">{{ 'labels.inputs.Overpaid' | translate }}</mat-option>
+          <mat-option value="overpaid">{{ 'labels.inputs.Closed (obligations met)' | translate }}</mat-option>
+          <mat-option value="writeoff">{{ 'labels.inputs.Closed (written-off)' | translate }}</mat-option>
         </mat-select>
       </mat-form-field>
 
       <span fxFlex="48%" fxHide.lt-md></span>
 
       <mat-form-field fxFlex="48%">
-        <mat-label>Product</mat-label>
+        <mat-label>{{ 'labels.inputs.Product' | translate }}</mat-label>
         <mat-select formControlName="loanProducts" multiple>
           <mat-option *ngFor="let product of advanceSearchTemplate.loanProducts" [value]="product.id">
             {{ product.name }}
@@ -27,7 +27,7 @@
       </mat-form-field>
   
       <mat-form-field fxFlex="48%">
-        <mat-label>Office</mat-label>
+        <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
         <mat-select formControlName="offices" multiple>
           <mat-option *ngFor="let office of advanceSearchTemplate.offices" [value]="office.id">
             {{ office.name }}
@@ -36,46 +36,46 @@
       </mat-form-field>
 
       <mat-form-field fxFlex="31%">
-        <mat-label>Date Type</mat-label>
+        <mat-label>{{ 'labels.inputs.Date Type' | translate }}</mat-label>
         <mat-select required formControlName="loanDateOption">
-          <mat-option value="approvalDate">Approval Date</mat-option>
-          <mat-option value="createdDate">Creation Date</mat-option>
-          <mat-option value="disbursalDate">Disbursement Date</mat-option>
+          <mat-option value="approvalDate">{{ 'labels.inputs.Approval Date' | translate }}</mat-option>
+          <mat-option value="createdDate">{{ 'labels.inputs.Creation Date' | translate }}</mat-option>
+          <mat-option value="disbursalDate">{{ 'labels.inputs.Disbursement Date' | translate }}</mat-option>
         </mat-select>
       </mat-form-field>
 
       <mat-form-field fxFlex="31%" (click)="fromDatePicker.open()">
-        <mat-label>From Date</mat-label>
+        <mat-label>{{ 'labels.inputs.From Date' | translate }}</mat-label>
         <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="fromDatePicker" 
           required formControlName="loanFromDate" required>
         <mat-datepicker-toggle matSuffix [for]="fromDatePicker"></mat-datepicker-toggle>
         <mat-datepicker #fromDatePicker></mat-datepicker>
         <mat-error *ngIf="fundMappingForm.controls.loanFromDate.hasError('required')">
-          From Date is <strong>required</strong>
+          {{ 'labels.inputs.From Date' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
         </mat-error>
       </mat-form-field>
 
       <mat-form-field fxFlex="31%" (click)="toDatePicker.open()">
-        <mat-label>To Date</mat-label>
+        <mat-label>{{ 'labels.inputs.To Date' | translate }}</mat-label>
         <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="toDatePicker" 
           required formControlName="loanToDate" required>
         <mat-datepicker-toggle matSuffix [for]="toDatePicker"></mat-datepicker-toggle>
         <mat-datepicker #toDatePicker></mat-datepicker>
         <mat-error *ngIf="fundMappingForm.controls.loanToDate.hasError('required')">
-          To Date is <strong>required</strong>
+          {{ 'labels.inputs.To Date' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
         </mat-error>
       </mat-form-field>
   
       <mat-checkbox fxFlex="73%" labelPosition="before" formControlName="includeOutStandingAmountPercentage" class="margin-b">
-        Loan Outstanding Percentage
+        {{ 'labels.inputs.Loan Outstanding Percentage' | translate }}
       </mat-checkbox>
   
       <div *ngIf="fundMappingForm.value.includeOutStandingAmountPercentage" fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
         <mat-form-field *ngIf="fundMappingForm.contains('outStandingAmountPercentageCondition')" fxFlex="31%">
-          <mat-label>Comparison Condition</mat-label>
+          <mat-label>{{ 'labels.inputs.Comparison Condition' | translate }}</mat-label>
           <mat-select required formControlName="outStandingAmountPercentageCondition">
-            <mat-option value="between">between</mat-option>
+            <mat-option value="between">{{ 'labels.inputs.between' | translate }}</mat-option>
             <mat-option value="<="><=</mat-option>
             <mat-option value=">=">>=</mat-option>
             <mat-option value="<"><</mat-option>
@@ -83,46 +83,46 @@
             <mat-option value="=">=</mat-option>
           </mat-select>
           <mat-error *ngIf="fundMappingForm.controls.outStandingAmountPercentageCondition.hasError('required')">
-            Comparison Condition is <strong>required</strong>
+            {{ 'labels.inputs.Comparison Condition' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
           </mat-error>
         </mat-form-field>
   
         <mat-form-field *ngIf="fundMappingForm.contains('minOutStandingAmountPercentage')" fxFlex="31%">
-          <mat-label>Minimum Value</mat-label>
+          <mat-label>{{ 'labels.inputs.Minimum Value' | translate }}</mat-label>
           <input type="number" matInput required formControlName="minOutStandingAmountPercentage">
           <mat-error *ngIf="fundMappingForm.controls.minOutStandingAmountPercentage.hasError('required')">
-            Minimum Value is <strong>required</strong>
+            {{ 'labels.inputs.Minimum Value' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
           </mat-error>
         </mat-form-field>
 
         <mat-form-field *ngIf="fundMappingForm.contains('outStandingAmountPercentage')" fxFlex="31%">
-          <mat-label>Comparison Value</mat-label>
+          <mat-label>{{ 'labels.inputs.Comparison Value' | translate }}</mat-label>
           <input type="number" matInput required formControlName="outStandingAmountPercentage">
           <mat-error *ngIf="fundMappingForm.controls.outStandingAmountPercentage.hasError('required')">
-            Comparison Value is <strong>required</strong>
+            {{ 'labels.inputs.Comparison Value' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
           </mat-error>
         </mat-form-field>
   
         <mat-form-field *ngIf="fundMappingForm.contains('maxOutStandingAmountPercentage')" fxFlex="31%">
-          <mat-label>Maximum Value</mat-label>
+          <mat-label>{{ 'labels.inputs.Maximum Value' | translate }}</mat-label>
           <input type="number" matInput required formControlName="maxOutStandingAmountPercentage">
           <mat-error *ngIf="fundMappingForm.controls.maxOutStandingAmountPercentage.hasError('required')">
-            Maximum Value is <strong>required</strong>
+            {{ 'labels.inputs.Maximum Value' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
           </mat-error>
         </mat-form-field>
   
       </div>
   
       <mat-checkbox fxFlex="73%" labelPosition="before" formControlName="includeOutstandingAmount" class="margin-b">
-        Loan Outstanding Amount
+        {{ 'labels.inputs.Loan Outstanding Amount' | translate }}
       </mat-checkbox>
   
       <div *ngIf="fundMappingForm.value.includeOutstandingAmount" fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
   
         <mat-form-field *ngIf="fundMappingForm.contains('outstandingAmountCondition')" fxFlex="31%">
-          <mat-label>Comparison Condition</mat-label>
+          <mat-label>{{ 'labels.inputs.Comparison Condition' | translate }}</mat-label>
           <mat-select required formControlName="outstandingAmountCondition">
-            <mat-option value="between">between</mat-option>
+            <mat-option value="between">{{ 'labels.inputs.between' | translate }}</mat-option>
             <mat-option value="<="><=</mat-option>
             <mat-option value=">=">>=</mat-option>
             <mat-option value="<"><</mat-option>
@@ -130,31 +130,31 @@
             <mat-option value="=">=</mat-option>
           </mat-select>
           <mat-error *ngIf="fundMappingForm.controls.outstandingAmountCondition.hasError('required')">
-            Comparison Condition is <strong>required</strong>
+            {{ 'labels.inputs.Comparison Condition' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
           </mat-error>
         </mat-form-field>
   
         <mat-form-field *ngIf="fundMappingForm.contains('minOutstandingAmount')" fxFlex="31%">
-          <mat-label>Minimum Value</mat-label>
+          <mat-label>{{ 'labels.inputs.Minimum Value' | translate }}</mat-label>
           <input type="number" matInput required formControlName="minOutstandingAmount">
           <mat-error *ngIf="fundMappingForm.controls.minOutstandingAmount.hasError('required')">
-            Minimum Value is <strong>required</strong>
+            {{ 'labels.inputs.Minimum Value' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
           </mat-error>
         </mat-form-field>
 
         <mat-form-field *ngIf="fundMappingForm.contains('outstandingAmount')" fxFlex="31%">
-          <mat-label>Comparison Value</mat-label>
+          <mat-label>{{ 'labels.inputs.Comparison Value' | translate }}</mat-label>
           <input type="number" matInput required formControlName="outstandingAmount">
           <mat-error *ngIf="fundMappingForm.controls.outstandingAmount.hasError('required')">
-            Comparison Value is <strong>required</strong>
+            {{ 'labels.inputs.Comparison Value' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
           </mat-error>
         </mat-form-field>
   
         <mat-form-field *ngIf="fundMappingForm.contains('maxOutstandingAmount')" fxFlex="31%">
-          <mat-label>Maximum Value</mat-label>
+          <mat-label>{{ 'labels.inputs.Maximum Value' | translate }}</mat-label>
           <input type="number" matInput required formControlName="maxOutstandingAmount">
           <mat-error *ngIf="fundMappingForm.controls.maxOutstandingAmount.hasError('required')">
-            Maximum Value is <strong>required</strong>
+            {{ 'labels.inputs.Maximum Value' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
           </mat-error>
         </mat-form-field>
   
@@ -163,9 +163,9 @@
     </div>
 
     <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]="!fundMappingForm.valid">
-        <fa-icon icon="search"></fa-icon>&nbsp; Summary
+        <fa-icon icon="search"></fa-icon>&nbsp; {{'labels.buttons.Summary' | translate }}
       </button>
     </mat-card-actions>
   
@@ -180,34 +180,34 @@
 
     <div class="m-b-20">
       <button mat-raised-button color="primary" (click)="isCollapsed = false">
-        Parameters
+        {{'labels.buttons.Parameters' | translate }}
       </button>
     </div>
 
     <table class="mat-elevation-z1" 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 loan"> {{ loan.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 loan"> {{ loan.loanProductName }}</td>
       </ng-container>
 
       <ng-container matColumnDef="count">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Count </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Count' | translate }} </th>
         <td mat-cell *matCellDef="let loan"> {{ loan.count }} </td>
       </ng-container>
 
       <ng-container matColumnDef="outstanding">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Outstanding </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Outstanding' | translate }} </th>
         <td mat-cell *matCellDef="let loan"> {{ loan.loanOutStanding }} </td>
       </ng-container>
 
       <ng-container matColumnDef="percentage">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Percentage </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Percentage' | translate }} </th>
         <td mat-cell *matCellDef="let loan"> {{ loan.percentage }} </td>
       </ng-container>
 

src/app/organization/holidays/create-holiday/create-holiday.component.html

@@ -9,61 +9,61 @@
         <div fxLayout="column">
 
           <mat-form-field>
-            <mat-label>Name</mat-label>
+            <mat-label>{{ 'labels.inputs.name' | translate }}</mat-label>
             <input matInput required autofocus formControlName="name">
             <mat-error *ngIf="holidayForm.controls.name.hasError('required')">
-              Name <strong>is required</strong>
+              {{ 'labels.inputs.name' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field (click)="fromDatePicker.open()">
-            <mat-label>From Date</mat-label>
+            <mat-label>{{ 'labels.inputs.From Date' | translate }}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="fromDatePicker" required formControlName="fromDate">
             <mat-datepicker-toggle matSuffix [for]="fromDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #fromDatePicker></mat-datepicker>
             <mat-error *ngIf="holidayForm.controls.fromDate.hasError('required')">
-              From Date <strong>is required</strong>
+              {{ 'labels.inputs.From Date' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field (click)="toDatePicker.open()">
-            <mat-label>To Date</mat-label>
+            <mat-label>{{ 'labels.inputs.To Date' | translate }}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="toDatePicker" required formControlName="toDate">
             <mat-datepicker-toggle matSuffix [for]="toDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #toDatePicker></mat-datepicker>
             <mat-error *ngIf="holidayForm.controls.toDate.hasError('required')">
-              To Date <strong>is required</strong>
+              {{ 'labels.inputs.To Date' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Repayment Scheduling Type</mat-label>
+            <mat-label>{{ 'labels.inputs.Repayment Scheduling Type' | translate }}</mat-label>
             <mat-select required formControlName="reschedulingType">
               <mat-option *ngFor="let repayments of repaymentSchedulingTypes" [value]="repayments.id">
                 {{ repayments.value }} 
               </mat-option>
             </mat-select>
             <mat-error *ngIf="holidayForm.controls.reschedulingType.hasError('required')">
-              Repayment Scheduling Type is <strong>required</strong>
+              {{ 'labels.inputs.Repayment Scheduling Type' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field *ngIf="holidayForm.contains('repaymentsRescheduledTo')" (click)="repaymentDatePicker.open()">
-            <mat-label>Repayment scheduled to</mat-label>
+            <mat-label>{{ 'labels.inputs.Repayment scheduled to' | translate }}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="repaymentDatePicker" required formControlName="repaymentsRescheduledTo">
             <mat-datepicker-toggle matSuffix [for]="repaymentDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #repaymentDatePicker></mat-datepicker>
             <mat-error *ngIf="holidayForm.controls.repaymentsRescheduledTo.hasError('required')">
-              Repayment Scheduled To <strong>is required</strong>
+              {{ 'labels.inputs.Repayment scheduled to' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Description</mat-label>
+            <mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
             <input matInput formControlName="description">
           </mat-form-field>   
           
-          <label>Select applicable offices</label>
+          <label>{{ 'labels.inputs.Select applicable offices' | translate }}</label>
 
           <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
             <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle matTreeNodePadding>
@@ -90,8 +90,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 mat-raised-button color="primary" [disabled]="!holidayForm.valid" *mifosxHasPermission="'CREATE_HOLIDAY'">Submit</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate }}</button>
+        <button mat-raised-button color="primary" [disabled]="!holidayForm.valid" *mifosxHasPermission="'CREATE_HOLIDAY'">{{'labels.buttons.Submit' | translate }}</button>
       </mat-card-actions>
 
     </form>

src/app/organization/holidays/edit-holiday/edit-holiday.component.html

@@ -9,57 +9,57 @@
         <div fxLayout="column">
 
           <mat-form-field>
-            <mat-label>Name</mat-label>
+            <mat-label>{{ 'labels.inputs.name' | translate }}</mat-label>
             <input matInput required autofocus formControlName="name">
             <mat-error *ngIf="holidayForm.controls.name.hasError('required')">
-              Name <strong>is required</strong>
+              {{ 'labels.inputs.name' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field *ngIf="!isActiveHoliday" (click)="fromDatePicker.open()">
-            <mat-label>From Date</mat-label>
+            <mat-label>{{ 'labels.inputs.From Date' | translate }}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="fromDatePicker" required formControlName="fromDate">
             <mat-datepicker-toggle matSuffix [for]="fromDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #fromDatePicker></mat-datepicker>
             <mat-error *ngIf="holidayForm.controls.fromDate.hasError('required')">
-              From Date <strong>is required</strong>
+              {{ 'labels.inputs.From Date' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field *ngIf="!isActiveHoliday" (click)="toDatePicker.open()">
-            <mat-label>To Date</mat-label>
+            <mat-label>{{ 'labels.inputs.To Date' | translate }}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="toDatePicker" required formControlName="toDate">
             <mat-datepicker-toggle matSuffix [for]="toDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #toDatePicker></mat-datepicker>
             <mat-error *ngIf="holidayForm.controls.toDate.hasError('required')">
-              To Date <strong>is required</strong>
+              {{ 'labels.inputs.To Date' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field *ngIf="!isActiveHoliday">
-            <mat-label>Repayment Scheduling Type</mat-label>
+            <mat-label>{{ 'labels.inputs.Repayment Scheduling Type' | translate }}</mat-label>
             <mat-select required formControlName="reschedulingType">
               <mat-option *ngFor="let repayments of holidayData.repaymentSchedulingTypes" [value]="repayments.id">
                 {{ repayments.value }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="holidayForm.controls.reschedulingType.hasError('required')">
-              Repayment Scheduling Type is <strong>required</strong>
+              {{ 'labels.inputs.Repayment Scheduling Type' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field *ngIf="!isActiveHoliday && reSchedulingType === 2" (click)="repaymentDatePicker.open()">
-            <mat-label>Repayment scheduled to</mat-label>
+            <mat-label>{{ 'labels.inputs.Repayment scheduled to' | translate }}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="repaymentDatePicker" required formControlName="repaymentsRescheduledTo">
             <mat-datepicker-toggle matSuffix [for]="repaymentDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #repaymentDatePicker></mat-datepicker>
             <mat-error *ngIf="holidayForm.controls.repaymentsRescheduledTo.hasError('required')">
-              Repayment Scheduled To <strong>is required</strong>
+              {{ 'labels.inputs.Repayment scheduled to' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Description</mat-label>
+            <mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
             <input matInput formControlName="description">
           </mat-form-field>
 
@@ -68,8 +68,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 mat-raised-button color="primary" [disabled]="!holidayForm.valid" *mifosxHasPermission="'UPDATE_HOLIDAY'">Submit</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate }}</button>
+        <button mat-raised-button color="primary" [disabled]="!holidayForm.valid" *mifosxHasPermission="'UPDATE_HOLIDAY'">{{'labels.buttons.Submit' | translate }}</button>
       </mat-card-actions>
 
     </form>

src/app/organization/holidays/holidays.component.html

@@ -3,7 +3,7 @@
   <div #buttonCreateHoliday class="in-block">
   <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_HOLIDAY'">
     <fa-icon icon="plus" class="m-r-10"></fa-icon>
-    Create Holiday
+    {{'labels.buttons.Create Holiday' | translate }}
   </button>
   </div>
 
@@ -18,7 +18,7 @@
       <input matInput (keyup)="applyFilter($event.target.value)">
     </mat-form-field>
     <mat-form-field>
-      <mat-label> Select Office </mat-label>
+      <mat-label> {{ 'labels.inputs.Select Office' | translate }} </mat-label>
       <mat-select [formControl]="officeSelector">
         <mat-option *ngFor="let office of officeData" [value]="office.id">
           {{ office.name }}
@@ -33,27 +33,27 @@
     <table mat-table [dataSource]="dataSource" matSort>
 
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Holiday Name </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Holiday Name' | translate }} </th>
         <td mat-cell *matCellDef="let holidays"> {{ holidays.name }} </td>
       </ng-container>
 
       <ng-container matColumnDef="fromDate">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Start Date </th>
-        <td mat-cell *matCellDef="let holidays"> {{ holidays.fromDate | dateFormat }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Start Date' | translate }} </th>
+        <td mat-cell *matCellDef="let holidays"> {{ holidays.fromDate  | dateFormat }} </td>
       </ng-container>
 
       <ng-container matColumnDef="toDate">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> End Date </th>
-        <td mat-cell *matCellDef="let holidays"> {{ holidays.toDate | dateFormat }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.End Date' | translate }} </th>
+        <td mat-cell *matCellDef="let holidays"> {{ holidays.toDate  | dateFormat }} </td>
       </ng-container>
 
       <ng-container matColumnDef="repaymentsRescheduledTo">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Repayments Scheduled To </th>
-        <td mat-cell *matCellDef="let holidays"> {{ holidays.reschedulingType === 1 ? 'Next Repayment Date' : holidays.repaymentsRescheduledTo | dateFormat }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Repayments Scheduled To' | translate }} </th>
+        <td mat-cell *matCellDef="let holidays"> {{ holidays.reschedulingType === 1 ? 'Next Repayment Date' : holidays.repaymentsRescheduledTo  | dateFormat }} </td>
       </ng-container>
 
       <ng-container matColumnDef="status">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Status </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Status' | translate }} </th>
         <td mat-cell *matCellDef="let holidays"> {{ holidays.status.value }} </td>
       </ng-container>
 
@@ -69,20 +69,20 @@
 </div>
 
 <ng-template #templateButtonCreateHoliday let-popover="popover">
-  <h2>Create Holiday</h2>
-  <p class="mw300">This option allows you to create holidays for different offices in your organization.</p>
+  <h2>{{'labels.heading.Create Holiday' | translate }}</h2>
+  <p class="mw300">{{'labels.text.Create holidays for different offices' | 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="primary" (click)="popover.close();previousStep();">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilterRef,filterRef,'bottom', true);">Next</button>
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate }}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();previousStep();">{{'labels.buttons.Back' | translate }}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilterRef,filterRef,'bottom', true);">{{'labels.buttons.Next' | translate }}</button>
   </div>
 </ng-template>
 
 <ng-template #templateFilterRef let-popover="popover">
-  <h4>Search bar to filter holidays based on different offices.</h4>
+  <h4>{{'labels.heading.Filter holidays' | 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="primary" (click)="popover.close();showPopover(templateButtonCreateHoliday,buttonCreateHoliday,'bottom', true);">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStep();">Next</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(templateButtonCreateHoliday,buttonCreateHoliday,'bottom', true);">{{'labels.buttons.Back' | translate }}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();nextStep();">{{'labels.buttons.Next' | translate }}</button>
   </div>
 </ng-template>

src/app/organization/holidays/view-holidays/view-holidays.component.html

@@ -2,16 +2,16 @@
     <span *mifosxHasPermission="'ACTIVATE_HOLIDAY'">
     <button mat-raised-button color="accent" (click)="activateHoliday()" *ngIf="holidayData.status.value !== 'Active'">
       <fa-icon icon="lock-open" class="m-r-10"></fa-icon>
-      Activate
+      {{'labels.buttons.Activate' | translate }}
     </button>
   </span>
     <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_HOLIDAY'">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    Edit
+    {{'labels.buttons.Edit' | translate }}
   </button>
     <button mat-raised-button color="warn" (click)="deleteHoliday()" *mifosxHasPermission="'DELETE_HOLIDAY'">
     <fa-icon icon="trash" class="m-r-10"></fa-icon>
-    Delete
+    {{'labels.buttons.Delete' | translate }}
   </button>
 </div>
 
@@ -24,7 +24,7 @@
             <div fxLayout="row wrap" class="content">
 
                 <div fxFlex="50%" class="header">
-                    Name
+                    {{ 'labels.inputs.Name' | translate }}
                 </div>
 
                 <div fxFlex="50%">
@@ -32,7 +32,7 @@
                 </div>
 
                 <div fxFlex="50%" class="header">
-                    From Date
+                    {{ 'labels.inputs.From Date' | translate }}
                 </div>
 
                 <div fxFlex="50%">
@@ -40,7 +40,7 @@
                 </div>
 
                 <div fxFlex="50%" class="header">
-                    To Date
+                    {{ 'labels.inputs.To Date' | translate }}
                 </div>
 
                 <div fxFlex="50%">
@@ -48,7 +48,7 @@
                 </div>
 
                 <div fxFlex="50%" class="header">
-                    Repayments Scheduled To
+                    {{ 'labels.inputs.Repayments Scheduled To' | translate }}
                 </div>
 
                 <div fxFlex="50%" *ngIf="holidayData.repaymentsRescheduledTo !== undefined && holidayData.repaymentsRescheduledTo !== null">
@@ -56,7 +56,7 @@
                 </div>
 
                 <div fxFlex="50%" *ngIf="holidayData.repaymentsRescheduledTo === undefined || holidayData.repaymentsRescheduledTo === null">
-                    Next Repayment Date
+                    {{ 'labels.inputs.Next Repayment Date' | translate }}
                 </div>
 
             </div>

src/app/organization/investors/investors.component.html

@@ -3,12 +3,12 @@
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
     <mat-form-field fxFlex="18%">
-      <mat-label>Search by Text</mat-label>
+      <mat-label>{{'labels.text.Search by Text' | translate}}</mat-label>
       <input matInput [formControl]="searchText">
     </mat-form-field>
 
     <mat-form-field fxFlex="18%" (click)="effectiveFromDatePicker.open()">
-      <mat-label>Effective Date From</mat-label>
+      <mat-label>{{'labels.text.Effective Date From' | translate}}</mat-label>
       <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="effectiveFromDatePicker"
         [formControl]="effectiveFromDate">
       <mat-datepicker-toggle matSuffix [for]="effectiveFromDatePicker"></mat-datepicker-toggle>
@@ -16,7 +16,7 @@
     </mat-form-field>
 
     <mat-form-field fxFlex="18%" (click)="effectiveToDatePicker.open()">
-      <mat-label>Effective Date To</mat-label>
+      <mat-label>{{'labels.text.Effective Date To' | translate}}</mat-label>
       <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="effectiveToDatePicker"
         [formControl]="effectiveToDate">
       <mat-datepicker-toggle matSuffix [for]="effectiveToDatePicker"></mat-datepicker-toggle>
@@ -24,7 +24,7 @@
     </mat-form-field>
 
     <mat-form-field fxFlex="18%" (click)="settlementFromDatePicker.open()">
-      <mat-label>Settlement Date From</mat-label>
+      <mat-label>{{'labels.text.Settlement Date From' | translate}}</mat-label>
       <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="settlementFromDatePicker"
         [formControl]="settlementFromDate">
       <mat-datepicker-toggle matSuffix [for]="settlementFromDatePicker"></mat-datepicker-toggle>
@@ -32,7 +32,7 @@
     </mat-form-field>
 
     <mat-form-field fxFlex="18%" (click)="settlementToDatePicker.open()">
-      <mat-label>Settlement Date To</mat-label>
+      <mat-label>{{'labels.text.Settlement Date To' | translate}}</mat-label>
       <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="settlementToDatePicker"
         [formControl]="settlementToDate">
       <mat-datepicker-toggle matSuffix [for]="settlementToDatePicker"></mat-datepicker-toggle>
@@ -41,7 +41,7 @@
 
     <div fxFlex="98%" class="center m-t-15">
       <button mat-raised-button color="primary" (click)="searchEAO()">
-        <fa-icon icon="search" class="m-r-10"></fa-icon> Search
+        <fa-icon icon="search" class="m-r-10"></fa-icon> {{'labels.buttons.Search' | translate}}
       </button>
     </div>
   </div>
@@ -61,15 +61,15 @@
                     <span class="m-l-10 status">{{record.status}}</span>
                   </div>
                 </td>
-                <td class="field-name"> Owner ExternalId </td>
+                <td class="field-name"> {{'labels.inputs.Owner External Id' | translate}} </td>
                 <td>
                   <mifosx-external-identifier externalId="{{record.owner.externalId}}"></mifosx-external-identifier>
                 </td>
-                <td class="field-name"> Transfer ExternalId </td>
+                <td class="field-name"> {{'labels.inputs.Transfer External Id' | translate}} </td>
                 <td>
                   <mifosx-external-identifier externalId="{{record.transferExternalId}}"></mifosx-external-identifier>
                 </td>
-                <td class="field-name"> Effective From </td>
+                <td class="field-name"> {{'labels.inputs.Effective From' | translate}} </td>
                 <td> {{ record.effectiveFrom | dateFormat }} </td>
               </tr>
             </table>
@@ -82,7 +82,7 @@
             <tbody>
               <tr>
                 <td fxFlex="25%" class="m-l-5">
-                  <b>Status :</b>
+                  <b>{{'labels.inputs.Status' | translate}} :</b>
                 </td>
                 <td fxFlex="25%" class="m-l-5 left">
                   <div [ngClass]="itemStatus(record.status)">
@@ -91,7 +91,7 @@
                   </div>
                 </td>
                 <td fxFlex="25%" class="m-l-5">
-                  <b>Owner External Id :</b>
+                  <b>{{'labels.inputs.Owner External Id' | translate}} :</b>
                 </td>
                 <td fxFlex="25%" class="m-l-5 left">
                   <mifosx-external-identifier externalId="{{record.owner.externalId}}" completed="true"></mifosx-external-identifier>
@@ -99,13 +99,13 @@
               </tr>
               <tr>
                 <td fxFlex="25%" class="m-l-5">
-                  <b>Settlement Date :</b>
+                  <b>{{'labels.inputs.Settlement Date' | translate}} :</b>
                 </td>
                 <td fxFlex="25%" class="m-l-5">
                   {{record.settlementDate | dateFormat}}
                 </td>
                 <td fxFlex="25%" class="m-l-5">
-                  <b>Effective Date :</b>
+                  <b>{{'labels.inputs.Effective Date' | translate}} :</b>
                 </td>
                 <td fxFlex="25%" class="m-l-5">
                   {{record.effectiveFrom | dateFormat}}
@@ -113,33 +113,33 @@
               </tr>
               <tr *ngIf="record.details">
                 <td fxFlex="25%" class="m-l-5">
-                  <b>Details :</b>
+                  <b>{{'labels.inputs.Details' | translate}} :</b>
                 </td>
                 <td fxFlex="75%" class="left">
                   <table>
                     <tbody>
                       <tr>
-                        <td fxFlex="50%" class="m-l-5"><b>Principal Outstanding :</b></td>
+                        <td fxFlex="50%" class="m-l-5"><b>{{'labels.inputs.Principal Outstanding' | translate}} :</b></td>
                         <td fxFlex="50%" class="r-amount">{{record.details.totalPrincipalOutstanding | formatNumber}}</td>
                       </tr>
                       <tr>
-                        <td fxFlex="50%" class="m-l-5"><b>Interest Outstanding :</b></td>
+                        <td fxFlex="50%" class="m-l-5"><b>{{'labels.inputs.Interest Outstanding' | translate}} :</b></td>
                         <td fxFlex="50%" class="r-amount">{{record.details.totalInterestOutstanding | formatNumber}}</td>
                       </tr>
                       <tr>
-                        <td fxFlex="50%" class="m-l-5"><b>Fees Outstanding :</b></td>
+                        <td fxFlex="50%" class="m-l-5"><b>{{'labels.inputs.Fees Outstanding' | translate}} :</b></td>
                         <td fxFlex="50%" class="r-amount">{{record.details.totalFeeChargesOutstanding | formatNumber}}</td>
                       </tr>
                       <tr>
-                        <td fxFlex="50%" class="m-l-5"><b>Penalties Outstanding :</b></td>
+                        <td fxFlex="50%" class="m-l-5"><b>{{'labels.inputs.Penalties Outstanding' | translate}} :</b></td>
                         <td fxFlex="50%" class="r-amount">{{record.details.totalPenaltyChargesOutstanding | formatNumber}}</td>
                       </tr>
                       <tr>
-                        <td fxFlex="50%" class="m-l-5"><b>Outstanding :</b></td>
+                        <td fxFlex="50%" class="m-l-5"><b>{{'labels.inputs.Outstanding' | translate}} :</b></td>
                         <td fxFlex="50%" class="r-amount">{{record.details.totalOutstanding | formatNumber}}</td>
                       </tr>
                       <tr>
-                        <td fxFlex="50%" class="m-l-5"><b>Overpaid :</b></td>
+                        <td fxFlex="50%" class="m-l-5"><b>{{'labels.inputs.Overpaid' | translate}} :</b></td>
                         <td fxFlex="50%" class="r-amount">{{record.details.totalOverpaid | formatNumber}}</td>
                       </tr>
                     </tbody>
@@ -153,7 +153,7 @@
         <mat-divider [inset]="true"></mat-divider>
 
         <div class="record-actions" fxLayout="row" fxLayoutAlign="flex-end" *ngIf="canBeCancelled(record)">
-          <button mat-button color="warn" (click)="cancelPendingSale(record)" matTooltip="Cancel Pending Sale">
+          <button mat-button color="warn" (click)="cancelPendingSale(record)" matTooltip="{{'labels.text.Cancel Pending Sale' | translate}}">
             <fa-icon icon="trash"></fa-icon>
           </button>
         </div>
@@ -168,7 +168,7 @@
   <div class="alert" *ngIf="!existsDataToFilter">
     <div class="message">
       <i class="fa fa-exclamation-circle alert-check"></i>
-      No data was found
+      {{'labels.text.No data found' | translate}}
     </div>
   </div>
 

src/app/organization/loan-provisioning-criteria/create-loan-provisioning-criteria/create-loan-provisioning-criteria.component.html

@@ -9,15 +9,15 @@
         <div fxLayout="row" fxLayoutGap="2%">
 
           <mat-form-field fxFlex>
-            <mat-label>Provisioning Criteria</mat-label>
+            <mat-label>{{ 'labels.inputs.Provisioning Criteria' | translate }}</mat-label>
             <input required matInput formControlName="criteriaName">
             <mat-error *ngIf="provisioningCriteriaForm.controls.criteriaName.hasError('required')">
-              Provisioning Criteria is <strong>required</strong>
+              {{ 'labels.inputs.Provisioning Criteria' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex>
-            <mat-label>Selected Products</mat-label>
+            <mat-label>{{ 'labels.inputs.Selected Products' | translate }}</mat-label>
             <mat-select formControlName="loanProducts" multiple>
               <mat-option *ngFor="let product of loanProvisioningCriteriaTemplate.loanProducts" [value]="product">
                 {{ product.name }}
@@ -33,46 +33,47 @@
 
     <div class="mat-elevation-z1">
 
-      <mat-hint *ngIf="!provisioningCriteriaFormValid">Please fill all provisioning criteria definitions.</mat-hint>
+      <mat-hint *ngIf="!provisioningCriteriaFormValid">
+        {{ 'labels.text.Provisioning criteria definitions' | translate }}</mat-hint>
 
       <table mat-table class="m-t-10" [dataSource]="definitions">
 
         <ng-container matColumnDef="category">
-          <th mat-header-cell *matHeaderCellDef> Category </th>
+          <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Category' | translate }} </th>
           <td mat-cell *matCellDef="let definition"> {{ definition.categoryName }} </td>
         </ng-container>
 
         <ng-container matColumnDef="minAge">
-          <th mat-header-cell *matHeaderCellDef> Min Age </th>
+          <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Min Age' | translate }} </th>
           <td mat-cell *matCellDef="let definition"> {{ definition.minAge || '0' }} </td>
         </ng-container>
 
         <ng-container matColumnDef="maxAge">
-          <th mat-header-cell *matHeaderCellDef> Max Age </th>
+          <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Max Age' | translate }} </th>
           <td mat-cell *matCellDef="let definition"> {{ definition.maxAge || '0' }} </td>
         </ng-container>
 
         <ng-container matColumnDef="percentage">
-          <th mat-header-cell *matHeaderCellDef> Percentage (%)</th>
+          <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Percentage' | translate }} (%)</th>
           <td mat-cell *matCellDef="let definition"> {{ definition.provisioningPercentage || '0' }} </td>
         </ng-container>
 
         <ng-container matColumnDef="liabilityAccount">
-          <th mat-header-cell *matHeaderCellDef> Liability Account </th>
+          <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Liability Account' | translate }} </th>
           <td mat-cell *matCellDef="let definition"> {{ (definition.liabilityAccount | find:loanProvisioningCriteriaTemplate.glAccounts:'id':'name') || '-' }} </td>
         </ng-container>
 
         <ng-container matColumnDef="expenseAccount">
-          <th mat-header-cell *matHeaderCellDef> Expense Account </th>
+          <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Expense Account' | translate }} </th>
           <td mat-cell *matCellDef="let definition"> {{ (definition.expenseAccount | find:loanProvisioningCriteriaTemplate.glAccounts:'id':'name') || '-' }} </td>
         </ng-container>
 
         <ng-container matColumnDef="edit">
-          <th mat-header-cell *matHeaderCellDef> Actions </th>
+          <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Actions' | translate }} </th>
           <td mat-cell *matCellDef="let definition">
             <button mat-button color="primary" (click)="editDefinition(definition)">
               <fa-icon icon="edit" class="m-r-10"></fa-icon>
-              Edit
+              {{'labels.buttons.Edit' | translate }}
             </button>
           </td>
         </ng-container>
@@ -85,8 +86,8 @@
     </div>
 
     <div class="m-t-20" fxLayout="row" fxLayoutAlign="center" fxLayoutGap="20px">
-      <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
-      <button mat-raised-button color="primary" [disabled]="!provisioningCriteriaFormValid" (click)="submit()" *mifosxHasPermission="'CREATE_PROVISIONING_CRITERIA'">Submit</button>
+      <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate }}</button>
+      <button mat-raised-button color="primary" [disabled]="!provisioningCriteriaFormValid" (click)="submit()" *mifosxHasPermission="'CREATE_PROVISIONING_CRITERIA'">{{'labels.buttons.Submit' | translate }}</button>
     </div>
 
   </mat-card>

src/app/organization/loan-provisioning-criteria/edit-loan-provisioning-criteria/edit-loan-provisioning-criteria.component.html

@@ -9,15 +9,15 @@
         <div fxLayout="row" fxLayoutGap="2%">
 
           <mat-form-field fxFlex>
-            <mat-label>Provisioning Criteria</mat-label>
+            <mat-label>{{ 'labels.inputs.Provisioning Criteria' | translate }}</mat-label>
             <input required matInput formControlName="criteriaName">
             <mat-error *ngIf="provisioningCriteriaForm.controls.criteriaName.hasError('required')">
-              Provisioning Criteria is <strong>required</strong>
+              {{ 'labels.inputs.Provisioning Criteria' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex>
-            <mat-label>Selected Products</mat-label>
+            <mat-label>{{ 'labels.inputs.Selected Products' | translate }}</mat-label>
             <mat-select formControlName="loanProducts" [compareWith]="compareOptions" multiple>
               <mat-option *ngFor="let product of loanProducts" [value]="product">
                 {{ product.name }}
@@ -33,46 +33,46 @@
 
     <div class="mat-elevation-z1">
 
-      <mat-hint *ngIf="!provisioningCriteriaFormValid">Please fill all provisioning criteria definitions.</mat-hint>
+      <mat-hint *ngIf="!provisioningCriteriaFormValid">{{ 'labels.text.Provisioning criteria definitions' | translate }}</mat-hint>
 
       <table mat-table class="m-t-10" [dataSource]="definitions">
 
         <ng-container matColumnDef="category">
-          <th mat-header-cell *matHeaderCellDef> Category </th>
+          <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Category' | translate }} </th>
           <td mat-cell *matCellDef="let definition"> {{ definition.categoryName }} </td>
         </ng-container>
 
         <ng-container matColumnDef="minAge">
-          <th mat-header-cell *matHeaderCellDef> Min Age </th>
+          <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Min Age' | translate }} </th>
           <td mat-cell *matCellDef="let definition"> {{ definition.minAge || '0' }} </td>
         </ng-container>
 
         <ng-container matColumnDef="maxAge">
-          <th mat-header-cell *matHeaderCellDef> Max Age </th>
+          <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Max Age' | translate }} </th>
           <td mat-cell *matCellDef="let definition"> {{ definition.maxAge || '0' }} </td>
         </ng-container>
 
         <ng-container matColumnDef="percentage">
-          <th mat-header-cell *matHeaderCellDef> Percentage (%)</th>
+          <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Percentage' | translate }} (%)</th>
           <td mat-cell *matCellDef="let definition"> {{ definition.provisioningPercentage || '0' }} </td>
         </ng-container>
 
         <ng-container matColumnDef="liabilityAccount">
-          <th mat-header-cell *matHeaderCellDef> Liability Account </th>
+          <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Liability Account' | translate }} </th>
           <td mat-cell *matCellDef="let definition"> {{ (definition.liabilityAccount | find:loanProvisioningCriteriaAndTemplate.glAccounts:'id':'name') || '-' }} </td>
         </ng-container>
 
         <ng-container matColumnDef="expenseAccount">
-          <th mat-header-cell *matHeaderCellDef> Expense Account </th>
+          <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Expense Account' | translate }} </th>
           <td mat-cell *matCellDef="let definition"> {{ (definition.expenseAccount | find:loanProvisioningCriteriaAndTemplate.glAccounts:'id':'name') || '-' }} </td>
         </ng-container>
 
         <ng-container matColumnDef="edit">
-          <th mat-header-cell *matHeaderCellDef> Actions </th>
+          <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Actions' | translate }} </th>
           <td mat-cell *matCellDef="let definition">
             <button mat-button color="primary" (click)="editDefinition(definition)">
               <fa-icon icon="edit" class="m-r-10"></fa-icon>
-              Edit
+              {{'labels.buttons.Edit' | translate }}
             </button>
           </td>
         </ng-container>
@@ -85,8 +85,8 @@
     </div>
 
     <div class="m-t-20" fxLayout="row" fxLayoutAlign="center" fxLayoutGap="20px">
-      <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
-      <button mat-raised-button color="primary" [disabled]="!provisioningCriteriaFormValid" (click)="submit()" *mifosxHasPermission="'UPDATE_CRITERIA'">Submit</button>
+      <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate }}</button>
+      <button mat-raised-button color="primary" [disabled]="!provisioningCriteriaFormValid" (click)="submit()" *mifosxHasPermission="'UPDATE_CRITERIA'">{{'labels.buttons.Submit' | translate }}</button>
     </div>
 
   </mat-card>

src/app/organization/loan-provisioning-criteria/loan-provisioning-criteria.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_PROVISIONING_CRITERIA'">
     <fa-icon icon="plus" class="m-r-10"></fa-icon>
-    Create Provisioning Criteria
+    {{'labels.buttons.Create Provisioning Criteria' | translate }}
   </button>
 </div>
 
@@ -19,12 +19,12 @@
     <table mat-table [dataSource]="dataSource" matSort>
 
       <ng-container matColumnDef="criteriaName">
-        <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 loanProvisioningCriteria"> {{ loanProvisioningCriteria.criteriaName }} </td>
       </ng-container>
 
       <ng-container matColumnDef="createdBy">
-        <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 loanProvisioningCriteria"> {{ loanProvisioningCriteria.createdBy }} </td>
       </ng-container>
 

src/app/organization/loan-provisioning-criteria/view-loan-provisioning-criteria/view-loan-provisioning-criteria.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_CRITERIA'">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    Edit
+    {{'labels.buttons.Edit' | translate }}
   </button>
   <button mat-raised-button color="warn" (click)="deleteCriteria()" *mifosxHasPermission="'DELETE_CRITERIA'">
     <fa-icon icon="trash" class="m-r-10"></fa-icon>
-    Delete
+    {{'labels.buttons.Delete' | translate }}
   </button>
 </div>
 
@@ -21,7 +21,7 @@
         <mat-divider [inset]="true"></mat-divider>
 
          <div fxFlexFill class="loanProduct">
-          <span fxFlex="40%">Loan Product:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Loan Product' | translate }}:</span>
           <span fxFlex="60%">{{ loanProducts }}</span>
         </div>
 
@@ -32,32 +32,32 @@
         <table mat-table class="mat-elevation-z1" [dataSource]="dataSource">
 
           <ng-container matColumnDef="category">
-            <th mat-header-cell *matHeaderCellDef> Category </th>
+            <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Category' | translate }} </th>
             <td mat-cell *matCellDef="let provisioningData"> {{provisioningData.categoryName}} </td>
           </ng-container>
 
           <ng-container matColumnDef="minAge">
-            <th mat-header-cell *matHeaderCellDef> Min Age </th>
+            <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Min Age' | translate }} </th>
             <td mat-cell *matCellDef="let provisioningData"> {{provisioningData.minAge}} </td>
           </ng-container>
 
           <ng-container matColumnDef="maxAge">
-            <th mat-header-cell *matHeaderCellDef> Max Age </th>
+            <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Max Age' | translate }} </th>
             <td mat-cell *matCellDef="let provisioningData"> {{provisioningData.maxAge}} </td>
           </ng-container>
 
           <ng-container matColumnDef="percentage">
-            <th mat-header-cell *matHeaderCellDef> Percentage </th>
+            <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Percentage' | translate }} </th>
             <td mat-cell *matCellDef="let provisioningData"> {{provisioningData.provisioningPercentage}} </td>
           </ng-container>
 
           <ng-container matColumnDef="liabilityAccount">
-            <th mat-header-cell *matHeaderCellDef> Liability Account </th>
+            <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Liability Account' | translate }} </th>
             <td mat-cell *matCellDef="let provisioningData"> {{provisioningData.liabilityName}} </td>
           </ng-container>
 
           <ng-container matColumnDef="expenseAccount">
-            <th mat-header-cell *matHeaderCellDef> Expense Account </th>
+            <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Expense Account' | translate }} </th>
             <td mat-cell *matCellDef="let provisioningData"> {{provisioningData.expenseName}} </td>
           </ng-container>
 

src/app/organization/manage-funds/create-fund/create-fund.component.html

@@ -9,15 +9,15 @@
         <div fxLayout="column">
 
           <mat-form-field>
-            <mat-label>Name</mat-label>
+            <mat-label>{{ 'labels.inputs.name' | translate }}</mat-label>
             <input matInput required autofocus formControlName="name">
             <mat-error *ngIf="fundForm.controls.name.hasError('required')">
-              Name <strong>is required</strong>
+              {{ 'labels.inputs.name' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>External Id</mat-label>
+            <mat-label>{{ 'labels.inputs.External Id' | translate }}</mat-label>
             <input matInput autofocus formControlName="externalId">
           </mat-form-field>
 
@@ -26,8 +26,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 mat-raised-button color="primary" [disabled]="!fundForm.valid" *mifosxHasPermission="'CREATE_FUND'">Submit</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate }}</button>
+        <button mat-raised-button color="primary" [disabled]="!fundForm.valid" *mifosxHasPermission="'CREATE_FUND'">{{'labels.buttons.Submit' | translate }}</button>
       </mat-card-actions>
 
     </form>

src/app/organization/manage-funds/edit-fund/edit-fund.component.html

@@ -9,15 +9,15 @@
         <div fxLayout="column">
 
           <mat-form-field>
-            <mat-label>Name</mat-label>
+            <mat-label>{{ 'labels.inputs.name' | translate }}</mat-label>
             <input matInput required autofocus formControlName="name">
             <mat-error *ngIf="fundForm.controls.name.hasError('required')">
-              Name <strong>is required</strong>
+              {{ 'labels.inputs.name' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>External Id</mat-label>
+            <mat-label>{{ 'labels.inputs.External Id' | translate }}</mat-label>
             <input matInput autofocus formControlName="externalId">
           </mat-form-field>
 
@@ -26,8 +26,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 mat-raised-button color="primary" [disabled]="!fundForm.valid" *mifosxHasPermission="'UPDATE_FUND'">Submit</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate }}</button>
+        <button mat-raised-button color="primary" [disabled]="!fundForm.valid" *mifosxHasPermission="'UPDATE_FUND'">{{'labels.buttons.Submit' | translate }}</button>
       </mat-card-actions>
 
     </form>

src/app/organization/manage-funds/manage-funds.component.html

@@ -2,7 +2,7 @@
   <div #buttonCreateCharge class="in-block">
     <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_FUND'">
       <fa-icon icon="plus" class="m-r-10"></fa-icon>
-      Create Fund
+      {{'labels.buttons.Create Fund' | translate }}
     </button>
   </div>
 </div>
@@ -21,12 +21,12 @@
     <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 charge"> {{ charge.name }} </td>
       </ng-container>
 
       <ng-container matColumnDef="externalId">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> External Id </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.External Id' | translate }} </th>
         <td mat-cell *matCellDef="let charge">
           <mifosx-external-identifier externalId="{{charge.externalId}}"></mifosx-external-identifier>
         </td>
@@ -44,13 +44,13 @@
 
 
 <ng-template #templateFundFormRef let-popover="popover">
-  <h2>Manage Funds</h2>
-  <p class="mw300">This form will be used to add fund. If you would like to add fund click on add funds button and fill the fund name then click on + button else click Next or Back. For more details click: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67141736/Manage+Funds" target="_blank">Manage Funds</a></p>
+  <h2>{{ 'labels.heading.Manage Funds' | translate }}</h2>
+  <p class="mw300">{{ 'labels.text.Used Add Fund' | translate }}: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67141736/Manage+Funds" target="_blank">{{ 'labels.inputs.Manage Funds' | 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="primary" (click)="popover.close();">Add Funds</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">Next</button>
+    <button mat-raised-button color="primary" (click)="popover.close();">{{'labels.buttons.Add Funds' | translate }}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">{{'labels.buttons.Back' | translate }}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">{{'labels.buttons.Next' | translate }}</button>
   </div>
 </ng-template>
 

src/app/organization/manage-funds/view-fund/view-fund.component.html

@@ -1,7 +1,7 @@
 <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_FUND'">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    Edit
+    {{'labels.buttons.Edit' | translate }}
   </button>
 </div>
 
@@ -14,7 +14,7 @@
       <div fxLayout="row wrap" class="content">
 
         <div fxFlex="50%" class="mat-body-strong">
-          Name
+         {{ 'labels.inputs.name' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -22,7 +22,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          External Id
+          {{ 'labels.inputs.External Id' | translate }}
         </div>
 
         <div fxFlex="50%">

src/app/organization/offices/create-office/create-office.component.html

@@ -9,37 +9,37 @@
         <div #createOfficeFormRef fxLayout="column">
 
           <mat-form-field>
-            <mat-label>Office</mat-label>
+            <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
             <input required matInput formControlName="name">
             <mat-error *ngIf="officeForm.controls.name.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>
-            <mat-label>Parent Office</mat-label>
+            <mat-label>{{ 'labels.inputs.Parent Office' | translate }}</mat-label>
             <mat-select required formControlName="parentId">
               <mat-option *ngFor="let office of officeData" [value]="office.id" >
                 {{ office.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="officeForm.controls.parentId.hasError('required')">
-              Parent Office is <strong>required</strong>
+              {{ 'labels.inputs.Parent Office' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field (click)="openedOnDatePicker.open()">
-            <mat-label>Opened On</mat-label>
+            <mat-label>{{ 'labels.inputs.Opened On' | translate }}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" formControlName="openingDate" required [matDatepicker]="openedOnDatePicker">
             <mat-datepicker-toggle matSuffix [for]="openedOnDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #openedOnDatePicker></mat-datepicker>
             <mat-error *ngIf="officeForm.controls.openingDate.hasError('required')">
-              Opening Date is <strong>required</strong>
+              {{ 'labels.inputs.Opening Date' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>External ID</mat-label>
+            <mat-label>{{ 'labels.inputs.External ID' | translate }}</mat-label>
             <input matInput formControlName="externalId">
           </mat-form-field>
           
@@ -48,8 +48,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 mat-raised-button color="primary" [disabled]="!officeForm.valid" *mifosxHasPermission="'CREATE_OFFICE'">Submit</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate }}</button>
+        <button mat-raised-button color="primary" [disabled]="!officeForm.valid" *mifosxHasPermission="'CREATE_OFFICE'">{{'labels.buttons.Submit' | translate }}</button>
       </mat-card-actions>
 
     </form>
@@ -59,12 +59,12 @@
 </div>
 
 <ng-template #templateCreateOfficeForm let-popover="popover">
-  <h2>Create Office</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/67141727/Manage+Offices" target="_blank">Manage Offices</a></p>
+  <h2>{{'labels.heading.Create Office' | translate }}</h2>
+  <p class="mw400">{{'labels.text.Filling Details' | translate }}: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67141727/Manage+Offices" target="_blank">{{ 'labels.inputs.Manage Offices' | 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="primary" (click)="popover.close()">Create Office</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">Next Step</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()">{{'labels.buttons.Create Office' | translate }}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">{{'labels.buttons.Back' | translate }}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">{{'labels.buttons.Next Step' | translate }}</button>
   </div>
 </ng-template>

src/app/organization/offices/edit-office/edit-office.component.html

@@ -9,37 +9,37 @@
         <div fxLayout="column">
 
           <mat-form-field>
-            <mat-label>Offices</mat-label>
+            <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
             <input matInput required formControlName="name">
             <mat-error *ngIf="officeForm.controls.name.hasError('required')">
-              Office <strong>is required</strong>
+              {{ 'labels.inputs.Office' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field *ngIf="officeForm.contains('parentId')">
-            <mat-label>Parent Office</mat-label>
+            <mat-label>{{ 'labels.inputs.Parent Office' | translate }}</mat-label>
             <mat-select required formControlName="parentId">
               <mat-option *ngFor="let office of officeData.allowedParents" [value]="office.id">
                 {{ office.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="officeForm.controls.parentId.hasError('required')">
-              Parent Office <strong>is required</strong>
+              {{ 'labels.inputs.Parent Office' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field (click)="openingDatePicker.open()">
-            <mat-label>Opened On</mat-label>
+            <mat-label>{{ 'labels.inputs.Opened On' | translate }}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="openingDatePicker" required formControlName="openingDate">
             <mat-datepicker-toggle matSuffix [for]="openingDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #openingDatePicker></mat-datepicker>
             <mat-error *ngIf="officeForm.controls.openingDate.hasError('required')">
-              Date <strong>is required</strong>
+              {{ 'labels.inputs.Opening Date' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>External ID</mat-label>
+            <mat-label>{{ 'labels.inputs.External ID' | translate }}</mat-label>
             <input matInput formControlName="externalId">
           </mat-form-field>
 
@@ -48,8 +48,8 @@
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../general']">Cancel</button>
-        <button mat-raised-button color="primary" [disabled]="!officeForm.valid" *mifosxHasPermission="'UPDATE_OFFICE'">Submit</button>
+        <button type="button" mat-raised-button [routerLink]="['../general']">{{'labels.buttons.Cancel' | translate }}</button>
+        <button mat-raised-button color="primary" [disabled]="!officeForm.valid" *mifosxHasPermission="'UPDATE_OFFICE'">{{'labels.buttons.Submit' | translate }}</button>
       </mat-card-actions>
 
     </form>

src/app/organization/offices/offices.component.html

@@ -12,7 +12,7 @@
   <div #buttonCreateOffice class="in-block">
     <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_OFFICE'">
       <fa-icon icon="plus" class="m-r-10"></fa-icon>
-      Create Office
+      {{'labels.buttons.Create Office' | translate }}
     </button>
   </div>
 
@@ -20,7 +20,7 @@
     <button mat-raised-button color="primary" *mifosxHasPermission="'CREATE_OFFICE'"
       [routerLink]="['/organization', 'bulk-import', 'Offices']">
       <fa-icon icon="upload" class="m-r-10"></fa-icon>
-      Import Offices
+      {{'labels.buttons.Import Offices' | translate }}
     </button>
   </div>
 
@@ -196,63 +196,62 @@
 </div>
 
 <ng-template #templateButtonTreeView let-popover="popover">
-  <h2>Tree View</h2>
-  <p class="mw300">This will launch an alternative view which allows you to view the office hierarchy for your
-    organization.</p>
+  <h2>{{'labels.heading.Tree View' | translate }}</h2>
+  <p class="mw300">{{ 'labels.text.Launch an alternative view for office hierarchy' | 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="primary" (click)="popover.close();previousStep();">Back</button>
+      (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate }}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();previousStep();">{{'labels.buttons.Back' | translate }}</button>
     <button mat-raised-button color="primary"
-      (click)="popover.close();showPopover(templateButtonCreateOffice,buttonCreateOffice,'bottom', true);">Next</button>
+      (click)="popover.close();showPopover(templateButtonCreateOffice,buttonCreateOffice,'bottom', true);">{{'labels.buttons.Next' | translate }}</button>
   </div>
 </ng-template>
 
 <ng-template #templateButtonCreateOffice let-popover="popover">
-  <h2>Create Office</h2>
-  <p class="mw300">This option allows you to create new offices in your organization.</p>
+  <h2>{{'labels.heading.Create Office' | translate }}</h2>
+  <p class="mw300">{{ 'labels.text.Create new offices' | 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>
+      (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>
+      (click)="popover.close();showPopover(templateButtonTreeView,buttonTreeView,'bottom', true);">{{'labels.buttons.Back' | translate }}</button>
     <button mat-raised-button color="primary"
-      (click)="popover.close();showPopover(templateButtonImportOffices,buttonImportOffices,'bottom', true);">Next</button>
+      (click)="popover.close();showPopover(templateButtonImportOffices,buttonImportOffices,'bottom', true);">{{'labels.buttons.Next' | translate }}</button>
   </div>
 </ng-template>
 
 <ng-template #templateButtonImportOffices let-popover="popover">
-  <h2>Import Offices</h2>
-  <p class="mw300">This will launch the Bulk import/Offices page.</p>
+  <h2>{{'labels.heading.Import Offices' | translate }}</h2>
+  <p class="mw300">{{ 'labels.text.Launch the Bulk import/Offices' | 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>
+      (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate }}</button>
     <button mat-raised-button color="primary"
-      (click)="popover.close();showPopover(templateButtonCreateOffice,buttonCreateOffice,'bottom', true);">Back</button>
+      (click)="popover.close();showPopover(templateButtonCreateOffice,buttonCreateOffice,'bottom', true);">{{'labels.buttons.Back' | translate }}</button>
     <button mat-raised-button color="primary"
-      (click)="popover.close();showPopover(templateFilter,filter,'bottom', true);">Next</button>
+      (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 offices.</h4>
+  <h4>{{'labels.heading.Search bar to filter offices.' | 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>
+      (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate }}</button>
     <button mat-raised-button color="primary"
-      (click)="popover.close();showPopover(templateButtonImportOffices,buttonImportOffices,'bottom', true);">Back</button>
+      (click)="popover.close();showPopover(templateButtonImportOffices,buttonImportOffices,'bottom', true);">{{'labels.buttons.Back' | translate }}</button>
     <button mat-raised-button color="primary"
-      (click)="popover.close();showPopover(templateTableOffices,tableOffices,'top', true);">Next</button>
+      (click)="popover.close();showPopover(templateTableOffices,tableOffices,'top', true);">{{'labels.buttons.Next' | translate }}</button>
   </div>
 </ng-template>
 
 <ng-template #templateTableOffices let-popover="popover">
-  <h4>List of offices in the organization.</h4>
+  <h4>{{'labels.heading.List of offices in the 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>
+      (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();nextStep()">Next</button>
+      (click)="popover.close();showPopover(templateFilter,filter,'bottom', true);">{{'labels.buttons.Back' | translate }}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">{{'labels.buttons.Next' | translate }}</button>
   </div>
 </ng-template>

src/app/organization/offices/view-office/general-tab/general-tab.component.html

@@ -3,7 +3,7 @@
   <div fxLayoutAlign="flex-end" class="action-button m-b-20">
     <span *mifosxHasPermission="'UPDATE_OFFICE'">
       <button mat-raised-button color="primary" [routerLink]="['../edit']">
-        <fa-icon icon="edit" class="m-r-10"></fa-icon>Edit
+        <fa-icon icon="edit" class="m-r-10"></fa-icon>{{'labels.buttons.Edit' | translate }}
       </button>
     </span>
   </div>
@@ -11,34 +11,34 @@
   <div fxLayout="row wrap" fxLayout.lt-md="column">
 
     <div fxFlex="45%" class="mat-body-strong left">
-      Parent Office
+      {{ 'labels.inputs.Parent Office' | translate }}
     </div>
     <div fxFlex="50%" class="right">
       {{ officeData.parentName ? officeData.parentName : 'N/A' }}
     </div>
 
     <div fxFlex="45%" class="mat-body-strong left">
-      Opened On
+      {{ 'labels.inputs.Opened On' | translate }}
     </div>
     <div fxFlex="50%" class="right">
       {{ officeData.openingDate ? (officeData.openingDate | dateFormat) : 'Unassigned' }}
     </div>
 
     <div fxFlex="45%" class="mat-body-strong left">
-      Name Decorated
+      {{ 'labels.inputs.Name Decorated' | translate }}
     </div>
     <div fxFlex="50%" class="right">
       {{ officeData.nameDecorated ? officeData.nameDecorated : 'Unassigned' }}
     </div>
 
     <div fxFlex="45%" class="mat-body-strong left">
-      External Id
+      {{ 'labels.inputs.External Id' | translate }}
     </div>
     <div fxFlex="50%" class="right" *ngIf="officeData.externalId">
       <mifosx-external-identifier externalId="{{officeData.externalId}}"></mifosx-external-identifier>
     </div>
     <div fxFlex="50%" class="right" *ngIf="!officeData.externalId">
-      Unassigned
+      {{ 'labels.inputs.Unassigned' | translate }}
     </div>
   </div>
 

src/app/organization/offices/view-office/view-office.component.html

@@ -7,7 +7,7 @@
       <nav mat-tab-nav-bar class="navigation-tabs">
         <a mat-tab-link [routerLink]="['./general']" routerLinkActive #general="routerLinkActive"
         [active]="general.isActive">
-          General
+        {{ 'labels.inputs.General' | translate }}
         </a>
         <span *ngFor="let officeDatatable of officeDatatables">
           <a mat-tab-link *mifosxHasPermission="'READ_' + officeDatatable.registeredTableName"

src/app/organization/organization.component.html

@@ -13,8 +13,8 @@
               <mat-icon matListIcon>
                 <fa-icon icon="building" size="sm"></fa-icon>
               </mat-icon>
-              <h4 matLine>Manage Offices</h4>
-              <p matLine>Add new office or modify or deactivate office or modify hierarchy</p>
+              <h4 matLine>{{ 'labels.heading.Manage Offices' | translate }}</h4>
+              <p matLine>{{ 'labels.text.Add new office or modify or deactivate office' | translate }}</p>
             </mat-list-item>
           </div>
 
@@ -23,8 +23,8 @@
               <mat-icon matListIcon>
                 <fa-icon icon="calendar-alt" size="sm"></fa-icon>
               </mat-icon>
-              <h4 matLine>Manage Holidays</h4>
-              <p matLine>Define holidays for office</p>
+              <h4 matLine>{{ 'labels.heading.Manage Holidays' | translate }}</h4>
+              <p matLine>{{ 'labels.text.Define holidays for office' | translate }}</p>
             </mat-list-item>
           </div>
 
@@ -33,8 +33,8 @@
               <mat-icon matListIcon>
                 <fa-icon icon="user" size="sm"></fa-icon>
               </mat-icon>
-              <h4 matLine>Manage Employees</h4>
-              <p matLine>An employee represents loan officers with no access to systems</p>
+              <h4 matLine>{{ 'labels.heading.Manage Employees' | translate }}</h4>
+              <p matLine>{{ 'labels.text.Employee represents loan officers' | translate }}</p>
             </mat-list-item>
           </div>
 
@@ -44,18 +44,8 @@
               <mat-icon matListIcon>
                 <fa-icon icon="book" size="sm"></fa-icon>
               </mat-icon>
-              <h4 matLine>Standing Instructions History</h4>
-              <p matLine>View logged history of standing instructions</p>
-            </mat-list-item>
-          </div>
-
-          <div #fundmapping *ngIf="shouldShowFundMapping">
-            <mat-list-item [routerLink]="['fund-mapping']" *mifosxHasPermission="'READ_OFFICE'">
-              <mat-icon matListIcon>
-                <fa-icon icon="money-bill-alt" size="sm"></fa-icon>
-              </mat-icon>
-              <h4 matLine>Fund Mapping</h4>
-              <p matLine>Bulk entry screen for mapping fund sources to loans</p>
+              <h4 matLine>{{ 'labels.heading.Standing Instructions History' | translate }}</h4>
+              <p matLine>{{ 'labels.text.View logged history' | translate }}</p>
             </mat-list-item>
           </div>
 
@@ -64,29 +54,18 @@
               <mat-icon matListIcon>
                 <fa-icon icon="user-tie" size="sm"></fa-icon>
               </mat-icon>
-              <h4 matLine>Investors</h4>
-              <p matLine>View the loan account details associated with the investors</p>
+              <h4 matLine>{{ 'labels.text.Investors' | translate }}</h4>
+              <p matLine>{{ 'labels.text.View the loan account details associated with the investors' | translate }}</p>
             </mat-list-item>
           </div>
 
-          <div #provisioningcriteria>
-            <mat-list-item [routerLink]="['provisioning-criteria']" *mifosxHasPermission="'VIEW_PROVISIONS'">
+          <div #fundmapping>
+            <mat-list-item [routerLink]="['fund-mapping']" *mifosxHasPermission="'READ_OFFICE'">
               <mat-icon matListIcon>
-                <fa-icon icon="edit" size="sm"></fa-icon>
+                <fa-icon icon="money-bill-alt" size="sm"></fa-icon>
               </mat-icon>
-              <h4 matLine>Loan Provisioning Criteria</h4>
-              <p matLine>Define Loan Provisioning Criteria for Organization</p>
-            </mat-list-item>
-          </div>
-
-          <div #entitydatatable>
-            <mat-list-item [routerLink]="['entity-data-table-checks']"
-              *mifosxHasPermission="'READ_ENTITY_DATATABLE_CHECK'">
-              <mat-icon matListIcon>
-                <fa-icon icon="check" size="sm"></fa-icon>
-              </mat-icon>
-              <h4 matLine>Entity Data Table Checks </h4>
-              <p matLine>Define Entity Data Table Checks for Organization</p>
+              <h4 matLine>{{ 'labels.heading.Fund Mapping' | translate }}</h4>
+              <p matLine>{{ 'labels.text.Bulk entry screen for mapping' | translate }}</p>
             </mat-list-item>
           </div>
 
@@ -96,20 +75,32 @@
               <mat-icon matListIcon>
                 <fa-icon icon="lock" size="sm"></fa-icon>
               </mat-icon>
-              <h4 matLine>Password Preferences</h4>
-              <p matLine>Define standards for enforcing the usage of stronger passwords</p>
+              <h4 matLine>{{ 'labels.heading.Password Preferences' | translate }}</h4>
+              <p matLine>{{ 'labels.text.The usage of stronger passwords' | translate }}</p>
             </mat-list-item>
           </div>
 
-          <div #bulkimports>
-            <mat-list-item [routerLink]="['bulk-import']" *mifosxHasPermission="'VIEW_BULKIMPORT'">
+          <div #provisioning>
+            <mat-list-item [routerLink]="['provisioning-criteria']" *mifosxHasPermission="'VIEW_PROVISIONS'">
               <mat-icon matListIcon>
-                <fa-icon icon="upload" size="sm"></fa-icon>
+                <fa-icon icon="edit" size="sm"></fa-icon>
               </mat-icon>
-              <h4 matLine>Bulk Import</h4>
-              <p matLine>Bulk data import using excel spreadsheet templates for clients, offices, etc.</p>
+              <h4 matLine>{{ 'labels.heading.Loan Provisioning Criteria' | translate }}</h4>
+              <p matLine>{{ 'labels.text.Loan Provisioning Criteria Organization' | translate }}</p>
             </mat-list-item>
           </div>
+
+          <div #entitydatatable>
+            <mat-list-item [routerLink]="['entity-data-table-checks']"
+              *mifosxHasPermission="'READ_ENTITY_DATATABLE_CHECK'">
+              <mat-icon matListIcon>
+                <fa-icon icon="check" size="sm"></fa-icon>
+              </mat-icon>
+              <h4 matLine>{{ 'labels.heading.Entity Data Table Checks' | translate }}</h4>
+              <p matLine>{{ 'labels.text.Entity Data Table Checks Organization' | translate }}</p>
+            </mat-list-item>
+          </div>
+
         </mat-nav-list>
 
       </div>
@@ -121,10 +112,10 @@
           <div #addEditCurrency>
             <mat-list-item [routerLink]="['currencies']" *mifosxHasPermission="'READ_CURRENCY'">
               <mat-icon matListIcon>
-                <fa-icon icon="money-check" size="sm"></fa-icon>
+                <fa-icon icon="cogs" size="sm"></fa-icon>
               </mat-icon>
-              <h4 matLine>Currency Configuration</h4>
-              <p matLine>Currencies available across organization for different products</p>
+              <h4 matLine>{{ 'labels.heading.Currency Configuration' | translate }}</h4>
+              <p matLine>{{ 'labels.text.Currencies available across organization' | translate }}</p>
             </mat-list-item>
           </div>
 
@@ -133,28 +124,28 @@
               <mat-icon matListIcon>
                 <fa-icon icon="money-bill-alt" size="sm"></fa-icon>
               </mat-icon>
-              <h4 matLine>Manage Funds</h4>
-              <p matLine>Funds are associated with loans</p>
+              <h4 matLine>{{ 'labels.heading.Manage Funds' | translate }}</h4>
+              <p matLine>{{ 'labels.text.Funds are associated with loans' | translate }}</p>
             </mat-list-item>
           </div>
 
           <div #bulkloan>
             <mat-list-item [routerLink]="['bulkloan']" *mifosxHasPermission="'BULKREASSIGN_LOAN'">
               <mat-icon matListIcon>
-                <fa-icon icon="copy" size="sm"></fa-icon>
+                <fa-icon icon="money-bill-alt" size="sm"></fa-icon>
               </mat-icon>
-              <h4 matLine>Bulk Loan Reassignment</h4>
-              <p matLine>Easy way to reassign all the loan from one LO to another LO</p>
+              <h4 matLine>{{ 'labels.heading.Bulk Loan Reassignment' | translate }}</h4>
+              <p matLine>{{ 'labels.text.Easy way to reassign all the loan' | translate }}</p>
             </mat-list-item>
           </div>
 
           <div #tellers>
             <mat-list-item [routerLink]="['tellers']" *mifosxHasPermission="'READ_TELLER'">
               <mat-icon matListIcon>
-                <fa-icon icon="building" size="sm"></fa-icon>
+                <fa-icon icon="money-bill-alt" size="sm"></fa-icon>
               </mat-icon>
-              <h4 matLine>Teller / Cashier Management</h4>
-              <p matLine>Manage Tellers / Cashiers and Cash Allocation and Settlement</p>
+              <h4 matLine>{{ 'labels.heading.Teller / Cashier Management' | translate }}</h4>
+              <p matLine>{{ 'labels.text.Manage Tellers / Cashiers' | translate }}</p>
             </mat-list-item>
           </div>
 
@@ -163,8 +154,8 @@
               <mat-icon matListIcon>
                 <fa-icon icon="calendar-alt" size="sm"></fa-icon>
               </mat-icon>
-              <h4 matLine>Working Days</h4>
-              <p matLine>Define working days and configure behaviour of payments due on holidays</p>
+              <h4 matLine>{{ 'labels.heading.Working Days' | translate }}</h4>
+              <p matLine>{{ 'labels.text.Working days and configure behaviour of payments' | translate }}</p>
             </mat-list-item>
           </div>
 
@@ -173,8 +164,8 @@
               <mat-icon matListIcon>
                 <fa-icon icon="dollar-sign" size="sm"></fa-icon>
               </mat-icon>
-              <h4 matLine>Payment Type</h4>
-              <p matLine>Manage payment types</p>
+              <h4 matLine>{{ 'labels.heading.Payment Type' | translate }}</h4>
+              <p matLine>{{ 'labels.text.Manage payment types' | translate }}</p>
             </mat-list-item>
           </div>
 
@@ -183,8 +174,8 @@
               <mat-icon matListIcon>
                 <fa-icon icon="envelope" size="sm"></fa-icon>
               </mat-icon>
-              <h4 matLine>SMS Campaigns</h4>
-              <p matLine>Define SMS Campaigns for Organization</p>
+              <h4 matLine>{{ 'labels.heading.SMS Campaigns' | translate }}</h4>
+              <p matLine>{{ 'labels.text.Define SMS Campaigns for Organization' | translate }}</p>
             </mat-list-item>
           </div>
 
@@ -193,10 +184,21 @@
               <mat-icon matListIcon>
                 <fa-icon icon="chevron-right" size="sm"></fa-icon>
               </mat-icon>
-              <h4 matLine>AdHocQuery</h4>
-              <p matLine>Define AdHocQuery for Organization</p>
+              <h4 matLine>{{ 'labels.heading.AdHocQuery' | translate }}</h4>
+              <p matLine>{{ 'labels.text.Define AdHocQuery for Organization' | translate }}</p>
             </mat-list-item>
           </div>
+
+          <div #bulkimport>
+            <mat-list-item [routerLink]="['bulk-import']" *mifosxHasPermission="'VIEW_BULKIMPORT'">
+              <mat-icon matListIcon>
+                <fa-icon icon="upload" size="sm"></fa-icon>
+              </mat-icon>
+              <h4 matLine>{{ 'labels.heading.Bulk Import' | translate }}</h4>
+              <p matLine>{{ 'labels.text.Bulk data import using excel spreadsheet templates' | translate }}</p>
+            </mat-list-item>
+          </div>
+
         </mat-nav-list>
 
       </div>
@@ -208,69 +210,79 @@
 </div>
 
 <ng-template #templateOffice let-popover="popover">
-  <h2>Manage Offices</h2>
-  <p class="mw300">The Manage Offices page allows you to create, edit and add the offices within your organization.</p>
+  <h2>{{ 'labels.heading.Manage Offices' | translate }}</h2>
+  <p class="mw300">{{ 'labels.text.Manage Offices page allows you to create, edit' | 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="primary" (click)="popover.close();previousStepOffice()">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStepOffice()">Next</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();previousStepOffice()">{{ 'labels.buttons.Back' |
+      translate }}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();nextStepOffice()">{{ 'labels.buttons.Next' |
+      translate }}</button>
   </div>
 </ng-template>
 
 <ng-template #templateAddEditCurrency let-popover="popover">
-  <h2>Currency Configuration</h2>
-  <p class="mw300">This section allows an organization to define what currencies will be used throughout their
-    interactions within the Mifos X system.</p>
+  <h2>{{ 'labels.heading.Currency Configuration' | translate }}</h2>
+  <p class="mw300">{{ 'labels.text.Define what currencies interactions within the Mifos X system' | 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="primary" (click)="popover.close();previousStepAddEditCurrency()">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStepAddEditCurrency()">Next</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();previousStepAddEditCurrency()">{{
+      'labels.buttons.Back' | translate }}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();nextStepAddEditCurrency()">{{
+      'labels.buttons.Next' | translate }}</button>
   </div>
 </ng-template>
 
 <ng-template #templateHolidays let-popover="popover">
-  <h2>Manage Holidays</h2>
-  <p class="mw300">The ability to manage holidays for individual offices is a very useful tool for an organization
-    spanning multiple locations.Use this option to customize holidays for each office of your organization.</p>
+  <h2>{{ 'labels.heading.Manage Holidays' | translate }}</h2>
+  <p class="mw300">{{ 'labels.text.Ability to manage holidays for individual offices' | 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="primary" (click)="popover.close();previousStepHolidays()">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStepHolidays()">Next</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();previousStepHolidays()">{{ 'labels.buttons.Back'
+      | translate }}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();nextStepHolidays()">{{ 'labels.buttons.Next' |
+      translate }}</button>
   </div>
 </ng-template>
 
 <ng-template #templateEmployee let-popover="popover">
-  <h2>Manage Employees</h2>
-  <p class="mw300">With this option, you may view, edit and/or delete your organization's employees.</p>
+  <h2>{{ 'labels.heading.Manage Employees' | translate }}</h2>
+  <p class="mw300">{{ 'labels.text.View, edit and/or delete your organization's employees' | 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="primary" (click)="popover.close();previousStepEmployee()">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStepEmployee()">Next</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();previousStepEmployee()">{{ 'labels.buttons.Back'
+      | translate }}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();nextStepEmployee()">{{ 'labels.buttons.Next' |
+      translate }}</button>
   </div>
 </ng-template>
 
 <ng-template #templateWorkingDays let-popover="popover">
-  <h2>Working Days</h2>
-  <p class="mw300">Working days page allows you to define which days of the week are working days.</p>
+  <h2>{{ 'labels.heading.Working Days' | translate }}</h2>
+  <p class="mw300">{{ 'labels.text.Working days page allows you to define which days' | 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="primary" (click)="popover.close();previousStepWorkingDays()">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStepWorkingDays()">Next</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();previousStepWorkingDays()">{{
+      'labels.buttons.Back' | translate }}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();nextStepWorkingDays()">{{ 'labels.buttons.Next' |
+      translate }}</button>
   </div>
 </ng-template>
 
 <ng-template #templateManageFunds let-popover="popover">
-  <h2>Manage Funds</h2>
-  <p class="mw300">This allows you to manage funds associated with loans.</p>
+  <h2>{{ 'labels.heading.Manage Funds' | translate }}</h2>
+  <p class="mw300">{{ 'labels.text.This allows you to manage funds associated with loans.' | 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="primary" (click)="popover.close();previousStepManageFunds()">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStepManageFunds()">Next</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();previousStepManageFunds()">{{
+      'labels.buttons.Back' | translate }}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();nextStepManageFunds()">{{ 'labels.buttons.Next' |
+      translate }}</button>
   </div>
 </ng-template>

src/app/organization/password-preferences/password-preferences.component.html

@@ -15,8 +15,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 mat-raised-button color="primary" [disabled]="passwordPreferencesForm.pristine" *mifosxHasPermission="'UPDATE_PASSWORD_VALIDATION_POLICY'">Submit</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate }}</button>
+        <button mat-raised-button color="primary" [disabled]="passwordPreferencesForm.pristine" *mifosxHasPermission="'UPDATE_PASSWORD_VALIDATION_POLICY'">{{'labels.buttons.Submit' | translate }}</button>
       </mat-card-actions>
 
     </form>

src/app/organization/payment-types/create-payment-type/create-payment-type.component.html

@@ -9,27 +9,27 @@
         <div fxLayout="column">
 
           <mat-form-field>
-            <mat-label>Payment Type</mat-label>
+            <mat-label>{{ 'labels.inputs.Payment Type' | translate }}</mat-label>
             <input required matInput formControlName="name">
             <mat-error *ngIf="paymentTypeForm.controls.name.hasError('required')">
-              Payment Type is <strong>required</strong>
+              {{ 'labels.inputs.Payment Type' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Description</mat-label>
+            <mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
             <textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
 
           <mat-checkbox labelPosition="before" formControlName="isCashPayment" class="status">
-            Is Cash Payment?
+            {{ 'labels.inputs.Is Cash Payment' | translate }}?
           </mat-checkbox>
 
           <mat-form-field>
-            <mat-label>Position</mat-label>
+            <mat-label>{{ 'labels.inputs.Position' | translate }}</mat-label>
             <input required matInput formControlName="position">
             <mat-error *ngIf="paymentTypeForm.controls.position.hasError('required')">
-              Position is <strong>required</strong>
+              {{ 'labels.inputs.Position' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -38,8 +38,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 mat-raised-button color="primary" [disabled]="!paymentTypeForm.valid" *mifosxHasPermission="'CREATE_PAYMENTTYPE'">Submit</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate }}</button>
+        <button mat-raised-button color="primary" [disabled]="!paymentTypeForm.valid" *mifosxHasPermission="'CREATE_PAYMENTTYPE'">{{'labels.buttons.Submit' | translate }}</button>
       </mat-card-actions>
 
     </form>

src/app/organization/payment-types/edit-payment-type/edit-payment-type.component.html

@@ -9,27 +9,27 @@
         <div fxLayout="column">
 
           <mat-form-field>
-            <mat-label>Payment Type</mat-label>
+            <mat-label>{{ 'labels.inputs.Payment Type' | translate }}</mat-label>
             <input required matInput formControlName="name">
             <mat-error *ngIf="paymentTypeForm.controls.name.hasError('required')">
-              Payment Type is <strong>required</strong>
+              {{ 'labels.inputs.Payment Type' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Description</mat-label>
+            <mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
             <textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
 
           <mat-checkbox labelPosition="before" formControlName="isCashPayment" class="status">
-            Is Cash Payment?
+            {{ 'labels.inputs.Is Cash Payment' | translate }}?
           </mat-checkbox>
 
           <mat-form-field>
-            <mat-label>Position</mat-label>
+            <mat-label>{{ 'labels.inputs.Position' | translate }}</mat-label>
             <input required matInput formControlName="position">
             <mat-error *ngIf="paymentTypeForm.controls.position.hasError('required')">
-              Position is <strong>required</strong>
+              {{ 'labels.inputs.Position' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -38,8 +38,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 mat-raised-button color="primary" [disabled]="!paymentTypeForm.valid" *mifosxHasPermission="'UPDATE_PAYMENTTYPE'">Submit</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{'labels.buttons.Cancel' | translate }}</button>
+        <button mat-raised-button color="primary" [disabled]="!paymentTypeForm.valid" *mifosxHasPermission="'UPDATE_PAYMENTTYPE'">{{'labels.buttons.Submit' | translate }}</button>
       </mat-card-actions>
 
     </form>

src/app/organization/payment-types/payment-types.component.html

@@ -2,7 +2,7 @@
 
   <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_PAYMENTTYPE'">
     <fa-icon icon="plus" class="m-r-10"></fa-icon>
-    Create Payment Type
+    {{'labels.buttons.Create Payment Type' | translate }}
   </button>
 
 </div>
@@ -21,53 +21,53 @@
     <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 paymentType"> {{ paymentType.name }} </td>
       </ng-container>
 
       <ng-container matColumnDef="description">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Description </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Description' | translate }} </th>
         <td mat-cell *matCellDef="let paymentType"> {{ paymentType.description }} </td>
       </ng-container>
 
       <ng-container matColumnDef="codeName">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Code </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Code' | translate }} </th>
         <td mat-cell *matCellDef="let paymentType"> {{ paymentType.codeName }} </td>
       </ng-container>
 
       <ng-container matColumnDef="isSystemDefined">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> System Defined </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.System Defined' | translate }} </th>
         <td mat-cell *matCellDef="let paymentType">
           <div [className]="paymentType.isSystemDefined === true ? 'true text-center' : 'false text-center'">
-            <fa-icon *ngIf="paymentType.isSystemDefined" icon="check-circle" size="lg" matTooltip="Yes" matTooltipPosition="right"></fa-icon>
-            <fa-icon *ngIf="!paymentType.isSystemDefined" icon="times-circle" size="lg" matTooltip="No" matTooltipPosition="right"></fa-icon>
+            <fa-icon *ngIf="paymentType.isSystemDefined" icon="check-circle" size="lg" matTooltip="{{ 'tooltips.Yes' | translate }}" matTooltipPosition="right"></fa-icon>
+            <fa-icon *ngIf="!paymentType.isSystemDefined" icon="times-circle" size="lg" matTooltip="{{ 'tooltips.No' | translate }}" matTooltipPosition="right"></fa-icon>
           </div>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="isCashPayment">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Cash Payment </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Cash Payment' | translate }} </th>
         <td mat-cell *matCellDef="let paymentType">
           <div [className]="paymentType.isCashPayment === true ? 'true text-center' : 'false text-center'">
-            <fa-icon *ngIf="paymentType.isCashPayment" icon="check-circle" size="lg" matTooltip="Yes" matTooltipPosition="right"></fa-icon>
-            <fa-icon *ngIf="!paymentType.isCashPayment" icon="times-circle" size="lg" matTooltip="No" matTooltipPosition="right"></fa-icon>
+            <fa-icon *ngIf="paymentType.isCashPayment" icon="check-circle" size="lg" matTooltip="{{ 'tooltips.Yes' | translate }}" matTooltipPosition="right"></fa-icon>
+            <fa-icon *ngIf="!paymentType.isCashPayment" icon="times-circle" size="lg" matTooltip="{{ 'tooltips.No' | translate }}" matTooltipPosition="right"></fa-icon>
           </div>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="position">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Position </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Position' | translate }} </th>
         <td mat-cell *matCellDef="let paymentType" class="text-center"> {{ paymentType.position }} </td>
       </ng-container>
 
       <ng-container matColumnDef="actions">
-        <th mat-header-cell *matHeaderCellDef> Actions </th>
+        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Actions' | translate }} </th>
         <td mat-cell *matCellDef="let paymentType">
           <button mat-button [routerLink]="[paymentType.id, 'edit']" color="primary" *ngIf="!paymentType.isSystemDefined">
-            <fa-icon icon="edit" class="m-r-10"></fa-icon>Edit
+            <fa-icon icon="edit" class="m-r-10"></fa-icon>{{'labels.buttons.Edit' | translate }}
           </button>
           <button mat-button (click)="deletePaymentType(paymentType.id)" color="warn" *ngIf="!paymentType.isSystemDefined">
-            <fa-icon icon="trash" class="m-r-10"></fa-icon>Delete
+            <fa-icon icon="trash" class="m-r-10"></fa-icon>{{'labels.buttons.Delete' | translate }}
           </button>
         </td>
       </ng-container>

src/app/organization/sms-campaigns/create-campaign/create-campaign.component.html

@@ -24,7 +24,7 @@
 
     <mat-step [stepControl]="smsCampaignForm">
 
-      <ng-template matStepLabel>CAMPAIGN</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.CAMPAIGN' | translate }}</ng-template>
 
       <mifosx-sms-campaign-step 
         [smsCampaignTemplate]="smsCampaignTemplate"
@@ -36,7 +36,7 @@
 
     <mat-step>
 
-      <ng-template matStepLabel>MESSAGE</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.MESSAGE' | translate }}</ng-template>
 
       <mifosx-campaign-message-step
         [templateParameters]="templateParameters"
@@ -48,7 +48,7 @@
 
     <mat-step state="preview" *ngIf="smsCampaignForm.valid" completed>
 
-      <ng-template matStepLabel>PREVIEW</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.PREVIEW' | translate }}</ng-template>
 
       <mifosx-campaign-preview-step 
         [smsCampaignTemplate]="smsCampaignTemplate"

src/app/organization/sms-campaigns/edit-campaign/edit-campaign.component.html

@@ -24,7 +24,7 @@
 
     <mat-step completed>
 
-      <ng-template matStepLabel>CAMPAIGN</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.CAMPAIGN' | translate }}</ng-template>
 
       <mifosx-edit-sms-campaign-step 
         [smsCampaign]="smsCampaign"
@@ -37,7 +37,7 @@
 
     <mat-step>
 
-      <ng-template matStepLabel>MESSAGE</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.MESSAGE' | translate }}</ng-template>
 
       <mifosx-campaign-message-step 
         [templateParameters]="templateParameters"
@@ -49,7 +49,7 @@
 
     <mat-step state="preview" completed>
 
-      <ng-template matStepLabel>PREVIEW</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.PREVIEW' | translate }}</ng-template>
 
       <mifosx-campaign-preview-step
         [campaign]="smsCampaign"

src/app/organization/sms-campaigns/sms-campaign-stepper/campaign-message-step/campaign-message-step.component.html

@@ -1,11 +1,11 @@
 <div fxLayout="column">
 
   <mat-form-field fxFlex="98%">
-    <mat-label>Campaign Message</mat-label>
+    <mat-label>{{'labels.inputs.Campaign Message' | translate }}</mat-label>
     <textarea matInput [formControl]="message"></textarea>
   </mat-form-field>
 
-  <h3 fxFlex="98%" class="mat-h3">Template Parameters</h3>
+  <h3 fxFlex="98%" class="mat-h3">{{'labels.heading.Template Parameters' | translate }}</h3>
 
   <div fxLayout="row wrap" fxLayout.xs="column" fxLayoutAlign="center">
     <button mat-stroked-button color="primary" class="parameter"
@@ -17,10 +17,10 @@
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious>
       <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
-      Previous
+      {{'labels.buttons.Previous' | translate }}
     </button>
     <button mat-raised-button matStepperNext [disabled]="!smsCampaignFormValid">
-      Next
+      {{'labels.buttons.Next' | translate }}
       <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
     </button>
   </div>

src/app/organization/sms-campaigns/sms-campaign-stepper/campaign-preview-step/campaign-preview-step.component.html

@@ -3,23 +3,23 @@
   <mat-list>
 
     <mat-list-item>
-      Campaign Name : {{ campaign.campaignName }}
+      {{ 'labels.inputs.Campaign Name' | translate }} : {{ campaign.campaignName }}
     </mat-list-item>
 
     <mat-list-item>
-      SMS Provider : {{ (campaign.providerId | find:smsProviders:'id':'name') || "Unassigned" }}
+      {{ 'labels.inputs.SMS Provider' | translate }} : {{ (campaign.providerId | find:smsProviders:'id':'name') || "Unassigned" }}
     </mat-list-item>
 
     <mat-list-item>
-      Trigger Type : {{ (campaign.editFlag ? campaign.triggerType.id : campaign.triggerType) | find:triggerTypes:'id':'value' }}
+      {{ 'labels.inputs.Trigger Type' | translate }} : {{ (campaign.editFlag ? campaign.triggerType.id : campaign.triggerType) | find:triggerTypes:'id':'value' }}
     </mat-list-item>
 
     <mat-list-item>
-      Bussiness Rule : {{ campaign.editFlag ? campaign.reportName : campaign.paramValue?.reportName }}
+      {{ 'labels.inputs.Bussiness Rule' | translate }} : {{ campaign.editFlag ? campaign.reportName : campaign.paramValue?.reportName }}
     </mat-list-item>
 
     <div fxLayout="column" fxLayoutGap="10px" class="template-message">
-      <h3>Campaign Message :</h3>
+      <h3>{{ 'labels.heading.Campaign Message' | translate }} :</h3>
       <textarea matInput disabled>{{ campaign.editFlag ? editedCampaignMessage : campaign.message }}</textarea>
     </div>
 
@@ -27,10 +27,10 @@
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button [routerLink]="['../']">
-      Cancel
+      {{'labels.buttons.Cancel' | translate }}
     </button>
     <button mat-raised-button color="primary" (click)="submit.emit()">
-      Submit
+      {{'labels.buttons.Submit' | translate }}
     </button>
   </div>
 

src/app/organization/sms-campaigns/sms-campaign-stepper/edit-sms-campaign-step/edit-business-rule-parameters/edit-business-rule-parameters.component.html

@@ -2,7 +2,7 @@
 
   <mat-divider fxFlex="98%"></mat-divider>
 
-  <h3 fxFlex="98%" class="mat-h3">Business Rule Parameters</h3>
+  <h3 fxFlex="98%" class="mat-h3">{{'labels.heading.Business Rule Parameters' | translate }}</h3>
 
   <form [formGroup]="ReportForm">
 
@@ -16,7 +16,7 @@
             <mat-label>{{param.label}}</mat-label>
             <input matInput required [formControlName]="param.name">
             <mat-error *ngIf="ReportForm.controls[param.name].hasError('required')">
-              {{param.label}} is <strong>required</strong>
+              {{param.label}} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -27,7 +27,7 @@
             <mat-datepicker-toggle matSuffix [for]="runReportDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #runReportDatePicker></mat-datepicker>
             <mat-error *ngIf="ReportForm.controls[param.name].hasError('required')">
-              {{param.label}} is <strong>required</strong>
+              {{param.label}} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -39,7 +39,7 @@
               </mat-option>
             </mat-select>
             <mat-error *ngIf="ReportForm.controls[param.name].hasError('required')">
-              {{param.label}} is <strong>required</strong>
+              {{param.label}} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -56,10 +56,10 @@
 <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
   <button mat-raised-button matStepperPrevious disabled>
     <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
-    Previous
+    {{'labels.buttons.Previous' | translate }}
   </button>
   <button mat-raised-button matStepperNext>
-    Next
+    {{'labels.buttons.Next' | translate }}
     <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
   </button>
 </div>

src/app/organization/sms-campaigns/sms-campaign-stepper/edit-sms-campaign-step/edit-sms-campaign-step.component.html

@@ -3,15 +3,15 @@
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" fxLayoutAlign.gt-sm="start center">
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Campaign Name</mat-label>
+      <mat-label>{{ 'labels.inputs.Campaign Name' | translate }}</mat-label>
       <input matInput formControlName="campaignName" required>
       <mat-error>
-        Campaign Name is <strong>required</strong>
+        {{ 'labels.inputs.Campaign Name' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%" *ngIf="!smsCampaignDetailsForm.controls.isNotification.value">
-      <mat-label>SMS Provider</mat-label>
+      <mat-label>{{ 'labels.inputs.SMS Provider' | translate }}</mat-label>
       <mat-select formControlName="providerId">
         <mat-option *ngFor="let provider of smsProviders" [value]="provider.id">
           {{ provider.value }}
@@ -20,41 +20,41 @@
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Trigger Type</mat-label>
+      <mat-label>{{ 'labels.inputs.Trigger Type' | translate }}</mat-label>
       <mat-select formControlName="triggerType" required>
         <mat-option *ngFor="let triggerType of triggerTypes" [value]="triggerType.id">
           {{ triggerType.value }}
         </mat-option>
       </mat-select>
       <mat-error>
-        Trigger Type is <strong>required</strong>
+        {{ 'labels.inputs.Trigger Type' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-checkbox labelPosition="before" formControlName="isNotification" fxFlex="48%">
-      is Notification?
+      {{ 'labels.inputs.Is Notification' | translate }}?
     </mat-checkbox>
 
     <mat-form-field fxFlex="48%" *ngIf="smsCampaignDetailsForm.controls.recurrenceStartDate" (click)="recurrenceStartDatePicker.open()">
-      <mat-label>Schedule Date</mat-label>
+      <mat-label>{{ 'labels.inputs.Schedule Date' | translate }}</mat-label>
       <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="recurrenceStartDatePicker"
         formControlName="recurrenceStartDate" required>
       <mat-datepicker-toggle matSuffix [for]="recurrenceStartDatePicker"></mat-datepicker-toggle>
       <mat-datepicker #recurrenceStartDatePicker></mat-datepicker>
       <mat-error>
-        Schedule Date is <strong>required</strong>
+        {{ 'labels.inputs.Schedule Date' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Business Rule</mat-label>
+      <mat-label>{{ 'labels.inputs.Business Rule' | translate }}</mat-label>
       <mat-select formControlName="runReportId" required>
         <mat-option *ngFor="let rule of businessRules" [value]="rule.reportId">
           {{ rule.reportName }}
         </mat-option>
       </mat-select>
       <mat-error>
-        Business Rule is <strong>required</strong>
+        {{ 'labels.inputs.Business Rule' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 

src/app/organization/sms-campaigns/sms-campaign-stepper/sms-campaign-step/business-rule-parameters/business-rule-parameters.component.html

@@ -2,7 +2,7 @@
 
   <mat-divider fxFlex="98%"></mat-divider>
 
-  <h3 fxFlex="98%" class="mat-h3">Business Rule Parameters</h3>
+  <h3 fxFlex="98%" class="mat-h3">{{ 'labels.heading.Business Rule Parameters' | translate }}</h3>
 
   <form [formGroup]="ReportForm">
 
@@ -16,7 +16,7 @@
             <mat-label>{{param.label}}</mat-label>
             <input matInput required [formControlName]="param.name">
             <mat-error *ngIf="ReportForm.controls[param.name].hasError('required')">
-              {{param.label}} is <strong>required</strong>
+              {{param.label}} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
   
@@ -27,7 +27,7 @@
             <mat-datepicker-toggle matSuffix [for]="runReportDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #runReportDatePicker></mat-datepicker>
             <mat-error *ngIf="ReportForm.controls[param.name].hasError('required')">
-              {{param.label}} is <strong>required</strong>
+              {{param.label}} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
   
@@ -39,7 +39,7 @@
               </mat-option>
             </mat-select>
             <mat-error *ngIf="ReportForm.controls[param.name].hasError('required')">
-              {{param.label}} is <strong>required</strong>
+              {{param.label}} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -56,6 +56,6 @@
 <div class="margin-t" fxLayoutAlign="center">
   <button mat-raised-button matStepperNext color="primary" (click)="getResponseHeaders()"
     [disabled]="!this.ReportForm.valid">
-      Get Parameters
+    {{ 'labels.buttons.Get Parameters' | translate }}
   </button>
 </div>

src/app/organization/sms-campaigns/sms-campaign-stepper/sms-campaign-step/sms-campaign-step.component.html

@@ -3,16 +3,16 @@
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" fxLayoutAlign.gt-sm="start center">
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Campaign Name</mat-label>
+      <mat-label>{{ 'labels.inputs.Campaign Name' | translate }}</mat-label>
       <input matInput formControlName="campaignName" required>
       <mat-error>
-        Campaign Name is <strong>required</strong>
+        {{ 'labels.inputs.Campaign Name' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%"
       *ngIf="!smsCampaignDetailsForm.controls.isNotification.value">
-      <mat-label>SMS Provider</mat-label>
+      <mat-label>{{ 'labels.inputs.SMS Provider' | translate }}</mat-label>
       <mat-select formControlName="providerId">
         <mat-option *ngFor="let provider of smsProviders" [value]="provider.id">
           {{ provider.value }}
@@ -21,86 +21,87 @@
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Trigger Type</mat-label>
+      <mat-label>{{ 'labels.inputs.Trigger Type' | translate }}</mat-label>
       <mat-select formControlName="triggerType" required>
         <mat-option *ngFor="let triggerType of triggerTypes" [value]="triggerType.id">
           {{ triggerType.value }}
         </mat-option>
       </mat-select>
       <mat-error>
-        Trigger Type is <strong>required</strong>
+        {{ 'labels.inputs.Trigger Type' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-checkbox labelPosition="before" formControlName="isNotification" fxFlex="48%">
-      is Notification?
+      {{ 'labels.inputs.Is Notification' | translate }}?
     </mat-checkbox>
 
     <mat-form-field fxFlex="48%"
       *ngIf="smsCampaignDetailsForm.contains('recurrenceStartDate')" (click)="recurrenceStartDatePicker.open()">
-      <mat-label>Schedule Date</mat-label>
+      <mat-label>{{ 'labels.inputs.Schedule Date' | translate }}</mat-label>
       <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="recurrenceStartDatePicker"
         formControlName="recurrenceStartDate" required>
       <mat-datepicker-toggle matSuffix [for]="recurrenceStartDatePicker"></mat-datepicker-toggle>
       <mat-datepicker #recurrenceStartDatePicker></mat-datepicker>
       <mat-error>
-        Schedule Date is <strong>required</strong>
+        {{ 'labels.inputs.Schedule Date' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%"
       *ngIf="smsCampaignDetailsForm.contains('frequency')">
-      <mat-label>Repeats</mat-label>
+      <mat-label>{{ 'labels.inputs.Repeats' | translate }}</mat-label>
       <mat-select formControlName="frequency" required>
-        <mat-option [value]="1">Daily</mat-option>
-        <mat-option [value]="2">Weekly</mat-option>
-        <mat-option [value]="3">Monthly</mat-option>
-        <mat-option [value]="4">Yearly</mat-option>
+        <mat-option [value]="1">{{ 'labels.inputs.Daily' | translate }}</mat-option>
+        <mat-option [value]="2">{{ 'labels.inputs.Weekly' | translate }}</mat-option>
+        <mat-option [value]="3">{{ 'labels.inputs.Monthly' | translate }}</mat-option>
+        <mat-option [value]="4">{{ 'labels.inputs.Yearly' | translate }}</mat-option>
       </mat-select>
       <mat-error>
-        Repetition Frequency is <strong>required</strong>
+        {{ 'labels.inputs.Repetition Frequency' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%"
       *ngIf="smsCampaignDetailsForm.contains('interval')">
-      <mat-label>Repetition Interval</mat-label>
+      <mat-label>{{ 'labels.inputs.Repetition Interval' | translate }}</mat-label>
       <mat-select formControlName="interval" required>
         <mat-option *ngFor="let interval of repetitionIntervals" [value]="interval">
           {{ interval }}
         </mat-option>
       </mat-select>
       <mat-error>
-        Repetition Interval is <strong>required</strong>
+        {{ 'labels.inputs.Repetition Interval' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%"
       *ngIf="smsCampaignDetailsForm.contains('repeatsOnDay')">
-      <mat-label>Repeats on Day</mat-label>
+      <mat-label>{{ 'labels.inputs.Repeats on Day' | translate }}</mat-label>
       <mat-select formControlName="repeatsOnDay" required>
-        <mat-option value="1">Monday</mat-option>
-        <mat-option value="2">Tuesday</mat-option>
-        <mat-option value="3">Wednesday</mat-option>
-        <mat-option value="4">Thursday</mat-option>
-        <mat-option value="5">Friday</mat-option>
-        <mat-option value="6">Saturday</mat-option>
-        <mat-option value="7">Sunday</mat-option>
+        <mat-option value="1">{{ 'labels.inputs.Monday' | translate }}</mat-option>
+        <mat-option value="2">{{ 'labels.inputs.Tuesday' | translate }}</mat-option>
+        <mat-option value="3">{{ 'labels.inputs.Wednesday' | translate }}</mat-option>
+        <mat-option value="4">{{ 'labels.inputs.Thursday' | translate }}</mat-option>
+        <mat-option value="5">{{ 'labels.inputs.Friday' | translate }}</mat-option>
+        <mat-option value="6">{{ 'labels.inputs.Saturday' | translate }}</mat-option>
+        <mat-option value="7">{{ 'labels.inputs.Sunday' | translate }}</mat-option>
       </mat-select>
       <mat-error>
-        At least <strong>one</strong> day must be selected
+        {{"labels.inputs.At least" |translate}} <strong>{{"labels.inputs.one" |translate}}</strong> {{"labels.inputs.day must be selected" |translate}}
+
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Business Rule</mat-label>
+      <mat-label>{{ 'labels.inputs.Business Rule' | translate }}</mat-label>
       <mat-select formControlName="runReportId" required>
         <mat-option *ngFor="let rule of businessRules" [value]="rule.reportId">
           {{ rule.reportName }}
         </mat-option>
       </mat-select>
       <mat-error>
-        Business Rule is <strong>required</strong>
+        {{ 'labels.inputs.Business Rule' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
@@ -110,10 +111,10 @@
     *ngIf="!smsCampaignDetailsForm.controls.runReportId.value">
     <button mat-raised-button matStepperPrevious disabled>
       <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
-      Previous
+      {{ 'labels.buttons.Previous' | translate }}
     </button>
     <button mat-raised-button matStepperNext>
-      Next
+      {{ 'labels.buttons.Next' | translate }}
       <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
     </button>
   </div>

src/app/organization/sms-campaigns/sms-campaigns.component.html

@@ -2,7 +2,7 @@
 
   <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_SMSCAMPAIGN'">
     <fa-icon icon="plus" class="m-r-10"></fa-icon>
-    Create SMS Campaign
+    {{ 'labels.buttons.Create SMS Campaign' | translate }}
   </button>
 
 </div>
@@ -21,27 +21,27 @@
     <table mat-table [dataSource]="dataSource" matSort>
 
       <ng-container matColumnDef="campaignName">
-        <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 smsCampaign"> {{ smsCampaign.campaignName }} </td>
       </ng-container>
 
       <ng-container matColumnDef="campaignMessage">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Template Message </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Template Message' | translate }} </th>
         <td mat-cell *matCellDef="let smsCampaign"> {{ smsCampaign.campaignMessage }} </td>
       </ng-container>
 
       <ng-container matColumnDef="campaignType.value">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Campaign Type </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Campaign Type' | translate }} </th>
         <td mat-cell *matCellDef="let smsCampaign"> {{ smsCampaign.campaignType.value }} </td>
       </ng-container>
 
       <ng-container matColumnDef="triggerType.value">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Trigger Type </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Trigger Type' | translate }} </th>
         <td mat-cell *matCellDef="let smsCampaign"> {{ smsCampaign.triggerType.value }} </td>
       </ng-container>
 
       <ng-container matColumnDef="campaignStatus.value">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Status </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Status' | translate }} </th>
         <td mat-cell *matCellDef="let smsCampaign">
           <div [className]="smsCampaign.campaignStatus.code | statusLookup">
             <fa-icon matTooltip="{{ smsCampaign.campaignStatus.value | titlecase }}" matTooltipPosition="right" icon="circle" size="lg"></fa-icon>
@@ -50,7 +50,7 @@
       </ng-container>
 
       <ng-container matColumnDef="smsCampaignTimeLine.submittedByUsername">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Approved By </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Approved By' | translate }} </th>
         <td mat-cell *matCellDef="let smsCampaign"> {{ smsCampaign.smsCampaignTimeLine.submittedByUsername }} </td>
       </ng-container>
 

src/app/organization/sms-campaigns/view-campaign/view-campaign.component.html

@@ -4,31 +4,31 @@
 
     <span *ngIf="smsCampaignData.campaignStatus.value !== 'active'">
       <button mat-raised-button color="primary" *mifosxHasPermission="'UPDATE_SMSCAMPAIGN'" [routerLink]="['edit']">
-        <fa-icon icon="edit" class="m-r-10"></fa-icon>Edit
+        <fa-icon icon="edit" class="m-r-10"></fa-icon>{{'labels.buttons.Edit' | translate }}
       </button>
     </span>
 
     <span *ngIf="smsCampaignData.campaignStatus.value === 'Pending'">
       <button mat-raised-button color="accent" *mifosxHasPermission="'ACTIVATE_SMSCAMPAIGN'" (click)="activateCampaign()">
-        <fa-icon icon="lock-open" class="m-r-10"></fa-icon>Activate
+        <fa-icon icon="lock-open" class="m-r-10"></fa-icon>{{'labels.buttons.Activate' | translate }}
       </button>
     </span>
 
     <span *ngIf="smsCampaignData.campaignStatus.value !== 'closed'">
       <button mat-raised-button color="warn" *mifosxHasPermission="'CLOSE_SMSCAMPAIGN'" (click)="closeCampaign()">
-        <fa-icon icon="times" class="m-r-10"></fa-icon>Close
+        <fa-icon icon="times" class="m-r-10"></fa-icon>{{'labels.buttons.Close' | translate }}
       </button>
     </span>
 
     <span *ngIf="smsCampaignData.campaignStatus.value !== 'Pending' && smsCampaignData.campaignStatus.value !== 'active'">
       <button mat-raised-button color="accent" *mifosxHasPermission="'REACTIVATE_SMSCAMPAIGN'" (click)="reactivateCampaign()">
-        <fa-icon icon="undo" class="m-r-10"></fa-icon>Reactivate
+        <fa-icon icon="undo" class="m-r-10"></fa-icon>{{'labels.buttons.Reactivate' | translate }}
       </button>
     </span>
 
     <span *ngIf="smsCampaignData.campaignStatus.value === 'closed'">
       <button mat-raised-button color="warn" *mifosxHasPermission="'DELETE_SMSCAMPAIGN'" (click)="deleteCampaign()">
-        <fa-icon icon="trash" class="m-r-10"></fa-icon>Delete
+        <fa-icon icon="trash" class="m-r-10"></fa-icon>{{'labels.buttons.Delete' | translate }}
       </button>
     </span>
 
@@ -47,31 +47,31 @@
             <mat-list>
 
               <mat-list-item>
-                Campaign Name : {{ smsCampaignData.campaignName }}
+                {{ 'labels.inputs.Campaign Name' | translate }} : {{ smsCampaignData.campaignName }}
               </mat-list-item>
 
               <mat-list-item>
-                Report Name : {{ smsCampaignData.reportName }}
+                {{ 'labels.inputs.Report Name' | translate }} : {{ smsCampaignData.reportName }}
               </mat-list-item>
 
               <mat-list-item>
-                Status : {{ smsCampaignData.campaignStatus.value }}
+                {{ 'labels.inputs.Status' | translate }} : {{ smsCampaignData.campaignStatus.value }}
               </mat-list-item>
 
               <mat-list-item>
-                Trigger Type : {{ smsCampaignData.triggerType.value }}
+                {{ 'labels.inputs.Trigger Type' | translate }} : {{ smsCampaignData.triggerType.value }}
               </mat-list-item>
 
               <mat-list-item>
-                Submitted on : {{ smsCampaignData.smsCampaignTimeLine.submittedOnDate | dateFormat }}
+                {{ 'labels.inputs.Submitted on' | translate }} : {{ smsCampaignData.smsCampaignTimeLine.submittedOnDate  | dateFormat }}
               </mat-list-item>
 
               <mat-list-item *ngIf="smsCampaignData.recurrence">
-                Recurrence : {{ smsCampaignData.recurrence }}
+                {{ 'labels.inputs.Recurrence' | translate }} : {{ smsCampaignData.recurrence }}
               </mat-list-item>
 
               <div fxLayout="column" fxLayoutGap="10px" class="template-message">
-                <h3>Template Message :</h3>
+                <h3>{{'labels.heading.Template Message' | translate }} :</h3>
                 <textarea matInput disabled>{{ smsCampaignData.campaignMessage}}</textarea>
               </div>
 
@@ -90,14 +90,14 @@
               <div fxLayout="row" fxLayoutGap="3%" fxLayoutAlign="center">
 
                 <mat-form-field (click)="fromDatePicker.open()">
-                  <mat-label>From Date</mat-label>
+                  <mat-label>{{ 'labels.inputs.From Date' | translate }}</mat-label>
                   <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="fromDatePicker" formControlName="fromDate">
                   <mat-datepicker-toggle matSuffix [for]="fromDatePicker"></mat-datepicker-toggle>
                   <mat-datepicker #fromDatePicker></mat-datepicker>
                 </mat-form-field>
 
                 <mat-form-field (click)="toDatePicker.open()">
-                  <mat-label>To Date</mat-label>
+                  <mat-label>{{ 'labels.inputs.To Date' | translate }}</mat-label>
                   <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="toDatePicker" formControlName="toDate">
                   <mat-datepicker-toggle matSuffix [for]="toDatePicker"></mat-datepicker-toggle>
                   <mat-datepicker #toDatePicker></mat-datepicker>
@@ -105,7 +105,7 @@
 
                 <div class="search-button" >
                   <button mat-raised-button color="primary">
-                  <fa-icon icon="search" class="m-r-10"></fa-icon>Search</button>
+                  <fa-icon icon="search" class="m-r-10"></fa-icon>{{'labels.buttons.Search' | translate }}</button>
                 </div>
               </div>
 
@@ -114,22 +114,22 @@
             <table #messageTable mat-table [dataSource]="dataSource" class="mat-elevation-z1 m-b-25">
 
               <ng-container matColumnDef="Message">
-                <th mat-header-cell *matHeaderCellDef> Message </th>
+                <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Message' | translate }} </th>
                 <td mat-cell *matCellDef="let sms">{{sms.message}}</td>
               </ng-container>
 
               <ng-container matColumnDef="Status">
-                <th mat-header-cell *matHeaderCellDef> Status </th>
+                <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Status' | translate }} </th>
                 <td mat-cell *matCellDef="let sms">{{sms.status.value}}</td>
               </ng-container>
 
               <ng-container matColumnDef="Mobile No.">
-                <th mat-header-cell *matHeaderCellDef> Mobile No. </th>
+                <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Mobile No' | translate }}. </th>
                 <td mat-cell *matCellDef="let sms">{{sms.mobileNo}} </td>
               </ng-container>
 
               <ng-container matColumnDef="Campaign Name">
-                <th mat-header-cell *matHeaderCellDef> Campaign Name </th>
+                <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Campaign Name' | translate }} </th>
                 <td mat-cell *matCellDef="let sms">{{sms.campaignName}}</td>
               </ng-container>
 

src/app/organization/standing-instructions-history/standing-instructions-history.component.html

@@ -9,17 +9,17 @@
         <div fxLayout="column">
 
           <mat-form-field>
-            <mat-label>Client Name</mat-label>
+            <mat-label>{{ 'labels.inputs.Client Name' | translate }}</mat-label>
             <input matInput formControlName="clientName">
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Client Id</mat-label>
+            <mat-label>{{ 'labels.inputs.Client Id' | translate }}</mat-label>
             <input matInput formControlName="clientId">
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Transfer Type</mat-label>
+            <mat-label>{{ 'labels.inputs.Transfer Type' | translate }}</mat-label>
             <mat-select formControlName="transferType">
               <mat-option *ngFor="let transferType of standingInstructionsTemplate.transferTypeOptions" [value]="transferType.id">
                 {{ transferType.value }}
@@ -28,7 +28,7 @@
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Account Type</mat-label>
+            <mat-label>{{ 'labels.inputs.Account Type' | translate }}</mat-label>
             <mat-select formControlName="fromAccountType">
               <mat-option *ngFor="let accountType of standingInstructionsTemplate.fromAccountTypeOptions" [value]="accountType.id">
                 {{ accountType.value }}
@@ -37,19 +37,19 @@
           </mat-form-field>
 
           <mat-form-field *ngIf="instructionForm.contains('fromAccountId')">
-            <mat-label>From Account ID</mat-label>
+            <mat-label>{{ 'labels.inputs.From Account ID' | translate }}</mat-label>
             <input matInput formControlName="fromAccountId">
           </mat-form-field>
 
           <mat-form-field (click)="fromDatePicker.open()">
-            <mat-label>From Date</mat-label>
+            <mat-label>{{ 'labels.inputs.From Date' | translate }}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" formControlName="fromDate" [matDatepicker]="fromDatePicker">
             <mat-datepicker-toggle matSuffix [for]="fromDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #fromDatePicker></mat-datepicker>
           </mat-form-field>
 
           <mat-form-field (click)="toDatePicker.open()">
-            <mat-label>To Date</mat-label>
+            <mat-label>{{ 'labels.inputs.To Date' | translate }}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" formControlName="toDate" [matDatepicker]="toDatePicker">
             <mat-datepicker-toggle matSuffix [for]="toDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #toDatePicker></mat-datepicker>
@@ -60,10 +60,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" *mifosxHasPermission="'READ_STANDINGINSTRUCTION'">
           <fa-icon icon="search"></fa-icon>
-          &nbsp; Search Instructions
+          &nbsp; {{ 'labels.buttons.Search Instructions' | translate }}
         </button>
       </mat-card-actions>
 
@@ -79,49 +79,49 @@
 
     <div class="m-b-20">
       <button mat-raised-button color="primary" (click)="isCollapsed = false">
-        Parameters
+        {{ 'labels.buttons.Parameters' | translate }}
       </button>
     </div>
 
     <table class="mat-elevation-z1" mat-table [dataSource]="dataSource" matSort>
 
       <ng-container matColumnDef="fromClient">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> From Client </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.From Client' | translate }} </th>
         <td mat-cell *matCellDef="let instruction"> {{ instruction.fromClient.displayName }}({{ instruction.fromClient.id }}) </td>
       </ng-container>
 
       <ng-container matColumnDef="fromAccount">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> From Account </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.From Account' | translate }} </th>
         <td mat-cell *matCellDef="let instruction"> {{ instruction.fromAccount.productName }}({{ instruction.fromAccount.id }}) </td>
       </ng-container>
 
       <ng-container matColumnDef="toClient">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> To Client </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.To Client' | translate }} </th>
         <td mat-cell *matCellDef="let instruction"> {{ instruction.toClient.displayName }}({{ instruction.toClient.id }}) </td>
       </ng-container>
 
       <ng-container matColumnDef="toAccount">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> To Account </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.To Account' | translate }} </th>
         <td mat-cell *matCellDef="let instruction"> {{ instruction.toAccount.productName }}({{ instruction.toAccount.id }}) </td>
       </ng-container>
 
       <ng-container matColumnDef="executionTime">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Execution Time </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Execution Time' | translate }} </th>
         <td mat-cell *matCellDef="let instruction"> {{ instruction.executionTime }} </td>
       </ng-container>
 
       <ng-container matColumnDef="amount">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Amount </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Amount' | translate }} </th>
         <td mat-cell *matCellDef="let instruction"> {{ instruction.amount | formatNumber }} </td>
       </ng-container>
 
       <ng-container matColumnDef="status">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Status </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Status' | translate }} </th>
         <td mat-cell *matCellDef="let instruction"> {{ instruction.status }} </td>
       </ng-container>
 
       <ng-container matColumnDef="errorLog">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Error Log </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Error Log' | translate }} </th>
         <td mat-cell *matCellDef="let instruction">
           <button *ngIf="instruction.status === 'failed'" class="error-log" mat-raised-button color="warn" [matTooltip]="instruction.errorLog">
             <i class="fa fa-exclamation"></i>

src/app/organization/tellers/cashiers/allocate-cash/allocate-cash.component.html

@@ -9,60 +9,60 @@
         <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>
             <input matInput required formControlName="office">
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Teller Name</mat-label>
+            <mat-label>{{ 'labels.inputs.Teller Name' | translate }}</mat-label>
             <input matInput required formControlName="tellerName">
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Cashier</mat-label>
+            <mat-label>{{ 'labels.inputs.Cashier' | translate }}</mat-label>
             <input matInput required formControlName="cashier">
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Assignment Period</mat-label>
+            <mat-label>{{ 'labels.inputs.Assignment Period' | translate }}</mat-label>
             <input matInput formControlName="assignmentPeriod">
           </mat-form-field>
 
           <mat-form-field fxFlex="48%" (click)="cashDatePicker.open()">
-            <mat-label>Date</mat-label>
+            <mat-label>{{ 'labels.inputs.Date' | translate }}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="cashDatePicker" required formControlName="txnDate">
             <mat-datepicker-toggle matSuffix [for]="cashDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #cashDatePicker></mat-datepicker>
             <mat-error *ngIf="allocateCashForm.controls.txnDate.hasError('required')">
-              Date <strong>is required</strong>
+              {{ 'labels.inputs.Date' | 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 cashierData.currencyOptions" [value]="currency.code">
                 {{ currency.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="allocateCashForm.controls.currencyCode.hasError('required')">
-              Currency <strong>is 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%">
-            <mat-label>Amount</mat-label>
+            <mat-label>{{ 'labels.inputs.Amount' | translate }}</mat-label>
             <input matInput required formControlName="txnAmount">
             <mat-error *ngIf="allocateCashForm.controls.txnAmount.hasError('required')">
-              Amount <strong>is required</strong>
+              {{ 'labels.inputs.Amount' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Notes/Comments</mat-label>
+            <mat-label>{{ 'labels.inputs.Notes/Comments' | translate }}</mat-label>
             <input matInput required formControlName="txnNote">
             <mat-error *ngIf="allocateCashForm.controls.txnNote.hasError('required')">
-              Notes/Comments <strong>is required</strong>
+              {{ 'labels.inputs.Notes/Comments' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -71,8 +71,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 mat-raised-button color="primary" [disabled]="!allocateCashForm.valid" *mifosxHasPermission="'ALLOCATECASHIER_TELLER'">Submit</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">{{ 'labels.buttons.Cancel' | translate }}</button>
+        <button mat-raised-button color="primary" [disabled]="!allocateCashForm.valid" *mifosxHasPermission="'ALLOCATECASHIER_TELLER'">{{ 'labels.buttons.Submit' | translate }}</button>
       </mat-card-actions>
 
     </form>

src/app/organization/tellers/cashiers/cashiers.component.html

@@ -2,7 +2,7 @@
 
   <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_CASHIERS_FOR_TELLER'">
     <fa-icon icon="plus" class="m-r-10"></fa-icon>
-    New Cashier
+    {{ 'labels.buttons.New Cashier' | translate }}
   </button>
 
 </div>
@@ -21,32 +21,32 @@
     <table mat-table [dataSource]="dataSource" matSort>
 
       <ng-container matColumnDef="period">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Period </th>
-        <td mat-cell *matCellDef="let cashier"> {{ cashier.startDate | dateFormat }} - {{ cashier.endDate | dateFormat }}</td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Period' | translate }} </th>
+        <td mat-cell *matCellDef="let cashier"> {{ cashier.startDate  | dateFormat }} - {{ cashier.endDate  | dateFormat }}</td>
       </ng-container>
 
       <ng-container matColumnDef="staffName">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Cashier/Staff </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Cashier/Staff' | translate }} </th>
         <td mat-cell *matCellDef="let cashier"> {{ cashier.staffName }} </td>
       </ng-container>
 
       <ng-container matColumnDef="isFullDay">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Full Day/Time </th>
-        <td mat-cell *matCellDef="let cashier"> {{ cashier.isFullDay | yesNo }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Full Day/Time' | translate }} </th>
+        <td mat-cell *matCellDef="let cashier"> {{ cashier.isFullDay ? 'Yes' : 'No' }} </td>
       </ng-container>
 
       <ng-container matColumnDef="vaultActions">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Vault Actions </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Vault Actions' | translate }} </th>
         <td mat-cell *matCellDef="let cashier">
-          <button class="cashier-action-button" mat-raised-button color="accent" matTooltip="Allocate Cash"
+          <button class="cashier-action-button" mat-raised-button color="accent" matTooltip="{{ 'tooltips.Allocate Cash' | translate }}"
             (click)="routeEdit($event)" [routerLink]="[cashier.id, 'allocate']" *mifosxHasPermission="'ALLOCATECASHIER_TELLER'">
             <i class="fa fa-arrow-up"></i>
           </button>
-          <button class="cashier-action-button" mat-raised-button color="warn" matTooltip="Settle Cash"
+          <button class="cashier-action-button" mat-raised-button color="warn" matTooltip="{{ 'tooltips.Settle Cash' | translate }}"
             (click)="routeEdit($event)" [routerLink]="[cashier.id, 'settle']" *mifosxHasPermission="'SETTLECASHIER_TELLER'">
             <i class="fa fa-arrow-down"></i>
           </button>
-          <button class="cashier-action-button" mat-raised-button color="primary" matTooltip="View Transactions"
+          <button class="cashier-action-button" mat-raised-button color="primary" matTooltip="{{ 'tooltips.View Transactions' | translate }}"
             (click)="routeEdit($event)" [routerLink]="[cashier.id, 'transactions']" *mifosxHasPermission="'ALLOCATECASHIER_TELLER'">
             <i class="fa fa-eye"></i>
           </button>

src/app/organization/tellers/cashiers/create-cashier/create-cashier.component.html

@@ -9,54 +9,55 @@
         <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>
             <input matInput required autofocus [value]="cashierTemplate.officeName" disabled>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Teller Name</mat-label>
+            <mat-label>{{ 'labels.inputs.Teller Name' | translate }}</mat-label>
             <input matInput required autofocus [value]="cashierTemplate.tellerName" disabled>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Cashier</mat-label>
+            <mat-label>{{ 'labels.inputs.Cashier' | translate }}</mat-label>
             <mat-select formControlName="staffId">
               <mat-option *ngFor="let staff of cashierTemplate.staffOptions" [value]="staff.id">
                 {{ staff.displayName }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="createCashierForm.controls.staffId.hasError('required')">
-              Cashier <strong>is required</strong>
+              {{ 'labels.inputs.Cashier' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Description/Notes</mat-label>
+            <mat-label>{{ 'labels.inputs.Description/Notes' | translate }}</mat-label>
             <input matInput autofocus formControlName="description">
           </mat-form-field>
 
           <mat-form-field fxFlex="48%" (click)="fromDatePicker.open()">
-            <mat-label>From</mat-label>
+            <mat-label>{{ 'labels.inputs.From' | translate }}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="fromDatePicker" required formControlName="startDate">
             <mat-datepicker-toggle matSuffix [for]="fromDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #fromDatePicker></mat-datepicker>
             <mat-error *ngIf="createCashierForm.controls.startDate.hasError('required')">
-              From Date <strong>is required</strong>
+              {{ 'labels.inputs.From Date' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%" (click)="toDatePicker.open()">
-            <mat-label>To</mat-label>
-            <input matInput [min]="createCashierForm.value.startDate" [max]="maxDate" [matDatepicker]="toDatePicker" required formControlName="endDate">            <mat-datepicker-toggle matSuffix [for]="toDatePicker"></mat-datepicker-toggle>
+            <mat-label>{{ 'labels.inputs.To' | translate }}</mat-label>
+            <input matInput [min]="createCashierForm.value.startDate" [max]="maxDate" [matDatepicker]="toDatePicker" required formControlName="endDate">            
+            <mat-datepicker-toggle matSuffix [for]="toDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #toDatePicker></mat-datepicker>
             <mat-error *ngIf="createCashierForm.controls.endDate.hasError('required')">
-              To Date <strong>is required</strong>
+              {{ 'labels.inputs.To Date' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <div fxFlex="48%" class="space">
             <mat-checkbox labelPosition="before" formControlName="isFullDay">
-              Full Day?
+              {{ 'labels.inputs.Full Day' | translate }}?
             </mat-checkbox>
           </div>
 
@@ -65,8 +66,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 mat-raised-button color="primary" [disabled]="!createCashierForm.valid" *mifosxHasPermission="'UPDATECASHIERALLOCATION_TELLER'">Submit</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">{{ 'labels.buttons.Cancel' | translate }}</button>
+        <button mat-raised-button color="primary" [disabled]="!createCashierForm.valid" *mifosxHasPermission="'UPDATECASHIERALLOCATION_TELLER'">{{ 'labels.buttons.Submit' | translate }}</button>
       </mat-card-actions>
 
     </form>

src/app/organization/tellers/cashiers/edit-cashier/edit-cashier.component.html

@@ -9,17 +9,17 @@
         <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>
             <input matInput required autofocus [value]="cashierData.template.officeName" disabled>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Teller Name</mat-label>
+            <mat-label>{{ 'labels.inputs.Teller Name' | translate }}</mat-label>
             <input matInput required autofocus [value]="cashierData.data.tellerName" disabled>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%" *ngIf="isStaffId">
-            <mat-label>Cashier</mat-label>
+            <mat-label>{{ 'labels.inputs.Cashier' | translate }}</mat-label>
             <mat-select formControlName="staffId">
               <mat-option *ngFor="let staff of cashierData.template.staffOptions" [value]="staff.id">
                 {{ staff.displayName }}
@@ -28,41 +28,41 @@
           </mat-form-field>
 
           <mat-form-field fxFlex="48%" *ngIf="!isStaffId">
-            <mat-label>Cashier</mat-label>
+            <mat-label>{{ 'labels.inputs.Cashier' | translate }}</mat-label>
             <mat-select formControlName="staffId" *ngIf="!isStaffId">
               <mat-option [value]="cashierData.data.staffId">
-                Select Option
+                {{ 'labels.inputs.Select Option' | translate }}
               </mat-option>
             </mat-select>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Description/Notes</mat-label>
+            <mat-label>{{ 'labels.inputs.Description/Notes' | translate }}</mat-label>
             <input matInput autofocus formControlName="description">
           </mat-form-field>
 
           <mat-form-field fxFlex="48%" (click)="fromDatePicker.open()">
-            <mat-label>From</mat-label>
+            <mat-label>{{ 'labels.inputs.From' | translate }}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="fromDatePicker" required formControlName="startDate">
             <mat-datepicker-toggle matSuffix [for]="fromDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #fromDatePicker></mat-datepicker>
             <mat-error *ngIf="editCashierForm.controls.startDate.hasError('required')">
-              From Date <strong>is required</strong>
+              {{ 'labels.inputs.From Date' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%" (click)="toDatePicker.open()">
-            <mat-label>To</mat-label>
+            <mat-label>{{ 'labels.inputs.To' | translate }}</mat-label>
             <input matInput [min]="editCashierForm.value.startDate" [max]="maxDate" [matDatepicker]="toDatePicker" required formControlName="endDate">            <mat-datepicker-toggle matSuffix [for]="toDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #toDatePicker></mat-datepicker>
             <mat-error *ngIf="editCashierForm.controls.endDate.hasError('required')">
-              To Date <strong>is required</strong>
+              {{ 'labels.inputs.To Date' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <div fxFlex="48%" class="space">
             <mat-checkbox labelPosition="before" formControlName="isFullDay">
-              Full Day?
+              {{ 'labels.inputs.Full Day' | translate }}?
             </mat-checkbox>
           </div>
 
@@ -71,8 +71,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 mat-raised-button color="primary" [disabled]="!editCashierForm.valid" *mifosxHasPermission="'UPDATECASHIERALLOCATION_TELLER'">Submit</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">{{ 'labels.buttons.Cancel' | translate }}</button>
+        <button mat-raised-button color="primary" [disabled]="!editCashierForm.valid" *mifosxHasPermission="'UPDATECASHIERALLOCATION_TELLER'">{{ 'labels.buttons.Submit' | translate }}</button>
       </mat-card-actions>
 
     </form>

src/app/organization/tellers/cashiers/settle-cash/settle-cash.component.html

@@ -9,60 +9,60 @@
         <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>
             <input matInput required formControlName="office">
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Teller Name</mat-label>
+            <mat-label>{{ 'labels.inputs.Teller Name' | translate }}</mat-label>
             <input matInput required formControlName="tellerName">
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Cashier</mat-label>
+            <mat-label>{{ 'labels.inputs.Cashier' | translate }}</mat-label>
             <input matInput required formControlName="cashier">
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Assignment Period</mat-label>
+            <mat-label>{{ 'labels.inputs.Assignment Period' | translate }}</mat-label>
             <input matInput formControlName="assignmentPeriod">
           </mat-form-field>
 
           <mat-form-field fxFlex="48%" (click)="cashDatePicker.open()">
-            <mat-label>Date</mat-label>
+            <mat-label>{{ 'labels.inputs.Date' | translate }}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="cashDatePicker" required formControlName="txnDate">
             <mat-datepicker-toggle matSuffix [for]="cashDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #cashDatePicker></mat-datepicker>
             <mat-error *ngIf="settleCashForm.controls.txnDate.hasError('required')">
-              Date <strong>is required</strong>
+              {{ 'labels.inputs.Date' | 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 cashierData.currencyOptions" [value]="currency.code">
                 {{ currency.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="settleCashForm.controls.currencyCode.hasError('required')">
-              Currency <strong>is 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%">
-            <mat-label>Amount</mat-label>
+            <mat-label>{{ 'labels.inputs.Amount' | translate }}</mat-label>
             <input matInput required formControlName="txnAmount">
             <mat-error *ngIf="settleCashForm.controls.txnAmount.hasError('required')">
-              Amount <strong>is required</strong>
+              {{ 'labels.inputs.Amount' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Notes/Comments</mat-label>
+            <mat-label>{{ 'labels.inputs.Notes/Comments' | translate }}</mat-label>
             <input matInput required formControlName="txnNote">
             <mat-error *ngIf="settleCashForm.controls.txnNote.hasError('required')">
-              Notes/Comments <strong>is required</strong>
+              {{ 'labels.inputs.Notes/Comments' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -71,8 +71,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 mat-raised-button color="primary" [disabled]="!settleCashForm.valid" *mifosxHasPermission="'SETTLECASHFROMCASHIER_TELLER'">Settle Cash</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">{{ 'labels.buttons.Cancel' | translate }}</button>
+        <button mat-raised-button color="primary" [disabled]="!settleCashForm.valid" *mifosxHasPermission="'SETTLECASHFROMCASHIER_TELLER'">{{ 'labels.buttons.Settle Cash' | translate }}</button>
       </mat-card-actions>
 
     </form>

src/app/organization/tellers/cashiers/transactions/transactions.component.html

@@ -1,11 +1,11 @@
 <div fxLayout="row" fxLayoutGap="1%" fxLayoutAlign="end" class="container m-b-20">
   <button mat-raised-button color="accent" [routerLink]="['../allocate']" *mifosxHasPermission="'ALLOCATECASHIER_TELLER'">
       <fa-icon icon="arrow-up" class="m-r-10"></fa-icon>
-      Allocate Cash
+      {{ 'labels.buttons.Allocate Cash' | translate }}
   </button>
   <button mat-raised-button color="warn" [routerLink]="['../settle']" *mifosxHasPermission="'SETTLECASHFROMCASHIER_TELLER'">
       <fa-icon icon="arrow-down" class="m-r-10"></fa-icon>
-      Settle Cash
+      {{ 'labels.buttons.Settle Cash' | translate }}
   </button>
 </div>
 
@@ -18,7 +18,7 @@
         <div fxLayout="row wrap" class="content">
 
           <div fxFlex="25%" fxFlex.lt-md="50%" class="header">
-            Branch
+            {{ 'labels.inputs.Branch' | translate }}
           </div>
 
           <div fxFlex="25%" fxFlex.lt-md="50%">
@@ -26,7 +26,7 @@
           </div>
 
           <div fxFlex="25%" fxFlex.lt-md="50%" class="header">
-            Teller
+            {{ 'labels.inputs.Teller' | translate }}
           </div>
 
           <div fxFlex="25%" fxFlex.lt-md="50%">
@@ -34,7 +34,7 @@
           </div>
 
           <div fxFlex="25%" fxFlex.lt-md="50%" class="header">
-            Cashier
+            {{ 'labels.inputs.Cashier' | translate }}
           </div>
 
           <div fxFlex="25%" fxFlex.lt-md="50%">
@@ -42,7 +42,7 @@
           </div>
 
           <div fxFlex="25%" fxFlex.lt-md="50%" class="header">
-            Net Cash
+            {{ 'labels.inputs.Net Cash' | translate }}
           </div>
 
           <div fxFlex="25%" fxFlex.lt-md="50%">
@@ -69,7 +69,7 @@
       </mat-form-field>
 
       <mat-form-field>
-        <mat-label> Select Currency </mat-label>
+        <mat-label> {{ 'labels.inputs.Select Currency' | translate }} </mat-label>
         <mat-select [formControl]="currencySelector" required>
           <mat-option *ngFor="let currency of currencyData" [value]="currency.code">
             {{ currency.name }}
@@ -84,32 +84,32 @@
       <table class="mat-elevation-z1" mat-table [dataSource]="dataSource" matSort>
 
         <ng-container matColumnDef="date">
-          <th mat-header-cell *matHeaderCellDef mat-sort-header> Date </th>
-          <td mat-cell *matCellDef="let transaction"> {{ transaction.txnDate | dateFormat }} </td>
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Date' | translate }} </th>
+          <td mat-cell *matCellDef="let transaction"> {{ transaction.txnDate  | dateFormat }} </td>
         </ng-container>
 
         <ng-container matColumnDef="transactions">
-          <th mat-header-cell *matHeaderCellDef mat-sort-header> Transactions </th>
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Transactions' | translate }} </th>
           <td mat-cell *matCellDef="let transaction"> {{ transaction.txnType.value }} </td>
         </ng-container>
 
         <ng-container matColumnDef="allocation">
-          <th mat-header-cell *matHeaderCellDef mat-sort-header> Allocation ({{cashierData.sumCashAllocation | formatNumber}}) </th>
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Allocation' | translate }} ({{cashierData.sumCashAllocation | formatNumber}}) </th>
           <td mat-cell *matCellDef="let transaction"> {{ transaction.txnType.value === "Allocate Cash" ? (transaction.txnAmount | formatNumber) : '-' }} </td>
         </ng-container>
 
         <ng-container matColumnDef="cashIn">
-          <th mat-header-cell *matHeaderCellDef mat-sort-header> Cash In ({{cashierData.sumInwardCash | formatNumber}})  </th>
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Cash In' | translate }} ({{cashierData.sumInwardCash | formatNumber}})  </th>
           <td mat-cell *matCellDef="let transaction"> {{ transaction.txnType.value === "Cash In" ? (transaction.txnAmount | formatNumber) : '-' }} </td>
         </ng-container>
 
         <ng-container matColumnDef="cashOut">
-          <th mat-header-cell *matHeaderCellDef mat-sort-header> Cash Out ({{cashierData.sumOutwardCash | formatNumber}}) </th>
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Cash Out' | translate }} ({{cashierData.sumOutwardCash | formatNumber}}) </th>
           <td mat-cell *matCellDef="let transaction"> {{ transaction.txnType.value === "Cash Out" ? (transaction.txnAmount | formatNumber) : '-' }} </td>
         </ng-container>
 
         <ng-container matColumnDef="settlement">
-          <th mat-header-cell *matHeaderCellDef mat-sort-header> Settlement ({{cashierData.sumCashSettlement | formatNumber}})</th>
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Settlement' | translate }} ({{cashierData.sumCashSettlement | formatNumber}})</th>
           <td mat-cell *matCellDef="let transaction"> {{ transaction.txnType.value === "Settle Cash" ? (transaction.txnAmount | formatNumber) : '-' }} </td>
         </ng-container>
 

src/app/organization/tellers/create-teller/create-teller.component.html

@@ -9,59 +9,59 @@
         <div fxLayout="column">
 
           <mat-form-field>
-            <mat-label>Teller Name</mat-label>
+            <mat-label>{{ 'labels.inputs.Teller Name' | translate }}</mat-label>
             <input matInput required formControlName="name">
             <mat-error *ngIf="tellerForm.controls.name.hasError('required')">
-              Teller Name is <strong>required</strong>
+              {{ 'labels.inputs.Teller Name' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
             <mat-error *ngIf="tellerForm.controls.name.hasError('pattern')">
-              Teller Name <strong>cannot</strong> begin with a special character or number
+              {{ 'labels.inputs.Teller Name' | translate }} <strong>{{'labels.commons.cannot' | translate }}</strong> {{'labels.commons.begin with a special character or number' | translate }}
             </mat-error>
           </mat-form-field>
 
           <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="tellerForm.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>
-            <mat-label>Description</mat-label>
+            <mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
             <textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
 
           <mat-form-field (click)="startDatePicker.open()">
-            <mat-label>Start Date</mat-label>
+            <mat-label>{{ 'labels.inputs.Start Date' | translate }}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="startDatePicker" required formControlName="startDate">
             <mat-datepicker-toggle matSuffix [for]="startDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #startDatePicker></mat-datepicker>
             <mat-error *ngIf="tellerForm.controls.startDate.hasError('required')">
-              Start Date is <strong>required</strong>
+              {{ 'labels.inputs.Start Date' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field (click)="endDatePicker.open()">
-            <mat-label>End Date</mat-label>
+            <mat-label>{{ 'labels.inputs.End Date' | translate }}</mat-label>
             <input matInput [min]="tellerForm.value.startDate" [max]="maxDate" [matDatepicker]="endDatePicker" formControlName="endDate">
             <mat-datepicker-toggle matSuffix [for]="endDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #endDatePicker></mat-datepicker>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Status</mat-label>
+            <mat-label>{{ 'labels.inputs.Status' | translate }}</mat-label>
             <mat-select required formControlName="status">
               <mat-option *ngFor="let tellerStatus of tellerStatusesData" [value]="tellerStatus.id">
                 {{ tellerStatus.value }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="tellerForm.controls.status.hasError('required')">
-              Status is <strong>required</strong>
+              {{ 'labels.inputs.Status' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -70,8 +70,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 mat-raised-button color="primary" [disabled]="!tellerForm.valid" *mifosxHasPermission="'CREATE_TELLER'">Submit</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">{{ 'labels.buttons.Cancel' | translate }}</button>
+        <button mat-raised-button color="primary" [disabled]="!tellerForm.valid" *mifosxHasPermission="'CREATE_TELLER'">{{ 'labels.buttons.Submit' | translate }}</button>
       </mat-card-actions>
 
     </form>

src/app/organization/tellers/edit-teller/edit-teller.component.html

@@ -9,18 +9,18 @@
         <div fxLayout="column">
 
           <mat-form-field>
-            <mat-label>Teller Name</mat-label>
+            <mat-label>{{ 'labels.inputs.Teller Name' | translate }}</mat-label>
             <input matInput required formControlName="name">
             <mat-error *ngIf="tellerForm.controls.name.hasError('required')">
-              Teller Name is <strong>required</strong>
+              {{ 'labels.inputs.Teller Name' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
             <mat-error *ngIf="tellerForm.controls.name.hasError('pattern')">
-              Teller Name <strong>cannot</strong> begin with a special character or number
+              {{ 'labels.inputs.Teller Name' | translate }} <strong>{{'labels.commons.cannot' | translate }}</strong> {{'labels.commons.begin with a special character or number' | translate }}
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Office</mat-label>
+            <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
             <mat-select formControlName="officeId">
               <mat-option *ngFor="let office of officeData" [value]="office.id">
                 {{ office.name }}
@@ -29,37 +29,37 @@
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Description</mat-label>
+            <mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
             <input matInput formControlName="description">
           </mat-form-field>
 
           <mat-form-field (click)="startDatePicker.open()">
-            <mat-label>Start Date</mat-label>
+            <mat-label>{{ 'labels.inputs.Start Date' | translate }}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="startDatePicker" required
               formControlName="startDate">
             <mat-datepicker-toggle matSuffix [for]="startDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #startDatePicker></mat-datepicker>
             <mat-error *ngIf="tellerForm.controls.startDate.hasError('required')">
-              Start Date is <strong>required</strong>
+              {{ 'labels.inputs.Start Date' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field (click)="endDatePicker.open()">
-            <mat-label>End Date</mat-label>
+            <mat-label>{{ 'labels.inputs.End Date' | translate }}</mat-label>
             <input matInput [min]="tellerForm.value.startDate" [max]="maxDate" [matDatepicker]="endDatePicker" formControlName="endDate">
             <mat-datepicker-toggle matSuffix [for]="endDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #endDatePicker></mat-datepicker>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Status</mat-label>
+            <mat-label>{{ 'labels.inputs.Status' | translate }}</mat-label>
             <mat-select required formControlName="status">
               <mat-option *ngFor="let tellerStatus of tellerStatusesData" [value]="tellerStatus.id">
                 {{ tellerStatus.value }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="tellerForm.controls.status.hasError('required')">
-              Status is <strong>required</strong>
+              {{ 'labels.inputs.Status' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -68,9 +68,9 @@
       </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]="!tellerForm.valid"
-          *mifosxHasPermission="'UPDATE_TELLER'">Submit</button>
+          *mifosxHasPermission="'UPDATE_TELLER'">{{ 'labels.buttons.Submit' | translate }}</button>
       </mat-card-actions>
 
     </form>

src/app/organization/tellers/tellers.component.html

@@ -2,7 +2,7 @@
 
   <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_TELLER'">
     <fa-icon icon="plus" class="m-r-10"></fa-icon>
-    Create Teller
+    {{ 'labels.buttons.Create Teller' | translate }}
   </button>
 
 </div>
@@ -21,17 +21,17 @@
     <table mat-table [dataSource]="dataSource" matSort>
 
       <ng-container matColumnDef="officeName">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Branch </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Branch' | translate }} </th>
         <td mat-cell *matCellDef="let teller"> {{ teller.officeName }} </td>
       </ng-container>
 
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Teller Name </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Teller Name' | translate }} </th>
         <td mat-cell *matCellDef="let teller"> {{ teller.name }} </td>
       </ng-container>
 
       <ng-container matColumnDef="status">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Status </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Status' | translate }} </th>
         <td mat-cell *matCellDef="let teller">
           <div [className]="teller.status === 'ACTIVE' ? 'true' : 'false'">
             <fa-icon matTooltip="{{ teller.status === 'ACTIVE' ? 'Active' : 'Inactive' }}" matTooltipPosition="right" icon="circle" size="lg"></fa-icon>
@@ -40,15 +40,15 @@
       </ng-container>
 
       <ng-container matColumnDef="startDate">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Started On </th>
-        <td mat-cell *matCellDef="let teller"> {{ teller.startDate | dateFormat }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Started On' | translate }} </th>
+        <td mat-cell *matCellDef="let teller"> {{ teller.startDate  | dateFormat }} </td>
       </ng-container>
 
       <ng-container matColumnDef="actions">
-        <th mat-header-cell *matHeaderCellDef> Actions </th>
+        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Actions' | translate }} </th>
         <td mat-cell *matCellDef="let teller" (click)="$event.stopPropagation()">
           <button mat-button color="primary" [routerLink]="[teller.id,'cashiers']">
-            <fa-icon icon="eye" class="m-r-10"></fa-icon>View Cashiers
+            <fa-icon icon="eye" class="m-r-10"></fa-icon>{{ 'labels.buttons.View Cashiers' | translate }}
           </button>
         </td>
       </ng-container>

src/app/organization/tellers/view-teller/view-teller.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_TELLER'">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    Edit
+    {{ 'labels.buttons.Edit' | translate }}
   </button>
   <button mat-raised-button color="warn" (click)="deleteTeller()" *mifosxHasPermission="'DELETE_TELLER'">
     <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="mat-body-strong">
-          Teller Name
+          {{ 'labels.inputs.Teller Name' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -26,7 +26,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Office
+          {{ 'labels.inputs.Office' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -34,7 +34,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong" *ngIf="tellerData.description">
-          Description
+          {{ 'labels.inputs.Description' | translate }}
         </div>
 
         <div fxFlex="50%" *ngIf="tellerData.description">
@@ -42,7 +42,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Start Date
+          {{ 'labels.inputs.Start Date' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -50,7 +50,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong" *ngIf="tellerData.endDate">
-          End Date
+          {{ 'labels.inputs.End Date' | translate }}
         </div>
 
         <div fxFlex="50%" *ngIf="tellerData.endDate">
@@ -58,7 +58,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Status
+          {{ 'labels.inputs.Status' | translate }}
         </div>
 
         <div fxFlex="50%">

src/app/organization/working-days/working-days.component.html

@@ -9,7 +9,7 @@
         <div #workingDaysFormRef fxLayout="column">
 
           <div fxLayout="row" fxLayout.lt-md="column">
-            <mat-label fxFlex="50%" class="mat-h4">Working Days</mat-label>
+            <mat-label fxFlex="50%" class="mat-h4">{{ 'labels.inputs.Working Days' | translate }}</mat-label>
             <div fxFlex="50%" fxLayout="column" formArrayName="recurrence">
               <div *ngFor="let day of recurrence.controls; let i = index;">
                 <mat-checkbox labelPosition="after" [formControlName]="i">
@@ -20,7 +20,7 @@
           </div>
 
           <mat-form-field>
-            <mat-label>Payments due on non working days</mat-label>
+            <mat-label>{{ 'labels.inputs.Payments due on non working days' | translate }}</mat-label>
             <mat-select formControlName="repaymentRescheduleType">
               <mat-option *ngFor="let repaymentRescheduleType of repaymentRescheduleTypeData" [value]="repaymentRescheduleType.id">
                 {{ repaymentRescheduleType.value }}
@@ -29,7 +29,7 @@
           </mat-form-field>
 
           <mat-checkbox labelPosition="before" formControlName="extendTermForDailyRepayments">
-            Extend the term for loans following a daily repayment schedule
+            {{ 'labels.inputs.Loans daily repayment schedule' | translate }}
           </mat-checkbox>
 
         </div>
@@ -37,8 +37,8 @@
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button mat-raised-button [routerLink]="['../']">Cancel</button>
-        <button mat-raised-button color="primary" [disabled]="workingDaysForm.pristine" *mifosxHasPermission="'UPDATE_WORKINGDAYS'">Submit</button>
+        <button mat-raised-button [routerLink]="['../']">{{ 'labels.buttons.Cancel' | translate }}</button>
+        <button mat-raised-button color="primary" [disabled]="workingDaysForm.pristine" *mifosxHasPermission="'UPDATE_WORKINGDAYS'">{{ 'labels.buttons.Submit' | translate }}</button>
       </mat-card-actions>
 
     </form>
@@ -48,12 +48,12 @@
 </div>
 
 <ng-template #templateWorkingDaysFormRef let-data let-popover="popover">
-  <h2>Working Days</h2>
-  <p class="mw400">Click (Define Working Days) to define working days. For more details click: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/90243212/Working+Days" target="_blank">Working Days</a></p>
+  <h2>{{ 'labels.heading.Working Days' | translate }}</h2>
+  <p class="mw400">{{ 'labels.text.Click (Define Working Days)' | translate }}: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/90243212/Working+Days" target="_blank">{{ 'labels.inputs.Working Days' | 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="primary" (click)="popover.close()">Define Working Days</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">Next Step</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()">{{ 'labels.buttons.Define Working Days' | translate }}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">{{ 'labels.buttons.Back' | translate }}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">{{ 'labels.buttons.Next Step' | translate }}</button>
   </div>
 </ng-template>