build: Replace Codelyzer and TSLint with Angular ESLint

Migrate from the deprecated TSLint to Angluar ESLint. Also fix current
linting issues in the code, in particular:

- Use strict equals operators (=== and !==)
- Remove empty lifecycle methods (mostly ngOnInit)
- Output bindings including aliases should not be named as standard dom
  events (submit)
- Async pipe results should not be negated

src/app/system/account-number-preferences/view-account-number-preference/view-account-number-preference.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
 
@@ -18,7 +18,7 @@ import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.co
   templateUrl: './view-account-number-preference.component.html',
   styleUrls: ['./view-account-number-preference.component.scss']
 })
-export class ViewAccountNumberPreferenceComponent implements OnInit {
+export class ViewAccountNumberPreferenceComponent {
 
   /** Account Number Preference Data */
   accountNumberPreferenceData: any;
@@ -41,9 +41,6 @@ export class ViewAccountNumberPreferenceComponent implements OnInit {
     });
   }
 
-  ngOnInit() {
-  }
-
   /**
    * Deletes the account number preference and redirects to account number preferences.
    */

src/app/system/configurations/business-date-tab/business-date-tab.component.html

@@ -24,7 +24,7 @@
                 <span fxFlex="60%" class="date-value">{{businessDate | dateFormat}}</span>
               </div>
 
-              <mat-form-field (click)="businessDatePicker.open()" *ngIf="isEditInProgress && (dateIndex == 0)">
+              <mat-form-field (click)="businessDatePicker.open()" *ngIf="isEditInProgress && (dateIndex === 0)">
                 <mat-label>{{'labels.inputs.Business Date' | translate}}</mat-label>
                 <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="businessDatePicker"
                   formControlName="businessDate">
@@ -37,7 +37,7 @@
               </mat-form-field>
 
               <div fxLayoutGap="2%" fxFlex="22%" class="options-wrapper">
-                <span *ngIf="isEditInProgress && (dateIndex == 0)">
+                <span *ngIf="isEditInProgress && (dateIndex === 0)">
                   <button mat-raised-button color="primary" [disabled]="businessDateForm.pristine" (click)="submit()"
                     *mifosxHasPermission="'UPDATE_BUSINESSDATE'">
                     {{'labels.buttons.Submit' | translate}}
@@ -60,7 +60,7 @@
                 <span fxFlex="60%" class="date-value">{{cobDate | dateFormat}}</span>
               </div>
 
-              <mat-form-field (click)="cobDatePicker.open()" *ngIf="isEditInProgress && (dateIndex == 1)">
+              <mat-form-field (click)="cobDatePicker.open()" *ngIf="isEditInProgress && (dateIndex === 1)">
                 <mat-label>{{'labels.inputs.COB Date' | translate}}</mat-label>
                 <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="cobDatePicker"
                   formControlName="businessDate">
@@ -73,13 +73,13 @@
               </mat-form-field>
 
               <div fxLayoutGap="4%" fxFlex="22%" class="options-wrapper">
-                <span *ngIf="isEditInProgress && (dateIndex == 1)">
+                <span *ngIf="isEditInProgress && (dateIndex === 1)">
                   <button mat-stroked-button color="primary" [disabled]="businessDateForm.pristine" (click)="submit()"
                     *mifosxHasPermission="'UPDATE_BUSINESSDATE'">
                     {{'labels.buttons.Submit' | translate}}
                   </button>
                 </span>
-                <button mat-button *ngIf="isEditInProgress && (dateIndex == 1)" (click)="editInProgressToggle(1)">
+                <button mat-button *ngIf="isEditInProgress && (dateIndex === 1)" (click)="editInProgressToggle(1)">
                   {{'labels.buttons.Cancel' | translate}}
                 </button>
                 <button type="button" color="primary" *ngIf="!isEditInProgress" mat-icon-button matTooltip="{{ 'tooltips.Edit the COB Date' | translate}}"

src/app/system/configure-maker-checker-tasks/configure-maker-checker-tasks.component.html

@@ -18,7 +18,7 @@
 
         <div #mcTable fxFlex="30" fxLayout="column">
           <mat-list>
-            <mat-list-item [ngClass]="selectedItem == grouping ? 'active' : 'inactive'" *ngFor="let grouping of groupings" (click)="showPermissions(grouping)">
+            <mat-list-item [ngClass]="selectedItem === grouping ? 'active' : 'inactive'" *ngFor="let grouping of groupings" (click)="showPermissions(grouping)">
               <span class="grouping-name">
                 {{ formatName(grouping) }}
               </span>

src/app/system/entity-to-entity-mapping/entity-to-entity-mapping.component.html

@@ -5,19 +5,19 @@
       <ng-container matColumnDef="entitymapping">
         <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Mapping Between Entities' | translate}} </th>
         <td mat-cell *matCellDef="let mappingType" (click)="showFilters(mappingType.id)">
-          <span *ngIf="mappingType.mappingTypes == 'office_access_to_loan_products'">
+          <span *ngIf="mappingType.mappingTypes === 'office_access_to_loan_products'">
             {{'labels.inputs.Offices Loan Products' | translate}}
           </span>
