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

Plus ElementRefs are now optional as they cannot be initialized

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

@@ -14,7 +14,7 @@ import { RoleService } from '../role.service';
   styleUrls: ['./role-detail.component.css'],
 })
 export class RoleDetailComponent implements OnInit, AfterViewInit {
-  @ViewChild('nameElement', { static: true }) nameElement: ElementRef;
+  @ViewChild('nameElement', { static: true }) nameElement?: ElementRef;
   form: FormGroup;
   item: Role;
 

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

@@ -1,26 +1,30 @@
 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 { Role } from '../role';
 
 /** 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 RoleListDatasource extends DataSource<Role> {
-  constructor(private paginator: MatPaginator, private sort: MatSort, public data: Role[]) {
+  constructor(public data: Role[], private paginator?: MatPaginator, private sort?: MatSort) {
     super();
   }
 
   connect(): Observable<Role[]> {
-    const dataMutations = [observableOf(this.data), this.paginator.page, this.sort.sortChange];
+    const dataMutations: (Observable<Role[]> | 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]))),
@@ -30,18 +34,21 @@ export class RoleListDatasource extends DataSource<Role> {
   disconnect() {}
 
   private getPagedData(data: Role[]) {
+    if (this.paginator === undefined) return data;
     const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
     return data.splice(startIndex, this.paginator.pageSize);
   }
 
   private getSortedData(data: Role[]) {
+    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 'id':

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

@@ -13,8 +13,8 @@ import { RoleListDatasource } from './role-list-datasource';
   styleUrls: ['./role-list.component.css'],
 })
 export class RoleListComponent 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: RoleListDatasource;
   list: Role[];
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */