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

Plus ElementRefs are now optional as they cannot be initialized

overlord/src/app/trial-balance/trial-balance.component.ts

@@ -14,11 +14,11 @@ import { TrialBalanceDataSource } from './trial-balance-datasource';
   styleUrls: ['./trial-balance.component.css'],
 })
 export class TrialBalanceComponent implements OnInit {
-  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
-  @ViewChild(MatSort, { static: true }) sort: MatSort;
-  dataSource: TrialBalanceDataSource;
+  @ViewChild(MatPaginator, { static: true }) paginator?: MatPaginator;
+  @ViewChild(MatSort, { static: true }) sort?: MatSort;
+  info: TrialBalance = new TrialBalance();
+  dataSource: TrialBalanceDataSource = new TrialBalanceDataSource(this.info.body);
   form: FormGroup;
-  info: TrialBalance;
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
   displayedColumns = ['type', 'name', 'debit', 'credit'];
 
@@ -37,7 +37,7 @@ export class TrialBalanceComponent implements OnInit {
         date: moment(this.info.date, 'DD-MMM-YYYY').toDate(),
       });
     });
-    this.dataSource = new TrialBalanceDataSource(this.paginator, this.sort, this.info.body);
+    this.dataSource = new TrialBalanceDataSource(this.info.body, this.paginator, this.sort);
   }
 
   show() {
@@ -48,8 +48,8 @@ export class TrialBalanceComponent implements OnInit {
   getInfo(): TrialBalance {
     const formModel = this.form.value;
 
-    return {
+    return new TrialBalance({
       date: moment(formModel.date).format('DD-MMM-YYYY'),
-    };
+    });
   }
 }