Update angular

package.json

@@ -24,42 +24,42 @@
     "e2e": "ng e2e"
   },
   "dependencies": {
-    "@angular/animations": "^8.2.8",
-    "@angular/cdk": "^8.2.1",
-    "@angular/common": "^8.2.8",
-    "@angular/compiler": "^8.2.8",
-    "@angular/core": "^8.2.8",
-    "@angular/flex-layout": "^8.0.0-beta.27",
-    "@angular/forms": "^8.2.8",
-    "@angular/material": "^8.2.1",
-    "@angular/platform-browser": "^8.2.8",
-    "@angular/platform-browser-dynamic": "^8.2.8",
-    "@angular/router": "^8.2.8",
-    "core-js": "^3.2.1",
+    "@angular/animations": "^11.0.5",
+    "@angular/cdk": "^11.0.3",
+    "@angular/common": "^11.0.5",
+    "@angular/compiler": "^11.0.5",
+    "@angular/core": "^11.0.5",
+    "@angular/flex-layout": "^11.0.0-beta.33",
+    "@angular/forms": "^11.0.5",
+    "@angular/material": "^11.0.3",
+    "@angular/platform-browser": "^11.0.5",
+    "@angular/platform-browser-dynamic": "^11.0.5",
+    "@angular/router": "^11.0.5",
+    "core-js": "^3.8.1",
     "hammerjs": "^2.0.8",
-    "rxjs": "^6.5.3",
-    "zone.js": "^0.9.1"
+    "rxjs": "^6.6.3",
+    "zone.js": "^0.10.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.803.6",
-    "@angular/cli": "~8.3.6",
-    "@angular/compiler-cli": "^8.2.8",
-    "@angular/language-service": "^8.2.8",
-    "@types/jasmine": "~3.4.1",
-    "@types/jasminewd2": "~2.0.7",
-    "@types/node": "~12.7.8",
-    "codelyzer": "~5.1.2",
-    "jasmine-core": "~3.5.0",
-    "jasmine-spec-reporter": "~4.2.1",
-    "karma": "~4.3.0",
+    "@angular-devkit/build-angular": "~0.1100.5",
+    "@angular/cli": "~11.0.5",
+    "@angular/compiler-cli": "^11.0.5",
+    "@angular/language-service": "^11.0.5",
+    "@types/jasmine": "~3.6.2",
+    "@types/jasminewd2": "~2.0.8",
+    "@types/node": "~14.14.16",
+    "codelyzer": "~6.0.1",
+    "jasmine-core": "~3.6.0",
+    "jasmine-spec-reporter": "~6.0.0",
+    "karma": "~5.2.3",
     "karma-chrome-launcher": "~3.1.0",
-    "karma-coverage-istanbul-reporter": "~2.1.0",
-    "karma-jasmine": "~2.0.1",
-    "karma-jasmine-html-reporter": "^1.4.2",
-    "protractor": "~5.4.2",
-    "ts-node": "~8.4.1",
-    "tslint": "~5.20.0",
-    "typescript": "~3.5.0"
+    "karma-coverage-istanbul-reporter": "~3.0.3",
+    "karma-jasmine": "~4.0.1",
+    "karma-jasmine-html-reporter": "^1.5.4",
+    "protractor": "~7.0.0",
+    "ts-node": "~9.1.1",
+    "tslint": "~6.1.3",
+    "typescript": "~4.0.5"
   },
   "private": true
 }

src/app/app.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
-import { MatSlideToggleChange, MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
+import { MatSlideToggleChange } from '@angular/material/slide-toggle';
 
 import { State } from './responses';
 import { OpenLPService } from './openlp.service';

src/app/app.module.ts

@@ -2,12 +2,15 @@ import { BrowserModule, Title } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { NgModule } from '@angular/core';
 
-import { MatButtonModule, MatButtonToggleModule } from '@angular/material';
-import { MatCardModule, MatDialogModule, MatSnackBarModule } from '@angular/material';
+import { MatButtonModule } from '@angular/material/button';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatCardModule } from '@angular/material/card';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatGridListModule } from '@angular/material/grid-list';
 import { MatIconModule } from '@angular/material/icon';
-import { MatInputModule } from '@angular/material';
+import { MatInputModule } from '@angular/material/input';
 import { MatListModule } from '@angular/material/list';
 import { MatSelectModule } from '@angular/material/select';
 import { MatSidenavModule } from '@angular/material/sidenav';

src/app/components/alert/alert.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { MatSnackBar } from '@angular/material';
+import { MatSnackBar } from '@angular/material/snack-bar';
 
 import { PageTitleService } from '../../page-title.service';
 import { OpenLPService } from '../../openlp.service';

src/app/components/chord-view/chordpro.pipe.ts

@@ -10,7 +10,7 @@
  * @licence Use this in any way you like, with no constraints.
  */
 import { Pipe, PipeTransform } from '@angular/core';
-import { MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY } from '@angular/material';
+import { MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY } from '@angular/material/autocomplete';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 
 @Pipe({ name: 'chordpro' })

src/app/components/login/login.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { Credentials } from '../../responses';
-import { MatDialogRef, MatSnackBar } from '@angular/material';
+import { MatDialogRef } from '@angular/material/dialog';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { OpenLPService } from '../../openlp.service';
 
 @Component({

src/app/components/themes/themes.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { MatSlideToggleChange } from '@angular/material';
+import { MatSlideToggleChange } from '@angular/material/slide-toggle';
 
 import { OpenLPService } from '../../openlp.service';
 import { PageTitleService } from '../../page-title.service';