Disabled Angular compiler checks to disable the warnings until we fix them

Various small fixes

README.md

@@ -1,6 +1,6 @@
 # Fuse - Angular
 
-Material Design Admin Template with Angular 7+ and Angular Material
+Material Design Admin Template with Angular 8 and Angular Material
 
 ## The Community
 

angular.json

@@ -4,24 +4,24 @@
     "newProjectRoot": "projects",
     "projects": {
         "fuse": {
-            "root": "",
-            "sourceRoot": "src",
             "projectType": "application",
-            "prefix": "app",
             "schematics": {
                 "@schematics/angular:component": {
-                    "styleext": "scss"
+                    "style": "scss"
                 }
             },
+            "root": "",
+            "sourceRoot": "src",
+            "prefix": "app",
             "architect": {
                 "build": {
                     "builder": "@angular-devkit/build-angular:browser",
                     "options": {
-                        "outputPath": "dist",
+                        "outputPath": "dist/fuse",
                         "index": "src/index.html",
                         "main": "src/main.ts",
                         "polyfills": "src/polyfills.ts",
-                        "tsConfig": "src/tsconfig.app.json",
+                        "tsConfig": "tsconfig.app.json",
                         "assets": [
                             "src/favicon.ico",
                             "src/assets",
@@ -53,8 +53,8 @@
                             "budgets": [
                                 {
                                     "type": "initial",
-                                    "maximumWarning": "2mb",
+                                    "maximumWarning": "4mb",
-                                    "maximumError": "5mb"
+                                    "maximumError": "6mb"
                                 }
                             ]
                         },
@@ -101,24 +101,25 @@
                     "options": {
                         "main": "src/test.ts",
                         "polyfills": "src/polyfills.ts",
-                        "tsConfig": "src/tsconfig.spec.json",
+                        "tsConfig": "tsconfig.spec.json",
-                        "karmaConfig": "src/karma.conf.js",
+                        "karmaConfig": "karma.conf.js",
-                        "styles": [
-                            "src/styles.scss"
-                        ],
-                        "scripts": [],
                         "assets": [
                             "src/favicon.ico",
                             "src/assets"
-                        ]
+                        ],
+                        "styles": [
+                            "src/styles.scss"
+                        ],
+                        "scripts": []
                     }
                 },
                 "lint": {
                     "builder": "@angular-devkit/build-angular:tslint",
                     "options": {
                         "tsConfig": [
-                            "src/tsconfig.app.json",
+                            "tsconfig.app.json",
-                            "src/tsconfig.spec.json"
+                            "tsconfig.spec.json",
+                            "e2e/tsconfig.json"
                         ],
                         "exclude": [
                             "**/node_modules/**",
@@ -126,14 +127,7 @@
                             "**/src/assets/angular-material-examples/**/*"
                         ]
                     }
-                }
+                },
-            }
-        },
-        "fuse-e2e": {
-            "root": "e2e/",
-            "projectType": "application",
-            "prefix": "",
-            "architect": {
                 "e2e": {
                     "builder": "@angular-devkit/build-angular:protractor",
                     "options": {
@@ -145,17 +139,6 @@
                             "devServerTarget": "fuse:serve:production"
                         }
                     }
-                },
-                "lint": {
-                    "builder": "@angular-devkit/build-angular:tslint",
-                    "options": {
-                        "tsConfig": "e2e/tsconfig.e2e.json",
-                        "exclude": [
-                            "**/node_modules/**",
-                            "**/src/app/fake-db/**/*",
-                            "**/src/assets/angular-material-examples/**/*"
-                        ]
-                    }
                 }
             }
         }

browserslist

@@ -0,0 +1,12 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+> 0.5%
+last 2 versions
+Firefox ESR
+not dead
+not IE 9-11 # For IE 9-11 support, remove 'not'.

e2e/protractor.conf.js

@@ -1,8 +1,12 @@
+// @ts-check
 // Protractor configuration file, see link for more information
 // https://github.com/angular/protractor/blob/master/lib/config.ts
 
-const {SpecReporter} = require('jasmine-spec-reporter');
+const { SpecReporter } = require('jasmine-spec-reporter');
 
+/**
+ * @type { import("protractor").Config }
+ */
 exports.config = {
     allScriptsTimeout: 11000,
     specs            : [
@@ -24,8 +28,8 @@ exports.config = {
     onPrepare()
     {
         require('ts-node').register({
-            project: require('path').join(__dirname, './tsconfig.e2e.json')
+            project: require('path').join(__dirname, './tsconfig.json')
         });
         jasmine.getEnv().addReporter(new SpecReporter({spec: {displayStacktrace: true}}));
     }
-};
+};

e2e/src/app.e2e-spec.ts

@@ -1,4 +1,5 @@
 import { FusePage } from './app.po';
+import { browser, logging } from 'protractor';
 
 describe('Fuse App', () => {
     let page: FusePage;
@@ -11,4 +12,12 @@ describe('Fuse App', () => {
         page.navigateTo();
         expect(page.getParagraphText()).toEqual('Welcome to Fuse!');
     });
+
+    afterEach(async () => {
+        // Assert that there are no errors emitted from the browser
+        const logs = await browser.manage().logs().get(logging.Type.BROWSER);
+        expect(logs).not.toContain(jasmine.objectContaining({
+            level: logging.Level.SEVERE
+        } as logging.Entry));
+    });
 });

e2e/src/app.po.ts

@@ -1,11 +1,14 @@
 import { browser, by, element } from 'protractor';
 
-export class FusePage {
+export class FusePage
-    navigateTo(): any {
+{
-        return browser.get('/');
+    navigateTo(): Promise<any>
+    {
+        return browser.get('/') as Promise<any>;
     }
 
-    getParagraphText(): any {
+    getParagraphText(): Promise<string>
-        return element(by.css('app #main')).getText();
+    {
+        return element(by.css('app #main')).getText() as Promise<string>;
     }
 }

e2e/tsconfig.e2e.json

@@ -1,13 +1,13 @@
 {
-  "extends": "../tsconfig.json",
+    "extends": "../tsconfig.json",
-  "compilerOptions": {
+    "compilerOptions": {
-    "outDir": "../out-tsc/app",
+        "outDir": "../out-tsc/app",
-    "module": "commonjs",
+        "module": "commonjs",
-    "target": "es5",
+        "target": "es5",
-    "types": [
+        "types": [
-      "jasmine",
+            "jasmine",
-      "jasminewd2",
+            "jasminewd2",
-      "node"
+            "node"
-    ]
+        ]
-  }
+    }
-}
+}

e2e/tsconfig.json

@@ -0,0 +1,13 @@
+{
+    "extends": "../tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../out-tsc/e2e",
+        "module": "commonjs",
+        "target": "es5",
+        "types": [
+            "jasmine",
+            "jasminewd2",
+            "node"
+        ]
+    }
+}

karma.conf.js

@@ -17,8 +17,8 @@ module.exports = function (config)
             clearContext: false // leave Jasmine Spec Runner output visible in browser
         },
         coverageIstanbulReporter: {
-            dir                  : require('path').join(__dirname, '../coverage'),
+            dir                  : require('path').join(__dirname, './coverage/fuse'),
-            reports              : ['html', 'lcovonly'],
+            reports              : ['html', 'lcovonly', 'text-summary'],
             fixWebpackSourcePaths: true
         },
         reporters               : ['progress', 'kjhtml'],
@@ -27,6 +27,7 @@ module.exports = function (config)
         logLevel                : config.LOG_INFO,
         autoWatch               : true,
         browsers                : ['Chrome'],
-        singleRun               : false
+        singleRun               : false,
+        restartOnFileChange     : true
     });
-};
+};

package.json

@@ -1,90 +1,88 @@
 {
-  "name": "fuse",
+    "name": "fuse",
-  "version": "7.0.0",
+    "version": "8.1.1",
-  "license": "https://themeforest.net/licenses/terms/regular",
+    "license": "https://themeforest.net/licenses/terms/regular",
-  "scripts": {
+    "scripts": {
-    "ng": "ng",
+        "ng": "ng",
-    "start": "ng serve --open",
+        "start": "ng serve --open",
-    "start-hmr": "ng serve --configuration hmr --source-map=false --hmr-warning=false",
+        "start-hmr": "ng serve --configuration hmr --source-map=false --hmr-warning=false",
-    "start-hmr-sourcemaps": "ng serve --configuration hmr --source-map=true --hmr-warning=false",
+        "start-hmr-sourcemaps": "ng serve --configuration hmr --source-map=true --hmr-warning=false",
-    "build": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --dev",
+        "build": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --dev",
-    "build-stats": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --dev --stats-json",
+        "build-stats": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --dev --stats-json",
-    "build-prod": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --prod",
+        "build-prod": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --prod",
-    "build-prod-stats": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --prod --stats-json",
+        "build-prod-stats": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --prod --stats-json",
-    "test": "ng test",
+        "test": "ng test",
-    "lint": "ng lint",
+        "lint": "ng lint",
-    "e2e": "ng e2e",
+        "e2e": "ng e2e",
-    "bundle-report": "webpack-bundle-analyzer dist/stats.json"
+        "bundle-report": "webpack-bundle-analyzer dist/stats.json"
-  },
+    },
-  "private": true,
+    "private": true,
-  "dependencies": {
+    "dependencies": {
-    "@agm/core": "1.0.0-beta.5",
+        "@agm/core": "1.0.0-beta.5",
-    "@angular/animations": "7.0.0",
+        "@angular/animations": "8.1.0",
-    "@angular/cdk": "7.0.0",
+        "@angular/cdk": "8.0.2",
-    "@angular/common": "7.0.0",
+        "@angular/common": "8.1.0",
-    "@angular/compiler": "7.0.0",
+        "@angular/compiler": "8.1.0",
-    "@angular/core": "7.0.0",
+        "@angular/core": "8.1.0",
-    "@angular/flex-layout": "7.0.0-beta.19",
+        "@angular/flex-layout": "8.0.0-beta.26",
-    "@angular/forms": "7.0.0",
+        "@angular/forms": "8.1.0",
-    "@angular/http": "7.0.0",
+        "@angular/material": "8.0.2",
-    "@angular/material": "7.0.0",
+        "@angular/material-moment-adapter": "8.0.2",
-    "@angular/material-moment-adapter": "7.0.0",
+        "@angular/platform-browser": "8.1.0",
-    "@angular/platform-browser": "7.0.0",
+        "@angular/platform-browser-dynamic": "8.1.0",
-    "@angular/platform-browser-dynamic": "7.0.0",
+        "@angular/router": "8.1.0",
-    "@angular/router": "7.0.0",
+        "@ngrx/effects": "8.0.1",
-    "@ngrx/effects": "6.1.0",
+        "@ngrx/router-store": "8.0.1",
-    "@ngrx/router-store": "6.1.0",
+        "@ngrx/store": "8.0.1",
-    "@ngrx/store": "6.1.0",
+        "@ngrx/store-devtools": "8.0.1",
-    "@ngrx/store-devtools": "6.1.0",
+        "@ngx-translate/core": "11.0.1",
-    "@ngx-translate/core": "10.0.2",
+        "@swimlane/dragula": "3.8.0",
-    "@swimlane/dragula": "3.7.3",
+        "@swimlane/ngx-charts": "12.0.1",
-    "@swimlane/ngx-charts": "9.0.0",
+        "@swimlane/ngx-datatable": "15.0.2",
-    "@swimlane/ngx-datatable": "13.1.0",
+        "@swimlane/ngx-dnd": "8.0.0",
-    "@swimlane/ngx-dnd": "5.1.0",
+        "@types/prismjs": "1.16.0",
-    "@types/prismjs": "1.9.0",
+        "angular-calendar": "0.27.12",
-    "angular-calendar": "0.26.3",
+        "angular-in-memory-web-api": "0.8.0",
-    "angular-in-memory-web-api": "0.6.1",
+        "chart.js": "2.8.0",
-    "chart.js": "2.7.3",
+        "classlist.js": "1.1.20150312",
-    "classlist.js": "1.1.20150312",
+        "d3": "5.9.7",
-    "core-js": "2.5.7",
+        "date-fns": "1.30.1",
-    "d3": "5.7.0",
+        "hammerjs": "2.0.8",
-    "date-fns": "1.29.0",
+        "lodash": "4.17.11",
-    "hammerjs": "2.0.8",
+        "moment": "2.24.0",
-    "lodash": "4.17.11",
+        "ng2-charts": "2.3.0",
-    "moment": "2.22.2",
+        "ngrx-store-freeze": "0.2.4",
-    "ng2-charts": "1.6.0",
+        "ngx-color-picker": "8.0.1",
-    "ngrx-store-freeze": "0.2.4",
+        "ngx-cookie-service": "2.2.0",
-    "ngx-color-picker": "6.7.0",
+        "perfect-scrollbar": "1.4.0",
-    "ngx-cookie-service": "1.0.10",
+        "prismjs": "1.16.0",
-    "perfect-scrollbar": "1.4.0",
+        "rxjs": "6.5.2",
-    "prismjs": "1.15.0",
+        "web-animations-js": "2.3.2",
-    "rxjs": "6.3.3",
+        "zone.js": "0.9.1"
-    "rxjs-compat": "6.3.3",
+    },
-    "web-animations-js": "2.3.1",
+    "devDependencies": {
-    "zone.js": "0.8.26"
+        "@angular/cli": "8.1.0",
-  },
+        "@angular/compiler-cli": "8.1.0",
-  "devDependencies": {
+        "@angular/language-service": "8.1.0",
-    "@angular/cli": "7.0.1",
+        "@angular-devkit/build-angular": "0.801.0",
-    "@angular/compiler-cli": "7.0.0",
+        "@angularclass/hmr": "2.1.3",
-    "@angular/language-service": "7.0.0",
+        "@types/jasmine": "3.3.13",
-    "@angular-devkit/build-angular": "0.10.1",
+        "@types/jasminewd2": "2.0.6",
-    "@angularclass/hmr": "2.1.3",
+        "@types/lodash": "4.14.135",
-    "@types/jasmine": "2.8.9",
+        "@types/node": "8.9.5",
-    "@types/jasminewd2": "2.0.5",
+        "codelyzer": "5.1.0",
-    "@types/lodash": "4.14.117",
+        "jasmine-core": "3.4.0",
-    "@types/node": "8.9.5",
+        "jasmine-spec-reporter": "4.2.1",
-    "codelyzer": "4.5.0",
+        "karma": "4.1.0",
-    "jasmine-core": "2.99.1",
+        "karma-chrome-launcher": "2.2.0",
-    "jasmine-spec-reporter": "4.2.1",
+        "karma-coverage-istanbul-reporter": "2.0.5",
-    "karma": "3.0.0",
+        "karma-jasmine": "2.0.1",
-    "karma-chrome-launcher": "2.2.0",
+        "karma-jasmine-html-reporter": "1.4.2",
-    "karma-coverage-istanbul-reporter": "2.0.4",
+        "protractor": "5.4.2",
-    "karma-jasmine": "1.1.2",
+        "ts-node": "7.0.1",
-    "karma-jasmine-html-reporter": "0.2.2",
+        "tslib": "1.10.0",
-    "protractor": "5.4.1",
+        "tslint": "5.15.0",
-    "ts-node": "7.0.1",
+        "typescript": "3.4.5",
-    "tslint": "5.11.0",
+        "webpack-bundle-analyzer": "3.3.2"
-    "typescript": "3.1.3",
+    }
-    "webpack-bundle-analyzer": "3.0.3"
-  }
 }

