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

Plus ElementRefs are now optional as they cannot be initialized

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

@@ -16,7 +16,7 @@ import { EmployeeService } from '../employee.service';
   styleUrls: ['./employee-detail.component.css'],
 })
 export class EmployeeDetailComponent implements OnInit, AfterViewInit {
-  @ViewChild('nameElement', { static: true }) nameElement: ElementRef;
+  @ViewChild('nameElement', { static: true }) nameElement?: ElementRef;
   form: FormGroup;
   costCentres: CostCentre[];
   item: Employee;

overlord/src/app/employee/employee-list/employee-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 { Employee } from '../employee';
 
 /** 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 EmployeeListDataSource extends DataSource<Employee> {
-  private filterValue: string;
+  private filterValue: string = "";
 
   constructor(
-    private paginator: MatPaginator,
-    private sort: MatSort,
-    private filter: Observable<string>,
     public data: Employee[],
+    private filter: Observable<string>,
+    private paginator?: MatPaginator,
+    private sort?: MatSort,
   ) {
     super();
     this.filter = filter.pipe(
@@ -29,18 +29,20 @@ export class EmployeeListDataSource extends DataSource<Employee> {
   }
 
   connect(): Observable<Employee[]> {
-    const dataMutations = [
-      observableOf(this.data),
-      this.filter,
-      this.paginator.page,
-      this.sort.sortChange,
-    ];
+    const dataMutations: (
+      | Observable<Employee[]>
+      | 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: Employee[]) => {
-          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 EmployeeListDataSource extends DataSource<Employee> {
   disconnect() {}
 
   private getFilteredData(data: Employee[]): Employee[] {
-    const filter = this.filterValue === undefined ? '' : this.filterValue;
-    return filter.split(' ').reduce(
+    return this.filterValue.split(' ').reduce(
       (p: Employee[], c: string) =>
         p.filter((x) => {
           const employeeString = `${x.code} ${x.name} ${x.designation} ${x.costCentre}${
@@ -63,18 +64,21 @@ export class EmployeeListDataSource extends DataSource<Employee> {
   }
 
   private getPagedData(data: Employee[]) {
+    if (this.paginator === undefined) return data;
     const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
     return data.splice(startIndex, this.paginator.pageSize);
   }
 
   private getSortedData(data: Employee[]) {
+    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 'code':
           return compare(+a.code, +b.code, isAsc);
         case 'name':
@@ -86,11 +90,11 @@ export class EmployeeListDataSource extends DataSource<Employee> {
         case 'points':
           return compare(a.points, b.points, isAsc);
         case 'department':
-          return compare(a.costCentre, b.costCentre, isAsc);
+          return compare(a.costCentre.name, b.costCentre.name, isAsc);
         case 'joiningDate':
           return compare(a.joiningDate, b.joiningDate, isAsc);
         case 'leavingDate':
-          return compare(a.leavingDate, b.leavingDate, isAsc);
+          return compare(a.leavingDate || "", b.leavingDate || "", isAsc);
         default:
           return 0;
       }

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

@@ -17,9 +17,9 @@ import { EmployeeListDataSource } from './employee-list-datasource';
   styleUrls: ['./employee-list.component.css'],
 })
 export class EmployeeListComponent 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: EmployeeListDataSource;
   filter: Observable<string>;
   form: FormGroup;

overlord/src/app/employee/employee.ts

@@ -1,7 +1,7 @@
 import { CostCentre } from '../core/cost-centre';
 
 export class Employee {
-  id: string;
+  id: string | undefined;
   code: number;
   name: string;
   isStarred: boolean;
@@ -12,4 +12,18 @@ export class Employee {
   joiningDate: string;
   leavingDate?: string;
   costCentre: CostCentre;
+
+
+  public constructor(init?: Partial<Employee>) {
+    this.code = 0;
+    this.name = "";
+    this.isStarred = false;
+    this.isActive = true;
+    this.designation = "";
+    this.salary = 0;
+    this.points = 0;
+    this.joiningDate = "";
+    this.costCentre = new CostCentre();
+    Object.assign(this, init);
+  }
 }