-          <span *ngIf="mappingType.mappingTypes == 'office_access_to_savings_products'">
+          <span *ngIf="mappingType.mappingTypes === 'office_access_to_savings_products'">
             {{'labels.inputs.Offices Savings Products' | translate}}
           </span>
-          <span *ngIf="mappingType.mappingTypes == 'office_access_to_fees/charges'">
+          <span *ngIf="mappingType.mappingTypes === 'office_access_to_fees/charges'">
             {{'labels.inputs.Offices Charges/Fees' | translate}}
           </span>
-          <span *ngIf="mappingType.mappingTypes == 'role_access_to_loan_products'">
+          <span *ngIf="mappingType.mappingTypes === 'role_access_to_loan_products'">
             {{'labels.inputs.Roles Loan Products' | translate}}
           </span>
-          <span *ngIf="mappingType.mappingTypes == 'role_access_to_savings_products'">
+          <span *ngIf="mappingType.mappingTypes === 'role_access_to_savings_products'">
             {{'labels.inputs.Roles Savings Products' | translate}}
           </span>
         </td>

src/app/system/external-services/external-services.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 /**
  * External Services component.
@@ -8,15 +8,12 @@ import { Component, OnInit } from '@angular/core';
   selector: 'mifosx-external-services',
   templateUrl: './external-services.component.html',
 })
-export class ExternalServicesComponent implements OnInit {
+export class ExternalServicesComponent {
   // Initialize an array of 4 boolean values, all set to false
   arrowBooleans: boolean[] = new Array(4).fill(false);
 
   constructor() { }
 
-  ngOnInit() {
-  }
-
   /**
    * Popover function
    * @param arrowNumber - The index of the boolean value to toggle.

src/app/system/manage-hooks/view-hook/view-hook.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
 
@@ -18,7 +18,7 @@ import { SystemService } from '../../system.service';
   templateUrl: './view-hook.component.html',
   styleUrls: ['./view-hook.component.scss']
 })
-export class ViewHookComponent implements OnInit {
+export class ViewHookComponent {
 
   /** Hook Data. */
   hookData: any;
@@ -41,9 +41,6 @@ export class ViewHookComponent implements OnInit {
     });
   }
 
-  ngOnInit() {
-  }
-
   /**
    * Deletes the current hook.
    */

src/app/system/manage-jobs/manage-jobs.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import { MatTabChangeEvent } from '@angular/material/tabs';
 import { SystemService } from '../system.service';
 import { TranslateService } from '@ngx-translate/core';
@@ -8,16 +8,13 @@ import { TranslateService } from '@ngx-translate/core';
   templateUrl: './manage-jobs.component.html',
   styleUrls: ['./manage-jobs.component.scss']
 })