src/@fuse/animations/index.ts

@@ -51,26 +51,23 @@ export const fuseAnimations = [
     ]),
 
     trigger('fadeInOut', [
-        state('0', style({
+        state('0, void', style({
-            display: 'none',
             opacity: 0
         })),
-        state('1', style({
+        state('1, *', style({
-            display: 'block',
             opacity: 1
         })),
         transition('1 => 0', animate('300ms ease-out')),
-        transition('0 => 1', animate('300ms ease-in'))
+        transition('0 => 1', animate('300ms ease-in')),
+        transition('void <=> *', animate('300ms ease-in'))
     ]),
 
     trigger('slideInOut', [
         state('0', style({
-            height : '0px',
+            height: '0px'
-            display: 'none'
         })),
         state('1', style({
-            height : '*',
+            height: '*'
-            display: 'block'
         })),
         transition('1 => 0', animate('300ms ease-out')),
         transition('0 => 1', animate('300ms ease-in'))
@@ -120,17 +117,15 @@ export const fuseAnimations = [
                     })
                 )
             ]
-        ),
+        )
     ]),
 
     trigger('slideInLeft', [
         state('void', style({
             transform: 'translateX(-100%)',
-            display  : 'none'
         })),
         state('*', style({
             transform: 'translateX(0)',
-            display  : 'flex'
         })),
         transition('void => *', animate('300ms')),
         transition('* => void', animate('300ms'))
@@ -139,11 +134,9 @@ export const fuseAnimations = [
     trigger('slideInRight', [
         state('void', style({
             transform: 'translateX(100%)',
-            display  : 'none'
         })),
         state('*', style({
             transform: 'translateX(0)',
-            display  : 'flex'
         })),
         transition('void => *', animate('300ms')),
         transition('* => void', animate('300ms'))
@@ -152,11 +145,9 @@ export const fuseAnimations = [
     trigger('slideInTop', [
         state('void', style({
             transform: 'translateY(-100%)',
-            display  : 'none'
         })),
         state('*', style({
             transform: 'translateY(0)',
-            display  : 'flex'
         })),
         transition('void => *', animate('300ms')),
         transition('* => void', animate('300ms'))
@@ -166,11 +157,9 @@ export const fuseAnimations = [
         state('void',
             style({
                 transform: 'translateY(100%)',
-                display  : 'none'
             })),
         state('*', style({
             transform: 'translateY(0)',
-            display  : 'flex'
         })),
         transition('void => *', animate('300ms')),
         transition('* => void', animate('300ms'))
@@ -190,7 +179,7 @@ export const fuseAnimations = [
     // -----------------------------------------------------------------------------------------------------
     // @ Router animations
     // -----------------------------------------------------------------------------------------------------
-    
+
     trigger('routerTransitionLeft', [
 
         transition('* => *', [

src/@fuse/components/confirm-dialog/confirm-dialog.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { MatDialogRef } from '@angular/material';
+import { MatDialogRef } from '@angular/material/dialog';
 
 @Component({
     selector   : 'fuse-confirm-dialog',

src/@fuse/components/confirm-dialog/confirm-dialog.module.ts

@@ -1,5 +1,6 @@
 import { NgModule } from '@angular/core';
-import { MatButtonModule, MatDialogModule } from '@angular/material';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialogModule } from '@angular/material/dialog';
 
 import { FuseConfirmDialogComponent } from '@fuse/components/confirm-dialog/confirm-dialog.component';
 

src/@fuse/components/demo/demo.module.ts

@@ -1,7 +1,8 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
-import { MatDividerModule, MatListModule } from '@angular/material';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatListModule } from '@angular/material/list';
 
 import { FuseDemoContentComponent } from './demo-content/demo-content.component';
 import { FuseDemoSidebarComponent } from './demo-sidebar/demo-sidebar.component';

src/@fuse/components/highlight/highlight.component.ts

@@ -13,7 +13,7 @@ import '@fuse/components/highlight/prism-languages';
 export class FuseHighlightComponent implements OnInit, OnDestroy
 {
     // Source
-    @ContentChild('source')
+    @ContentChild('source', {static: true})
     source: ElementRef;
 
     // Lang

src/@fuse/components/material-color-picker/material-color-picker.module.ts

@@ -1,7 +1,10 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FlexLayoutModule } from '@angular/flex-layout';
-import { MatButtonModule, MatIconModule, MatMenuModule, MatTooltipModule } from '@angular/material';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 import { FusePipesModule } from '@fuse/pipes/pipes.module';
 

src/@fuse/components/navigation/navigation.module.ts

@@ -1,7 +1,8 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
-import { MatIconModule, MatRippleModule } from '@angular/material';
+import { MatRippleModule } from '@angular/material/core';
+import { MatIconModule } from '@angular/material/icon';
 
 import { TranslateModule } from '@ngx-translate/core';
 

src/@fuse/components/navigation/navigation.service.ts

@@ -332,6 +332,9 @@ export class FuseNavigationService
         {
             navigation.push(item);
 
+            // Trigger the observable
+            this._onNavigationItemAdded.next(true);
+
             return;
         }
 
@@ -339,6 +342,11 @@ export class FuseNavigationService
         if ( id === 'start' )
         {
             navigation.unshift(item);
+
+            // Trigger the observable
+            this._onNavigationItemAdded.next(true);
+
+            return;
         }
 
         // Add it to a specific location

src/@fuse/components/progress-bar/progress-bar.module.ts

@@ -2,7 +2,9 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
 
-import { MatButtonModule, MatIconModule, MatProgressBarModule } from '@angular/material';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
 
 import { FuseProgressBarComponent } from './progress-bar.component';
 

src/@fuse/components/search-bar/search-bar.module.ts

@@ -2,7 +2,8 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
 
-import { MatButtonModule, MatIconModule } from '@angular/material';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
 
 import { FuseSearchBarComponent } from './search-bar.component';
 

src/@fuse/components/shortcuts/shortcuts.component.ts

@@ -1,5 +1,5 @@
-import { Component, ElementRef, Input, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, Input, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core';
-import { ObservableMedia } from '@angular/flex-layout';
+import { MediaObserver } from '@angular/flex-layout';
 import { CookieService } from 'ngx-cookie-service';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -12,7 +12,7 @@ import { FuseNavigationService } from '@fuse/components/navigation/navigation.se
     templateUrl: './shortcuts.component.html',
     styleUrls  : ['./shortcuts.component.scss']
 })
-export class FuseShortcutsComponent implements OnInit, OnDestroy
+export class FuseShortcutsComponent implements OnInit, AfterViewInit, OnDestroy
 {
     shortcutItems: any[];
     navigationItems: any[];
@@ -23,10 +23,10 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
     @Input()
     navigation: any;
 
-    @ViewChild('searchInput')
+    @ViewChild('searchInput', {static: false})
     searchInputField;
 
-    @ViewChild('shortcuts')
+    @ViewChild('shortcuts', {static: false})
     shortcutsEl: ElementRef;
 
     // Private
@@ -35,17 +35,17 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
     /**
      * Constructor
      *
-     * @param {Renderer2} _renderer
      * @param {CookieService} _cookieService
      * @param {FuseMatchMediaService} _fuseMatchMediaService
      * @param {FuseNavigationService} _fuseNavigationService
-     * @param {ObservableMedia} _observableMedia
+     * @param {MediaObserver} _mediaObserver
+     * @param {Renderer2} _renderer
      */
     constructor(
         private _cookieService: CookieService,
         private _fuseMatchMediaService: FuseMatchMediaService,
         private _fuseNavigationService: FuseNavigationService,
-        private _observableMedia: ObservableMedia,
+        private _mediaObserver: MediaObserver,
         private _renderer: Renderer2
     )
     {
@@ -79,37 +79,41 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
             // User's shortcut items
             this.shortcutItems = [
                 {
-                    'title': 'Calendar',
+                    title: 'Calendar',
-                    'type' : 'item',
+                    type : 'item',
-                    'icon' : 'today',
+                    icon : 'today',
-                    'url'  : '/apps/calendar'
+                    url  : '/apps/calendar'
                 },
                 {
-                    'title': 'Mail',
+                    title: 'Mail',
-                    'type' : 'item',
+                    type : 'item',
-                    'icon' : 'email',
+                    icon : 'email',
-                    'url'  : '/apps/mail'
+                    url  : '/apps/mail'
                 },
                 {
-                    'title': 'Contacts',
+                    title: 'Contacts',
-                    'type' : 'item',
+                    type : 'item',
-                    'icon' : 'account_box',
+                    icon : 'account_box',
-                    'url'  : '/apps/contacts'
+                    url  : '/apps/contacts'
                 },
                 {
-                    'title': 'To-Do',
+                    title: 'To-Do',
-                    'type' : 'item',
+                    type : 'item',
-                    'icon' : 'check_box',
+                    icon : 'check_box',
-                    'url'  : '/apps/todo'
+                    url  : '/apps/todo'
                 }
             ];
         }
 
+    }
+
+    ngAfterViewInit(): void
+    {
         // Subscribe to media changes
         this._fuseMatchMediaService.onMediaChange
             .pipe(takeUntil(this._unsubscribeAll))
             .subscribe(() => {
-                if ( this._observableMedia.isActive('gt-sm') )
+                if ( this._mediaObserver.isActive('gt-sm') )
                 {
                     this.hideMobileShortcutsPanel();
                 }

src/@fuse/components/shortcuts/shortcuts.module.ts

@@ -2,7 +2,14 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
 import { FlexLayoutModule } from '@angular/flex-layout';
-import { MatButtonModule, MatDividerModule, MatFormFieldModule, MatIconModule, MatInputModule, MatListModule, MatMenuModule, MatTooltipModule } from '@angular/material';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatListModule } from '@angular/material/list';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { CookieService } from 'ngx-cookie-service';
 
 import { FuseShortcutsComponent } from './shortcuts.component';

src/@fuse/components/sidebar/sidebar.component.ts

@@ -2,7 +2,7 @@ import {
     ChangeDetectorRef, Component, ElementRef, EventEmitter, HostBinding, HostListener, Input, OnDestroy, OnInit, Output, Renderer2, ViewEncapsulation
 } from '@angular/core';
 import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations';
-import { ObservableMedia } from '@angular/flex-layout';
+import { MediaObserver } from '@angular/flex-layout';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
@@ -87,7 +87,7 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
      * @param {FuseConfigService} _fuseConfigService
      * @param {FuseMatchMediaService} _fuseMatchMediaService
      * @param {FuseSidebarService} _fuseSidebarService
-     * @param {ObservableMedia} _observableMedia
+     * @param {MediaObserver} _mediaObserver
      * @param {Renderer2} _renderer
      */
     constructor(
@@ -97,7 +97,7 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
         private _fuseConfigService: FuseConfigService,
         private _fuseMatchMediaService: FuseMatchMediaService,
         private _fuseSidebarService: FuseSidebarService,
-        private _observableMedia: ObservableMedia,
+        private _mediaObserver: MediaObserver,
         private _renderer: Renderer2
     )
     {
@@ -319,7 +319,7 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
             .subscribe(() => {
 
                 // Get the active status
-                const isActive = this._observableMedia.isActive(this.lockedOpen);
+                const isActive = this._mediaObserver.isActive(this.lockedOpen);
 
                 // If the both status are the same, don't act
                 if ( this._wasActive === isActive )

src/@fuse/components/theme-options/theme-options.component.ts

@@ -131,17 +131,17 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
 
         // Add customize nav item that opens the bar programmatically
         const customFunctionNavItem = {
-            'id'      : 'custom-function',
+            id      : 'custom-function',
-            'title'   : 'Custom Function',
+            title   : 'Custom Function',
-            'type'    : 'group',
+            type    : 'group',
-            'icon'    : 'settings',
+            icon    : 'settings',
-            'children': [
+            children: [
                 {
-                    'id'      : 'customize',
+                    id      : 'customize',
-                    'title'   : 'Customize',
+                    title   : 'Customize',
-                    'type'    : 'item',
+                    type    : 'item',
-                    'icon'    : 'settings',
+                    icon    : 'settings',
-                    'function': () => {
+                    function: () => {
                         this.toggleSidebarOpen('themeOptionsPanel');
                     }
                 }

src/@fuse/components/theme-options/theme-options.module.ts

@@ -2,9 +2,15 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { FlexLayoutModule } from '@angular/flex-layout';
-import {
+import { MatButtonModule } from '@angular/material/button';
-    MatButtonModule, MatCheckboxModule, MatDividerModule, MatFormFieldModule, MatIconModule, MatOptionModule, MatRadioModule, MatSelectModule, MatSlideToggleModule
+import { MatCheckboxModule } from '@angular/material/checkbox';
-} from '@angular/material';
+import { MatOptionModule } from '@angular/material/core';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 
 import { FuseDirectivesModule } from '@fuse/directives/directives';
 import { FuseMaterialColorPickerModule } from '@fuse/components/material-color-picker/material-color-picker.module';

src/@fuse/directives/fuse-mat-sidenav/fuse-mat-sidenav.directive.ts

@@ -1,6 +1,6 @@
 import { Directive, Input, OnInit, HostListener, OnDestroy, HostBinding } from '@angular/core';
-import { MatSidenav } from '@angular/material';
+import { MatSidenav } from '@angular/material/sidenav';
-import { ObservableMedia } from '@angular/flex-layout';
+import { MediaObserver } from '@angular/flex-layout';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
@@ -30,13 +30,13 @@ export class FuseMatSidenavHelperDirective implements OnInit, OnDestroy
      * @param {FuseMatchMediaService} _fuseMatchMediaService
      * @param {FuseMatSidenavHelperService} _fuseMatSidenavHelperService
      * @param {MatSidenav} _matSidenav
-     * @param {ObservableMedia} _observableMedia
+     * @param {MediaObserver} _mediaObserver
      */
     constructor(
         private _fuseMatchMediaService: FuseMatchMediaService,
         private _fuseMatSidenavHelperService: FuseMatSidenavHelperService,
         private _matSidenav: MatSidenav,
-        private _observableMedia: ObservableMedia
+        private _mediaObserver: MediaObserver
     )
     {
         // Set the defaults
@@ -58,7 +58,7 @@ export class FuseMatSidenavHelperDirective implements OnInit, OnDestroy
         // Register the sidenav to the service
         this._fuseMatSidenavHelperService.setSidenav(this.fuseMatSidenavHelper, this._matSidenav);
 
-        if ( this._observableMedia.isActive(this.matIsLockedOpen) )
+        if ( this.matIsLockedOpen && this._mediaObserver.isActive(this.matIsLockedOpen) )
         {
             this.isLockedOpen = true;
             this._matSidenav.mode = 'side';
@@ -74,7 +74,7 @@ export class FuseMatSidenavHelperDirective implements OnInit, OnDestroy
         this._fuseMatchMediaService.onMediaChange
             .pipe(takeUntil(this._unsubscribeAll))
             .subscribe(() => {
-                if ( this._observableMedia.isActive(this.matIsLockedOpen) )
+                if ( this.matIsLockedOpen && this._mediaObserver.isActive(this.matIsLockedOpen) )
                 {
                     this.isLockedOpen = true;
                     this._matSidenav.mode = 'side';

src/@fuse/directives/fuse-mat-sidenav/fuse-mat-sidenav.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { MatSidenav } from '@angular/material';
+import { MatSidenav } from '@angular/material/sidenav';
 
 @Injectable({
     providedIn: 'root'

src/@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive.ts

@@ -1,23 +1,24 @@
-import { AfterViewInit, Directive, ElementRef, HostListener, Input, OnDestroy } from '@angular/core';
+import { AfterViewInit, Directive, ElementRef, HostListener, Input, OnDestroy, OnInit } from '@angular/core';
 import { NavigationEnd, Router } from '@angular/router';
 import { Platform } from '@angular/cdk/platform';
-import { Subject } from 'rxjs';
+import { fromEvent, Subject } from 'rxjs';
-import { filter, takeUntil } from 'rxjs/operators';
+import { debounceTime, filter, takeUntil } from 'rxjs/operators';
 import PerfectScrollbar from 'perfect-scrollbar';
 import * as _ from 'lodash';
-
+import { FusePerfectScrollbarGeometry, FusePerfectScrollbarPosition } from '@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.interfaces';
 import { FuseConfigService } from '@fuse/services/config.service';
 
 @Directive({
     selector: '[fusePerfectScrollbar]'
 })
-export class FusePerfectScrollbarDirective implements AfterViewInit, OnDestroy
+export class FusePerfectScrollbarDirective implements OnInit, AfterViewInit, OnDestroy
 {
     isInitialized: boolean;
     isMobile: boolean;
     ps: PerfectScrollbar | any;
 
     // Private
+    private _animation: number | null;
     private _enabled: boolean | '';
     private _debouncedUpdate: any;
     private _options: any;
@@ -43,6 +44,7 @@ export class FusePerfectScrollbarDirective implements AfterViewInit, OnDestroy
         this.isMobile = false;
 
         // Set the private defaults
+        this._animation = null;
         this._enabled = false;
         this._debouncedUpdate = _.debounce(this.update, 150);
         this._options = {
@@ -65,6 +67,15 @@ export class FusePerfectScrollbarDirective implements AfterViewInit, OnDestroy
     {
         // Merge the options
         this._options = _.merge({}, this._options, value);
+
+        // Destroy and re-init the PerfectScrollbar to update its options
+        setTimeout(() => {
+            this._destroy();
+        });
+
+        setTimeout(() => {
+            this._init();
+        });
     }
 
     get fusePerfectScrollbarOptions(): any
@@ -120,6 +131,24 @@ export class FusePerfectScrollbarDirective implements AfterViewInit, OnDestroy
     // @ Lifecycle hooks
     // -----------------------------------------------------------------------------------------------------
 
+    /**
+     * On init
+     */
+    ngOnInit(): void
+    {
+        // Subscribe to window resize event
+        fromEvent(window, 'resize')
+            .pipe(
+                takeUntil(this._unsubscribeAll),
+                debounceTime(150)
+            )
+            .subscribe(() => {
+
+                // Update the PerfectScrollbar
+                this.update();
+            });
+    }
+
     /**
      * After view init
      */
@@ -292,6 +321,71 @@ export class FusePerfectScrollbarDirective implements AfterViewInit, OnDestroy
         this.ngOnDestroy();
     }
 
+    /**
+     * Returns the geometry of the scrollable element
+     *
+     * @param prefix
+     */
+    geometry(prefix: string = 'scroll'): FusePerfectScrollbarGeometry
+    {
+        return new FusePerfectScrollbarGeometry(
+            this.elementRef.nativeElement[prefix + 'Left'],
+            this.elementRef.nativeElement[prefix + 'Top'],
+            this.elementRef.nativeElement[prefix + 'Width'],
+            this.elementRef.nativeElement[prefix + 'Height']
+        );
+    }
+
+    /**
+     * Returns the position of the scrollable element
+     *
+     * @param absolute
+     */
+    position(absolute: boolean = false): FusePerfectScrollbarPosition
+    {
+        if ( !absolute && this.ps )
+        {
+            return new FusePerfectScrollbarPosition(
+                this.ps.reach.x || 0,
+                this.ps.reach.y || 0
+            );
+        }
+        else
+        {
+            return new FusePerfectScrollbarPosition(
+                this.elementRef.nativeElement.scrollLeft,
+                this.elementRef.nativeElement.scrollTop
+            );
+        }
+    }
+
+    /**
+     * Scroll to
+     *
+     * @param x
+     * @param y
+     * @param speed
+     */
+    scrollTo(x: number, y?: number, speed?: number): void
+    {
+        if ( y == null && speed == null )
+        {
+            this.animateScrolling('scrollTop', x, speed);
+        }
+        else
+        {
+            if ( x != null )
+            {
+                this.animateScrolling('scrollLeft', x, speed);
+            }
+
+            if ( y != null )
+            {
+                this.animateScrolling('scrollTop', y, speed);
+            }
+        }
+    }
+
     /**
      * Scroll to X
      *
@@ -344,9 +438,8 @@ export class FusePerfectScrollbarDirective implements AfterViewInit, OnDestroy
      */
     scrollToRight(offset?: number, speed?: number): void
     {
-        const width = this.elementRef.nativeElement.scrollWidth;
+        const left = this.elementRef.nativeElement.scrollWidth - this.elementRef.nativeElement.clientWidth;
-
+        this.animateScrolling('scrollLeft', left - (offset || 0), speed);
-        this.animateScrolling('scrollLeft', width - (offset || 0), speed);
     }
 
     /**
@@ -357,27 +450,64 @@ export class FusePerfectScrollbarDirective implements AfterViewInit, OnDestroy
      */
     scrollToBottom(offset?: number, speed?: number): void
     {
-        const height = this.elementRef.nativeElement.scrollHeight;
+        const top = this.elementRef.nativeElement.scrollHeight - this.elementRef.nativeElement.clientHeight;
+        this.animateScrolling('scrollTop', top - (offset || 0), speed);
+    }
 
-        this.animateScrolling('scrollTop', height - (offset || 0), speed);
+    /**
+     * Scroll to element
+     *
+     * @param qs
+     * @param offset
+     * @param speed
+     */
+    scrollToElement(qs: string, offset?: number, speed?: number): void
+    {
+        const element = this.elementRef.nativeElement.querySelector(qs);
+
+        if ( !element )
+        {
+            return;
+        }
+
+        const elementPos = element.getBoundingClientRect();
+        const scrollerPos = this.elementRef.nativeElement.getBoundingClientRect();
+
+        if ( this.elementRef.nativeElement.classList.contains('ps--active-x') )
+        {
+            const currentPos = this.elementRef.nativeElement['scrollLeft'];
+            const position = elementPos.left - scrollerPos.left + currentPos;
+
+            this.animateScrolling('scrollLeft', position + (offset || 0), speed);
+        }
+
+        if ( this.elementRef.nativeElement.classList.contains('ps--active-y') )
+        {
+            const currentPos = this.elementRef.nativeElement['scrollTop'];
+            const position = elementPos.top - scrollerPos.top + currentPos;
+
+            this.animateScrolling('scrollTop', position + (offset || 0), speed);
+        }
     }
 
     /**
      * Animate scrolling
      *
-     * @param {string} target
+     * @param target
-     * @param {number} value
+     * @param value
-     * @param {number} speed
+     * @param speed
      */
     animateScrolling(target: string, value: number, speed?: number): void
     {
-        if ( !speed )
+        if ( this._animation )
+        {
+            window.cancelAnimationFrame(this._animation);
+            this._animation = null;
+        }
+
+        if ( !speed || typeof window === 'undefined' )
         {
             this.elementRef.nativeElement[target] = value;
-
-            // PS has weird event sending order, this is a workaround for that
-            this.update();
-            this.update();
         }
         else if ( value !== this.elementRef.nativeElement[target] )
         {
@@ -389,9 +519,8 @@ export class FusePerfectScrollbarDirective implements AfterViewInit, OnDestroy
 
             const cosParameter = (oldValue - value) / 2;
 
-            const step = (newTimestamp) => {
+            const step = (newTimestamp: number) => {
                 scrollCount += Math.PI / (speed / (newTimestamp - oldTimestamp));
-
                 newValue = Math.round(value + cosParameter + cosParameter * Math.cos(scrollCount));
 
                 // Only continue animation if scroll position has not changed
@@ -399,20 +528,17 @@ export class FusePerfectScrollbarDirective implements AfterViewInit, OnDestroy
                 {
                     if ( scrollCount >= Math.PI )
                     {
-                        this.elementRef.nativeElement[target] = value;
+                        this.animateScrolling(target, value, 0);
-
-                        // PS has weird event sending order, this is a workaround for that
-                        this.update();
-
-                        this.update();
                     }
                     else
                     {
-                        this.elementRef.nativeElement[target] = oldValue = newValue;
+                        this.elementRef.nativeElement[target] = newValue;
 
+                        // On a zoomed out page the resulting offset may differ
+                        oldValue = this.elementRef.nativeElement[target];
                         oldTimestamp = newTimestamp;
 
-                        window.requestAnimationFrame(step);
+                        this._animation = window.requestAnimationFrame(step);
                     }
                 }
             };

src/@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.interfaces.ts

@@ -0,0 +1,28 @@
+export class FusePerfectScrollbarGeometry
+{
+    public x: number;
+    public y: number;
+
+    public w: number;
+    public h: number;
+
+    constructor(x: number, y: number, w: number, h: number)
+    {
+        this.x = x;
+        this.y = y;
+        this.w = w;
+        this.h = h;
+    }
+}
+
+export class FusePerfectScrollbarPosition
+{
+    public x: number | 'start' | 'end';
+    public y: number | 'start' | 'end';
+
+    constructor(x: number | 'start' | 'end', y: number | 'start' | 'end')
+    {
+        this.x = x;
+        this.y = y;
+    }
+}

src/@fuse/scss/partials/_angular-material-fix.scss

@@ -48,11 +48,6 @@ button {
     font-size: 16px;
 }
 
-.mat-pseudo-checkbox-checked:after {
-    width: 14px !important;
-    height: 7px !important;
-}
-
 // Fix: "Input underlines has wrong color opacity value"
 .mat-form-field-underline {
     background-color: rgba(0, 0, 0, 0.12);
@@ -118,4 +113,4 @@ mat-chip {
 // Fix: Mat-card-image requires a bigger width than 100%
 .mat-card-image {
     max-width: none !important;
-}
+}

src/@fuse/scss/partials/_colors.scss

@@ -47,25 +47,25 @@
 // @ Material colors map
 // -----------------------------------------------------------------------------------------------------
 $matPalettes: (
-    red: $mat-red,
+    'red': $mat-red,
-    pink: $mat-pink,
+    'pink': $mat-pink,
-    purple: $mat-purple,
+    'purple': $mat-purple,
-    deep-purple: $mat-deep-purple,
+    'deep-purple': $mat-deep-purple,
-    indigo: $mat-indigo,
+    'indigo': $mat-indigo,
-    blue: $mat-blue,
+    'blue': $mat-blue,
-    light-blue: $mat-light-blue,
+    'light-blue': $mat-light-blue,
-    cyan: $mat-cyan,
+    'cyan': $mat-cyan,
-    teal: $mat-teal,
+    'teal': $mat-teal,
-    green: $mat-green,
+    'green': $mat-green,
-    light-green: $mat-light-green,
+    'light-green': $mat-light-green,
-    lime: $mat-lime,
+    'lime': $mat-lime,
-    yellow: $mat-yellow,
+    'yellow': $mat-yellow,
-    amber: $mat-amber,
+    'amber': $mat-amber,
-    orange: $mat-orange,
+    'orange': $mat-orange,
-    deep-orange: $mat-deep-orange,
+    'deep-orange': $mat-deep-orange,
-    brown: $mat-brown,
+    'brown': $mat-brown,
-    grey: $mat-grey,
+    'grey': $mat-grey,
-    blue-grey: $mat-blue-grey
+    'blue-grey': $mat-blue-grey
 );
 
 // Material color hues list

src/@fuse/scss/partials/_page-layouts.scss

@@ -173,6 +173,7 @@ $carded-header-height-without-toolbar: $carded-header-height - $carded-toolbar-h
 
                             > .mat-tab-group {
                                 overflow: hidden;
+                                width: 100%;
 
                                 .mat-tab-header {
 

src/@fuse/scss/partials/plugins/_ngx-datatable.scss

@@ -95,6 +95,11 @@
                 min-height: 48px;
                 font-size: 13px;
                 padding: 0 24px;
+
+                .datatable-header-cell-template-wrap {
+                    display: inline-flex;
+                    align-items: center;
+                }
             }
         }
 
@@ -139,7 +144,7 @@
             .datatable-footer-inner {
                 padding: 0 24px;
 
-                @include media-breakpoint('sm') {
+                @include media-breakpoint('lt-md') {
                     flex-direction: column;
                     padding: 16px 0;
                     height: auto !important;
@@ -161,7 +166,18 @@
                         li {
 
                             a {
+                                display: flex;
+                                align-items: center;
+                                justify-content: center;
                                 text-decoration: none !important;
+
+                                i {
+                                    width: 20px;
+                                    min-width: 20px;
+                                    height: 20px;
+                                    min-height: 20px;
+                                    padding: 0;
+                                }
                             }
                         }
                     }
@@ -172,7 +188,7 @@
 }
 
 [class*="datatable-icon-"] {
-    font-family: 'Material Icons';
+    font-family: 'material-outline-icons';
     font-weight: normal;
     font-style: normal;
     font-size: 24px;
@@ -204,11 +220,11 @@
 }
 
 .datatable-icon-up:before {
-    content: "keyboard_arrow_up";
+    content: "arrow_drop_up";
 }
 
 .datatable-icon-down:before {
-    content: "keyboard_arrow_down";
+    content: "arrow_drop_down";
 }
 
 .datatable-icon-sort:before {
@@ -249,4 +265,4 @@
 
 .datatable-icon-prev:before {
     content: "skip_previous";
-}
+}

src/@fuse/services/config.service.ts

@@ -1,5 +1,5 @@
 import { Inject, Injectable, InjectionToken } from '@angular/core';
-import { Router, RoutesRecognized } from '@angular/router';
+import { ResolveEnd, Router } from '@angular/router';
 import { Platform } from '@angular/cdk/platform';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { filter } from 'rxjs/operators';
@@ -96,7 +96,7 @@ export class FuseConfigService
         // Reload the default layout config on every RoutesRecognized event
         // if the current layout config is different from the default one
         this._router.events
-            .pipe(filter(event => event instanceof RoutesRecognized))
+            .pipe(filter(event => event instanceof ResolveEnd))
             .subscribe(() => {
                 if ( !_.isEqual(this._configSubject.getValue().layout, this._defaultConfig.layout) )
                 {

src/@fuse/services/match-media.service.ts

@@ -1,4 +1,4 @@
-import { MediaChange, ObservableMedia } from '@angular/flex-layout';
+import { MediaChange, MediaObserver } from '@angular/flex-layout';
 import { Injectable } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
 import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
@@ -14,10 +14,10 @@ export class FuseMatchMediaService
     /**
      * Constructor
      *
-     * @param {ObservableMedia} _observableMedia
+     * @param {MediaObserver} _mediaObserver
      */
     constructor(
-        private _observableMedia: ObservableMedia
+        private _mediaObserver: MediaObserver
     )
     {
         // Set the defaults
@@ -39,7 +39,7 @@ export class FuseMatchMediaService
      */
     private _init(): void
     {
-        this._observableMedia.asObservable()
+        this._mediaObserver.media$
             .pipe(
                 debounceTime(500),
                 distinctUntilChanged()

src/app/app.module.ts

@@ -4,7 +4,8 @@ import { HttpClientModule } from '@angular/common/http';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterModule, Routes } from '@angular/router';
 import { MatMomentDateModule } from '@angular/material-moment-adapter';
-import { MatButtonModule, MatIconModule } from '@angular/material';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
 import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
 import { TranslateModule } from '@ngx-translate/core';
 import 'hammerjs';

src/app/app.theme.scss

@@ -61,7 +61,7 @@ $custom_palettes: (
 // @ Typography
 // -----------------------------------------------------------------------------------------------------
 
-// Force the input field font sizes to 16px
+// Angular Material typography
 $typography: mat-typography-config(
     $font-family: 'Muli, Helvetica Neue, Arial, sans-serif',
     $title: mat-typography-level(20px, 32px, 600),

src/app/layout/components/chat-panel/chat-panel.component.ts

@@ -23,25 +23,17 @@ export class ChatPanelComponent implements OnInit, AfterViewInit, OnDestroy
     sidebarFolded: boolean;
     user: any;
 
-    @ViewChild('replyForm')
+    @ViewChild('replyForm', {static: false})
-    set replyForm(content: NgForm)
+    private _replyForm: NgForm;
-    {
-        this._replyForm = content;
-    }
 
-    @ViewChild('replyInput')
+    @ViewChild('replyInput', {static: false})
-    set replyInput(content: ElementRef)
+    private _replyInput: ElementRef;
-    {
-        this._replyInput = content;
-    }
 
     @ViewChildren(FusePerfectScrollbarDirective)
     private _fusePerfectScrollbarDirectives: QueryList<FusePerfectScrollbarDirective>;
 
     // Private
     private _chatViewScrollbar: FusePerfectScrollbarDirective;
-    private _replyForm: NgForm;
-    private _replyInput: ElementRef;
     private _unsubscribeAll: Subject<any>;
 
     /**

src/app/layout/components/chat-panel/chat-panel.module.ts

@@ -1,5 +1,11 @@
 import { NgModule } from '@angular/core';
-import { MatButtonModule, MatFormFieldModule, MatIconModule, MatInputModule, MatRippleModule, MatTabsModule, MatTooltipModule } from '@angular/material';
+import { MatButtonModule } from '@angular/material/button';
+import { MatRippleModule } from '@angular/material/core';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 import { FuseSharedModule } from '@fuse/shared.module';
 

src/app/layout/components/footer/footer.component.html

@@ -6,7 +6,7 @@
            target="_blank" mat-button class="pink" fxFlex="0 0 auto" fxLayout="row"
            fxLayoutAlign="start center">
             <mat-icon class="s-16 mr-sm-4">shopping_cart</mat-icon>
-            <span>Purchase FUSE (Angular 7+)</span>
+            <span>Purchase FUSE (Angular 8+)</span>
         </a>
 
         <div fxLayout="row" fxLayoutAlign="start center" fxHide fxShow.gt-xs>

src/app/layout/components/footer/footer.module.ts

@@ -1,6 +1,8 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { MatButtonModule, MatIconModule, MatToolbarModule } from '@angular/material';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatToolbarModule } from '@angular/material/toolbar';
 
 import { FuseSharedModule } from '@fuse/shared.module';
 

src/app/layout/components/navbar/horizontal/style-1/style-1.module.ts

@@ -1,5 +1,6 @@
 import { NgModule } from '@angular/core';
-import { MatButtonModule, MatIconModule } from '@angular/material';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
 
 import { FuseNavigationModule } from '@fuse/components';
 import { FuseSharedModule } from '@fuse/shared.module';

src/app/layout/components/navbar/vertical/style-1/style-1.component.ts

@@ -47,7 +47,7 @@ export class NavbarVerticalStyle1Component implements OnInit, OnDestroy
     // -----------------------------------------------------------------------------------------------------
 
     // Directive
-    @ViewChild(FusePerfectScrollbarDirective)
+    @ViewChild(FusePerfectScrollbarDirective, {static: true})
     set directive(theDirective: FusePerfectScrollbarDirective)
     {
         if ( !theDirective )
@@ -75,16 +75,7 @@ export class NavbarVerticalStyle1Component implements OnInit, OnDestroy
             )
             .subscribe(() => {
                     setTimeout(() => {
-                        const activeNavItem: any = document.querySelector('navbar .nav-link.active');
+                        this._fusePerfectScrollbar.scrollToElement('navbar .nav-link.active', -120);
-
-                        if ( activeNavItem )
-                        {
-                            const activeItemOffsetTop       = activeNavItem.offsetTop,
-                                  activeItemOffsetParentTop = activeNavItem.offsetParent.offsetTop,
-                                  scrollDistance            = activeItemOffsetTop - activeItemOffsetParentTop - (48 * 3) - 168;
-
-                            this._fusePerfectScrollbar.scrollToTop(scrollDistance);
-                        }
                     });
                 }
             );

src/app/layout/components/navbar/vertical/style-1/style-1.module.ts

@@ -1,5 +1,6 @@
 import { NgModule } from '@angular/core';
-import { MatButtonModule, MatIconModule } from '@angular/material';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
 
 import { FuseNavigationModule } from '@fuse/components';
 import { FuseSharedModule } from '@fuse/shared.module';

src/app/layout/components/navbar/vertical/style-2/style-2.component.ts

@@ -47,7 +47,7 @@ export class NavbarVerticalStyle2Component implements OnInit, OnDestroy
     // -----------------------------------------------------------------------------------------------------
 
     // Directive
-    @ViewChild(FusePerfectScrollbarDirective)
+    @ViewChild(FusePerfectScrollbarDirective, {static: true})
     set directive(theDirective: FusePerfectScrollbarDirective)
     {
         if ( !theDirective )
@@ -75,16 +75,7 @@ export class NavbarVerticalStyle2Component implements OnInit, OnDestroy
             )
             .subscribe(() => {
                     setTimeout(() => {
-                        const activeNavItem: any = document.querySelector('navbar .nav-link.active');
+                        this._fusePerfectScrollbar.scrollToElement('navbar .nav-link.active', -120);
-
-                        if ( activeNavItem )
-                        {
-                            const activeItemOffsetTop       = activeNavItem.offsetTop,
-                                  activeItemOffsetParentTop = activeNavItem.offsetParent.offsetTop,
-                                  scrollDistance            = activeItemOffsetTop - activeItemOffsetParentTop - (48 * 3);
-
-                            this._fusePerfectScrollbar.scrollToTop(scrollDistance);
-                        }
                     });
                 }
             );

src/app/layout/components/navbar/vertical/style-2/style-2.module.ts

@@ -1,5 +1,6 @@
 import { NgModule } from '@angular/core';
-import { MatButtonModule, MatIconModule } from '@angular/material';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
 
 import { FuseNavigationModule } from '@fuse/components';
 import { FuseSharedModule } from '@fuse/shared.module';

src/app/layout/components/quick-panel/quick-panel.module.ts

@@ -1,5 +1,7 @@
 import { NgModule } from '@angular/core';
-import { MatDividerModule, MatListModule, MatSlideToggleModule } from '@angular/material';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatListModule } from '@angular/material/list';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 
 import { FuseSharedModule } from '@fuse/shared.module';
 

src/app/layout/components/toolbar/toolbar.component.ts

@@ -45,29 +45,29 @@ export class ToolbarComponent implements OnInit, OnDestroy
         // Set the defaults
         this.userStatusOptions = [
             {
-                'title': 'Online',
+                title: 'Online',
-                'icon' : 'icon-checkbox-marked-circle',
+                icon : 'icon-checkbox-marked-circle',
-                'color': '#4CAF50'
+                color: '#4CAF50'
             },
             {
-                'title': 'Away',
+                title: 'Away',
-                'icon' : 'icon-clock',
+                icon : 'icon-clock',
-                'color': '#FFC107'
+                color: '#FFC107'
             },
             {
-                'title': 'Do not Disturb',
+                title: 'Do not Disturb',
-                'icon' : 'icon-minus-circle',
+                icon : 'icon-minus-circle',
-                'color': '#F44336'
+                color: '#F44336'
             },
             {
-                'title': 'Invisible',
+                title: 'Invisible',
-                'icon' : 'icon-checkbox-blank-circle-outline',
+                icon : 'icon-checkbox-blank-circle-outline',
-                'color': '#BDBDBD'
+                color: '#BDBDBD'
             },
             {
-                'title': 'Offline',
+                title: 'Offline',
-                'icon' : 'icon-checkbox-blank-circle-outline',
+                icon : 'icon-checkbox-blank-circle-outline',
-                'color': '#616161'
+                color: '#616161'
             }
         ];
 
@@ -109,7 +109,7 @@ export class ToolbarComponent implements OnInit, OnDestroy
             });
 
         // Set the selected language from default languages
-        this.selectedLanguage = _.find(this.languages, {'id': this._translateService.currentLang});
+        this.selectedLanguage = _.find(this.languages, {id: this._translateService.currentLang});
     }
 
     /**

src/app/layout/components/toolbar/toolbar.module.ts

@@ -1,6 +1,9 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { MatButtonModule, MatIconModule, MatMenuModule, MatToolbarModule } from '@angular/material';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatToolbarModule } from '@angular/material/toolbar';
 
 import { FuseSearchBarModule, FuseShortcutsModule } from '@fuse/components';
 import { FuseSharedModule } from '@fuse/shared.module';

src/app/layout/horizontal/layout-1/layout-1.component.html

@@ -90,7 +90,7 @@
 <!-- / QUICK PANEL -->
 
 <!-- ----------------------------------------------------------------------------------------------------- -->
-<!-- @ PARTIALS
+<!-- @ PARTIALS                                                                                            -->
 <!-- ----------------------------------------------------------------------------------------------------- -->
 
 <!-- TOOLBAR -->

src/app/layout/horizontal/layout-1/layout-1.module.ts

@@ -1,5 +1,5 @@
 import { NgModule } from '@angular/core';
-import { MatSidenavModule } from '@angular/material';
+import { MatSidenavModule } from '@angular/material/sidenav';
 
 import { FuseSidebarModule, FuseThemeOptionsModule } from '@fuse/components';
 import { FuseSharedModule } from '@fuse/shared.module';

src/app/layout/vertical/layout-1/layout-1.component.html

@@ -102,7 +102,7 @@
 <!-- / QUICK PANEL -->
 
 <!-- ----------------------------------------------------------------------------------------------------- -->
-<!-- @ PARTIALS
+<!-- @ PARTIALS                                                                                            -->
 <!-- ----------------------------------------------------------------------------------------------------- -->
 
 <!-- TOOLBAR -->
@@ -141,4 +141,4 @@
         <navbar [variant]="fuseConfig.layout.navbar.variant" class="right-navbar"></navbar>
     </fuse-sidebar>
 </ng-template>
-<!-- / RIGHT NAVBAR -->
+<!-- / RIGHT NAVBAR -->

src/app/layout/vertical/layout-2/layout-2.component.html

@@ -102,7 +102,7 @@
 <!-- / QUICK PANEL -->
 
 <!-- ----------------------------------------------------------------------------------------------------- -->
-<!-- @ PARTIALS
+<!-- @ PARTIALS                                                                                            -->
 <!-- ----------------------------------------------------------------------------------------------------- -->
 
 <!-- TOOLBAR -->
@@ -141,4 +141,4 @@
         <navbar [variant]="fuseConfig.layout.navbar.variant" class="right-navbar"></navbar>
     </fuse-sidebar>
 </ng-template>
-<!-- / RIGHT NAVBAR -->
+<!-- / RIGHT NAVBAR -->

src/app/layout/vertical/layout-3/layout-3.component.html

@@ -88,7 +88,7 @@
 <!-- / QUICK PANEL -->
 
 <!-- ----------------------------------------------------------------------------------------------------- -->
-<!-- @ PARTIALS
+<!-- @ PARTIALS                                                                                            -->
 <!-- ----------------------------------------------------------------------------------------------------- -->
 
 <!-- TOOLBAR -->
@@ -127,4 +127,4 @@
         <navbar [variant]="fuseConfig.layout.navbar.variant" class="right-navbar"></navbar>
     </fuse-sidebar>
 </ng-template>
-<!-- / RIGHT NAVBAR -->
+<!-- / RIGHT NAVBAR -->

src/app/main/angular-material-elements/example-components.ts

@@ -171,8 +171,12 @@ import { StepperLabelPositionBottomExample } from 'assets/angular-material-examp
 import { StepperStatesExample } from 'assets/angular-material-examples/stepper-states/stepper-states-example';
 import { StepperErrorsExample } from 'assets/angular-material-examples/stepper-errors/stepper-errors-example';
 import { TabGroupAlignExample } from 'assets/angular-material-examples/tab-group-align/tab-group-align-example';
-import { SimpleColumn, TableSimpleColumnExample } from 'assets/angular-material-examples/table-simple-column/table-simple-column-example';
 import { TableWrappedExample, WrapperTable } from 'assets/angular-material-examples/table-wrapped/table-wrapped-example';
+import { PlainInputAutocompleteExample } from 'assets/angular-material-examples/autocomplete-plain-input/autocomplete-plain-input-example';
+import { ChipsDragDropExample } from 'assets/angular-material-examples/chips-drag-and-drop/chips-drag-and-drop-example';
+import { DatepickerDateClassExample } from 'assets/angular-material-examples/datepicker-date-class/datepicker-date-class-example';
+import { MenuPositionExample } from 'assets/angular-material-examples/menu-position/menu-position-example';
+import { TabGroupAnimationsExample } from 'assets/angular-material-examples/tab-group-animations/tab-group-animations-example';
 
 export const COMPONENT_MAP = {
     'autocomplete'    : [
@@ -181,7 +185,8 @@ export const COMPONENT_MAP = {
         'autocomplete-display',
         'autocomplete-filter',
         'autocomplete-optgroup',
-        'autocomplete-simple'
+        'autocomplete-simple',
+        'autocomplete-plain-input'
     ],
     'badge'           : [
         'badge-overview'
@@ -209,6 +214,7 @@ export const COMPONENT_MAP = {
     'chips'           : [
         'chips-overview',
         'chips-autocomplete',
+        // 'chips-drag-and-drop',
         'chips-input',
         'chips-stacked'
     ],
@@ -218,6 +224,7 @@ export const COMPONENT_MAP = {
         'datepicker-color',
         'datepicker-custom-header',
         'datepicker-custom-icon',
+        'datepicker-date-class',
         'datepicker-disabled',
         'datepicker-events',
         'datepicker-filter',
@@ -286,6 +293,7 @@ export const COMPONENT_MAP = {
     ],
     'menu'            : [
         'menu-overview',
+        'menu-position',
         'menu-icons',
         'nested-menu'
     ],
@@ -376,7 +384,6 @@ export const COMPONENT_MAP = {
         'table-pagination',
         'table-row-context',
         'table-selection',
-        'table-simple-column',
         'table-sorting',
         'table-sticky-columns',
         'table-sticky-complex',
@@ -389,6 +396,7 @@ export const COMPONENT_MAP = {
         'tab-group-basic',
         'tab-group-async',
         'tab-group-align',
+        'tab-group-animations',
         'tab-group-custom-label',
         'tab-group-dynamic',
         'tab-group-dynamic-height',
@@ -448,6 +456,10 @@ export const EXAMPLE_COMPONENTS = {
         title    : 'Autocomplete overview',
         component: AutocompleteOverviewExample
     },
+    'autocomplete-plain-input'                  : {
+        title    : 'Plain input autocomplete',
+        component: PlainInputAutocompleteExample
+    },
     'autocomplete-simple'                  : {
         title    : 'Simple autocomplete',
         component: AutocompleteSimpleExample
@@ -502,6 +514,10 @@ export const EXAMPLE_COMPONENTS = {
         title    : 'Chips Autocomplete',
         component: ChipsAutocompleteExample
     },
+    'chips-drag-and-drop'                   : {
+        title    : 'Chips Drag and Drop',
+        component: ChipsDragDropExample
+    },
     'chips-input'                          : {
         title    : 'Chips with input',
         component: ChipsInputExample
@@ -531,6 +547,10 @@ export const EXAMPLE_COMPONENTS = {
         title    : 'Datepicker with custom icon',
         component: DatepickerCustomIconExample
     },
+    'datepicker-date-class'                  : {
+        title    : 'Datepicker with custom date classes',
+        component: DatepickerDateClassExample
+    },
     'datepicker-disabled'                  : {
         title    : 'Disabled datepicker',
         component: DatepickerDisabledExample
@@ -733,6 +753,10 @@ export const EXAMPLE_COMPONENTS = {
         title    : 'Basic menu',
         component: MenuOverviewExample
     },
+    'menu-position'                        : {
+        title    : 'Menu positioning',
+        component: MenuPositionExample
+    },
     'nested-menu'                          : {
         title    : 'Nested menu',
         component: NestedMenuExample
@@ -991,10 +1015,6 @@ export const EXAMPLE_COMPONENTS = {
         title    : 'Table with selection',
         component: TableSelectionExample
     },
-    'table-simple-column'                  : {
-        title    : 'Table with a custom column component for easy column definition reuse',
-        component: TableSimpleColumnExample
-    },
     'table-sorting'                        : {
         title    : 'Table with sorting',
         component: TableSortingExample
@@ -1027,6 +1047,10 @@ export const EXAMPLE_COMPONENTS = {
         title    : 'Tab group with aligned labels',
         component: TabGroupAlignExample
     },
+    'tab-group-animations'                      : {
+        title    : 'Tab group animations',
+        component: TabGroupAnimationsExample
+    },
     'tab-group-basic'                      : {
         title    : 'Basic use of the tab group',
         component: TabGroupBasicExample
@@ -1152,6 +1176,7 @@ export const EXAMPLE_LIST = [
     AutocompleteOptgroupExample,
     AutocompleteOverviewExample,
     AutocompleteSimpleExample,
+    PlainInputAutocompleteExample,
     BadgeOverviewExample,
     BottomSheetOverviewExample, BottomSheetOverviewExampleSheet,
     ButtonOverviewExample,
@@ -1164,6 +1189,7 @@ export const EXAMPLE_LIST = [
     CheckboxConfigurableExample,
     CheckboxOverviewExample,
     ChipsAutocompleteExample,
+    ChipsDragDropExample,
     ChipsInputExample,
     ChipsOverviewExample,
     ChipsStackedExample,
@@ -1171,6 +1197,7 @@ export const EXAMPLE_LIST = [
     DatepickerColorExample,
     DatepickerCustomHeaderExample, ExampleHeader,
     DatepickerCustomIconExample,
+    DatepickerDateClassExample,
     DatepickerDisabledExample,
     DatepickerEventsExample,
     DatepickerFilterExample,
@@ -1219,6 +1246,7 @@ export const EXAMPLE_LIST = [
     ListSelectionExample,
     MenuIconsExample,
     MenuOverviewExample,
+    MenuPositionExample,
     NestedMenuExample,
     PaginatorConfigurableExample,
     PaginatorOverviewExample,
@@ -1283,7 +1311,6 @@ export const EXAMPLE_LIST = [
     TablePaginationExample,
     TableRowContextExample,
     TableSelectionExample,
-    TableSimpleColumnExample, SimpleColumn,
     TableSortingExample,
     TableStickyColumnsExample,
     TableStickyComplexExample,
@@ -1292,6 +1319,7 @@ export const EXAMPLE_LIST = [
     TableStickyHeaderExample,
     TableWrappedExample, WrapperTable,
     TabGroupAlignExample,
+    TabGroupAnimationsExample,
     TabGroupBasicExample,
     TabGroupAsyncExample,
     TabGroupCustomLabelExample,

src/app/main/angular-material-elements/example-viewer/example-viewer.ts

@@ -1,5 +1,5 @@
 import { AfterViewInit, Component, ComponentFactoryResolver, ComponentRef, Input, OnDestroy, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
-import { MatSnackBar } from '@angular/material';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import 'prismjs/components/prism-scss';
 import 'prismjs/components/prism-typescript';
 
@@ -31,7 +31,7 @@ export class ExampleViewerComponent implements AfterViewInit, OnDestroy
     previewRef: ComponentRef<any>;
     selectedIndex: number;
 
-    @ViewChild('previewContainer', {read: ViewContainerRef})
+    @ViewChild('previewContainer', {read: ViewContainerRef, static: false})
     private _previewContainer: ViewContainerRef;
 
     /**

src/app/main/angular-material-elements/material.module.ts

@@ -1,14 +1,40 @@
 import { NgModule } from '@angular/core';
 
-import {
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
-    MatAutocompleteModule, MatBadgeModule, MatBottomSheetModule, MatButtonModule,
+import { MatBadgeModule } from '@angular/material/badge';
-    MatButtonToggleModule, MatCardModule, MatCheckboxModule, MatChipsModule, MatDatepickerModule,
+import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
-    MatDialogModule, MatDividerModule, MatExpansionModule, MatFormFieldModule, MatGridListModule,
+import { MatButtonModule } from '@angular/material/button';
-    MatIconModule, MatInputModule, MatListModule, MatMenuModule, MatPaginatorModule,
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
-    MatProgressBarModule, MatProgressSpinnerModule, MatRadioModule, MatRippleModule, MatSelectModule,
+import { MatCardModule } from '@angular/material/card';
-    MatSidenavModule, MatSliderModule, MatSlideToggleModule, MatSnackBarModule, MatSortModule,
+import { MatCheckboxModule } from '@angular/material/checkbox';
-    MatStepperModule, MatTableModule, MatTabsModule, MatToolbarModule, MatTooltipModule, MatTreeModule
+import { MatChipsModule } from '@angular/material/chips';
-} from '@angular/material';
+import { MatRippleModule } from '@angular/material/core';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatExpansionModule } from '@angular/material/expansion';
+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/input';
+import { MatListModule } from '@angular/material/list';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatSliderModule } from '@angular/material/slider';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatSortModule } from '@angular/material/sort';
+import { MatStepperModule } from '@angular/material/stepper';
+import { MatTableModule } from '@angular/material/table';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatTreeModule } from '@angular/material/tree';
 import { MatMomentDateModule } from '@angular/material-moment-adapter';
 
 @NgModule({

src/app/main/apps/academy/academy.module.ts

@@ -1,7 +1,11 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
-import { MatButtonModule, MatFormFieldModule, MatIconModule, MatInputModule, MatSelectModule } from '@angular/material';
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
 
 import { FuseSharedModule } from '@fuse/shared.module';
 

src/app/main/apps/calendar/calendar.component.scss

@@ -38,7 +38,7 @@
             display: flex;
             flex-direction: row;
             align-items: center;
-            justify-content: start;
+            justify-content: flex-start;
             @include mat-elevation(1);
             transition: box-shadow 300ms ease;
 

src/app/main/apps/calendar/calendar.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { FormGroup } from '@angular/forms';
-import { MatDialog, MatDialogRef } from '@angular/material';
+import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { Subject } from 'rxjs';
 import { startOfDay, isSameDay, isSameMonth } from 'date-fns';
 import { CalendarEvent, CalendarEventAction, CalendarEventTimesChangedEvent, CalendarMonthViewDay } from 'angular-calendar';

src/app/main/apps/calendar/calendar.module.ts

@@ -1,8 +1,14 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import {
+import { MatButtonModule } from '@angular/material/button';
-    MatButtonModule, MatDatepickerModule, MatDialogModule, MatFormFieldModule, MatIconModule, MatInputModule, MatSlideToggleModule, MatToolbarModule, MatTooltipModule
+import { MatDatepickerModule } from '@angular/material/datepicker';
-} from '@angular/material';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { ColorPickerModule } from 'ngx-color-picker';
 import { CalendarModule as AngularCalendarModule, DateAdapter } from 'angular-calendar';
 import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';

src/app/main/apps/calendar/event-form/event-form.component.ts

@@ -1,6 +1,6 @@
 import { Component, Inject, ViewEncapsulation } from '@angular/core';
 import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { CalendarEvent } from 'angular-calendar';
 
 import { MatColors } from '@fuse/mat-colors';

src/app/main/apps/calendar/event.model.ts

@@ -38,7 +38,7 @@ export class CalendarEventModel
             primary  : data.color && data.color.primary || '#1e90ff',
             secondary: data.color && data.color.secondary || '#D1E8FF'
         };
-        this.draggable = data.draggable || true;
+        this.draggable = data.draggable;
         this.resizable = {
             beforeStart: data.resizable && data.resizable.beforeStart || true,
             afterEnd   : data.resizable && data.resizable.afterEnd || true

src/app/main/apps/chat/chat-view/chat-view.component.ts

@@ -22,13 +22,13 @@ export class ChatViewComponent implements OnInit, OnDestroy, AfterViewInit
     replyInput: any;
     selectedChat: any;
 
-    @ViewChild(FusePerfectScrollbarDirective)
+    @ViewChild(FusePerfectScrollbarDirective, {static: false})
     directiveScroll: FusePerfectScrollbarDirective;
 
     @ViewChildren('replyInput')
     replyInputField;
 
-    @ViewChild('replyForm')
+    @ViewChild('replyForm', {static: false})
     replyForm: NgForm;
 
     // Private

src/app/main/apps/chat/chat.module.ts

@@ -1,9 +1,16 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
-import {
+import { MatButtonModule } from '@angular/material/button';
-    MatButtonModule, MatCardModule, MatFormFieldModule, MatIconModule, MatInputModule, MatListModule, MatMenuModule, MatRadioModule, MatSidenavModule, MatToolbarModule
+import { MatCardModule } from '@angular/material/card';
-} from '@angular/material';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatListModule } from '@angular/material/list';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatToolbarModule } from '@angular/material/toolbar';
 
 import { FuseSharedModule } from '@fuse/shared.module';
 

src/app/main/apps/chat/sidenavs/left/chats/chats.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
-import { ObservableMedia } from '@angular/flex-layout';
+import { MediaObserver } from '@angular/flex-layout';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
@@ -31,12 +31,12 @@ export class ChatChatsSidenavComponent implements OnInit, OnDestroy
      *
      * @param {ChatService} _chatService
      * @param {FuseMatSidenavHelperService} _fuseMatSidenavHelperService
-     * @param {ObservableMedia} _observableMedia
+     * @param {MediaObserver} _mediaObserver
      */
     constructor(
         private _chatService: ChatService,
         private _fuseMatSidenavHelperService: FuseMatSidenavHelperService,
-        public _observableMedia: ObservableMedia
+        public _mediaObserver: MediaObserver
     )
     {
         // Set the defaults
@@ -98,7 +98,7 @@ export class ChatChatsSidenavComponent implements OnInit, OnDestroy
     {
         this._chatService.getChat(contact);
 
-        if ( !this._observableMedia.isActive('gt-md') )
+        if ( !this._mediaObserver.isActive('gt-md') )
         {
             this._fuseMatSidenavHelperService.getSidenav('chat-left-sidenav').toggle();
         }

src/app/main/apps/contacts/contact-form/contact-form.component.ts

@@ -1,6 +1,6 @@
 import { Component, Inject, ViewEncapsulation } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 
 import { Contact } from 'app/main/apps/contacts/contact.model';
 

src/app/main/apps/contacts/contact-list/contact-list.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnDestroy, OnInit, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';
 import { FormGroup } from '@angular/forms';
-import { MatDialog, MatDialogRef } from '@angular/material';
+import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { DataSource } from '@angular/cdk/collections';
 import { Observable, Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -20,7 +20,7 @@ import { ContactsContactFormDialogComponent } from 'app/main/apps/contacts/conta
 })
 export class ContactsContactListComponent implements OnInit, OnDestroy
 {
-    @ViewChild('dialogContent')
+    @ViewChild('dialogContent', {static: false})
     dialogContent: TemplateRef<any>;
 
     contacts: any;

src/app/main/apps/contacts/contacts.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 import { Subject } from 'rxjs';
 import { debounceTime, distinctUntilChanged, takeUntil } from 'rxjs/operators';
 

src/app/main/apps/contacts/contacts.module.ts

@@ -1,8 +1,15 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import {
+import { MatButtonModule } from '@angular/material/button';
-    MatButtonModule, MatCheckboxModule, MatDatepickerModule, MatFormFieldModule, MatIconModule, MatInputModule, MatMenuModule, MatRippleModule, MatTableModule, MatToolbarModule
+import { MatCheckboxModule } from '@angular/material/checkbox';
-} from '@angular/material';
+import { MatRippleModule } from '@angular/material/core';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatTableModule } from '@angular/material/table';
+import { MatToolbarModule } from '@angular/material/toolbar';
 
 import { FuseSharedModule } from '@fuse/shared.module';
 import { FuseConfirmDialogModule, FuseSidebarModule } from '@fuse/components';

src/app/main/apps/contacts/selected-bar/selected-bar.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { MatDialog, MatDialogRef } from '@angular/material';
+import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 

src/app/main/apps/dashboards/analytics/analytics.component.ts

@@ -52,8 +52,8 @@ export class AnalyticsDashboardComponent implements OnInit
      */
     private _registerCustomChartJSPlugin(): void
     {
-        (<any>window).Chart.plugins.register({
+        (window as any).Chart.plugins.register({
-            afterDatasetsDraw: function (chart, easing): any {
+            afterDatasetsDraw: function(chart, easing): any {
                 // Only activate the plugin if it's made available
                 // in the options
                 if (
@@ -67,18 +67,18 @@ export class AnalyticsDashboardComponent implements OnInit
                 // To only draw at the end of animation, check for easing === 1
                 const ctx = chart.ctx;
 
-                chart.data.datasets.forEach(function (dataset, i): any {
+                chart.data.datasets.forEach(function(dataset, i): any {
                     const meta = chart.getDatasetMeta(i);
                     if ( !meta.hidden )
                     {
-                        meta.data.forEach(function (element, index): any {
+                        meta.data.forEach(function(element, index): any {
 
                             // Draw the text in black, with the specified font
                             ctx.fillStyle = 'rgba(255, 255, 255, 0.7)';
                             const fontSize = 13;
                             const fontStyle = 'normal';
                             const fontFamily = 'Roboto, Helvetica Neue, Arial';
-                            ctx.font = (<any>window).Chart.helpers.fontString(fontSize, fontStyle, fontFamily);
+                            ctx.font = (window as any).Chart.helpers.fontString(fontSize, fontStyle, fontFamily);
 
                             // Just naively convert to string for now
                             const dataString = dataset.data[index].toString() + 'k';

src/app/main/apps/dashboards/analytics/analytics.module.ts

@@ -1,6 +1,11 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { MatButtonModule, MatFormFieldModule, MatIconModule, MatMenuModule, MatSelectModule, MatTabsModule } from '@angular/material';
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatSelectModule } from '@angular/material/select';
+import { MatTabsModule } from '@angular/material/tabs';
 import { AgmCoreModule } from '@agm/core';
 import { ChartsModule } from 'ng2-charts';
 import { NgxChartsModule } from '@swimlane/ngx-charts';

src/app/main/apps/dashboards/project/project.module.ts

@@ -1,6 +1,13 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { MatButtonModule, MatDividerModule, MatFormFieldModule, MatIconModule, MatMenuModule, MatSelectModule, MatTableModule, MatTabsModule } from '@angular/material';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatSelectModule } from '@angular/material/select';
+import { MatTableModule } from '@angular/material/table';
+import { MatTabsModule } from '@angular/material/tabs';
 import { NgxChartsModule } from '@swimlane/ngx-charts';
 
 import { FuseSharedModule } from '@fuse/shared.module';

src/app/main/apps/e-commerce/e-commerce.module.ts

@@ -1,10 +1,18 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import {
+import { MatButtonModule } from '@angular/material/button';
-    MatButtonModule, MatChipsModule, MatExpansionModule, MatFormFieldModule, MatIconModule, MatInputModule, MatPaginatorModule, MatRippleModule, MatSelectModule, MatSnackBarModule,
+import { MatChipsModule } from '@angular/material/chips';
-    MatSortModule,
+import { MatRippleModule } from '@angular/material/core';
-    MatTableModule, MatTabsModule
+import { MatExpansionModule } from '@angular/material/expansion';
-} from '@angular/material';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatSortModule } from '@angular/material/sort';
+import { MatTableModule } from '@angular/material/table';
+import { MatTabsModule } from '@angular/material/tabs';
 import { NgxChartsModule } from '@swimlane/ngx-charts';
 import { AgmCoreModule } from '@agm/core';
 

src/app/main/apps/e-commerce/order/order-statuses.ts

@@ -1,72 +1,72 @@
 export const orderStatuses = [
     {
-        'id'   : 1,
+        id   : 1,
-        'name' : 'Awaiting check payment',
+        name : 'Awaiting check payment',
-        'color': 'blue-500'
+        color: 'blue-500'
     },
     {
-        'id'   : 2,
+        id   : 2,
-        'name' : 'Payment accepted',
+        name : 'Payment accepted',
-        'color': 'green-500'
+        color: 'green-500'
     },
     {
-        'id'   : 3,
+        id   : 3,
-        'name' : 'Preparing the order',
+        name : 'Preparing the order',
-        'color': 'orange-500'
+        color: 'orange-500'
     },
     {
-        'id'   : 4,
+        id   : 4,
-        'name' : 'Shipped',
+        name : 'Shipped',
-        'color': 'purple-500'
+        color: 'purple-500'
     },
     {
-        'id'   : 5,
+        id   : 5,
-        'name' : 'Delivered',
+        name : 'Delivered',
-        'color': 'green-800'
+        color: 'green-800'
     },
     {
-        'id'   : 6,
+        id   : 6,
-        'name' : 'Canceled',
+        name : 'Canceled',
-        'color': 'pink-500'
+        color: 'pink-500'
     },
     {
-        'id'   : 7,
+        id   : 7,
-        'name' : 'Refunded',
+        name : 'Refunded',
-        'color': 'red-500'
+        color: 'red-500'
     },
     {
-        'id'   : 8,
+        id   : 8,
-        'name' : 'Payment error',
+        name : 'Payment error',
-        'color': 'red-900'
+        color: 'red-900'
     },
     {
-        'id'   : 9,
+        id   : 9,
-        'name' : 'On pre-order (paid)',
+        name : 'On pre-order (paid)',
-        'color': 'purple-300'
+        color: 'purple-300'
     },
     {
-        'id'   : 10,
+        id   : 10,
-        'name' : 'Awaiting bank wire payment',
+        name : 'Awaiting bank wire payment',
-        'color': 'blue-500'
+        color: 'blue-500'
     },
     {
-        'id'   : 11,
+        id   : 11,
-        'name' : 'Awaiting PayPal payment',
+        name : 'Awaiting PayPal payment',
-        'color': 'blue-500'
+        color: 'blue-500'
     },
     {
-        'id'   : 12,
+        id   : 12,
-        'name' : 'Remote payment accepted',
+        name : 'Remote payment accepted',
-        'color': 'green-500'
+        color: 'green-500'
     },
     {
-        'id'   : 13,
+        id   : 13,
-        'name' : 'On pre-order (not paid)',
+        name : 'On pre-order (not paid)',
-        'color': 'purple-300'
+        color: 'purple-300'
     },
     {
-        'id'   : 14,
+        id   : 14,
-        'name' : 'Awaiting Cash-on-delivery payment',
+        name : 'Awaiting Cash-on-delivery payment',
-        'color': 'blue-500'
+        color: 'blue-500'
     }
 ];

src/app/main/apps/e-commerce/orders/orders.component.ts

@@ -1,5 +1,6 @@
 import { Component, ElementRef, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
-import { MatPaginator, MatSort } from '@angular/material';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
 import { DataSource } from '@angular/cdk/collections';
 import { BehaviorSubject, fromEvent, merge, Observable, Subject } from 'rxjs';
 import { debounceTime, distinctUntilChanged, map } from 'rxjs/operators';
@@ -22,13 +23,13 @@ export class EcommerceOrdersComponent implements OnInit, OnDestroy
     dataSource: FilesDataSource | null;
     displayedColumns = ['id', 'reference', 'customer', 'total', 'payment', 'status', 'date'];
 
-    @ViewChild(MatPaginator)
+    @ViewChild(MatPaginator, {static: true})
     paginator: MatPaginator;
 
-    @ViewChild('filter')
+    @ViewChild('filter', {static: true})
     filter: ElementRef;
 
-    @ViewChild(MatSort)
+    @ViewChild(MatSort, {static: true})
     sort: MatSort;
 
     // Private

src/app/main/apps/e-commerce/product/product.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { Location } from '@angular/common';
-import { MatSnackBar } from '@angular/material';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 

src/app/main/apps/e-commerce/product/product.model.ts

@@ -1,4 +1,4 @@
-import { MatChipInputEvent } from '@angular/material';
+import { MatChipInputEvent } from '@angular/material/chips';
 
 import { FuseUtils } from '@fuse/utils';
 

src/app/main/apps/e-commerce/products/products.component.ts

@@ -1,5 +1,6 @@
 import { Component, ElementRef, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
-import { MatPaginator, MatSort } from '@angular/material';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
 import { DataSource } from '@angular/cdk/collections';
 import { BehaviorSubject, fromEvent, merge, Observable, Subject } from 'rxjs';
 import { debounceTime, distinctUntilChanged, map } from 'rxjs/operators';
@@ -22,13 +23,13 @@ export class EcommerceProductsComponent implements OnInit
     dataSource: FilesDataSource | null;
     displayedColumns = ['id', 'image', 'name', 'category', 'price', 'quantity', 'active'];
 
-    @ViewChild(MatPaginator)
+    @ViewChild(MatPaginator, {static: true})
     paginator: MatPaginator;
 
-    @ViewChild(MatSort)
+    @ViewChild(MatSort, {static: true})
     sort: MatSort;
 
-    @ViewChild('filter')
+    @ViewChild('filter', {static: true})
     filter: ElementRef;
 
     // Private

src/app/main/apps/file-manager/file-manager.module.ts

@@ -1,6 +1,10 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { MatButtonModule, MatIconModule, MatRippleModule, MatSlideToggleModule, MatTableModule } from '@angular/material';
+import { MatButtonModule } from '@angular/material/button';
+import { MatRippleModule } from '@angular/material/core';
+import { MatIconModule } from '@angular/material/icon';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatTableModule } from '@angular/material/table';
 
 import { FuseSharedModule } from '@fuse/shared.module';
 import { FuseSidebarModule } from '@fuse/components';

src/app/main/apps/file-manager/sidebars/details/details.component.html

@@ -36,7 +36,7 @@
         </div>
 
         <div class="offline-switch">
-            <mat-slide-toggle ([ngModel])="selected.offline" labelPosition="before">Available Offline</mat-slide-toggle>
+            <mat-slide-toggle [(ngModel)]="selected.offline" labelPosition="before">Available Offline</mat-slide-toggle>
         </div>
 
         <div class="title">Info</div>

src/app/main/apps/mail-ngrx/dialogs/compose/compose.component.ts

@@ -1,6 +1,6 @@
 import { Component, Inject, ViewEncapsulation } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 
 @Component({
     selector     : 'mail-ngrx-compose',

src/app/main/apps/mail-ngrx/i18n/en.ts

@@ -1,14 +1,14 @@
 export const locale = {
     lang: 'en',
     data: {
-        'MAIL': {
+        MAIL: {
-            'COMPOSE'                 : 'COMPOSE',
+            COMPOSE                 : 'COMPOSE',
-            'FOLDERS'                 : 'FOLDERS',
+            FOLDERS                 : 'FOLDERS',
-            'FILTERS'                 : 'FILTERS',
+            FILTERS                 : 'FILTERS',
-            'LABELS'                  : 'LABELS',
+            LABELS                  : 'LABELS',
-            'NO_MESSAGES'             : 'There are no messages!',
+            NO_MESSAGES             : 'There are no messages!',
-            'SELECT_A_MESSAGE_TO_READ': 'Select a message to read',
+            SELECT_A_MESSAGE_TO_READ: 'Select a message to read',
-            'SEARCH_PLACEHOLDER': 'Search for an e-mail or contact'
+            SEARCH_PLACEHOLDER: 'Search for an e-mail or contact'
         }
     }
 };

src/app/main/apps/mail-ngrx/i18n/tr.ts

@@ -1,14 +1,14 @@
 export const locale = {
     lang: 'tr',
     data: {
-        'MAIL': {
+        MAIL: {
-            'COMPOSE'                 : 'YENİ E-POSTA',
+            COMPOSE                 : 'YENİ E-POSTA',
-            'FOLDERS'                 : 'KLASÖRLER',
+            FOLDERS                 : 'KLASÖRLER',
-            'FILTERS'                 : 'FİLTRELER',
+            FILTERS                 : 'FİLTRELER',
-            'LABELS'                  : 'ETİKETLER',
+            LABELS                  : 'ETİKETLER',
-            'NO_MESSAGES'             : 'Mesajiniz bulunmamakta!',
+            NO_MESSAGES             : 'Mesajiniz bulunmamakta!',
-            'SELECT_A_MESSAGE_TO_READ': 'Okumak için bir mesaj seçin',
+            SELECT_A_MESSAGE_TO_READ: 'Okumak için bir mesaj seçin',
-            'SEARCH_PLACEHOLDER'      : 'E-mail yada bir kişi arayın'
+            SEARCH_PLACEHOLDER      : 'E-mail yada bir kişi arayın'
         }
     }
 };

src/app/main/apps/mail-ngrx/mail.component.scss

@@ -51,16 +51,16 @@ mail-ngrx {
 
             @include media-breakpoint(xs) {
 
-                mail-list {
+                mail-ngrx-list {
                     border-right: none;
                 }
 
-                mail-list,
+                mail-ngrx-list,
-                mail-details {
+                mail-ngrx-details {
                     flex: 1 0 100%;
                 }
 
-                mail-details {
+                mail-ngrx-details {
                     display: none !important;
                 }
 
@@ -76,11 +76,11 @@ mail-ngrx {
 
                     .content {
 
-                        mail-list {
+                        mail-ngrx-list {
                             display: none !important;
                         }
 
-                        mail-details {
+                        mail-ngrx-details {
                             display: flex !important;
                         }
                     }

src/app/main/apps/mail-ngrx/mail.module.ts

@@ -1,8 +1,15 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import {
+import { MatButtonModule } from '@angular/material/button';
-    MatButtonModule, MatCheckboxModule, MatDialogModule, MatFormFieldModule, MatIconModule, MatInputModule, MatMenuModule, MatRippleModule, MatSelectModule, MatToolbarModule
+import { MatCheckboxModule } from '@angular/material/checkbox';
-} from '@angular/material';
+import { MatRippleModule } from '@angular/material/core';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatSelectModule } from '@angular/material/select';
+import { MatToolbarModule } from '@angular/material/toolbar';
 import { TranslateModule } from '@ngx-translate/core';
 
 import { FuseSharedModule } from '@fuse/shared.module';

src/app/main/apps/mail-ngrx/sidebars/main/main-sidebar.component.html

@@ -4,7 +4,7 @@
 
     <div class="logo" fxFlex fxLayout="row" fxLayoutAlign="start center">
         <mat-icon class="logo-icon s-32">mail</mat-icon>
-        <span class="logo-text">Mailbox Ngrx</span>
+        <span class="logo-text">MailboxNgrx</span>
     </div>
 
     <div class="account" fxLayout="column">

src/app/main/apps/mail-ngrx/sidebars/main/main-sidebar.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 import { FormGroup } from '@angular/forms';
 import { select, Store } from '@ngrx/store';
 import { Observable } from 'rxjs';
@@ -41,8 +41,8 @@ export class MailNgrxMainSidebarComponent
     {
         // Set the defaults
         this.accounts = {
-            'creapond'    : 'johndoe@creapond.com',
+            creapond    : 'johndoe@creapond.com',
-            'withinpixels': 'johndoe@withinpixels.com'
+            withinpixels: 'johndoe@withinpixels.com'
         };
         this.selectedAccount = 'creapond';
         this.folders$ = this._store.pipe(select(fromStore.getFoldersArr));

src/app/main/apps/mail-ngrx/store/effects/mails.effects.ts

@@ -80,7 +80,7 @@ export class MailsEffect
      * @type {Observable<any>}
      */
     @Effect()
-    updateMail: Observable<MailsActions.MailsActionsAll> =
+    updateMail: Observable<{}> =
         this.actions
             .pipe(
                 ofType<MailsActions.UpdateMail>(MailsActions.UPDATE_MAIL),

src/app/main/apps/mail-ngrx/store/guards/resolve.guard.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import { ActivatedRouteSnapshot, CanActivate } from '@angular/router';
-import { RouterStateSnapshot } from '@angular/router/src/router_state';
+import { RouterStateSnapshot } from '@angular/router';
 import { select, Store } from '@ngrx/store';
 
 import { Observable, forkJoin, of } from 'rxjs';

src/app/main/apps/mail/dialogs/compose/compose.component.ts

@@ -1,6 +1,6 @@
 import { Component, Inject, ViewEncapsulation } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 
 @Component({
     selector     : 'mail-compose',

src/app/main/apps/mail/i18n/en.ts

@@ -1,14 +1,14 @@
 export const locale = {
     lang: 'en',
     data: {
-        'MAIL': {
+        MAIL: {
-            'COMPOSE'                 : 'COMPOSE',
+            COMPOSE                 : 'COMPOSE',
-            'FOLDERS'                 : 'FOLDERS',
+            FOLDERS                 : 'FOLDERS',
-            'FILTERS'                 : 'FILTERS',
+            FILTERS                 : 'FILTERS',
-            'LABELS'                  : 'LABELS',
+            LABELS                  : 'LABELS',
-            'NO_MESSAGES'             : 'There are no messages!',
+            NO_MESSAGES             : 'There are no messages!',
-            'SELECT_A_MESSAGE_TO_READ': 'Select a message to read',
+            SELECT_A_MESSAGE_TO_READ: 'Select a message to read',
-            'SEARCH_PLACEHOLDER'      : 'Search for an e-mail or contact'
+            SEARCH_PLACEHOLDER      : 'Search for an e-mail or contact'
         }
     }
 };

src/app/main/apps/mail/i18n/tr.ts

@@ -1,14 +1,14 @@
 export const locale = {
     lang: 'tr',
     data: {
-        'MAIL': {
+        MAIL: {
-            'COMPOSE'                 : 'YENİ E-POSTA',
+            COMPOSE                 : 'YENİ E-POSTA',
-            'FOLDERS'                 : 'KLASÖRLER',
+            FOLDERS                 : 'KLASÖRLER',
-            'FILTERS'                 : 'FİLTRELER',
+            FILTERS                 : 'FİLTRELER',
-            'LABELS'                  : 'ETİKETLER',
+            LABELS                  : 'ETİKETLER',
-            'NO_MESSAGES'             : 'Mesajiniz bulunmamakta!',
+            NO_MESSAGES             : 'Mesajiniz bulunmamakta!',
-            'SELECT_A_MESSAGE_TO_READ': 'Okumak için bir mesaj seçin',
+            SELECT_A_MESSAGE_TO_READ: 'Okumak için bir mesaj seçin',
-            'SEARCH_PLACEHOLDER'      : 'E-mail yada bir kişi arayın'
+            SEARCH_PLACEHOLDER      : 'E-mail yada bir kişi arayın'
         }
     }
 };

src/app/main/apps/mail/mail.module.ts

@@ -1,8 +1,15 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import {
+import { MatButtonModule } from '@angular/material/button';
-    MatButtonModule, MatCheckboxModule, MatDialogModule, MatFormFieldModule, MatIconModule, MatInputModule, MatMenuModule, MatRippleModule, MatSelectModule, MatToolbarModule
+import { MatCheckboxModule } from '@angular/material/checkbox';
-} from '@angular/material';
+import { MatRippleModule } from '@angular/material/core';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatSelectModule } from '@angular/material/select';
+import { MatToolbarModule } from '@angular/material/toolbar';
 import { TranslateModule } from '@ngx-translate/core';
 
 import { FuseSharedModule } from '@fuse/shared.module';

src/app/main/apps/mail/sidebars/main/main-sidebar.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
 import { FormGroup } from '@angular/forms';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
@@ -41,8 +41,8 @@ export class MailMainSidebarComponent implements OnInit, OnDestroy
     {
         // Set the defaults
         this.accounts = {
-            'creapond'    : 'johndoe@creapond.com',
+            creapond    : 'johndoe@creapond.com',
-            'withinpixels': 'johndoe@withinpixels.com'
+            withinpixels: 'johndoe@withinpixels.com'
         };
         this.selectedAccount = 'creapond';
 

src/app/main/apps/scrumboard/board.model.ts

@@ -5,19 +5,19 @@ import { Card } from './card.model';
 
 const sampleLabels = [
     {
-        'id'   : '56027e4119ad3a5dc28b36cd',
+        id   : '56027e4119ad3a5dc28b36cd',
-        'name' : 'Design',
+        name : 'Design',
-        'color': 'red-500'
+        color: 'red-500'
     },
     {
-        'id'   : '5640635e19ad3a5dc21416b2',
+        id   : '5640635e19ad3a5dc21416b2',
-        'name' : 'App',
+        name : 'App',
-        'color': 'blue-500'
+        color: 'blue-500'
     },
     {
-        'id'   : '6540635g19ad3s5dc31412b2',
+        id   : '6540635g19ad3s5dc31412b2',
-        'name' : 'Feature',
+        name : 'Feature',
-        'color': 'green-400'
+        color: 'green-400'
     }
 ];
 

src/app/main/apps/scrumboard/board/add-list/add-list.component.ts

@@ -15,7 +15,7 @@ export class ScrumboardBoardAddListComponent
     @Output()
     listAdded: EventEmitter<any>;
 
-    @ViewChild('nameInput')
+    @ViewChild('nameInput', {static: false})
     nameInputField;
 
     /**

src/app/main/apps/scrumboard/board/dialogs/card/card.component.ts

@@ -1,6 +1,7 @@
 import { Component, Inject, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
-import { NgForm } from '@angular/forms/src/forms';
+import { NgForm } from '@angular/forms';
-import { MAT_DIALOG_DATA, MatDialog, MatDialogRef, MatMenuTrigger } from '@angular/material';
+import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
+import { MatMenuTrigger } from '@angular/material/menu';
 import { Subject } from 'rxjs';
 
 import { FuseConfirmDialogComponent } from '@fuse/components/confirm-dialog/confirm-dialog.component';
@@ -24,10 +25,10 @@ export class ScrumboardCardDialogComponent implements OnInit, OnDestroy
     toggleInArray = FuseUtils.toggleInArray;
     confirmDialogRef: MatDialogRef<FuseConfirmDialogComponent>;
 
-    @ViewChild('checklistMenuTrigger')
+    @ViewChild('checklistMenuTrigger', {static: false})
     checklistMenu: MatMenuTrigger;
 
-    @ViewChild('newCheckListTitleField')
+    @ViewChild('newCheckListTitleField', {static: false})
     newCheckListTitleField;
 
     // Private
@@ -222,8 +223,8 @@ export class ScrumboardCardDialogComponent implements OnInit, OnDestroy
         }
 
         const newCheckItem = {
-            'name'   : checkItemVal,
+            name   : checkItemVal,
-            'checked': false
+            checked: false
         };
 
         checkList.checkItems.push(newCheckItem);