feat:Self-service Translate Module (#1819)

src/app/self-service/users/users.component.html

@@ -2,15 +2,15 @@
   <!-- TODO: Update to show only Activate/Inactivate button at a time according to selection in table. -->
   <button mat-raised-button color="accent">
     <fa-icon icon="lock-open" class="m-r-10"></fa-icon>
-    Activate
+    {{'labels.buttons.Activate'  |translate}}
   </button>
   <button mat-raised-button color="warn">
     <fa-icon icon="lock" class="m-r-10"></fa-icon>
-    Deactivate
+    {{'labels.buttons.Deactivate'  |translate}}
   </button>
   <button mat-raised-button color="primary" [routerLink]="['create']">
     <fa-icon icon="plus" class="m-r-10"></fa-icon>
-    Create User
+    {{'labels.buttons.Create User'  |translate}}
   </button>
 </div>
 
@@ -43,22 +43,22 @@
       </ng-container>
 
       <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 user"> {{ user.name }} </td>
       </ng-container>
 
       <ng-container matColumnDef="id">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> User ID </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.User ID'  |translate}} </th>
         <td mat-cell *matCellDef="let user"> {{ user.id }} </td>
       </ng-container>
 
       <ng-container matColumnDef="email">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Email ID </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Email ID'  |translate}} </th>
         <td mat-cell *matCellDef="let user"> {{ user.email }} </td>
       </ng-container>
 
       <ng-container matColumnDef="status">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header="isSelfServiceUser"> Status </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header="isSelfServiceUser"> {{ 'labels.inputs.Status'  |translate}} </th>
         <td mat-cell *matCellDef="let user">
           <div [className]="user.isSelfServiceUser === true ? 'active' : 'inactive'">
             <fa-icon matTooltip="{{ user.isSelfServiceUser === true ? 'Active' : 'Inactive' }}" matTooltipPosition="right" icon="circle" size="lg"></fa-icon>
@@ -67,12 +67,12 @@
       </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 user"> {{ user.officeName }} </td>
       </ng-container>
 
       <ng-container matColumnDef="staff">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Staff </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Staff'  |translate}} </th>
         <td mat-cell *matCellDef="let user"> {{ user.staff }} </td>
       </ng-container>