build: update to angular-v9.1.12 (#1215)

Fixes: #1216

src/app/account-transfers/list-standing-instructions/list-standing-instructions.component.ts

@@ -1,6 +1,8 @@
 /** Angular Imports */
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { MatTableDataSource, MatTable, MatPaginator, MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatTableDataSource, MatTable } from '@angular/material/table';
 import { ActivatedRoute } from '@angular/router';
 import { FormControl } from '@angular/forms';
 
@@ -50,9 +52,9 @@ export class ListStandingInstructionsComponent implements OnInit {
   displayedColumns: string[] = ['client', 'fromAccount', 'beneficiary', 'toAccount', 'amount', 'validity', 'actions'];
 
   /** Instruction Table Reference */
-  @ViewChild('instructionsTable') instructionTableRef: MatTable<Element>;
+  @ViewChild('instructionsTable', { static: true }) instructionTableRef: MatTable<Element>;
   /** Paginator for centers table. */
-  @ViewChild(MatPaginator) paginator: MatPaginator;
+  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
 
 
   /**

src/app/account-transfers/list-transactions/list-transactions.component.ts

@@ -1,6 +1,8 @@
 /** Angular Imports */
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { MatTableDataSource, MatTable, MatPaginator, MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatTableDataSource, MatTable } from '@angular/material/table';
 import { ActivatedRoute } from '@angular/router';
 import { FormControl } from '@angular/forms';
 
@@ -29,7 +31,7 @@ export class ListTransactionsComponent {
   displayedColumns: string[] = ['transactionDate', 'amount', 'notes', 'reversed'];
 
   /** Paginator for centers table. */
-  @ViewChild(MatPaginator) paginator: MatPaginator;
+  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
 
   /**
    * Retrieves Recurring Deposits Account Data from `resolve`.

src/app/accounting/accounting-rules/accounting-rules.component.ts

@@ -1,6 +1,8 @@
 /** Angular Imports */
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { MatPaginator, MatSort, MatTableDataSource } from '@angular/material';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
+import { MatTableDataSource } from '@angular/material/table';
 import { ActivatedRoute } from '@angular/router';
 
 /**
@@ -21,9 +23,9 @@ export class AccountingRulesComponent implements OnInit {
   dataSource: MatTableDataSource<any>;
 
   /** Paginator for accounting rules table. */
-  @ViewChild(MatPaginator) paginator: MatPaginator;
+  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
   /** Sorter for accounting rules table. */
-  @ViewChild(MatSort) sort: MatSort;
+  @ViewChild(MatSort, { static: true }) sort: MatSort;
 
   /**
    * Retrieves the accounting rules data from `resolve`.

src/app/accounting/accounting-rules/view-rule/view-rule.component.ts

@@ -1,7 +1,7 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 
 /** Custom Services */
 import { AccountingService } from '../../accounting.service';

src/app/accounting/accounting.module.ts

@@ -78,10 +78,6 @@ import { ViewProvisioningJournalEntriesComponent } from './provisioning-entries/
     CreateProvisioningEntryComponent,
     ViewProvisioningEntryComponent,
     ViewProvisioningJournalEntriesComponent
-  ],
-  entryComponents: [
-    RevertTransactionComponent,
-    ViewJournalEntryComponent
   ]
 })
 export class AccountingModule { }

src/app/accounting/chart-of-accounts/chart-of-accounts.component.ts

@@ -1,6 +1,9 @@
 /** Angular Imports */
 import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
-import { MatPaginator, MatSort, MatTableDataSource, MatTreeNestedDataSource } from '@angular/material';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
+import { MatTableDataSource } from '@angular/material/table';
+import { MatTreeNestedDataSource } from '@angular/material/tree';
 import { NestedTreeControl } from '@angular/cdk/tree';
 import { FormControl } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
