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

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

@@ -5,7 +5,7 @@ import {UserService} from '../user.service';
 import {User} from '../user';
 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 {FormArray, FormBuilder, FormGroup} from '@angular/forms';
 import {Account} from "../../account/account";
 
@@ -15,7 +15,7 @@ import {Account} from "../../account/account";
   styleUrls: ['./user-detail.component.css']
 })
 export class UserDetailComponent implements OnInit, AfterViewInit {
-  @ViewChild('nameElement') nameElement: ElementRef;
+  @ViewChild('nameElement', { static: true }) nameElement: ElementRef;
   form: FormGroup;
   item: User;
   hide: boolean;

overlord/src/app/user/user-list/user-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 {User} from '../user';

overlord/src/app/user/user-list/user-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 {UserListDataSource} from './user-list-datasource';
 import {User} from '../user';
 import {ActivatedRoute} from '@angular/router';
@@ -10,8 +11,8 @@ import {ActivatedRoute} from '@angular/router';
   styleUrls: ['./user-list.component.css']
 })
 export class UserListComponent implements OnInit {
-  @ViewChild(MatPaginator) paginator: MatPaginator;
-  @ViewChild(MatSort) sort: MatSort;
+  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
+  @ViewChild(MatSort, { static: true }) sort: MatSort;
   dataSource: UserListDataSource;
   list: User[];
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */

overlord/src/app/user/user.module.ts

@@ -4,18 +4,16 @@ import {CommonModule} from '@angular/common';
 import {UserListComponent} from './user-list/user-list.component';
 import {UserDetailComponent} from './user-detail/user-detail.component';
 import {UserRoutingModule} from './user-routing.module';
-import {
-  MatButtonModule,
-  MatCardModule,
-  MatCheckboxModule,
-  MatDividerModule,
-  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 { MatDividerModule } from '@angular/material/divider';
+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 {ReactiveFormsModule} from '@angular/forms';
 import {SharedModule} from '../shared/shared.module';