Chore: Upgraded to Angular, Angular Material and Angular Flex layout 8.0

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

@@ -6,7 +6,7 @@ import {Account} from '../account';
 import {AccountType} from '../account-type';
 import {CostCentre} from '../../cost-centre/cost-centre';
 import {ConfirmDialogComponent} from '../../shared/confirm-dialog/confirm-dialog.component';
-import {MatDialog} from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 import {FormBuilder, FormGroup} from '@angular/forms';
 
 @Component({
@@ -15,7 +15,7 @@ import {FormBuilder, FormGroup} from '@angular/forms';
   styleUrls: ['./account-detail.component.css']
 })
 export class AccountDetailComponent implements OnInit, AfterViewInit {
-  @ViewChild('nameElement') 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,5 +1,6 @@
 import {DataSource} from '@angular/cdk/collections';
-import {MatPaginator, MatSort} from '@angular/material';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
 import {map, tap} from 'rxjs/operators';
 import {merge, Observable, of as observableOf} from 'rxjs';
 import {Account} from '../account';

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

@@ -1,5 +1,6 @@
 import {AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core';
-import {MatPaginator, MatSort} from '@angular/material';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
 import {AccountListDataSource} from './account-list-datasource';
 import {Account} from '../account';
 import {ActivatedRoute} from '@angular/router';
@@ -13,9 +14,9 @@ import {debounceTime, distinctUntilChanged, startWith} from 'rxjs/operators';
   styleUrls: ['./account-list.component.css']
 })
 export class AccountListComponent implements OnInit, AfterViewInit {
-  @ViewChild('filterElement') filterElement: ElementRef;
-  @ViewChild(MatPaginator) paginator: MatPaginator;
-  @ViewChild(MatSort) 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;

overlord/src/app/account/account.module.ts

@@ -4,19 +4,17 @@ import {CommonModule} from '@angular/common';
 import {AccountListComponent} from './account-list/account-list.component';
 import {AccountDetailComponent} from './account-detail/account-detail.component';
 import {AccountRoutingModule} from './account-routing.module';
-import {
-  MatButtonModule,
-  MatCardModule,
-  MatCheckboxModule,
-  MatIconModule,
-  MatInputModule,
-  MatOptionModule,
-  MatPaginatorModule,
-  MatProgressSpinnerModule,
-  MatSelectModule,
-  MatSortModule,
-  MatTableModule
-} from '@angular/material';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatOptionModule } from '@angular/material/core';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSortModule } from '@angular/material/sort';
+import { MatTableModule } from '@angular/material/table';
 import {CdkTableModule} from '@angular/cdk/table';
 import {ReactiveFormsModule} from '@angular/forms';
 import {FlexLayoutModule} from '@angular/flex-layout';