build: Use prettier for html

Stop ignoring html files in prettier and fix existing issues.

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

@@ -1,34 +1,30 @@
 <div class="container">
-
   <mat-accordion>
-
     <mat-expansion-panel>
-
       <mat-expansion-panel-header>
         <mat-panel-title>
-          {{'labels.inputs.Main Configuration' | translate}}
+          {{ 'labels.inputs.Main Configuration' | translate }}
         </mat-panel-title>
       </mat-expansion-panel-header>
 
       <div fxLayout="column">
-
         <mat-form-field>
-          <mat-label>{{'labels.inputs.Name of the Organization' | translate}}</mat-label>
-          <input matInput>
+          <mat-label>{{ 'labels.inputs.Name of the Organization' | translate }}</mat-label>
+          <input matInput />
         </mat-form-field>
 
         <mat-form-field>
-          <mat-label>{{'labels.inputs.Description' | translate}}</mat-label>
+          <mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
           <textarea matInput></textarea>
         </mat-form-field>
 
         <mat-form-field>
-          <mat-label>{{'labels.inputs.Summary' | translate}}</mat-label>
+          <mat-label>{{ 'labels.inputs.Summary' | translate }}</mat-label>
           <textarea matInput></textarea>
         </mat-form-field>
 
         <mat-form-field>
-          <mat-label>{{'labels.inputs.Default Language' | translate}}</mat-label>
+          <mat-label>{{ 'labels.inputs.Default Language' | translate }}</mat-label>
           <mat-select>
             <mat-option *ngFor="let language of languages" [value]="language">
               {{ language }}
@@ -37,57 +33,49 @@
         </mat-form-field>
 
         <mat-form-field>
-          <mat-label>{{'labels.inputs.Default Date Format' | translate}}</mat-label>
+          <mat-label>{{ 'labels.inputs.Default Date Format' | translate }}</mat-label>
           <mat-select>
             <mat-option *ngFor="let dateFormat of dateFormats" [value]="dateFormat">
               {{ dateFormat }}
             </mat-option>
           </mat-select>
         </mat-form-field>
-
       </div>
-
     </mat-expansion-panel>
 
     <mat-expansion-panel>
-
       <mat-expansion-panel-header>
         <mat-panel-title>
-          {{'labels.inputs.Images' | translate}}
+          {{ 'labels.inputs.Images' | translate }}
         </mat-panel-title>
       </mat-expansion-panel-header>
 
       <div fxLayout="column">
-
-        <span class="header">{{'labels.inputs.Favicon' | translate}}</span>
+        <span class="header">{{ 'labels.inputs.Favicon' | translate }}</span>
         <mifosx-file-upload></mifosx-file-upload>
 
-        <span class="header">{{'labels.inputs.Cover Image' | translate}}</span>
+        <span class="header">{{ 'labels.inputs.Cover Image' | translate }}</span>
         <mifosx-file-upload></mifosx-file-upload>
 
-        <span class="header">{{'labels.inputs.Logo' | translate}}</span>
+        <span class="header">{{ 'labels.inputs.Logo' | translate }}</span>
         <mifosx-file-upload></mifosx-file-upload>
 
-        <span class="header">{{'labels.inputs.Logo with Organization Name' | translate}}</span>
+        <span class="header">{{ 'labels.inputs.Logo with Organization Name' | translate }}</span>
         <mifosx-file-upload></mifosx-file-upload>
-
       </div>
-
     </mat-expansion-panel>
 
     <mat-expansion-panel>
-
       <mat-expansion-panel-header>
         <mat-panel-title>
-          {{'labels.inputs.Theme and Font' | translate}}
+          {{ 'labels.inputs.Theme and Font' | translate }}
         </mat-panel-title>
       </mat-expansion-panel-header>
 
       <div fxLayout="column">
-
-        <span class="header">{{'labels.inputs.Mobile Banking App' | translate}}</span>
+        <span class="header">{{ 'labels.inputs.Mobile Banking App' | translate }}</span>
         <mat-form-field>