@@ -40,9 +43,9 @@ export class ChartOfAccountsComponent implements AfterViewInit, OnInit {
   glAccount: GLAccountNode;
 
   /** Paginator for chart of accounts table. */
-  @ViewChild(MatPaginator) paginator: MatPaginator;
+  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
   /** Sorter for chart of accounts table. */
-  @ViewChild(MatSort) sort: MatSort;
+  @ViewChild(MatSort, { static: true }) sort: MatSort;
 
   /**
    * Retrieves the gl accounts data from `resolve` and initializes(generates) gl accounts tree.

src/app/accounting/chart-of-accounts/view-gl-account/view-gl-account.component.ts

@@ -1,7 +1,7 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 
 /** Custom Components */
 import { DeleteDialogComponent } from '../../../shared/delete-dialog/delete-dialog.component';

src/app/accounting/closing-entries/closing-entries.component.ts

@@ -1,6 +1,8 @@
 /** Angular Imports */
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { MatPaginator, MatSort, MatTableDataSource } from '@angular/material';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
+import { MatTableDataSource } from '@angular/material/table';
 import { FormControl } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
 
@@ -31,9 +33,9 @@ export class ClosingEntriesComponent implements OnInit {
   glAccountClosureData: any;
 
   /** Paginator for closing entries table. */
-  @ViewChild(MatPaginator) paginator: MatPaginator;
+  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
   /** Sorter for closing entries table. */
-  @ViewChild(MatSort) sort: MatSort;
+  @ViewChild(MatSort, { static: true }) sort: MatSort;
 
   /**
    * Retrieves the offices and gl account closures data from `resolve`.

src/app/accounting/closing-entries/view-closure/view-closure.component.ts

@@ -1,7 +1,7 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 
 /** Custom Services */
 import { AccountingService } from '../../accounting.service';

src/app/accounting/financial-activity-mappings/financial-activity-mappings.component.ts

@@ -1,6 +1,8 @@
 /** Angular Imports */
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { MatTableDataSource, MatPaginator, MatSort } from '@angular/material';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
+import { MatTableDataSource } from '@angular/material/table';
 import { ActivatedRoute } from '@angular/router';
 
 /**
@@ -21,9 +23,9 @@ export class FinancialActivityMappingsComponent implements OnInit {
   dataSource: MatTableDataSource<any>;
 
   /** Paginator for financial activity mappings table. */
-  @ViewChild(MatPaginator) paginator: MatPaginator;
+  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
   /** Sorter for financial activity mappings table. */
-  @ViewChild(MatSort) sort: MatSort;
+  @ViewChild(MatSort, { static: true }) sort: MatSort;
 
   /**
    * Retrieves the financial activity accounts data from `resolve`.

src/app/accounting/financial-activity-mappings/view-financial-activity-mapping/view-financial-activity-mapping.component.ts

@@ -1,7 +1,7 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 
 /** Custom Services */
 import { AccountingService } from '../../accounting.service';

src/app/accounting/provisioning-entries/provisioning-entries.component.ts

@@ -1,6 +1,8 @@
 /** Angular Imports */
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { MatSort, MatPaginator, MatTableDataSource } from '@angular/material';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
+import { MatTableDataSource } from '@angular/material/table';
 import { Router, ActivatedRoute } from '@angular/router';
 
 /** Custom Services */
@@ -24,9 +26,9 @@ export class ProvisioningEntriesComponent implements OnInit {
   dataSource: MatTableDataSource<any>;
 
   /** Paginator for provisioning entries table. */
-  @ViewChild(MatPaginator) paginator: MatPaginator;
+  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
   /** Sorter for provisioning entries table. */
-  @ViewChild(MatSort) sort: MatSort;
+  @ViewChild(MatSort, { static: true }) sort: MatSort;
 
   /**
    * Retrieves the provisioning entries data from `resolve`.

src/app/accounting/provisioning-entries/view-provisioning-entry/view-provisioning-entry.component.ts

@@ -2,7 +2,9 @@
 import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { FormControl } from '@angular/forms';
-import { MatPaginator, MatSort, MatTableDataSource } from '@angular/material';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
+import { MatTableDataSource } from '@angular/material/table';
 
 /** rxjs Imports */
 import { startWith, map, debounceTime, distinctUntilChanged, tap } from 'rxjs/operators';
@@ -56,9 +58,9 @@ export class ViewProvisioningEntryComponent implements OnInit, AfterViewInit {
   };
 
   /** Paginator for provisioning entry entries table. */
-  @ViewChild(MatPaginator) paginator: MatPaginator;
+  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
   /** Sorter for provisioning entry entries table. */
-  @ViewChild(MatSort) sort: MatSort;
+  @ViewChild(MatSort, { static: true }) sort: MatSort;
 
   /**
    * Retrieves the provisioning entry, provisioning entry entries, offices,

src/app/accounting/provisioning-entries/view-provisioning-journal-entries/view-provisioning-journal-entries.component.ts

@@ -1,7 +1,9 @@
 /** Angular Imports */
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { MatPaginator, MatSort, MatTableDataSource } from '@angular/material';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
+import { MatTableDataSource } from '@angular/material/table';
 
 /**
  * View provisioning journal entries component.
@@ -21,9 +23,9 @@ export class ViewProvisioningJournalEntriesComponent implements OnInit {
   dataSource: MatTableDataSource<any>;
 
   /** Paginator for provisioning journal entries table. */
-  @ViewChild(MatPaginator) paginator: MatPaginator;
+  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
   /** Sorter for provisioning journal entries table. */
-  @ViewChild(MatSort) sort: MatSort;
+  @ViewChild(MatSort, { static: true }) sort: MatSort;
 
   /**
    * Retrieves the provisioning journal entries data from `resolve`.

src/app/accounting/revert-transaction/revert-transaction.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit, Inject } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { FormControl } from '@angular/forms';
 
 /**

src/app/accounting/search-journal-entry/search-journal-entry.component.ts

@@ -1,6 +1,7 @@
 /** Angular Imports */
 import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
-import { MatPaginator, MatSort } from '@angular/material';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
 import { FormControl } from '@angular/forms';
 import { Router, ActivatedRoute } from '@angular/router';
 
@@ -104,9 +105,9 @@ export class SearchJournalEntryComponent implements OnInit, AfterViewInit {
   ];
 
   /** Paginator for journal entries table. */
-  @ViewChild(MatPaginator) paginator: MatPaginator;
+  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
   /** Sorter for journal entries table. */
-  @ViewChild(MatSort) sort: MatSort;
+  @ViewChild(MatSort, { static: true }) sort: MatSort;
 
   /**
    * Retrieves the offices and gl accounts data from `resolve`.

src/app/accounting/view-journal-entry/view-journal-entry.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit, Inject } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 
 /**
  * View journal entry dialog component.

src/app/accounting/view-transaction/view-transaction.component.ts

@@ -1,7 +1,10 @@
 /** Angular Imports */
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { MatDialog, MatSort, MatPaginator, MatTableDataSource } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
+import { MatTableDataSource } from '@angular/material/table';
 
 /** Custom Services */
 import { AccountingService } from '../accounting.service';
@@ -32,9 +35,9 @@ export class ViewTransactionComponent implements OnInit {
   dataSource: MatTableDataSource<any>;
 
   /** Paginator for transaction table. */
-  @ViewChild(MatPaginator) paginator: MatPaginator;
+  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
   /** Sorter for transaction table. */
-  @ViewChild(MatSort) sort: MatSort;
+  @ViewChild(MatSort, { static: true }) sort: MatSort;
 
   /**
    * @param {AccountingService} accountingService Accounting Service.

src/app/app.module.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
+import { BrowserModule, HammerModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { HttpClientModule } from '@angular/common/http';
 import { ServiceWorkerModule } from '@angular/service-worker';
@@ -50,6 +50,7 @@ import { AppRoutingModule } from './app-routing.module';
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
+    HammerModule,
     HttpClientModule,
     ServiceWorkerModule.register('./ngsw-worker.js', { enabled: environment.production }),
     TranslateModule.forRoot(),

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

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 import { DatePipe } from '@angular/common';
 import { ActivatedRoute, Router } from '@angular/router';
 import { FormControl } from '@angular/forms';

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

@@ -9,7 +9,7 @@ import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.co
 /** Custom Services */
 import { CentersService } from 'app/centers/centers.service';
 import { GroupsService } from 'app/groups/groups.service';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 
 
 @Component({

src/app/centers/centers-view/centers-view.component.ts

@@ -1,7 +1,7 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 
 /** Dialog Imports */
 import { ConfirmationDialogComponent } from 'app/shared/confirmation-dialog/confirmation-dialog.component';

src/app/centers/centers-view/datatable-tab/multi-row/multi-row.component.ts

@@ -2,7 +2,7 @@
 import { Component, OnChanges, OnInit, Input, ViewChild } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { MatTable } from '@angular/material/table';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 import { DatePipe } from '@angular/common';
 
 /** Custom Dialogs */
@@ -44,7 +44,7 @@ export class MultiRowComponent implements OnInit, OnChanges {
   showDeleteBotton: boolean;
 
   /** Data Table Reference */
-  @ViewChild('dataTable') dataTableRef: MatTable<Element>;
+  @ViewChild('dataTable', { static: true }) dataTableRef: MatTable<Element>;
 
   /**
    * Fetches center Id from parent route params.

src/app/centers/centers-view/datatable-tab/single-row/single-row.component.ts

@@ -1,7 +1,7 @@
 /** Angular Imports */
 import { Component, Input, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 import { DatePipe } from '@angular/common';
 
 /** Custom Components */

src/app/centers/centers-view/notes-tab/notes-tab.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
 
 /** Custom Components */
@@ -21,7 +21,7 @@ export class NotesTabComponent implements OnInit {
   username: string;
   centerNotes: any;
   noteForm: FormGroup;
-  @ViewChild('formRef') formRef: any;
+  @ViewChild('formRef', { static: true }) formRef: any;
 
 
   constructor(private route: ActivatedRoute,

src/app/centers/centers.component.ts

@@ -1,6 +1,8 @@
 /** Angular Imports */
 import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
-import { MatPaginator, MatSort, MatCheckbox } from '@angular/material';
+import { MatCheckbox } from '@angular/material/checkbox';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
 import { FormControl } from '@angular/forms';
 import { Router, ActivatedRoute } from '@angular/router';
 
@@ -23,7 +25,7 @@ import { CentersDataSource } from './centers.datasource';
   styleUrls: ['./centers.component.scss'],
 })
 export class CentersComponent implements OnInit, AfterViewInit {
-  @ViewChild('showClosedCenters') showClosedCenters: MatCheckbox;
+  @ViewChild('showClosedCenters', { static: true }) showClosedCenters: MatCheckbox;
 
   /** Name form control. */
   name = new FormControl();
@@ -46,9 +48,9 @@ export class CentersComponent implements OnInit, AfterViewInit {
   ];
 
   /** Paginator for centers table. */
-  @ViewChild(MatPaginator) paginator: MatPaginator;
+  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
   /** Sorter for centers table. */
-  @ViewChild(MatSort) sort: MatSort;
+  @ViewChild(MatSort, { static: true }) sort: MatSort;
 
   constructor(private centersService: CentersService) { }
 

src/app/clients/client-stepper/client-address-step/client-address-step.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, Input } from '@angular/core';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 
 /** Custom Models */
 import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';

src/app/clients/client-stepper/client-family-members-step/client-family-member-dialog/client-family-member-dialog.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit, Inject } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
 import { DatePipe } from '@angular/common';
 

src/app/clients/client-stepper/client-family-members-step/client-family-members-step.component.ts

@@ -1,7 +1,7 @@
 /** Angular Imports */
 import { Component, OnInit, Input } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 
 /** Custom Components */
 import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';

src/app/clients/clients-routing.module.ts

@@ -231,27 +231,27 @@ const routes: Routes = [
           {
             path: 'loans',
             data: { title: extract('Loans'), breadcrumb: 'loans', routeParamBreadcrumb: false },
-            loadChildren: '../loans/loans.module#LoansModule'
+            loadChildren: () => import('../loans/loans.module').then(m => m.LoansModule)
           },
           {
             path: 'fixed-deposits-accounts',
-            loadChildren: '../deposits/fixed-deposits/fixed-deposits.module#FixedDepositsModule'
+            loadChildren: () => import('../deposits/fixed-deposits/fixed-deposits.module').then(m => m.FixedDepositsModule)
           },
           {
             path: 'savingsaccounts',
-            loadChildren: '../savings/savings.module#SavingsModule'
+            loadChildren: () => import('../savings/savings.module').then(m => m.SavingsModule)
           },
           {
             path: 'recurringdeposits',
-            loadChildren: '../deposits/recurring-deposits/recurring-deposits.module#RecurringDepositsModule'
+            loadChildren: () => import('../deposits/recurring-deposits/recurring-deposits.module').then(m => m.RecurringDepositsModule)
           },
           {
             path: 'shares-accounts',
-            loadChildren: '../shares/shares.module#SharesModule'
+            loadChildren: () => import('../shares/shares.module').then(m => m.SharesModule)
           },
           {
             path: 'standing-instructions',
-            loadChildren: '../account-transfers/account-transfers.module#AccountTransfersModule'
+            loadChildren: () => import('../account-transfers/account-transfers.module').then(m => m.AccountTransfersModule)
           }
         ]
       }

src/app/clients/clients-view/address-tab/address-tab.component.ts

@@ -1,7 +1,7 @@
 /** Angular Imports */
 import { Component } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
 import { InputBase } from 'app/shared/form-dialog/formfield/model/input-base';
 import { SelectBase } from 'app/shared/form-dialog/formfield/model/select-base';

src/app/clients/clients-view/charges/charges-overview/charges-overview.component.ts

@@ -1,6 +1,8 @@
 /** Angular Imports */
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { MatTableDataSource, MatPaginator, MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatTableDataSource } from '@angular/material/table';
 import { ActivatedRoute } from '@angular/router';
 
 /**
@@ -21,7 +23,7 @@ export class ChargesOverviewComponent implements OnInit {
   chargeOverviewData: any;
 
   /** Paginator for charge overview table. */
-  @ViewChild(MatPaginator) paginator: MatPaginator;
+  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
 
   /**
    * Retrieves the charge overview data from `resolve`.

src/app/clients/clients-view/client-actions/client-screen-reports/client-screen-reports.component.ts

@@ -27,7 +27,7 @@ export class ClientScreenReportsComponent implements OnInit {
   template: any;
 
   /** Screen report output reference */
-  @ViewChild('screenReport') screenReportRef: ElementRef;
+  @ViewChild('screenReport', { static: true }) screenReportRef: ElementRef;
 
   /**
    * Fetches Client Action Data from `resolve`

src/app/clients/clients-view/client-actions/view-survey/view-survey.component.ts

@@ -1,7 +1,9 @@
 /** Angular Imports */
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { MatTableDataSource, MatPaginator, MatSort } from '@angular/material';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
+import { MatTableDataSource } from '@angular/material/table';
 
 /**
  * View Survey component.
@@ -21,9 +23,9 @@ export class ViewSurveyComponent implements OnInit {
   displayedColumns: string[] = ['surveyName', 'createdBy', 'date', 'score'];
 
   /** Paginator for list of surveys table. */
-  @ViewChild(MatPaginator) paginator: MatPaginator;
+  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
   /** Sorter for list of surveys table. */
-  @ViewChild(MatSort) sort: MatSort;
+  @ViewChild(MatSort, { static: true }) sort: MatSort;
 
 
   /**

src/app/clients/clients-view/clients-view.component.ts

@@ -2,7 +2,7 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { DomSanitizer } from '@angular/platform-browser';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 
 /** Custom Dialogs */
 import { UnassignStaffDialogComponent } from './custom-dialogs/unassign-staff-dialog/unassign-staff-dialog.component';

src/app/clients/clients-view/custom-dialogs/capture-image-dialog/capture-image-dialog.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, ViewChild, ElementRef, AfterViewInit, Renderer2, OnDestroy } from '@angular/core';
-import { MatDialogRef } from '@angular/material';
+import { MatDialogRef } from '@angular/material/dialog';
 
 /**
  * Capture image dialog component
@@ -13,11 +13,11 @@ import { MatDialogRef } from '@angular/material';
 export class CaptureImageDialogComponent implements AfterViewInit, OnDestroy {
 
   /** Video element reference */
-  @ViewChild('video') video: ElementRef;
+  @ViewChild('video', { static: true }) video: ElementRef;
   /** Canvas element reference */
-  @ViewChild('canvas') canvas: ElementRef;
+  @ViewChild('canvas', { static: true }) canvas: ElementRef;
   /** Fallback element reference */
-  @ViewChild('fallback') fallback: ElementRef;
+  @ViewChild('fallback', { static: true }) fallback: ElementRef;
   /** Capture button element reference */
   @ViewChild('captureButton') captureButton: ElementRef;
 

src/app/clients/clients-view/custom-dialogs/delete-signature-dialog/delete-signature-dialog.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, Inject } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 
 /**
  * Delete signature dialog component.

src/app/clients/clients-view/custom-dialogs/edit-notes-dialog/edit-notes-dialog.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit, Inject } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
 
 @Component({

src/app/clients/clients-view/custom-dialogs/unassign-staff-dialog/unassign-staff-dialog.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, Inject } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 
 /**
  * Unassign staff dialog component.

src/app/clients/clients-view/custom-dialogs/upload-document-dialog/upload-document-dialog.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, Inject } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
 
 @Component({

src/app/clients/clients-view/custom-dialogs/upload-image-dialog/upload-image-dialog.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component } from '@angular/core';
-import { MatDialogRef } from '@angular/material';
+import { MatDialogRef } from '@angular/material/dialog';
 
 /**
  * Upload image dialog component.

src/app/clients/clients-view/custom-dialogs/upload-signature-dialog/upload-signature-dialog.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component } from '@angular/core';
-import { MatDialogRef } from '@angular/material';
+import { MatDialogRef } from '@angular/material/dialog';
 
 /**
  * Upload signature dialog component.

src/app/clients/clients-view/custom-dialogs/view-signature-dialog/view-signature-dialog.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, Inject, OnInit } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { DomSanitizer } from '@angular/platform-browser';
 
 /** Custom Services */

src/app/clients/clients-view/datatable-tab/multi-row/multi-row.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit, Input, OnChanges, ViewChild } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { MatTable } from '@angular/material/table';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
 import { InputBase } from 'app/shared/form-dialog/formfield/model/input-base';
 import { SelectBase } from 'app/shared/form-dialog/formfield/model/select-base';
@@ -21,7 +21,7 @@ import { ClientsService } from '../../../clients.service';
   styleUrls: ['./multi-row.component.scss']
 })
 export class MultiRowComponent implements OnInit, OnChanges {
-  @ViewChild('dataTable') dataTableRef: MatTable<Element>;
+  @ViewChild('dataTable', { static: true }) dataTableRef: MatTable<Element>;
   @Input() dataObject: any;
   datatableName: string;
   datatableColumns: string[] = [];

src/app/clients/clients-view/datatable-tab/single-row/single-row.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit, Input } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
 import { InputBase } from 'app/shared/form-dialog/formfield/model/input-base';
 import { SelectBase } from 'app/shared/form-dialog/formfield/model/select-base';

src/app/clients/clients-view/documents-tab/documents-tab.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { MatTable } from '@angular/material/table';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 
 /** Custom Services */
 import { ClientsService } from '../../clients.service';
@@ -17,7 +17,7 @@ import { DeleteDialogComponent } from '../../../shared/delete-dialog/delete-dial
   styleUrls: ['./documents-tab.component.scss']
 })
 export class DocumentsTabComponent implements OnInit {
-  @ViewChild('documentsTable') documentsTable: MatTable<Element>;
+  @ViewChild('documentsTable', { static: true }) documentsTable: MatTable<Element>;
   documentsColumns: string[] = ['name', 'description', 'fileName', 'actions'];
   clientDocuments: any;
   clientId: string;

src/app/clients/clients-view/family-members-tab/family-members-tab.component.ts

@@ -1,7 +1,7 @@
 /** Angular Imports */
 import { Component } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 
 /** Custom Components */
 import { DeleteDialogComponent } from '../../../shared/delete-dialog/delete-dialog.component';

src/app/clients/clients-view/identities-tab/identities-tab.component.ts

@@ -2,7 +2,7 @@
 import { Component, ViewChild } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { MatTable } from '@angular/material/table';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 
 /** Custom Models */
 import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
@@ -37,7 +37,7 @@ export class IdentitiesTabComponent {
   identitiesColumns: string[] = ['id', 'description', 'type', 'documents', 'status', 'actions'];
 
   /** Identifiers Table */
-  @ViewChild('identifiersTable') identifiersTable: MatTable<Element>;
+  @ViewChild('identifiersTable', { static: true }) identifiersTable: MatTable<Element>;
 
   /**
    * @param {ActivatedRoute} route Activated Route

src/app/clients/clients-view/notes-tab/notes-tab.component.ts

@@ -1,7 +1,7 @@
 /** Angular Imports */
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
 
 /** Custom Components */
@@ -31,7 +31,7 @@ export class NotesTabComponent implements OnInit {
   noteForm: FormGroup;
 
   /** Notes Form Reference */
-  @ViewChild('formRef') formRef: any;
+  @ViewChild('formRef', { static: true }) formRef: any;
 
   /**
    * @param {ActivatedRoute} route Activated Route

src/app/clients/clients.component.ts

@@ -1,6 +1,8 @@
 /** Angular Imports. */
 import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
-import { MatPaginator, MatSort, MatCheckbox } from '@angular/material';
+import { MatCheckbox } from '@angular/material/checkbox';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
 import { ClientsDataSource } from './clients.datasource';
 
 /** rxjs Imports */
@@ -16,7 +18,7 @@ import { ClientsService } from './clients.service';
   styleUrls: ['./clients.component.scss'],
 })
 export class ClientsComponent implements OnInit, AfterViewInit {
-  @ViewChild('showClosedAccounts') showClosedAccounts: MatCheckbox;
+  @ViewChild('showClosedAccounts', { static: true }) showClosedAccounts: MatCheckbox;
 
 
   displayedColumns = ['name', 'clientno', 'externalid', 'status', 'mobileNo', 'gender', 'office', 'staff'];
@@ -24,8 +26,8 @@ export class ClientsComponent implements OnInit, AfterViewInit {
   /** Get the required filter value. */
   searchValue = '';
 
-  @ViewChild(MatPaginator) paginator: MatPaginator;
-  @ViewChild(MatSort) sort: MatSort;
+  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
+  @ViewChild(MatSort, { static: true }) sort: MatSort;
 
   constructor(private clientsService: ClientsService) {
 

src/app/clients/clients.module.ts

@@ -121,17 +121,6 @@ import { CaptureImageDialogComponent } from './clients-view/custom-dialogs/captu
     ClientFamilyMemberDialogComponent,
     CaptureImageDialogComponent
   ],
-  entryComponents: [
-    UploadDocumentDialogComponent,
-    EditNotesDialogComponent,
-    UnassignStaffDialogComponent,
-    ViewSignatureDialogComponent,
-    UploadSignatureDialogComponent,
-    DeleteSignatureDialogComponent,
-    UploadImageDialogComponent,
-    ClientFamilyMemberDialogComponent,
-    CaptureImageDialogComponent
-  ],
   providers: [DatePipe]
 
 })

src/app/clients/create-client/create-client.component.ts

@@ -21,11 +21,11 @@ import { ClientAddressStepComponent } from '../client-stepper/client-address-ste
 export class CreateClientComponent {
 
   /** Client General Step */
-  @ViewChild(ClientGeneralStepComponent) clientGeneralStep: ClientGeneralStepComponent;
+  @ViewChild(ClientGeneralStepComponent, { static: true }) clientGeneralStep: ClientGeneralStepComponent;
   /** Client Family Members Step */
-  @ViewChild(ClientFamilyMembersStepComponent) clientFamilyMembersStep: ClientFamilyMembersStepComponent;
+  @ViewChild(ClientFamilyMembersStepComponent, { static: true }) clientFamilyMembersStep: ClientFamilyMembersStepComponent;
   /** Client Address Step */
-  @ViewChild(ClientAddressStepComponent) clientAddressStep: ClientAddressStepComponent;
+  @ViewChild(ClientAddressStepComponent, { static: true }) clientAddressStep: ClientAddressStepComponent;
 
   /** Client Template */
   clientTemplate: any;

src/app/collections/collections.service.spec.ts

@@ -6,7 +6,7 @@ describe('CollectionsService', () => {
   beforeEach(() => TestBed.configureTestingModule({}));
 
   it('should be created', () => {
-    const service: CollectionsService = TestBed.get(CollectionsService);
+    const service: CollectionsService = TestBed.inject(CollectionsService);
     expect(service).toBeTruthy();
   });
 });

src/app/collections/individual-collection-sheet/individual-collection-sheet.component.ts

@@ -1,6 +1,9 @@
 /** Angular Imports */
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { MatTableDataSource, MatPaginator, MatSort, MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
+import { MatTableDataSource } from '@angular/material/table';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { DatePipe } from '@angular/common';

src/app/core/http/http.service.ts

@@ -14,7 +14,7 @@ import { ApiPrefixInterceptor } from './api-prefix.interceptor';
  * HttpClient is declared in a re-exported module, so we have to extend the original module to make it work properly.
  * (see https://github.com/Microsoft/TypeScript/issues/13897)
  */
-declare module '@angular/common/http/src/client' {
+declare module '@angular/common/http/http' {
 
   /**
    * Augment HttpClient with the added configuration methods from HttpService, to allow in-place replacement of

src/app/core/route/route-reusable-strategy.ts

@@ -1,11 +1,13 @@
 /** Angular Imports */
 import { ActivatedRouteSnapshot, DetachedRouteHandle, RouteReuseStrategy } from '@angular/router';
+import { Injectable } from '@angular/core';
 
 /**
  * A route strategy allowing for explicit route reuse.
  * Used as a workaround for https://github.com/angular/angular/issues/18374
  * To reuse a given route, add `data: { reuse: true }` to the route definition.
  */
+@Injectable()
 export class RouteReusableStrategy extends RouteReuseStrategy {
 
   public shouldDetach(route: ActivatedRouteSnapshot): boolean {

src/app/core/shell/sidenav/sidenav.component.ts

@@ -121,7 +121,9 @@ export class SidenavComponent implements OnInit {
    */
   pushActivity(path: string) {
     const activity = this.frequentActivities.find((entry: any) => entry.path === path);
-    this.mappedActivities.push(activity);
+    if (!this.mappedActivities.includes(activity)) {
+      this.mappedActivities.push(activity);
+    }
   }
 
 }

src/app/core/shell/toolbar/toolbar.component.ts

@@ -1,6 +1,7 @@
 /** Angular Imports */
 import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
-import { MatSidenav, MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
+import { MatSidenav } from '@angular/material/sidenav';
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 import { Router } from '@angular/router';
 

src/app/deposits/fixed-deposits/create-fixed-deposit-account/create-fixed-deposit-account.component.ts

@@ -24,15 +24,15 @@ import { FixedDepositAccountChargesStepComponent } from '../fixed-deposit-accoun
 export class CreateFixedDepositAccountComponent {
 
   /** Fixed Deposits Account Details Step */
-  @ViewChild(FixedDepositAccountDetailsStepComponent) fixedDepositsAccountDetailsStep: FixedDepositAccountDetailsStepComponent;
+  @ViewChild(FixedDepositAccountDetailsStepComponent, { static: true }) fixedDepositsAccountDetailsStep: FixedDepositAccountDetailsStepComponent;
   /** Fixed Deposits Account Currency Step */
-  @ViewChild(FixedDepositAccountCurrencyStepComponent) fixedDepositAccountCurrencyStep: FixedDepositAccountCurrencyStepComponent;
+  @ViewChild(FixedDepositAccountCurrencyStepComponent, { static: true }) fixedDepositAccountCurrencyStep: FixedDepositAccountCurrencyStepComponent;
   /** Fixed Deposits Account Terms Step */
-  @ViewChild(FixedDepositAccountTermsStepComponent) fixedDepositAccountTermsStep: FixedDepositAccountTermsStepComponent;
+  @ViewChild(FixedDepositAccountTermsStepComponent, { static: true }) fixedDepositAccountTermsStep: FixedDepositAccountTermsStepComponent;
   /** Fixed Deposits Account Settings Step */
-  @ViewChild(FixedDepositAccountSettingsStepComponent) fixedDepositAccountSettingsStep: FixedDepositAccountSettingsStepComponent;
+  @ViewChild(FixedDepositAccountSettingsStepComponent, { static: true }) fixedDepositAccountSettingsStep: FixedDepositAccountSettingsStepComponent;
   /** Fixed Deposits Account Charges Step */
-  @ViewChild(FixedDepositAccountChargesStepComponent) fixedDepositAccountChargesStep: FixedDepositAccountChargesStepComponent;
+  @ViewChild(FixedDepositAccountChargesStepComponent, { static: true }) fixedDepositAccountChargesStep: FixedDepositAccountChargesStepComponent;
 
   /** Fixed Deposits Account Template */
   fixedDepositsAccountTemplate: any;

src/app/deposits/fixed-deposits/edit-fixed-deposit-account/edit-fixed-deposit-account.component.ts

@@ -24,15 +24,15 @@ import { FixedDepositAccountChargesStepComponent } from '../fixed-deposit-accoun
 export class EditFixedDepositAccountComponent {
 
   /** Fixed Deposits Account Details Step */
-  @ViewChild(FixedDepositAccountDetailsStepComponent) fixedDepositsAccountDetailsStep: FixedDepositAccountDetailsStepComponent;
+  @ViewChild(FixedDepositAccountDetailsStepComponent, { static: true }) fixedDepositsAccountDetailsStep: FixedDepositAccountDetailsStepComponent;
   /** Fixed Deposits Account Currency Step */
-  @ViewChild(FixedDepositAccountCurrencyStepComponent) fixedDepositAccountCurrencyStep: FixedDepositAccountCurrencyStepComponent;
+  @ViewChild(FixedDepositAccountCurrencyStepComponent, { static: true }) fixedDepositAccountCurrencyStep: FixedDepositAccountCurrencyStepComponent;
   /** Fixed Deposits Account Terms Step */
-  @ViewChild(FixedDepositAccountTermsStepComponent) fixedDepositAccountTermsStep: FixedDepositAccountTermsStepComponent;
+  @ViewChild(FixedDepositAccountTermsStepComponent, { static: true }) fixedDepositAccountTermsStep: FixedDepositAccountTermsStepComponent;
   /** Fixed Deposits Account Settings Step */
-  @ViewChild(FixedDepositAccountSettingsStepComponent) fixedDepositAccountSettingsStep: FixedDepositAccountSettingsStepComponent;
+  @ViewChild(FixedDepositAccountSettingsStepComponent, { static: true }) fixedDepositAccountSettingsStep: FixedDepositAccountSettingsStepComponent;
   /** Fixed Deposits Account Charges Step */
-  @ViewChild(FixedDepositAccountChargesStepComponent) fixedDepositAccountChargesStep: FixedDepositAccountChargesStepComponent;
+  @ViewChild(FixedDepositAccountChargesStepComponent, { static: true }) fixedDepositAccountChargesStep: FixedDepositAccountChargesStepComponent;
 
   /** Fixed Deposits Account Template */
   fixedDepositsAccountAndTemplate: any;

src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-charges-step/fixed-deposit-account-charges-step.component.ts

@@ -1,7 +1,7 @@
 /** Angular Imports */
 import { Component, OnInit, Input, OnChanges } from '@angular/core';
 import { FormControl } from '@angular/forms';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 
 /** Dialog Components */
 import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';

src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-interest-rate-chart-step/fixed-deposit-account-interest-rate-chart-step.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, Input, OnChanges, ViewChild } from '@angular/core';
-import { MatTableDataSource, MatTable } from '@angular/material';
+import { MatTableDataSource, MatTable } from '@angular/material/table';
 import { animate, state, style, transition, trigger } from '@angular/animations';
 
 /**
@@ -37,7 +37,7 @@ export class FixedDepositAccountInterestRateChartStepComponent implements OnChan
   expandChartSlabIndex: number;
 
   /** Interest Rate charts table reference */
-  @ViewChild('chartsTable') chartsTableRef: MatTable<Element>;
+  @ViewChild('chartsTable', { static: true }) chartsTableRef: MatTable<Element>;
 
   constructor() { }
 

src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-terms-step/fixed-deposit-account-terms-step.component.ts

@@ -48,7 +48,7 @@ export class FixedDepositAccountTermsStepComponent implements OnInit, OnChanges
   }
 
   ngOnInit() {
-    if (this.fixedDepositsAccountTemplate) {
+    if (this.fixedDepositsAccountTemplate.interestCompoundingPeriodType) {
       this.fixedDepositAccountTermsForm.patchValue({
         'interestCompoundingPeriodType': this.fixedDepositsAccountTemplate.interestCompoundingPeriodType.id,
         'interestPostingPeriodType': this.fixedDepositsAccountTemplate.interestPostingPeriodType.id,

src/app/deposits/fixed-deposits/fixed-deposit-account-view/charges-tab/charges-tab.component.ts

@@ -1,7 +1,8 @@
 /** Angular Imports */
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { MatDialog, MatTableDataSource, MatTable } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
+import { MatTableDataSource, MatTable } from '@angular/material/table';
 import { DatePipe } from '@angular/common';
 
 /** Custom Services */
@@ -53,7 +54,7 @@ export class ChargesTabComponent implements OnInit {
   ];
 
   /** Charges Table Reference */
-  @ViewChild('chargesTable') chargesTableRef: MatTable<Element>;
+  @ViewChild('chargesTable', { static: true }) chargesTableRef: MatTable<Element>;
 
   /**
    * Retrieves the Fixed Deposits account data from `resolve`.

src/app/deposits/fixed-deposits/fixed-deposit-account-view/custom-dialogs/calculate-interest-dialog/calculate-interest-dialog.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component } from '@angular/core';
-import { MatDialogRef } from '@angular/material';
+import { MatDialogRef } from '@angular/material/dialog';
 
 /**
  * Calculate interest dialog component.

src/app/deposits/fixed-deposits/fixed-deposit-account-view/custom-dialogs/inactivate-charge-dialog/inactivate-charge-dialog.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, Inject } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 
 /**
  * Inactivate charge dialog component.

src/app/deposits/fixed-deposits/fixed-deposit-account-view/custom-dialogs/post-interest-dialog/post-interest-dialog.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component } from '@angular/core';
-import { MatDialogRef } from '@angular/material';
+import { MatDialogRef } from '@angular/material/dialog';
 
 /**
  * Post interest dialog component.

src/app/deposits/fixed-deposits/fixed-deposit-account-view/custom-dialogs/toggle-withhold-tax-dialog/toggle-withhold-tax-dialog.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, Inject } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 
 /**
  * Toggle withhold tax dialog dialog component.

src/app/deposits/fixed-deposits/fixed-deposit-account-view/custom-dialogs/waive-charge-dialog/waive-charge-dialog.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, Inject } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 
 /**
  * Waive charge dialog component.

src/app/deposits/fixed-deposits/fixed-deposit-account-view/datatable-tabs/multi-row/multi-row.component.ts

@@ -2,7 +2,7 @@
 import { Component, OnChanges, OnInit, Input, ViewChild } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { MatTable } from '@angular/material/table';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 import { DatePipe } from '@angular/common';
 
 /** Custom Dialogs */
@@ -44,7 +44,7 @@ export class MultiRowComponent implements OnInit, OnChanges {
   showDeleteBotton: boolean;
 
   /** Data Table Reference */
-  @ViewChild('dataTable') dataTableRef: MatTable<Element>;
+  @ViewChild('dataTable', { static: true }) dataTableRef: MatTable<Element>;
 
   /**
    * Fetches savings account Id from parent route params.

src/app/deposits/fixed-deposits/fixed-deposit-account-view/datatable-tabs/single-row/single-row.component.ts

@@ -1,7 +1,7 @@
 /** Angular Imports */
 import { Component, Input, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 import { DatePipe } from '@angular/common';
 
 /** Custom Components */

src/app/deposits/fixed-deposits/fixed-deposit-account-view/fixed-deposit-account-view.component.ts

@@ -1,7 +1,7 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 
 /** Custom Dialogs */
 import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';

src/app/deposits/fixed-deposits/fixed-deposit-account-view/standing-instructions-tab/standing-instructions-tab.component.ts

@@ -1,6 +1,7 @@
 /** Angular Imports */
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { MatTableDataSource, MatTable, MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
+import { MatTableDataSource, MatTable } from '@angular/material/table';
 import { ActivatedRoute } from '@angular/router';
 
 /** Custom Services */
@@ -38,7 +39,7 @@ export class StandingInstructionsTabComponent implements OnInit {
   ];
 
   /** Instruction Table Reference */
-  @ViewChild('instructionsTable') instructionTableRef: MatTable<Element>;
+  @ViewChild('instructionsTable', { static: true }) instructionTableRef: MatTable<Element>;
 
   /**
    * Retrieves Fixed Deposits Account Data from `resolve`.

src/app/deposits/fixed-deposits/fixed-deposit-account-view/transactions-tab/transactions-tab.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { MatTableDataSource } from '@angular/material';
+import { MatTableDataSource } from '@angular/material/table';
 import { ActivatedRoute, Router } from '@angular/router';
 
 /**

src/app/deposits/fixed-deposits/fixed-deposit-account-view/view-transaction/view-transaction.component.ts

@@ -1,7 +1,7 @@
 /** Angular Imports */
 import { Component } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 
 /**
  * View Transaction Component.

src/app/deposits/fixed-deposits/fixed-deposits-routing.module.ts

@@ -104,7 +104,7 @@ const routes: Routes = [
               },
               {
                 path: 'account-transfers',
-                loadChildren: '../../account-transfers/account-transfers.module#AccountTransfersModule'
+                loadChildren: () => import('../../account-transfers/account-transfers.module').then(m => m.AccountTransfersModule)
               },
               {
                 path: ':id',

src/app/deposits/fixed-deposits/fixed-deposits.module.ts

@@ -88,13 +88,6 @@ import { EditFixedDepositAccountComponent } from './edit-fixed-deposit-account/e
     DirectivesModule,
     FixedDepositsRoutingModule
   ],
-  entryComponents: [
-    PostInterestDialogComponent,
-    CalculateInterestDialogComponent,
-    ToggleWithholdTaxDialogComponent,
-    WaiveChargeDialogComponent,
-    InactivateChargeDialogComponent
-  ],
   providers: [DatePipe]
 })
 export class FixedDepositsModule { }

src/app/deposits/fixed-deposits/fixed-deposits.service.spec.ts

@@ -6,7 +6,7 @@ describe('FixedDepositsService', () => {
   beforeEach(() => TestBed.configureTestingModule({}));
 
   it('should be created', () => {
-    const service: FixedDepositsService = TestBed.get(FixedDepositsService);
+    const service: FixedDepositsService = TestBed.inject(FixedDepositsService);
     expect(service).toBeTruthy();
   });
 });

src/app/deposits/recurring-deposits/create-recurring-deposits-account/create-recurring-deposits-account.component.ts

@@ -24,11 +24,11 @@ import { RecurringDepositsAccountChargesStepComponent } from '../recurring-depos
 export class CreateRecurringDepositsAccountComponent implements OnInit {
 
   /** Imports all the step component */
-  @ViewChild(RecurringDepositsAccountDetailsStepComponent) recurringDepositsAccountDetailsStep: RecurringDepositsAccountDetailsStepComponent;
-  @ViewChild(RecurringDepositsAccountCurrencyStepComponent) recurringDepositAccountCurrencyStep: RecurringDepositsAccountCurrencyStepComponent;
-  @ViewChild(RecurringDepositsAccountTermsStepComponent) recurringDepositAccountTermsStep: RecurringDepositsAccountTermsStepComponent;
-  @ViewChild(RecurringDepositsAccountSettingsStepComponent) recurringDepositAccountSettingsStep: RecurringDepositsAccountSettingsStepComponent;
-  @ViewChild(RecurringDepositsAccountChargesStepComponent) recurringDepositAccountChargesStep: RecurringDepositsAccountChargesStepComponent;
+  @ViewChild(RecurringDepositsAccountDetailsStepComponent, { static: true }) recurringDepositsAccountDetailsStep: RecurringDepositsAccountDetailsStepComponent;
+  @ViewChild(RecurringDepositsAccountCurrencyStepComponent, { static: true }) recurringDepositAccountCurrencyStep: RecurringDepositsAccountCurrencyStepComponent;
+  @ViewChild(RecurringDepositsAccountTermsStepComponent, { static: true }) recurringDepositAccountTermsStep: RecurringDepositsAccountTermsStepComponent;
+  @ViewChild(RecurringDepositsAccountSettingsStepComponent, { static: true }) recurringDepositAccountSettingsStep: RecurringDepositsAccountSettingsStepComponent;
+  @ViewChild(RecurringDepositsAccountChargesStepComponent, { static: true }) recurringDepositAccountChargesStep: RecurringDepositsAccountChargesStepComponent;
 
   /** Recurring Deposits Account Template */
   recurringDepositsAccountTemplate: any;

src/app/deposits/recurring-deposits/edit-recurring-deposit-account/edit-recurring-deposit-account.component.ts

@@ -24,11 +24,11 @@ import { RecurringDepositsAccountChargesStepComponent } from '../recurring-depos
 export class EditRecurringDepositAccountComponent implements OnInit {
 
   /** Imports all the step component */
-  @ViewChild(RecurringDepositsAccountDetailsStepComponent) recurringDepositsAccountDetailsStep: RecurringDepositsAccountDetailsStepComponent;
-  @ViewChild(RecurringDepositsAccountCurrencyStepComponent) recurringDepositAccountCurrencyStep: RecurringDepositsAccountCurrencyStepComponent;
-  @ViewChild(RecurringDepositsAccountTermsStepComponent) recurringDepositAccountTermsStep: RecurringDepositsAccountTermsStepComponent;
-  @ViewChild(RecurringDepositsAccountSettingsStepComponent) recurringDepositAccountSettingsStep: RecurringDepositsAccountSettingsStepComponent;
-  @ViewChild(RecurringDepositsAccountChargesStepComponent) recurringDepositAccountChargesStep: RecurringDepositsAccountChargesStepComponent;
+  @ViewChild(RecurringDepositsAccountDetailsStepComponent, { static: true }) recurringDepositsAccountDetailsStep: RecurringDepositsAccountDetailsStepComponent;
+  @ViewChild(RecurringDepositsAccountCurrencyStepComponent, { static: true }) recurringDepositAccountCurrencyStep: RecurringDepositsAccountCurrencyStepComponent;
+  @ViewChild(RecurringDepositsAccountTermsStepComponent, { static: true }) recurringDepositAccountTermsStep: RecurringDepositsAccountTermsStepComponent;
+  @ViewChild(RecurringDepositsAccountSettingsStepComponent, { static: true }) recurringDepositAccountSettingsStep: RecurringDepositsAccountSettingsStepComponent;
+  @ViewChild(RecurringDepositsAccountChargesStepComponent, { static: true }) recurringDepositAccountChargesStep: RecurringDepositsAccountChargesStepComponent;
 
   /** Recurring Deposits Account And Template */
   recurringDepositsAccountAndTemplate: any;

src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-charges-step/recurring-deposits-account-charges-step.component.ts

@@ -1,7 +1,7 @@
 /** Angular Imports */
 import { Component, OnInit, Input, OnChanges } from '@angular/core';
 import { FormControl } from '@angular/forms';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 
 /** Dialog Components */
 import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';

src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-interest-rate-chart-step/recurring-deposits-account-interest-rate-chart-step.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit, Input, OnChanges, ViewChild } from '@angular/core';
-import { MatTable } from '@angular/material';
+import { MatTable } from '@angular/material/table';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 
 /**
@@ -34,7 +34,7 @@ export class RecurringDepositsAccountInterestRateChartStepComponent implements O
   /** Expand Chart Slab Index used in the view */
   expandChartSlabIndex: number;
 
-  @ViewChild('chartsTable') chartsTableRef: MatTable<Element>;
+  @ViewChild('chartsTable', { static: true }) chartsTableRef: MatTable<Element>;
 
   constructor() {
   }

src/app/deposits/recurring-deposits/recurring-deposits-account-view/charges-tab/charges-tab.component.ts

@@ -1,7 +1,8 @@
 /** Angular Imports */
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { MatDialog, MatTableDataSource, MatTable } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
+import { MatTableDataSource, MatTable } from '@angular/material/table';
 import { DatePipe } from '@angular/common';
 
 /** Custom Services */
@@ -51,7 +52,7 @@ export class ChargesTabComponent implements OnInit {
   ];
 
   /** Charges Table Reference */
-  @ViewChild('chargesTable') chargesTableRef: MatTable<Element>;
+  @ViewChild('chargesTable', { static: true }) chargesTableRef: MatTable<Element>;
 
   /**
    * Retrieves Recurring Deposits Account Data from `resolve`.

src/app/deposits/recurring-deposits/recurring-deposits-account-view/custom-dialogs/recurring-deposit-confirmation-dialog/recurring-deposit-confirmation-dialog.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, Inject } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 
 @Component({
   selector: 'mifosx-recurring-deposit-confirmation-action',

src/app/deposits/recurring-deposits/recurring-deposits-account-view/datatable-tabs/multi-row/multi-row.component.ts

@@ -2,7 +2,7 @@
 import { Component, OnChanges, OnInit, Input, ViewChild } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { MatTable } from '@angular/material/table';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 import { DatePipe } from '@angular/common';
 
 /** Custom Dialogs */
@@ -44,7 +44,7 @@ export class MultiRowComponent implements OnInit, OnChanges {
   showDeleteBotton: boolean;
 
   /** Data Table Reference */
-  @ViewChild('dataTable') dataTableRef: MatTable<Element>;
+  @ViewChild('dataTable', { static: true }) dataTableRef: MatTable<Element>;
 
   /**
    * Fetches savings account Id from parent route params.

src/app/deposits/recurring-deposits/recurring-deposits-account-view/datatable-tabs/single-row/single-row.component.ts

@@ -1,7 +1,7 @@
 /** Angular Imports */
 import { Component, Input, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 import { DatePipe } from '@angular/common';
 
 /** Custom Components */

src/app/deposits/recurring-deposits/recurring-deposits-account-view/recurring-deposits-account-view.component.ts

@@ -1,7 +1,7 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 import { DatePipe } from '@angular/common';
 
 /** Custom Services */

src/app/deposits/recurring-deposits/recurring-deposits-account-view/standing-instructions-tab/standing-instructions-tab.component.ts

@@ -1,6 +1,7 @@
 /** Angular Imports */
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { MatTableDataSource, MatTable, MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
+import { MatTableDataSource, MatTable } from '@angular/material/table';
 import { ActivatedRoute } from '@angular/router';
 
 /** Custom Services */
@@ -30,7 +31,7 @@ export class StandingInstructionsTabComponent implements OnInit {
   displayedColumns: string[] = ['client', 'fromAccount', 'beneficiary', 'toAccount', 'amount', 'validity', 'actions'];
 
   /** Instruction Table Reference */
-  @ViewChild('instructionsTable') instructionTableRef: MatTable<Element>;
+  @ViewChild('instructionsTable', { static: true }) instructionTableRef: MatTable<Element>;
 
   /**
    * Retrieves Recurring Deposits Account Data from `resolve`.

src/app/deposits/recurring-deposits/recurring-deposits-account-view/transactions-tab/transactions-tab.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { MatTableDataSource } from '@angular/material';
+import { MatTableDataSource } from '@angular/material/table';
 import { ActivatedRoute, Router } from '@angular/router';
 
 /**

src/app/deposits/recurring-deposits/recurring-deposits-account-view/transactions-tab/view-transaction/view-transaction.component.ts

@@ -1,7 +1,7 @@
 /** Angular Imports */
 import { Component } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 import { DatePipe } from '@angular/common';
 
 /** Custom Services */

src/app/deposits/recurring-deposits/recurring-deposits-routing.module.ts

@@ -134,7 +134,7 @@ const routes: Routes = [
                   },
                   {
                     path: 'account-transfers',
-                    loadChildren: '../../account-transfers/account-transfers.module#AccountTransfersModule'
+                    loadChildren: () => import('../../account-transfers/account-transfers.module').then(m => m.AccountTransfersModule)
                   }
                 ]
               }
@@ -162,7 +162,7 @@ const routes: Routes = [
         children: [
           {
             path: 'standing-instructions',
-            loadChildren: '../../account-transfers/account-transfers.module#AccountTransfersModule'
+            loadChildren: () => import('../../account-transfers/account-transfers.module').then(m => m.AccountTransfersModule)
           },
         ]
       }

src/app/deposits/recurring-deposits/recurring-deposits.module.ts

@@ -86,9 +86,6 @@ import { RecurringDepositConfirmationDialogComponent } from './recurring-deposit
     ViewTransactionComponent,
     EditTransactionComponent
   ],
-  entryComponents: [
-    RecurringDepositConfirmationDialogComponent
-  ],
   providers: [DatePipe]
 })
 export class RecurringDepositsModule {}

src/app/deposits/recurring-deposits/recurring-deposits.service.spec.ts

@@ -6,7 +6,7 @@ describe('RecurringDepositsService', () => {
   beforeEach(() => TestBed.configureTestingModule({}));
 
   it('should be created', () => {
-    const service: RecurringDepositsService = TestBed.get(RecurringDepositsService);
+    const service: RecurringDepositsService = TestBed.inject(RecurringDepositsService);
     expect(service).toBeTruthy();
   });
 });

src/app/groups/groups-routing.module.ts

@@ -135,7 +135,7 @@ const routes: Routes = [
             },
             {
               path: 'savingsaccounts',
-              loadChildren: '../savings/savings.module#SavingsModule'
+              loadChildren: () => import('../savings/savings.module').then(m => m.SavingsModule)
             },
           ]
         }

src/app/groups/groups-view/committee-tab/committee-tab.component.ts

@@ -1,7 +1,8 @@
 /** Angular Imports */
 import { Component, ViewChild } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { MatDialog, MatTable } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
+import { MatTable } from '@angular/material/table';
 
 /** Custom Dialogs */
 import { UnassignRoleDialogComponent } from '../custom-dialogs/unassign-role-dialog/unassign-role-dialog.component';

src/app/groups/groups-view/custom-dialogs/unassign-role-dialog/unassign-role-dialog.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, Inject } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 
 /**
  * Unassign role dialog component.

src/app/groups/groups-view/custom-dialogs/unassign-staff-dialog/unassign-staff-dialog.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, Inject } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 
 /**
  * Unassign staff dialog component.

src/app/groups/groups-view/datatable-tabs/multi-row/multi-row.component.ts

@@ -2,7 +2,7 @@
 import { Component, OnChanges, OnInit, Input, ViewChild } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { MatTable } from '@angular/material/table';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 import { DatePipe } from '@angular/common';
 
 /** Custom Dialogs */
@@ -44,7 +44,7 @@ export class MultiRowComponent implements OnInit, OnChanges {
   showDeleteBotton: boolean;
 
   /** Data Table Reference */
-  @ViewChild('dataTable') dataTableRef: MatTable<Element>;
+  @ViewChild('dataTable', { static: true }) dataTableRef: MatTable<Element>;
 
   /**
    * Fetches group Id from parent route params.

src/app/groups/groups-view/datatable-tabs/single-row/single-row.component.ts

@@ -1,7 +1,7 @@
 /** Angular Imports */
 import { Component, Input, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 import { DatePipe } from '@angular/common';
 
 /** Custom Components */

src/app/groups/groups-view/group-actions/group-attendance/group-attendance.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 import { DatePipe } from '@angular/common';
 import { ActivatedRoute, Router } from '@angular/router';
 import { FormControl } from '@angular/forms';