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

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

@@ -5,7 +5,7 @@ import {Client} from '../client';
 import {ActivatedRoute, Router} from '@angular/router';
 import {ToasterService} from '../../core/toaster.service';
 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({
@@ -14,7 +14,7 @@ import {FormBuilder, FormGroup} from '@angular/forms';
   styleUrls: ['./client-detail.component.css']
 })
 export class ClientDetailComponent implements OnInit, AfterViewInit {
-  @ViewChild('nameElement') nameElement: ElementRef;
+  @ViewChild('nameElement', { static: true }) nameElement: ElementRef;
   form: FormGroup;
   item: Client;
 

overlord/src/app/client/client-list/client-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} from 'rxjs/operators';
 import {merge, Observable, of as observableOf} from 'rxjs';
 import {Client} from '../client';

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

@@ -1,5 +1,6 @@
 import {Component, OnInit, ViewChild} from '@angular/core';
-import {MatPaginator, MatSort} from '@angular/material';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
 import {ClientListDataSource} from './client-list-datasource';
 import {Client} from '../client';
 import {ActivatedRoute} from '@angular/router';
@@ -10,8 +11,8 @@ import {ActivatedRoute} from '@angular/router';
   styleUrls: ['./client-list.component.css']
 })
 export class ClientListComponent implements OnInit {
-  @ViewChild(MatPaginator) paginator: MatPaginator;
-  @ViewChild(MatSort) sort: MatSort;
+  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
+  @ViewChild(MatSort, { static: true }) sort: MatSort;
   dataSource: ClientListDataSource;
   list: Client[];
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */

overlord/src/app/client/client.module.ts

@@ -4,17 +4,15 @@ import {CommonModule} from '@angular/common';
 import {ClientListComponent} from './client-list/client-list.component';
 import {ClientDetailComponent} from './client-detail/client-detail.component';
 import {ClientRoutingModule} from './client-routing.module';
-import {
-  MatButtonModule,
-  MatCardModule,
-  MatCheckboxModule,
-  MatIconModule,
-  MatInputModule,
-  MatPaginatorModule,
-  MatProgressSpinnerModule,
-  MatSortModule,
-  MatTableModule
-} from '@angular/material';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+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 { MatSortModule } from '@angular/material/sort';
+import { MatTableModule } from '@angular/material/table';
 import {CdkTableModule} from '@angular/cdk/table';
 import {SharedModule} from '../shared/shared.module';
 import {FlexLayoutModule} from '@angular/flex-layout';