-          <mat-label>{{'labels.inputs.Default Theme' | translate}}</mat-label>
+          <mat-label>{{ 'labels.inputs.Default Theme' | translate }}</mat-label>
           <mat-select>
             <mat-option *ngFor="let theme of mobileAppThemes" [value]="theme">
               {{ theme }}
@@ -96,7 +84,7 @@
         </mat-form-field>
 
         <mat-form-field>
-          <mat-label>{{'labels.inputs.Default Font' | translate}}</mat-label>
+          <mat-label>{{ 'labels.inputs.Default Font' | translate }}</mat-label>
           <mat-select>
             <mat-option *ngFor="let font of mobileAppFonts" [value]="font">
               {{ font }}
@@ -104,9 +92,9 @@
           </mat-select>
         </mat-form-field>
 
-        <span class="header">{{'labels.inputs.Online Banking App' | translate}}</span>
+        <span class="header">{{ 'labels.inputs.Online Banking App' | translate }}</span>
         <mat-form-field>
-          <mat-label>{{'labels.inputs.Default Theme' | translate}}</mat-label>
+          <mat-label>{{ 'labels.inputs.Default Theme' | translate }}</mat-label>
           <mat-select>
             <mat-option *ngFor="let theme of onlineBankingAppThemes" [value]="theme">
               {{ theme }}
@@ -115,47 +103,39 @@
         </mat-form-field>
 
         <mat-form-field>
-          <mat-label>{{'labels.inputs.Default Font' | translate}}</mat-label>
+          <mat-label>{{ 'labels.inputs.Default Font' | translate }}</mat-label>
           <mat-select>
             <mat-option *ngFor="let font of onlineBankingAppFonts" [value]="font">
               {{ font }}
             </mat-option>
           </mat-select>
         </mat-form-field>
-
       </div>
-
     </mat-expansion-panel>
 
     <mat-expansion-panel>
-
       <mat-expansion-panel-header>
         <mat-panel-title>
-          {{'labels.inputs.Contact Information' | translate}}
+          {{ 'labels.inputs.Contact Information' | translate }}
         </mat-panel-title>
       </mat-expansion-panel-header>
 
       <div fxLayout="column">
-
         <mat-form-field>
-          <mat-label>{{'labels.inputs.Website' | translate}}</mat-label>
-          <input type="url" matInput>
+          <mat-label>{{ 'labels.inputs.Website' | translate }}</mat-label>
+          <input type="url" matInput />
         </mat-form-field>
 
         <mat-form-field>
-          <mat-label>{{'labels.inputs.Email' | translate}}</mat-label>
-          <input type="email" matInput>
+          <mat-label>{{ 'labels.inputs.Email' | translate }}</mat-label>
+          <input type="email" matInput />
         </mat-form-field>
 
         <mat-form-field>
-          <mat-label>{{'labels.inputs.Contact No' | translate}}</mat-label>
-          <input type="tel" matInput>
+          <mat-label>{{ 'labels.inputs.Contact No' | translate }}</mat-label>
+          <input type="tel" matInput />
         </mat-form-field>
-
       </div>
-
     </mat-expansion-panel>
-
   </mat-accordion>
-
 </div>

src/app/self-service/task-management/task-management.component.html

@@ -1,7 +1,3 @@
 <div class="container">
-
-  <p>
-    {{'labels.inputs.TODO' | translate}}: {{'labels.inputs.task-management component' | translate}}.
-  </p>
-
+  <p>{{ 'labels.inputs.TODO' | translate }}: {{ 'labels.inputs.task-management component' | translate }}.</p>
 </div>

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

@@ -1,7 +1,5 @@
 <div class="container" [class.small-width-container]="userType.value === 'Existing User'">
-
   <mat-card>
-
     <mat-card-header class="m-b-20">
       <mat-radio-group fxLayout="row" fxLayoutGap="20px" [formControl]="userType">
         <mat-radio-button *ngFor="let type of userTypes" [value]="type">
@@ -11,27 +9,24 @@
     </mat-card-header>
 
     <div *ngIf="userType.value === 'Existing User'">
