i18n: Adding new languages: Part 1 (#1882)

Co-authored-by: Jose Alberto Hernandez <alberto@blue-daemon.local>

src/app/centers/centers-view/center-actions/activate-center/activate-center.component.html

@@ -7,20 +7,20 @@
       <mat-card-content>
 
           <mat-form-field fxFlex (click)="activationDatePicker.open()">
-            <mat-label>{{"labels.inputs.Activated On Date" |translate}}</mat-label>
+            <mat-label>{{"labels.inputs.Activated On Date" | translate}}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="activationDatePicker" required formControlName="activationDate">
             <mat-datepicker-toggle matSuffix [for]="activationDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #activationDatePicker></mat-datepicker>
             <mat-error *ngIf="activateCenterForm.controls.activationDate.hasError('required')">
-              {{"labels.inputs.Activated On Date" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{"labels.inputs.Activated On Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
       </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" [disabled]="!activateCenterForm.valid">{{ "labels.buttons.Confirm" | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate}}</button>
+        <button mat-raised-button color="primary" [disabled]="!activateCenterForm.valid">{{"labels.buttons.Confirm" | translate}}</button>
       </mat-card-actions>
 
     </form>

src/app/centers/centers-view/center-actions/attach-center-meeting/attach-center-meeting.component.html

@@ -9,52 +9,52 @@
         <div fxLayout="column">
 
           <mat-form-field (click)="startDatePicker.open()">
-            <mat-label>{{"labels.inputs.Meeting Start Date" |translate}}</mat-label>
+            <mat-label>{{"labels.inputs.Meeting 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="centerMeetingForm.controls.startDate.hasError('required')">
-              {{"labels.inputs.Start Date" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{"labels.inputs.Start Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-checkbox class="m-t-10 m-b-10" labelPosition="before" formControlName="repeating">
-            {{"labels.inputs.Repeats?" |translate}}
+            {{"labels.inputs.Repeats?" | translate}}
           </mat-checkbox>
 
           <mat-form-field *ngIf="centerMeetingForm.contains('frequency')">
-            <mat-label>{{"labels.inputs.Repetition Frequency" |translate}}</mat-label>
+            <mat-label>{{"labels.inputs.Repetition Frequency" | translate}}</mat-label>
             <mat-select formControlName="frequency">
               <mat-option *ngFor="let option of frequencyOptions" [value]="option.id">
                 {{ option.value }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="centerMeetingForm.controls.frequency.hasError('repeatsOnDay')">
-              {{"labels.inputs.Repetition Frequency" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{"labels.inputs.Repetition Frequency" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field *ngIf="centerMeetingForm.contains('interval')">
-            <mat-label>{{"labels.inputs.Repetition Interval" |translate}}</mat-label>
+            <mat-label>{{"labels.inputs.Repetition Interval" | translate}}</mat-label>
             <mat-select formControlName="interval">
               <mat-option *ngFor="let interval of repetitionIntervals" [value]="interval">
                 {{ interval }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="centerMeetingForm.controls.interval.hasError('repeatsOnDay')">
-              {{"labels.inputs.Repetition Interval" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{"labels.inputs.Repetition Interval" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field *ngIf="centerMeetingForm.contains('repeatsOnDay')">
-          <mat-label>{{"labels.inputs.Repeats on Day" |translate}}</mat-label>
+          <mat-label>{{"labels.inputs.Repeats on Day" | translate}}</mat-label>
           <mat-select formControlName="repeatsOnDay" required>
             <mat-option *ngFor="let day of repeatsOnDays" [value]="day.id">
               {{ day.value }}
             </mat-option>
           </mat-select>
           <mat-error *ngIf="centerMeetingForm.controls.repeatsOnDay.hasError('repeatsOnDay')">
-            {{"labels.inputs.At least" |translate}} <strong>{{"labels.inputs.one" |translate}}</strong> {{"labels.inputs.day must be selected" |translate}}
+            {{"labels.inputs.At least" | translate}} <strong>{{"labels.inputs.one" | translate}}</strong> {{"labels.inputs.day must be selected" | translate}}
           </mat-error>
         </mat-form-field>
 
@@ -63,7 +63,7 @@
       </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="primary" [disabled]="!centerMeetingForm.valid" (click)="submit()">{{"labels.buttons.Submit | translate}}</button>
       </mat-card-actions>
 

src/app/centers/centers-view/center-actions/center-assign-staff/center-assign-staff.component.html

@@ -9,14 +9,14 @@
         <div fxLayout="column">
 
           <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 staffData" [value]="staff.id">
                 {{ staff.displayName }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="centerAssignStaffForm.controls.staffId.hasError('required')">
-              {{"labels.inputs.Staff" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{"labels.inputs.Staff" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -25,8 +25,8 @@
       </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" [disabled]="!centerAssignStaffForm.valid">{{ "labels.buttons.Confirm" | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate}}</button>
+        <button mat-raised-button color="primary" [disabled]="!centerAssignStaffForm.valid">{{"labels.buttons.Confirm" | translate}}</button>
       </mat-card-actions>
 
     </form>

src/app/centers/centers-view/center-actions/center-attendance/center-attendance.component.html

@@ -3,30 +3,30 @@
   <mat-card fxLayout="column" fxLayoutGap="3%">
 
     <mat-form-field fxFlex>
-      <mat-label>{{"labels.inputs.Meeting Date" |translate}}</mat-label>
+      <mat-label>{{"labels.inputs.Meeting Date" | translate}}</mat-label>
       <mat-select [formControl]="meetingDate">
         <mat-option *ngFor="let date of meetingDates" [value]="date">
-          {{ date  | dateFormat }}
+          {{ date | dateFormat }}
         </mat-option>
       </mat-select>
-      <mat-hint>{{"labels.inputs.Next Meeting on" |translate}}: {{ this.centerData.collectionMeetingCalendar.nextTenRecurringDates[0]  | dateFormat }}</mat-hint>
+      <mat-hint>{{"labels.inputs.Next Meeting on" | translate}}: {{ this.centerData.collectionMeetingCalendar.nextTenRecurringDates[0] | dateFormat }}</mat-hint>
     </mat-form-field>
 
     <table class="mat-elevation-z1" mat-table [dataSource]="dataSource">
 
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.name" |translate}} </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.name" | translate}} </th>
         <td mat-cell *matCellDef="let member"> {{ member.clientId | find:membersData:'id':'displayName' }} </td>
       </ng-container>
 
       <ng-container matColumnDef="attendance">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Attendance" |translate}} </th>
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Attendance" | translate}} </th>
         <td mat-cell *matCellDef="let member" [ngSwitch]="member.attendanceType">
-          <span *ngSwitchCase="1">{{"labels.inputs.Present" |translate}}</span>
-          <span *ngSwitchCase="2">{{"labels.inputs.Absent" |translate}}</span>
-          <span *ngSwitchCase="3">{{"labels.inputs.Approved" |translate}}</span>
-          <span *ngSwitchCase="4">{{"labels.inputs.Leave" |translate}}</span>
-          <span *ngSwitchCase="5">{{"labels.inputs.Late" |translate}}</span>
+          <span *ngSwitchCase="1">{{"labels.inputs.Present" | translate}}</span>
+          <span *ngSwitchCase="2">{{"labels.inputs.Absent" | translate}}</span>
+          <span *ngSwitchCase="3">{{"labels.inputs.Approved" | translate}}</span>
+          <span *ngSwitchCase="4">{{"labels.inputs.Leave" | translate}}</span>
+          <span *ngSwitchCase="5">{{"labels.inputs.Late" | translate}}</span>
           <button mat-icon-button color="primary"
             (click)="editAttendance(member)">
             <fa-icon icon="pen"></fa-icon>
@@ -40,8 +40,8 @@
     </table>
 
     <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" (click)="submit()" *mifosxHasPermission="'CREATE_MEETING'">{{ "labels.buttons.Confirm" | translate}}</button>
+      <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate}}</button>
+      <button mat-raised-button color="primary" (click)="submit()" *mifosxHasPermission="'CREATE_MEETING'">{{"labels.buttons.Confirm" | translate}}</button>
     </mat-card-actions>
 
   </mat-card>

src/app/centers/centers-view/center-actions/close-center/close-center.component.html

@@ -9,24 +9,24 @@
         <div fxLayout="column">
 
           <mat-form-field (click)="closureDatePicker.open()">
-            <mat-label>{{"labels.inputs.Closed On Date" |translate}}</mat-label>
+            <mat-label>{{"labels.inputs.Closed On Date" | translate}}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="closureDatePicker" required formControlName="closureDate">
             <mat-datepicker-toggle matSuffix [for]="closureDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #closureDatePicker></mat-datepicker>
             <mat-error *ngIf="closeCenterForm.controls.closureDate.hasError('required')">
-              {{"labels.inputs.Closed On Date" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{"labels.inputs.Closed On Date" | 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.Closure Reason" |translate}}</mat-label>
+            <mat-label>{{"labels.inputs.Closure Reason" | translate}}</mat-label>
             <mat-select formControlName="closureReasonId">
               <mat-option *ngFor="let reason of closureData" [value]="reason.id">
                 {{ reason.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="closeCenterForm.controls.closureReasonId.hasError('required')">
-              {{"labels.inputs.Closure Reason" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{"labels.inputs.Closure Reason" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -35,8 +35,8 @@
       </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="warn" [disabled]="!closeCenterForm.valid" *mifosxHasPermission="'CLOSE_CENTER'">{{ "labels.buttons.Confirm" | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate}}</button>
+        <button mat-raised-button color="warn" [disabled]="!closeCenterForm.valid" *mifosxHasPermission="'CLOSE_CENTER'">{{"labels.buttons.Confirm" | translate}}</button>
       </mat-card-actions>
 
     </form>

src/app/centers/centers-view/center-actions/edit-center-meeting-schedule/edit-center-meeting-schedule.component.html

@@ -9,24 +9,24 @@
         <div fxLayout="column">
 
         <mat-form-field>
-          <mat-label>{{ "labels.inputs.Existing Meeting Date" |translate}}</mat-label>
+          <mat-label>{{"labels.inputs.Existing Meeting Date" | translate}}</mat-label>
           <mat-select formControlName="presentMeetingDate">
             <mat-option *ngFor="let date of nextMeetingDates" [value]="date">
-              {{ date  | dateFormat }}
+              {{ date | dateFormat }}
             </mat-option>
           </mat-select>
           <mat-error *ngIf="centerEditMeetingScheduleForm.controls.presentMeetingDate.hasError('repeatsOnDay')">
-            {{ "labels.inputs.Existing Meeting Date" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
+            {{"labels.inputs.Existing Meeting Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
           </mat-error>
         </mat-form-field>
 
         <mat-form-field (click)="newMeetingDatePicker.open()">
-          <mat-label>{{ "labels.inputs.Revised Meeting Date" |translate}}</mat-label>
+          <mat-label>{{"labels.inputs.Revised Meeting Date" | translate}}</mat-label>
           <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="newMeetingDatePicker" required formControlName="newMeetingDate">
           <mat-datepicker-toggle matSuffix [for]="newMeetingDatePicker"></mat-datepicker-toggle>
           <mat-datepicker #newMeetingDatePicker></mat-datepicker>
           <mat-error *ngIf="centerEditMeetingScheduleForm.controls.newMeetingDate.hasError('required')">
-            {{ "labels.inputs.Revised Meeting Date" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
+            {{"labels.inputs.Revised Meeting Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
           </mat-error>
         </mat-form-field>
 
@@ -35,8 +35,8 @@
       </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" [disabled]="!centerEditMeetingScheduleForm.valid" (click)="submit()">{{ "labels.buttons.Submit" | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate}}</button>
+        <button mat-raised-button color="primary" [disabled]="!centerEditMeetingScheduleForm.valid" (click)="submit()">{{"labels.buttons.Submit" | translate}}</button>
       </mat-card-actions>
 
     </form>

src/app/centers/centers-view/center-actions/edit-center-meeting/edit-center-meeting.component.html

@@ -1,7 +1,7 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end">
   <button mat-raised-button color="primary" (click)="editSchedule()">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    {{ "labels.buttons.Edit Schedule" | translate}}
+    {{"labels.buttons.Edit Schedule" | translate}}
   </button>
 </div>
 
@@ -16,51 +16,51 @@
         <div fxLayout="column">
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Repetition Frequency" |translate}}</mat-label>
+            <mat-label>{{"labels.inputs.Repetition Frequency" | translate}}</mat-label>
             <mat-select formControlName="frequency">
               <mat-option *ngFor="let option of frequencyOptions" [value]="option.id">
                 {{ option.value }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="centerEditMeetingForm.controls.frequency.hasError('repeatsOnDay')">
-              {{"labels.inputs.Repetition Frequency" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{"labels.inputs.Repetition Frequency" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Repetition Interval" |translate}}</mat-label>
+            <mat-label>{{"labels.inputs.Repetition Interval" | translate}}</mat-label>
             <mat-select formControlName="interval">
               <mat-option *ngFor="let interval of repetitionIntervals" [value]="interval">
                 {{ interval }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="centerEditMeetingForm.controls.interval.hasError('repeatsOnDay')">
-              {{"labels.inputs.Repetition Interval" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{"labels.inputs.Repetition Interval" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field *ngIf="centerEditMeetingForm.contains('repeatsOnDay')">
-          <mat-label>{{"labels.inputs.Repeats on Day" |translate}}</mat-label>
+          <mat-label>{{"labels.inputs.Repeats on Day" | translate}}</mat-label>
           <mat-select formControlName="repeatsOnDay" required>
             <mat-option *ngFor="let day of repeatsOnDays" [value]="day.id">
               {{ day.value }}
             </mat-option>
           </mat-select>
           <mat-error *ngIf="centerEditMeetingForm.controls.repeatsOnDay.hasError('repeatsOnDay')">
-            {{"labels.inputs.At least" |translate}} <strong>{{"labels.inputs.one" |translate}}</strong> {{"labels.inputs.day must be selected" |translate}}
+            {{"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 class="m-b-5" (click)="startDatePicker.open()">
-          <mat-label>{{"labels.inputs.Above Changes are Effective from" |translate}}</mat-label>
+          <mat-label>{{"labels.inputs.Above Changes are Effective from" | 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="centerEditMeetingForm.controls.startDate.hasError('required')">
-            {{"labels.inputs.Changes Affection Date" |translate}} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
+            {{"labels.inputs.Changes Affection Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
           </mat-error>
           <mat-hint>
-            {{"labels.text.Repeats' and 'Repeats every" |translate}}
+            {{"labels.text.Repeats' and 'Repeats every" | translate}}
           </mat-hint>
         </mat-form-field>
 
@@ -69,8 +69,8 @@
       </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" [disabled]="!centerEditMeetingForm.valid" (click)="submit()">{{ "labels.buttons.Submit" | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate}}</button>
+        <button mat-raised-button color="primary" [disabled]="!centerEditMeetingForm.valid" (click)="submit()">{{"labels.buttons.Submit" | translate}}</button>
       </mat-card-actions>
 
     </form>

src/app/centers/centers-view/center-actions/manage-groups/manage-groups.component.html

@@ -3,7 +3,7 @@
   <mat-card fxFlex class="group-card" fxLayout="column" fxLayoutGap="2%">
 
     <mat-form-field fxFlex="30%">
-      <mat-label>{{ "labels.inputs.Add Groups" |translate}}</mat-label>
+      <mat-label>{{"labels.inputs.Add Groups" | translate}}</mat-label>
       <input matInput [formControl]="groupChoice" [matAutocomplete]="groupsAutocomplete">
     </mat-form-field>
 
@@ -15,21 +15,21 @@
 
     <div class="mat-table">
       <div class="mat-header-row">
-        <div class="mat-header-cell">{{ "labels.inputs.Group Details" |translate}}</div>
+        <div class="mat-header-cell">{{"labels.inputs.Group Details" | translate}}</div>
         <button mat-icon-button (click)="addGroup()">
           <fa-icon icon="plus"></fa-icon>
         </button>
       </div>
       <div class="mat-row">
-        <div class="mat-cell">{{ "labels.inputs.name" |translate}}</div>
+        <div class="mat-cell">{{"labels.inputs.name" | translate}}</div>
         <div class="mat-cell">{{groupChoice.value.name}}</div>
       </div>
       <div class="mat-row">
-        <div class="mat-cell">{{ "labels.inputs.Id" |translate}}</div>
+        <div class="mat-cell">{{"labels.inputs.Id" | translate}}</div>
         <div class="mat-cell">{{groupChoice.value.id}}</div>
       </div>
       <div class="mat-row">
-        <div class="mat-cell">{{ "labels.inputs.Office" |translate}}</div>
+        <div class="mat-cell">{{"labels.inputs.Office" | translate}}</div>
         <div class="mat-cell">{{groupChoice.value.officeName}}</div>
       </div>
     </div>
@@ -38,7 +38,7 @@
 
   <mat-card fxFlex="40%">
 
-    <h3 matSubheader>{{"labels.heading.Group Members" |translate}}</h3>
+    <h3 matSubheader>{{"labels.heading.Group Members" | translate}}</h3>
 
     <mat-nav-list  *ngIf="groupMembers?.length">
       <div mat-list-item *ngFor="let group of groupMembers index as i">

src/app/centers/centers-view/center-actions/staff-assignment-history/staff-assignment-history.component.html

@@ -2,7 +2,7 @@
 
   <div class="back-button">
     <button type="button" color="primary" mat-raised-button [routerLink]="['../../']">
-      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>{{ "labels.buttons.Back" | translate}}
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>{{"labels.buttons.Back" | translate}}
     </button>
   </div>