-export class ManageJobsComponent implements OnInit {
+export class ManageJobsComponent {
   /** Process running flag */
   isCatchUpRunning = true;
 
   constructor(private systemService: SystemService,
     private translateService: TranslateService) { }
 
-  ngOnInit(): void {
-  }
-
   onJobTabChange(event: MatTabChangeEvent) {
     if (event.index === 2) {
       this.systemService.getCOBCatchUpStatus().subscribe((response: any) => {

src/app/system/manage-jobs/scheduler-jobs/manage-scheduler-jobs.component.html

@@ -77,7 +77,7 @@
           <div *ngIf="job.lastRunHistory">
             <fa-icon *ngIf="job.lastRunHistory.status === 'success'" class="success" [matTooltip]="('tooltips.Successful' | translate)"
               matTooltipPosition="right" icon="check-circle" size="lg"></fa-icon>
-            <fa-icon *ngIf="!(job.lastRunHistory.status == 'success')" class="fail" [matTooltip]="('tooltips.Failed' | translate)"
+            <fa-icon *ngIf="!(job.lastRunHistory.status === 'success')" class="fail" [matTooltip]="('tooltips.Failed' | translate)"
               matTooltipPosition="right" icon="times-circle" size="lg"></fa-icon>
           <span *ngIf="job.lastRunHistory" class="m-l-5">
             {{ job.lastRunHistory.jobRunStartTime | datetimeFormat}}</span>
@@ -104,7 +104,7 @@
         <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Error Log' | translate}} </th>
         <td mat-cell *matCellDef="let job" class="center">
           <button mat-icon-button class="errorlog" (click)="showErrorLog(job)"
-            *ngIf="!(job.lastRunHistory && job.lastRunHistory.status == 'success')" matTooltip="{{'labels.inputs.Error Log' | translate}}"
+            *ngIf="!(job.lastRunHistory && job.lastRunHistory.status === 'success')" matTooltip="{{'labels.inputs.Error Log' | translate}}"
             matTooltipPosition="right">
             <fa-icon icon="exclamation-circle" size="lg"></fa-icon>
           </button>

src/app/system/manage-jobs/scheduler-jobs/view-history-scheduler-job/view-history-scheduler-job.component.html

@@ -31,7 +31,7 @@
         <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Status' | translate }} </th>
         <td mat-cell *matCellDef="let jobHistoryData">
           <fa-icon *ngIf="jobHistoryData.status === 'success'" class="success" matTooltip="{{ 'tooltips.Successful' | translate}}" matTooltipPosition="right" icon="check-circle" size="lg"></fa-icon>
-          <fa-icon *ngIf="!(jobHistoryData.status == 'success')" class="fail" matTooltip="{{ 'tooltips.Failed' | translate}}" matTooltipPosition="right" icon="times-circle" size="lg"></fa-icon>
+          <fa-icon *ngIf="!(jobHistoryData.status === 'success')" class="fail" matTooltip="{{ 'tooltips.Failed' | translate}}" matTooltipPosition="right" icon="times-circle" size="lg"></fa-icon>
         </td>
       </ng-container>
 
@@ -43,7 +43,7 @@
       <ng-container matColumnDef="error_log">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Error Log' | translate }} </th>
         <td mat-cell *matCellDef="let jobHistoryData">
-          <button mat-icon-button class="errorlog" *ngIf="!(jobHistoryData.status == 'success')" matTooltip="{{ 'tooltips.Error Log' | translate}}" matTooltipPosition="right" (click)="openError(jobHistoryData.version)">
+          <button mat-icon-button class="errorlog" *ngIf="!(jobHistoryData.status === 'success')" matTooltip="{{ 'tooltips.Error Log' | translate}}" matTooltipPosition="right" (click)="openError(jobHistoryData.version)">
             <fa-icon icon="exclamation-circle" size="lg"></fa-icon>
           </button>
         </td>

src/app/system/manage-reports/view-report/view-report.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
 
@@ -17,7 +17,7 @@ import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.co
   templateUrl: './view-report.component.html',
   styleUrls: ['./view-report.component.scss']
 })
-export class ViewReportComponent implements OnInit {
+export class ViewReportComponent {
 
   /** Report Data. */
   reportData: any;
@@ -38,9 +38,6 @@ export class ViewReportComponent implements OnInit {
     });
   }
 
-  ngOnInit() {
-  }
-
   /**
    * Deletes the current report.
    */

src/app/system/manage-surveys/edit-survey/edit-survey.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import { UntypedFormGroup, UntypedFormBuilder, UntypedFormArray, Validators, FormControl } from '@angular/forms';
 import { Router, ActivatedRoute } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
@@ -22,7 +22,7 @@ import { Survey, QuestionData, ResponseData } from './../survey.model';
   templateUrl: './edit-survey.component.html',
   styleUrls: ['./edit-survey.component.scss']
 })
-export class EditSurveyComponent implements OnInit {
+export class EditSurveyComponent {
 
   /** Survey form. */
   surveyForm: UntypedFormGroup;
@@ -45,12 +45,6 @@ export class EditSurveyComponent implements OnInit {
                 });
               }
 
-  /**
-   * Fills the survey form.
-   */
-  ngOnInit() {
-  }
-
   /**
    * Takes an object of type Survey
    * and prepares the survey form.

src/app/system/manage-surveys/view-survey/view-survey.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
 
@@ -14,7 +14,7 @@ import { SystemService } from 'app/system/system.service';
   templateUrl: './view-survey.component.html',
   styleUrls: ['./view-survey.component.scss']
 })
-export class ViewSurveyComponent implements OnInit {
+export class ViewSurveyComponent {
 
   /** Survey Data */
   surveyData: any;
@@ -38,9 +38,6 @@ export class ViewSurveyComponent implements OnInit {
     });
   }
 
-  ngOnInit(): void {
-  }
-
   /** Go to edit survey page. */
   onEdit() {
     this.router.navigate(['./edit'], { relativeTo: this.route });

src/app/system/roles-and-permissions/view-role/view-role.component.html

@@ -77,7 +77,7 @@
 
         <div fxFlex="30" fxLayout="column">
           <mat-list>
-            <mat-list-item [ngClass]="selectedItem == grouping ? 'active' : 'inactive'" *ngFor="let grouping of groupings" (click)="showPermissions(grouping)">
+            <mat-list-item [ngClass]="selectedItem === grouping ? 'active' : 'inactive'" *ngFor="let grouping of groupings" (click)="showPermissions(grouping)">
               <span class="groupingName">
                 {{ formatName(grouping) }}
               </span>

src/app/system/system.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { AfterViewInit, Component, ElementRef, OnInit, TemplateRef, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, TemplateRef, ViewChild } from '@angular/core';
 import { Router } from '@angular/router';
 
 /** Custom Services */
@@ -11,7 +11,7 @@ import { PopoverService } from '../configuration-wizard/popover/popover.service'
   templateUrl: './system.component.html',
   styleUrls: ['./system.component.scss']
 })
-export class SystemComponent implements OnInit, AfterViewInit {
+export class SystemComponent implements AfterViewInit {
 
   /* Reference of manage datatables */
   @ViewChild('datatables') datatables: ElementRef<any>;
@@ -53,9 +53,6 @@ export class SystemComponent implements OnInit, AfterViewInit {
               private configurationWizardService: ConfigurationWizardService,
               private popoverService: PopoverService) { }
 
-  ngOnInit() {
-  }
-
   /**
    * Popover function
    * @param template TemplateRef<any>.