-
       <form [formGroup]="createUserForm">
-
         <mat-card-content>
-
           <div fxLayout="column">
-
             <mat-form-field>
-              <mat-label>{{'labels.inputs.Office' | translate}}</mat-label>
+              <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
               <mat-select required formControlName="officeId">
                 <mat-option *ngFor="let office of offices" [value]="office.id">
                   {{ office.name }}
                 </mat-option>
               </mat-select>
               <mat-error *ngIf="createUserForm.controls.officeId.hasError('required')">
-                {{'labels.inputs.Office' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</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>{{'labels.inputs.Staff' | translate}}</mat-label>
+              <mat-label>{{ 'labels.inputs.Staff' | translate }}</mat-label>
               <mat-select formControlName="staffId">
                 <mat-option *ngFor="let staff of staffOptions" [value]="staff.id">
                   {{ staff.displayName }}
@@ -40,52 +35,47 @@
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>{{'labels.inputs.Client' | translate}}</mat-label>
+              <mat-label>{{ 'labels.inputs.Client' | translate }}</mat-label>
               <mat-select>
                 <mat-option *ngFor="let client of clientData" [value]="client">
                   {{ client }}
                 </mat-option>
               </mat-select>
             </mat-form-field>
-
           </div>
-
         </mat-card-content>
 
         <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate}}</button>
+          <button type="button" mat-raised-button [routerLink]="['../']">
+            {{ 'labels.buttons.Cancel' | translate }}
+          </button>
           <button mat-raised-button color="accent">
             <fa-icon icon="lock-open" class="m-r-10"></fa-icon>
-            {{'labels.buttons.Activate Self Service User' | translate}}
+            {{ 'labels.buttons.Activate Self Service User' | translate }}
           </button>
         </mat-card-actions>
-
       </form>
-
     </div>
 
     <div *ngIf="userType.value === 'New User'">
-
       <form [formGroup]="createUserForm">
-
         <mat-card-content>
-
           <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
             <mat-form-field>
-              <mat-label>{{'labels.inputs.Office' | translate}}</mat-label>
+              <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
               <mat-select required formControlName="officeId">
                 <mat-option *ngFor="let office of offices" [value]="office.id">
                   {{ office.name }}
                 </mat-option>
               </mat-select>
               <mat-error *ngIf="createUserForm.controls.officeId.hasError('required')">
