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

Plus ElementRefs are now optional as they cannot be initialized

overlord/src/app/profit-loss/profit-loss-datasource.ts

@@ -1,30 +1,36 @@
 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 } from 'rxjs/operators';
 
 import { ProfitLossItem } from './profit-loss-item';
 
 /** Simple sort comparator for example ID/Name columns (for client-side sorting). */
-function compare(a, b, isAsc) {
+function compare(a: string | number, b: string | number, isAsc: boolean) {
   return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
 }
-
 export class ProfitLossDataSource extends DataSource<ProfitLossItem> {
   constructor(
-    private paginator: MatPaginator,
-    private sort: MatSort,
     public data: ProfitLossItem[],
+    private paginator?: MatPaginator,
+    private sort?: MatSort,
   ) {
     super();
   }
 
   connect(): Observable<ProfitLossItem[]> {
-    const dataMutations = [observableOf(this.data), this.paginator.page, this.sort.sortChange];
+    const dataMutations: (
+      | Observable<ProfitLossItem[]>
+      | EventEmitter<PageEvent>
+      | EventEmitter<Sort>
+    )[] = [observableOf(this.data)];
+    if (this.paginator) dataMutations.push((this.paginator as MatPaginator).page);
+    if (this.sort) dataMutations.push((this.sort as MatSort).sortChange);
 
     // Set the paginators length
-    this.paginator.length = this.data.length;
+    if (this.paginator) this.paginator.length = this.data.length;
 
     return merge(...dataMutations).pipe(
       map(() => this.getPagedData(this.getSortedData([...this.data]))),
@@ -34,18 +40,21 @@ export class ProfitLossDataSource extends DataSource<ProfitLossItem> {
   disconnect() {}
 
   private getPagedData(data: ProfitLossItem[]) {
+    if (this.paginator === undefined) return data;
     const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
     return data.splice(startIndex, this.paginator.pageSize);
   }
 
   private getSortedData(data: ProfitLossItem[]) {
+    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 'group':
           return compare(a.group, b.group, isAsc);
         case 'name':

overlord/src/app/profit-loss/profit-loss.component.ts

@@ -14,8 +14,8 @@ import { ProfitLossDataSource } from './profit-loss-datasource';
   styleUrls: ['./profit-loss.component.css'],
 })
 export class ProfitLossComponent implements OnInit {
-  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
-  @ViewChild(MatSort, { static: true }) sort: MatSort;
+  @ViewChild(MatPaginator, { static: true }) paginator?: MatPaginator;
+  @ViewChild(MatSort, { static: true }) sort?: MatSort;
   dataSource: ProfitLossDataSource;
   form: FormGroup;
   info: ProfitLoss;