All datasources done. Now to wire them up in the components.

Plus ElementRefs are now optional as they cannot be initialized

overlord/src/app/account/account-detail/account-detail.component.ts

@@ -16,7 +16,7 @@ import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dial
   styleUrls: ['./account-detail.component.css'],
 })
 export class AccountDetailComponent implements OnInit, AfterViewInit {
-  @ViewChild('nameElement', { static: true }) nameElement: ElementRef;
+  @ViewChild('nameElement', { static: true }) nameElement?: ElementRef;
   form: FormGroup;
   accountTypes: AccountType[];
   costCentres: CostCentre[];

overlord/src/app/account/account-list/account-list-datasource.ts

@@ -1,24 +1,24 @@
 import { DataSource } from '@angular/cdk/collections';
-import { MatPaginator } from '@angular/material/paginator';
-import { MatSort } from '@angular/material/sort';
+import { EventEmitter } from '@angular/core';
+import { MatPaginator, PageEvent } from '@angular/material/paginator';
+import { MatSort, Sort } from '@angular/material/sort';
 import { merge, Observable, of as observableOf } from 'rxjs';
 import { map, tap } from 'rxjs/operators';
 
 import { Account } from '../../core/account';
 
 /** Simple sort comparator for example ID/Name columns (for client-side sorting). */
-function compare(a, b, isAsc) {
+function compare(a: string | number | boolean, b: string | number | boolean, isAsc: boolean) {
   return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
 }
-
 export class AccountListDataSource extends DataSource<Account> {
-  private filterValue: string;
+  private filterValue: string = "";
 
   constructor(
-    private paginator: MatPaginator,
-    private sort: MatSort,
-    private filter: Observable<string>,
     public data: Account[],
+    private filter: Observable<string>,
+    private paginator?: MatPaginator,
+    private sort?: MatSort,
   ) {
     super();
     this.filter = filter.pipe(
@@ -29,18 +29,20 @@ export class AccountListDataSource extends DataSource<Account> {
   }
 
   connect(): Observable<Account[]> {
-    const dataMutations = [
-      observableOf(this.data),
-      this.filter,
-      this.paginator.page,
-      this.sort.sortChange,
-    ];
+    const dataMutations: (
+      | Observable<Account[]>
+      | Observable<string>
+      | EventEmitter<PageEvent>
+      | EventEmitter<Sort>
+    )[] = [observableOf(this.data), this.filter];
+    if (this.paginator) dataMutations.push((this.paginator as MatPaginator).page);
+    if (this.sort) dataMutations.push((this.sort as MatSort).sortChange);
 
     return merge(...dataMutations)
       .pipe(
         map(() => this.getFilteredData([...this.data])),
         tap((x: Account[]) => {
-          this.paginator.length = x.length;
+          if (this.paginator) this.paginator.length = x.length;
         }),
       )
       .pipe(map((x: any) => this.getPagedData(this.getSortedData(x))));
@@ -49,8 +51,7 @@ export class AccountListDataSource extends DataSource<Account> {
   disconnect() {}
 
   private getFilteredData(data: Account[]): Account[] {
-    const filter = this.filterValue === undefined ? '' : this.filterValue;
-    return filter.split(' ').reduce(
+    return this.filterValue.split(' ').reduce(
       (p: Account[], c: string) =>
         p.filter((x) => {
           const accountString = `${x.name} ${x.type} ${x.costCentre}${
@@ -63,30 +64,31 @@ export class AccountListDataSource extends DataSource<Account> {
   }
 
   private getPagedData(data: Account[]) {
+    if (this.paginator === undefined) return data;
     const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
     return data.splice(startIndex, this.paginator.pageSize);
   }
 
   private getSortedData(data: Account[]) {
+    if (this.sort === undefined) return data;
     if (!this.sort.active || this.sort.direction === '') {
       return data;
     }
 
+    const sort = this.sort as MatSort;
     return data.sort((a, b) => {
-      const isAsc = this.sort.direction === 'asc';
-      switch (this.sort.active) {
+      const isAsc = sort.direction === 'asc';
+      switch (sort.active) {
         case 'name':
           return compare(a.name, b.name, isAsc);
         case 'type':
-          return compare(a.type, b.type, isAsc);
+          return compare(a.type.name, b.type.name, isAsc);
         case 'isActive':
           return compare(a.isActive, b.isActive, isAsc);
         case 'isReconcilable':
           return compare(a.isReconcilable, b.isReconcilable, isAsc);
         case 'costCentre':
-          return compare(a.costCentre, b.costCentre, isAsc);
-        case 'id':
-          return compare(+a.id, +b.id, isAsc);
+          return compare(a.costCentre.name, b.costCentre.name, isAsc);
         default:
           return 0;
       }

overlord/src/app/account/account-list/account-list.component.ts

@@ -16,9 +16,9 @@ import { AccountListDataSource } from './account-list-datasource';
   styleUrls: ['./account-list.component.css'],
 })
 export class AccountListComponent implements OnInit, AfterViewInit {
-  @ViewChild('filterElement', { static: true }) filterElement: ElementRef;
-  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
-  @ViewChild(MatSort, { static: true }) sort: MatSort;
+  @ViewChild('filterElement', { static: true }) filterElement?: ElementRef;
+  @ViewChild(MatPaginator, { static: true }) paginator?: MatPaginator;
+  @ViewChild(MatSort, { static: true }) sort?: MatSort;
   dataSource: AccountListDataSource;
   filter: Observable<string>;
   form: FormGroup;