-                {{'labels.inputs.Office' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+                {{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
               </mat-error>
             </mat-form-field>
 
             <mat-form-field fxFlex="48%">
-              <mat-label>{{'labels.inputs.Staff' | translate}}</mat-label>
+              <mat-label>{{ 'labels.inputs.Staff' | translate }}</mat-label>
               <mat-select formControlName="staffId">
                 <mat-option *ngFor="let staff of staffOptions" [value]="staff.id">
                   {{ staff.displayName }}
@@ -94,24 +84,24 @@
             </mat-form-field>
 
             <mat-form-field fxFlex="48%">
-              <mat-label>{{'labels.inputs.User Name' | translate}}</mat-label>
-              <input type="text" matInput>
+              <mat-label>{{ 'labels.inputs.User Name' | translate }}</mat-label>
+              <input type="text" matInput />
             </mat-form-field>
 
             <span fxFlex="48%" fxHide.lt-md></span>
 
             <mat-form-field fxFlex="48%">
-              <mat-label>{{'labels.inputs.First Name' | translate}}</mat-label>
-              <input type="text" matInput>
+              <mat-label>{{ 'labels.inputs.First Name' | translate }}</mat-label>
+              <input type="text" matInput />
             </mat-form-field>
 
             <mat-form-field fxFlex="48%">
-              <mat-label>{{'labels.inputs.Last Name' | translate}}</mat-label>
-              <input type="text" matInput>
+              <mat-label>{{ 'labels.inputs.Last Name' | translate }}</mat-label>
+              <input type="text" matInput />
             </mat-form-field>
 
             <mat-form-field fxFlex="48%">
-              <mat-label>{{'labels.inputs.Gender' | translate}}</mat-label>
+              <mat-label>{{ 'labels.inputs.Gender' | translate }}</mat-label>
               <mat-select>
                 <mat-option *ngFor="let gender of genderData" [value]="gender">
                   {{ gender }}
@@ -120,35 +110,31 @@
             </mat-form-field>
 
             <mat-form-field fxFlex="48%" (click)="dateOfBirthDatePicker.open()">
-              <mat-label>{{'labels.inputs.Date of Birth' | translate}}</mat-label>
-              <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="dateOfBirthDatePicker">
+              <mat-label>{{ 'labels.inputs.Date of Birth' | translate }}</mat-label>
+              <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="dateOfBirthDatePicker" />
               <mat-datepicker-toggle matSuffix [for]="dateOfBirthDatePicker"></mat-datepicker-toggle>
               <mat-datepicker #dateOfBirthDatePicker></mat-datepicker>
             </mat-form-field>
 
             <mat-form-field fxFlex="48%">
-              <mat-label>{{'labels.inputs.Email' | translate}}</mat-label>
-              <input type="email" matInput>
+              <mat-label>{{ 'labels.inputs.Email' | translate }}</mat-label>
+              <input type="email" matInput />
             </mat-form-field>
 
             <mat-form-field fxFlex="48%">
-              <mat-label>{{'labels.inputs.Mobile No' | translate}}</mat-label>
-              <input type="tel" matInput>
+              <mat-label>{{ 'labels.inputs.Mobile No' | translate }}</mat-label>
+              <input type="tel" matInput />
             </mat-form-field>
-
           </div>
-
         </mat-card-content>
 
         <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate}}</button>
-          <button mat-raised-button color="primary">{{'labels.buttons.Submit' | translate}}</button>
+          <button type="button" mat-raised-button [routerLink]="['../']">
+            {{ 'labels.buttons.Cancel' | translate }}
+          </button>
+          <button mat-raised-button color="primary">{{ 'labels.buttons.Submit' | translate }}</button>
         </mat-card-actions>
-
       </form>
-
     </div>
-
   </mat-card>
-
 </div>

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

@@ -1,15 +1,10 @@
 <div class="container">
-
   <mat-card>
-
     <form>
-
       <mat-card-content>
-
         <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
           <mat-form-field fxFlex="48%">
-            <mat-label>{{'labels.inputs.Office' | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
             <mat-select>
               <mat-option *ngFor="let office of officeData" [value]="office">
                 {{ office }}
@@ -18,7 +13,7 @@
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{'labels.inputs.Staff' | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Staff' | translate }}</mat-label>
             <mat-select>
               <mat-option *ngFor="let staff of staffData" [value]="staff">
                 {{ staff }}
@@ -27,24 +22,24 @@
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{'labels.inputs.User Name' | translate}}</mat-label>
-            <input type="text" matInput>
+            <mat-label>{{ 'labels.inputs.User Name' | translate }}</mat-label>
+            <input type="text" matInput />
           </mat-form-field>
 
           <span fxFlex="48%" fxHide.lt-md></span>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{'labels.inputs.First Name' | translate}}</mat-label>
-            <input type="text" matInput>
+            <mat-label>{{ 'labels.inputs.First Name' | translate }}</mat-label>
+            <input type="text" matInput />
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{'labels.inputs.Last Name' | translate}}</mat-label>
-            <input type="text" matInput>
+            <mat-label>{{ 'labels.inputs.Last Name' | translate }}</mat-label>
+            <input type="text" matInput />
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{'labels.inputs.Gender' | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Gender' | translate }}</mat-label>
             <mat-select>
               <mat-option *ngFor="let gender of genderData" [value]="gender">
                 {{ gender }}
@@ -53,33 +48,30 @@
           </mat-form-field>
 
           <mat-form-field fxFlex="48%" (click)="dateOfBirthDatePicker.open()">
-            <mat-label>{{'labels.inputs.Date of Birth' | translate}}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="dateOfBirthDatePicker">
+            <mat-label>{{ 'labels.inputs.Date of Birth' | translate }}</mat-label>
+            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="dateOfBirthDatePicker" />
             <mat-datepicker-toggle matSuffix [for]="dateOfBirthDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #dateOfBirthDatePicker></mat-datepicker>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{'labels.inputs.Email' | translate}}</mat-label>
-            <input type="email" matInput>
+            <mat-label>{{ 'labels.inputs.Email' | translate }}</mat-label>
+            <input type="email" matInput />
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{'labels.inputs.Mobile No' | translate}}</mat-label>
-            <input type="tel" matInput>
+            <mat-label>{{ 'labels.inputs.Mobile No' | translate }}</mat-label>
+            <input type="tel" matInput />
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate}}</button>
-        <button mat-raised-button color="primary">{{'labels.buttons.Submit' | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary">{{ 'labels.buttons.Submit' | translate }}</button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>

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

@@ -2,88 +2,93 @@
   <!-- 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>
-    {{'labels.buttons.Activate' | translate}}
+    {{ 'labels.buttons.Activate' | translate }}
   </button>
   <button mat-raised-button color="warn">
     <fa-icon icon="lock" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Deactivate' | translate}}
+    {{ 'labels.buttons.Deactivate' | translate }}
   </button>
   <button mat-raised-button color="primary" [routerLink]="['create']">
     <fa-icon icon="plus" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Create User' | translate}}
+    {{ 'labels.buttons.Create User' | translate }}
   </button>
 </div>
 
 <div class="container">
-
   <div fxLayout="row">
     <mat-form-field fxFlex>
-      <mat-label>{{'labels.inputs.Filter' | translate}}</mat-label>
-      <input matInput type="text" (keyup)="applyFilter($event.target.value)">
+      <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
+      <input matInput type="text" (keyup)="applyFilter($event.target.value)" />
     </mat-form-field>
   </div>
 
   <div class="mat-elevation-z8">
-
     <table mat-table [dataSource]="dataSource" matSort>
-
       <ng-container matColumnDef="select">
         <th mat-header-cell *matHeaderCellDef>
-          <mat-checkbox (change)="$event ? masterToggle() : null"
-                        [checked]="selection.hasValue() && isAllSelected()"
-                        [indeterminate]="selection.hasValue() && !isAllSelected()">
+          <mat-checkbox
+            (change)="$event ? masterToggle() : null"
+            [checked]="selection.hasValue() && isAllSelected()"
+            [indeterminate]="selection.hasValue() && !isAllSelected()"
+          >
           </mat-checkbox>
         </th>
         <td mat-cell *matCellDef="let row">
-          <mat-checkbox (click)="$event.stopPropagation()"
-                        (change)="$event ? selection.toggle(row) : null"
-                        [checked]="selection.isSelected(row)">
+          <mat-checkbox
+            (click)="$event.stopPropagation()"
+            (change)="$event ? selection.toggle(row) : null"
+            [checked]="selection.isSelected(row)"
+          >
           </mat-checkbox>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.name' | translate}} </th>
-        <td mat-cell *matCellDef="let user"> {{ user.name }} </td>
+        <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> {{'labels.inputs.User ID' | translate}} </th>
-        <td mat-cell *matCellDef="let user"> {{ user.id }} </td>
+        <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> {{'labels.inputs.Email ID' | translate}} </th>
-        <td mat-cell *matCellDef="let user"> {{ user.email }} </td>
+        <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"> {{'labels.inputs.Status' | translate}} </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>
+            <fa-icon
+              matTooltip="{{ user.isSelfServiceUser === true ? 'Active' : 'Inactive' }}"
+              matTooltipPosition="right"
+              icon="circle"
+              size="lg"
+            ></fa-icon>
           </div>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="officeName">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Office' | translate}} </th>
-        <td mat-cell *matCellDef="let user"> {{ user.officeName }} </td>
+        <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> {{'labels.inputs.Staff' | translate}} </th>
-        <td mat-cell *matCellDef="let user"> {{ user.staff }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Staff' | translate }}</th>
+        <td mat-cell *matCellDef="let user">{{ user.staff }}</td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="['view',row.id]"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns" [routerLink]="['view', row.id]"></tr>
       <!-- TODO: Update route once API is setup. -->
-
     </table>
 
     <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-
   </div>
-
 </div>

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

@@ -2,38 +2,34 @@
   <!-- TODO: Update to show only Activate/Inactivate button at a time according to status of user. -->
   <button mat-raised-button color="primary" [routerLink]="['edit']">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Edit' | translate}}
+    {{ 'labels.buttons.Edit' | translate }}
   </button>
   <button mat-raised-button color="primary" (click)="changeUserPassword()">
     <fa-icon icon="cog" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Change Password' | translate}}
+    {{ 'labels.buttons.Change Password' | translate }}
   </button>
   <button mat-raised-button color="accent">
     <fa-icon icon="lock-open" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Activate' | translate}}
+    {{ 'labels.buttons.Activate' | translate }}
   </button>
   <button mat-raised-button color="warn">
     <fa-icon icon="lock" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Deactivate' | translate}}
+    {{ 'labels.buttons.Deactivate' | translate }}
   </button>
 </div>
 
 <div class="container">
-
   <mat-card>
-
     <mat-card-content>
-
       <div fxLayout="row wrap" class="content">
-
         <div fxFlex="100%" class="header">
           <fa-icon icon="circle" size="lg" matTooltip="{{ user.status }}" matTooltipPosition="above"></fa-icon>
           &nbsp;&nbsp;
-          {{'labels.inputs.ID' | translate}}: {{ user.id }}
+          {{ 'labels.inputs.ID' | translate }}: {{ user.id }}
         </div>
 
         <div fxFlex="50%" class="header">
-          {{'labels.inputs.User Name' | translate}}
+          {{ 'labels.inputs.User Name' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -41,7 +37,7 @@
         </div>
 
         <div fxFlex="50%" class="header">
-          {{'labels.inputs.First Name' | translate}}
+          {{ 'labels.inputs.First Name' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -49,7 +45,7 @@
         </div>
 
         <div fxFlex="50%" class="header">
-          {{'labels.inputs.Last Name' | translate}}
+          {{ 'labels.inputs.Last Name' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -57,7 +53,7 @@
         </div>
 
         <div fxFlex="50%" class="header">
-          {{'labels.inputs.Gender' | translate}}
+          {{ 'labels.inputs.Gender' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -65,7 +61,7 @@
         </div>
 
         <div fxFlex="50%" class="header">
-          {{'labels.inputs.Date of Birth' | translate}}
+          {{ 'labels.inputs.Date of Birth' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -73,7 +69,7 @@
         </div>
 
         <div fxFlex="50%" class="header">
-          {{'labels.inputs.Email' | translate}}
+          {{ 'labels.inputs.Email' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -81,7 +77,7 @@
         </div>
 
         <div fxFlex="50%" class="header">
-          {{'labels.inputs.Mobile' | translate}}
+          {{ 'labels.inputs.Mobile' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -89,7 +85,7 @@
         </div>
 
         <div fxFlex="50%" class="header">
-          {{'labels.inputs.Office' | translate}}
+          {{ 'labels.inputs.Office' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -97,7 +93,7 @@
         </div>
 
         <div fxFlex="50%" class="header">
-          {{'labels.inputs.Staff' | translate}}
+          {{ 'labels.inputs.Staff' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -105,20 +101,19 @@
         </div>
 
         <div fxFlex="50%" class="header">
-          {{'labels.inputs.Activation Date' | translate}}
+          {{ 'labels.inputs.Activation Date' | translate }}
         </div>
 
         <div fxFlex="50%">
           {{ user.activationDate }}
         </div>
-
       </div>
-
     </mat-card-content>
 
     <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-      <button type="button" color="primary" mat-raised-button [routerLink]="['../../']">{{'labels.buttons.Back' | translate}}</button>
+      <button type="button" color="primary" mat-raised-button [routerLink]="['../../']">
+        {{ 'labels.buttons.Back' | translate }}
+      </button>
     </mat-card-actions>
   </mat-card>
-
 </div>