#537 snackbar notification system (#1527)

* #537 snackbar notification system * #537 add test dependencies * #537 add export material module * #537 fix demo project
2025-07-24 17:32:15 +00:00 · 2017-01-24 17:09:13 +00:00
parent d8c433c055
commit 1c21875607
75 changed files with 256 additions and 140 deletions
--- a/demo-shell-ng2/app/app.module.ts
+++ b/demo-shell-ng2/app/app.module.ts
@@ -32,7 +32,6 @@ import { ActivitiTaskListModule } from 'ng2-activiti-tasklist';
 import { ActivitiProcessListModule } from 'ng2-activiti-processlist';
 import { UserInfoComponentModule } from 'ng2-alfresco-userinfo';
 import { AnalyticsModule } from 'ng2-activiti-analytics';
-
 import { AppComponent } from './app.component';
 import { routing } from './app.routes';
 import { CustomEditorsModule } from './components/activiti/custom-editor/custom-editor.component';
--- a/demo-shell-ng2/app/vendor.ts
+++ b/demo-shell-ng2/app/vendor.ts
@@ -32,9 +32,13 @@ import 'dialog-polyfill/dialog-polyfill.css';

 // Flags
 import 'flag-icon-css/css/flag-icon.min.css';
+
 import '../public/css/app.css';
 import '../public/css/muli-font.css';

+// Load the Angular Material 2 stylesheet
+import '@angular/material/core/theming/prebuilt/deeppurple-amber.css'
+
 import 'ng2-activiti-form/stencils/runtime.ng1';
 import 'ng2-activiti-form/stencils/runtime.adf';

--- a/demo-shell-ng2/index.html
+++ b/demo-shell-ng2/index.html
@@ -33,24 +33,7 @@
    <script src="js/material.min.js"></script>
    <link href="css/iconfont/material-icons.css" rel="stylesheet">

-
    <style>
-        .main_header_adf .mdl-layout__drawer-button {
-            right: 0 !important;
-            left: initial !important;
-            left: auto;
-
-        }
-
-        .mdl-layout__header {
-            color: rgb(255, 255, 255);
-            background-color: rgb(31, 188, 210);
-        }
-
-        .mdl-layout__header-row .mdl-navigation__link {
-            color: rgb(255, 255, 255);
-        }
-        
        .loader-container {
            display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
            display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
--- a/demo-shell-ng2/package.json
+++ b/demo-shell-ng2/package.json
@@ -62,6 +62,7 @@
    "@angular/platform-browser-dynamic": "2.2.2",
    "@angular/router": "3.2.2",
    "@angular/upgrade": "2.2.2",
+    "@angular/material": "2.0.0-beta.1",
    "systemjs": "0.19.27",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.8",
--- a/demo-shell-ng2/public/css/app.css
+++ b/demo-shell-ng2/public/css/app.css
@@ -3,7 +3,6 @@ body, html {
    height: 100%;
 }

-
 .p-10 {
    padding: 10px;
 }
@@ -21,16 +20,16 @@ body, html {
    -moz-box-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
-    height:100%;
+    height: 100%;
 }

 .loader-item {
    margin: auto;
-    max-height:100px;
-    max-width:300px;
+    max-height: 100px;
+    max-width: 300px;
 }

-.loader-text{
+.loader-text {
    white-space: nowrap;
    text-align: center;
    position: relative;
@@ -39,3 +38,27 @@ body, html {
 ._dialog_overlay {
    position: static !important;
 }
+
+.main_header_adf .mdl-layout__drawer-button {
+    right: 0 !important;
+    left: initial !important;
+    left: auto;
+}
+
+.mdl-layout__header {
+    color: rgb(255, 255, 255);
+    background-color: rgb(31, 188, 210);
+}
+
+.mdl-layout__header .material-icons {
+    color: rgb(255, 255, 255);
+}
+
+.mdl-layout__header-row .mdl-navigation__link {
+    color: rgb(255, 255, 255);
+}
+
+.md-simple-snackbar-action {
+    border: 0px;
+    cursor: pointer;
+}
--- a/ng2-components/ng2-activiti-analytics/README.md
+++ b/ng2-components/ng2-activiti-analytics/README.md
@@ -69,6 +69,9 @@ Follow the 3 steps below:
    <script src="node_modules/material-design-lite/material.min.js"></script>
    <link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">

+    <!-- Load the Angular Material 2 stylesheet -->
+    <link href="node_modules/@angular/material/core/theming/prebuilt/deeppurple-amber.css" rel="stylesheet">
+
    <!-- Polyfill(s) for Safari (pre-10.x) -->
    <script src="node_modules/intl/dist/Intl.min.js"></script>
    <script src="node_modules/intl/locale-data/jsonp/en.js"></script>
--- a/ng2-components/ng2-activiti-analytics/demo/package.json
+++ b/ng2-components/ng2-activiti-analytics/demo/package.json
@@ -39,6 +39,7 @@
    "@angular/http": "2.2.2",
    "@angular/platform-browser": "2.2.2",
    "@angular/platform-browser-dynamic": "2.2.2",
+    "@angular/material": "2.0.0-beta.1",
    "@angular/router": "3.2.2",
    "@angular/upgrade": "2.2.2",
    "core-js": "^2.4.1",
--- a/ng2-components/ng2-activiti-analytics/karma-test-shim.js
+++ b/ng2-components/ng2-activiti-analytics/karma-test-shim.js
@@ -39,6 +39,8 @@ var map = {
    '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
    '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
    '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
+    '@angular/material': 'npm:@angular/material/bundles/material.umd.js',
+
    // testing
    '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
    '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
--- a/ng2-components/ng2-activiti-analytics/package.json
+++ b/ng2-components/ng2-activiti-analytics/package.json
@@ -51,6 +51,7 @@
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
+    "@angular/material": "2.0.0-beta.1",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.12",
--- a/ng2-components/ng2-activiti-diagrams/README.md
+++ b/ng2-components/ng2-activiti-diagrams/README.md
@@ -62,6 +62,9 @@ Follow the 3 steps below:
    <script src="node_modules/material-design-lite/material.min.js"></script>
    <link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">

+    <!-- Load the Angular Material 2 stylesheet -->
+    <link href="node_modules/@angular/material/core/theming/prebuilt/deeppurple-amber.css" rel="stylesheet">
+    
    <!-- Polyfill(s) for Safari (pre-10.x) -->
    <script src="node_modules/intl/dist/Intl.min.js"></script>
    <script src="node_modules/intl/locale-data/jsonp/en.js"></script>
--- a/ng2-components/ng2-activiti-diagrams/demo/package.json
+++ b/ng2-components/ng2-activiti-diagrams/demo/package.json
@@ -39,6 +39,7 @@
    "@angular/http": "2.2.2",
    "@angular/platform-browser": "2.2.2",
    "@angular/platform-browser-dynamic": "2.2.2",
+    "@angular/material": "2.0.0-beta.1",
    "@angular/router": "3.2.2",
    "@angular/upgrade": "2.2.2",
    "alfresco-js-api": "^1.0.0",
--- a/ng2-components/ng2-activiti-diagrams/karma-test-shim.js
+++ b/ng2-components/ng2-activiti-diagrams/karma-test-shim.js
@@ -39,6 +39,8 @@ var map = {
    '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
    '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
    '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
+    '@angular/material': 'npm:@angular/material/bundles/material.umd.js',
+
    // testing
    '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
    '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
--- a/ng2-components/ng2-activiti-diagrams/package.json
+++ b/ng2-components/ng2-activiti-diagrams/package.json
@@ -47,6 +47,7 @@
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
+    "@angular/material": "2.0.0-beta.1",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.12",
--- a/ng2-components/ng2-activiti-form/README.md
+++ b/ng2-components/ng2-activiti-form/README.md
@@ -65,6 +65,9 @@ Follow the 3 steps below:
    <script src="node_modules/material-design-lite/material.min.js"></script>
    <link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">

+    <!-- Load the Angular Material 2 stylesheet -->
+    <link href="node_modules/@angular/material/core/theming/prebuilt/deeppurple-amber.css" rel="stylesheet">
+    
    <!-- Polyfill(s) for Safari (pre-10.x) -->
    <script src="node_modules/intl/dist/Intl.min.js"></script>
    <script src="node_modules/intl/locale-data/jsonp/en.js"></script>
--- a/ng2-components/ng2-activiti-form/demo/package.json
+++ b/ng2-components/ng2-activiti-form/demo/package.json
@@ -39,6 +39,7 @@
    "@angular/http": "2.2.2",
    "@angular/platform-browser": "2.2.2",
    "@angular/platform-browser-dynamic": "2.2.2",
+    "@angular/material": "2.0.0-beta.1",
    "@angular/router": "3.2.2",
    "@angular/upgrade": "2.2.2",
    "core-js": "^2.4.1",
--- a/ng2-components/ng2-activiti-form/karma-test-shim.js
+++ b/ng2-components/ng2-activiti-form/karma-test-shim.js
@@ -39,6 +39,8 @@ var map = {
    '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
    '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
    '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
+    '@angular/material': 'npm:@angular/material/bundles/material.umd.js',
+
    // testing
    '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
    '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
--- a/ng2-components/ng2-activiti-form/package.json
+++ b/ng2-components/ng2-activiti-form/package.json
@@ -54,6 +54,7 @@
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
+    "@angular/material": "2.0.0-beta.1",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.12",
--- a/ng2-components/ng2-activiti-processlist/README.md
+++ b/ng2-components/ng2-activiti-processlist/README.md
@@ -68,6 +68,9 @@ Follow the 3 steps below:
      <script src="node_modules/material-design-lite/material.min.js"></script>
      <link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">

+      <!-- Load the Angular Material 2 stylesheet -->
+      <link href="node_modules/@angular/material/core/theming/prebuilt/deeppurple-amber.css" rel="stylesheet">
+    
      <!-- Polyfill(s) for Safari (pre-10.x) -->
      <script src="node_modules/intl/dist/Intl.min.js"></script>
      <script src="node_modules/intl/locale-data/jsonp/en.js"></script>
--- a/ng2-components/ng2-activiti-processlist/demo/package.json
+++ b/ng2-components/ng2-activiti-processlist/demo/package.json
@@ -32,7 +32,7 @@
    "@angular/http": "2.2.2",
    "@angular/platform-browser": "2.2.2",
    "@angular/platform-browser-dynamic": "2.2.2",
-    "@angular/router": "3.0.0",
+    "@angular/material": "2.0.0-beta.1",
    "@angular/router": "3.2.2",
    "@angular/upgrade": "2.2.2",
    "core-js": "^2.4.1",
--- a/ng2-components/ng2-activiti-processlist/karma-test-shim.js
+++ b/ng2-components/ng2-activiti-processlist/karma-test-shim.js
@@ -39,6 +39,8 @@ var map = {
    '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
    '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
    '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
+    '@angular/material': 'npm:@angular/material/bundles/material.umd.js',
+
    // testing
    '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
    '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
--- a/ng2-components/ng2-activiti-processlist/package.json
+++ b/ng2-components/ng2-activiti-processlist/package.json
@@ -53,6 +53,7 @@
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
+    "@angular/material": "2.0.0-beta.1",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.12",
--- a/ng2-components/ng2-activiti-tasklist/README.md
+++ b/ng2-components/ng2-activiti-tasklist/README.md
@@ -31,38 +31,6 @@
  </a>
 </p>

-<p>
-  <a title='Build Status Travis' href="https://travis-ci.org/Alfresco/alfresco-ng2-components">
-    <img src='https://travis-ci.org/Alfresco/alfresco-ng2-components.svg?branch=master'  alt='travis
-    Status' />
-  </a>
-  <a title='Build Status AppVeyor' href="https://ci.appveyor.com/project/alfresco/alfresco-ng2-components">
-    <img src='https://ci.appveyor.com/api/projects/status/github/Alfresco/alfresco-ng2-components'  alt='travis
-    Status' />
-  </a>
-  <a href='https://codecov.io/gh/Alfresco/alfresco-ng2-components'>
-    <img src='https://img.shields.io/codecov/c/github/Alfresco/alfresco-ng2-components/master.svg?maxAge=2592000' alt='Coverage Status' />
-  </a>
-  <a href='https://www.npmjs.com/package/ng2-activiti-tasklist'>
-    <img src='https://img.shields.io/npm/dt/ng2-activiti-tasklist.svg' alt='npm downloads' />
-  </a>
-  <a href='https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE'>
-     <img src='https://img.shields.io/hexpm/l/plug.svg' alt='license' />
-  </a>
-  <a href='https://www.alfresco.com/'>
-     <img src='https://img.shields.io/badge/style-component-green.svg?label=alfresco' alt='alfresco component' />
-  </a>
-  <a href='https://angular.io/'>
-     <img src='https://img.shields.io/badge/style-2-red.svg?label=angular' alt='angular 2' />
-  </a>
-  <a href='https://www.typescriptlang.org/docs/tutorial.html'>
-     <img src='https://img.shields.io/badge/style-lang-blue.svg?label=typescript' alt='typescript' />
-  </a>
-  <a href='https://www.alfresco.com/'>
-     <img src='https://img.shields.io/badge/style-%3E5.0.0-blue.svg?label=node%20version' alt='node version' />
-  </a>
-</p>
-
 Displays lists of process instances both active and completed, using any defined process filter, and
 render details of any chosen instance.

@@ -100,6 +68,9 @@ Follow the 3 steps below:
      <script src="node_modules/material-design-lite/material.min.js"></script>
      <link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">

+      <!-- Load the Angular Material 2 stylesheet -->
+      <link href="node_modules/@angular/material/core/theming/prebuilt/deeppurple-amber.css" rel="stylesheet">
+
      <!-- Polyfill(s) for Safari (pre-10.x) -->
      <script src="node_modules/intl/dist/Intl.min.js"></script>
      <script src="node_modules/intl/locale-data/jsonp/en.js"></script>
--- a/ng2-components/ng2-activiti-tasklist/demo/package.json
+++ b/ng2-components/ng2-activiti-tasklist/demo/package.json
@@ -26,6 +26,7 @@
    "@angular/http": "2.2.2",
    "@angular/platform-browser": "2.2.2",
    "@angular/platform-browser-dynamic": "2.2.2",
+    "@angular/material": "2.0.0-beta.1",
    "@angular/router": "3.2.2",
    "@angular/upgrade": "2.2.2",
    "core-js": "^2.4.1",
--- a/ng2-components/ng2-activiti-tasklist/karma-test-shim.js
+++ b/ng2-components/ng2-activiti-tasklist/karma-test-shim.js
@@ -39,6 +39,8 @@ var map = {
    '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
    '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
    '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
+    '@angular/material': 'npm:@angular/material/bundles/material.umd.js',
+
    // testing
    '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
    '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
--- a/ng2-components/ng2-activiti-tasklist/package.json
+++ b/ng2-components/ng2-activiti-tasklist/package.json
@@ -58,6 +58,7 @@
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
+    "@angular/material": "2.0.0-beta.1",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.12",
--- a/ng2-components/ng2-alfresco-core/README.md
+++ b/ng2-components/ng2-alfresco-core/README.md
@@ -57,6 +57,7 @@ npm install --save ng2-alfresco-core
 ### Services

 - **LogService**, log service implementation
+- **NotificationService**, Notification service implementation
 - **AlfrescoApiService**, provides access to Alfresco JS API instance
 - **AlfrescoAuthenticationService**, main authentication APIs
 - **AlfrescoTranslationService**, various i18n-related APIs
@@ -95,6 +96,43 @@ let apiService: any = this.authService.getAlfrescoApi();
 apiService.nodes.addNode('-root-', body, {});
 ```

+#### Notification Service
+
+The Notification Service is implemented on top of the Angular 2 Material Design snackbar.
+Use this service to show a notification message, and optionaly get feedback from it.
+
+```ts
+import { NotificationService } from 'ng2-alfresco-core';
+
+export class MyComponent implements OnInit {
+
+    constructor(private notificationService: NotificationService) {   
+    }
+
+    ngOnInit() {
+          this.notificationService.openSnackMessage('test', 200000).afterDismissed().subscribe(() => {
+                    console.log('The snack-bar was dismissed');
+                });                        
+    }
+}
+```
+
+```ts
+import { NotificationService } from 'ng2-alfresco-core';
+
+export class MyComponent implements OnInit {
+
+    constructor(private notificationService: NotificationService) {   
+    }
+
+    ngOnInit() {
+         this.notificationService.openSnackMessageAction('Do you want to report this issue?', 'send', 200000).afterDismissed().subscribe(() => {
+                console.log('The snack-bar was dismissed');
+            });
+    }
+}
+```
+
 #### Context Menu directive

 _See **Demo Shell** or **DocumentList** implementation for more details and use cases._
--- a/ng2-components/ng2-alfresco-core/index.ts
+++ b/ng2-components/ng2-alfresco-core/index.ts
@@ -20,6 +20,7 @@ import { HttpModule, Http } from '@angular/http';
 import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { TranslateModule, TranslateLoader } from 'ng2-translate/ng2-translate';
+import { MaterialModule } from '@angular/material';

 import {
    AlfrescoAuthenticationService,
@@ -33,7 +34,9 @@ import {
    AuthGuard,
    AuthGuardEcm,
    AuthGuardBpm,
-    LogService, LogServiceMock
+    LogService,
+    LogServiceMock,
+    NotificationService
 } from './src/services/index';

 import { MATERIAL_DESIGN_DIRECTIVES } from './src/components/material/index';
@@ -44,7 +47,9 @@ export * from './src/components/index';
 export * from './src/utils/index';

 export const ALFRESCO_CORE_PROVIDERS: any[] = [
-    LogService, LogServiceMock,
+    NotificationService,
+    LogService,
+    LogServiceMock,
    AlfrescoAuthenticationService,
    AlfrescoContentService,
    AlfrescoSettingsService,
@@ -69,6 +74,7 @@ export function createTranslateLoader(http: Http, logService: LogService) {
        FormsModule,
        ReactiveFormsModule,
        HttpModule,
+        MaterialModule.forRoot(),
        TranslateModule.forRoot({
            provide: TranslateLoader,
            useFactory: (createTranslateLoader),
@@ -85,6 +91,7 @@ export function createTranslateLoader(http: Http, logService: LogService) {
    exports: [
        CommonModule,
        FormsModule,
+        MaterialModule,
        ReactiveFormsModule,
        HttpModule,
        TranslateModule,
--- a/ng2-components/ng2-alfresco-core/karma-test-shim.js
+++ b/ng2-components/ng2-alfresco-core/karma-test-shim.js
@@ -39,6 +39,8 @@ var map = {
    '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
    '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
    '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
+    '@angular/material': 'npm:@angular/material/bundles/material.umd.js',
+
    // testing
    '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
    '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
--- a/ng2-components/ng2-alfresco-core/package.json
+++ b/ng2-components/ng2-alfresco-core/package.json
@@ -62,6 +62,7 @@
    "@angular/http": "2.2.2",
    "@angular/platform-browser": "2.2.2",
    "@angular/platform-browser-dynamic": "2.2.2",
+    "@angular/material": "2.0.0-beta.1",
    "@angular/router": "3.2.2",
    "@angular/upgrade": "2.2.2",
    "alfresco-js-api": "^1.0.0",
--- a/ng2-components/ng2-alfresco-core/src/services/index.ts
+++ b/ng2-components/ng2-alfresco-core/src/services/index.ts
@@ -23,7 +23,7 @@ export * from './renditions.service';
 export * from './auth-guard.service';
 export * from './auth-guard-ecm.service';
 export * from './auth-guard-bpm.service';
-
+export * from './notification.service';
 export * from './log.service';
 export * from './alfresco-authentication.service';
 export * from './alfresco-translation.service';
--- a/ng2-components/ng2-alfresco-core/src/services/notification.service.ts
+++ b/ng2-components/ng2-alfresco-core/src/services/notification.service.ts
@@ -0,0 +1,40 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Injectable } from '@angular/core';
+import { MdSnackBar, MdSnackBarRef } from '@angular/material';
+
+@Injectable()
+export class NotificationService {
+
+    static DEFAULT_DURATION_MESSAGE: number = 5000;
+
+    constructor(public snackbar: MdSnackBar) {
+    }
+
+    public openSnackMessage(message: string, millisecondsDuration?: number): MdSnackBarRef<any> {
+        return this.snackbar.open(message, null, {
+            duration: millisecondsDuration || NotificationService.DEFAULT_DURATION_MESSAGE
+        });
+    }
+
+    public openSnackMessageAction(message: string, action: string, millisecondsDuration?: number): MdSnackBarRef<any> {
+        return this.snackbar.open(message, action, {
+            duration: millisecondsDuration || NotificationService.DEFAULT_DURATION_MESSAGE
+        });
+    }
+}
--- a/ng2-components/ng2-alfresco-datatable/README.md
+++ b/ng2-components/ng2-alfresco-datatable/README.md
@@ -60,6 +60,9 @@ Follow the 3 steps below:
    <script src="node_modules/material-design-lite/material.min.js"></script>
    <link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">

+    <!-- Load the Angular Material 2 stylesheet -->
+    <link href="node_modules/@angular/material/core/theming/prebuilt/deeppurple-amber.css" rel="stylesheet">
+
    <!-- Polyfill(s) for Safari (pre-10.x) -->
    <script src="node_modules/intl/dist/Intl.min.js"></script>
    <script src="node_modules/intl/locale-data/jsonp/en.js"></script>
--- a/ng2-components/ng2-alfresco-datatable/demo/package.json
+++ b/ng2-components/ng2-alfresco-datatable/demo/package.json
@@ -32,6 +32,7 @@
    "@angular/http": "2.2.2",
    "@angular/platform-browser": "2.2.2",
    "@angular/platform-browser-dynamic": "2.2.2",
+    "@angular/material": "2.0.0-beta.1",
    "@angular/router": "3.2.2",
    "@angular/upgrade": "2.2.2",
    "core-js": "^2.4.1",
--- a/ng2-components/ng2-alfresco-datatable/karma-test-shim.js
+++ b/ng2-components/ng2-alfresco-datatable/karma-test-shim.js
@@ -39,6 +39,8 @@ var map = {
    '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
    '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
    '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
+    '@angular/material': 'npm:@angular/material/bundles/material.umd.js',
+
    // testing
    '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
    '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
--- a/ng2-components/ng2-alfresco-datatable/package.json
+++ b/ng2-components/ng2-alfresco-datatable/package.json
@@ -54,6 +54,7 @@
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
+    "@angular/material": "2.0.0-beta.1",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.12",
--- a/ng2-components/ng2-alfresco-documentlist/README.md
+++ b/ng2-components/ng2-alfresco-documentlist/README.md
@@ -58,6 +58,9 @@ Follow the 3 steps below:
      <script src="node_modules/material-design-lite/material.min.js"></script>
      <link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">

+      <!-- Load the Angular Material 2 stylesheet -->
+      <link href="node_modules/@angular/material/core/theming/prebuilt/deeppurple-amber.css" rel="stylesheet">
+
      <!-- Polyfill(s) for Safari (pre-10.x) -->
      <script src="node_modules/intl/dist/Intl.min.js"></script>
      <script src="node_modules/intl/locale-data/jsonp/en.js"></script>
--- a/ng2-components/ng2-alfresco-documentlist/demo/package.json
+++ b/ng2-components/ng2-alfresco-documentlist/demo/package.json
@@ -26,6 +26,7 @@
    "@angular/http": "2.2.2",
    "@angular/platform-browser": "2.2.2",
    "@angular/platform-browser-dynamic": "2.2.2",
+    "@angular/material": "2.0.0-beta.1",
    "@angular/router": "3.2.2",
    "@angular/upgrade": "2.2.2",
    "core-js": "^2.4.1",
--- a/ng2-components/ng2-alfresco-documentlist/karma-test-shim.js
+++ b/ng2-components/ng2-alfresco-documentlist/karma-test-shim.js
@@ -39,6 +39,8 @@ var map = {
    '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
    '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
    '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
+    '@angular/material': 'npm:@angular/material/bundles/material.umd.js',
+
    // testing
    '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
    '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
--- a/ng2-components/ng2-alfresco-documentlist/package.json
+++ b/ng2-components/ng2-alfresco-documentlist/package.json
@@ -62,6 +62,7 @@
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
+    "@angular/material": "2.0.0-beta.1",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.12",
--- a/ng2-components/ng2-alfresco-login/README.md
+++ b/ng2-components/ng2-alfresco-login/README.md
@@ -58,6 +58,9 @@ Follow the 3 steps below:
    <script src="node_modules/material-design-lite/material.min.js"></script>
    <link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">

+    <!-- Load the Angular Material 2 stylesheet -->
+    <link href="node_modules/@angular/material/core/theming/prebuilt/deeppurple-amber.css" rel="stylesheet">
+
    <!-- Polyfill(s) for Safari (pre-10.x) -->
    <script src="node_modules/intl/dist/Intl.min.js"></script>
    <script src="node_modules/intl/locale-data/jsonp/en.js"></script>
--- a/ng2-components/ng2-alfresco-login/demo/package.json
+++ b/ng2-components/ng2-alfresco-login/demo/package.json
@@ -54,6 +54,7 @@
    "@angular/http": "2.2.2",
    "@angular/platform-browser": "2.2.2",
    "@angular/platform-browser-dynamic": "2.2.2",
+    "@angular/material": "2.0.0-beta.1",
    "@angular/router": "3.2.2",
    "@angular/upgrade": "2.2.2",
    "core-js": "^2.4.1",
--- a/ng2-components/ng2-alfresco-login/karma-test-shim.js
+++ b/ng2-components/ng2-alfresco-login/karma-test-shim.js
@@ -39,6 +39,8 @@ var map = {
    '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
    '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
    '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
+    '@angular/material': 'npm:@angular/material/bundles/material.umd.js',
+
    // testing
    '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
    '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
--- a/ng2-components/ng2-alfresco-login/package.json
+++ b/ng2-components/ng2-alfresco-login/package.json
@@ -65,6 +65,7 @@
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
+    "@angular/material": "2.0.0-beta.1",
    "@angular/router": "3.0.0",
    "alfresco-js-api": "^1.0.0",
    "ng2-alfresco-core": "1.0.0",
--- a/ng2-components/ng2-alfresco-search/README.md
+++ b/ng2-components/ng2-alfresco-search/README.md
@@ -58,6 +58,9 @@ Follow the 3 steps below:
    <script src="node_modules/material-design-lite/material.min.js"></script>
    <link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">

+    <!-- Load the Angular Material 2 stylesheet -->
+    <link href="node_modules/@angular/material/core/theming/prebuilt/deeppurple-amber.css" rel="stylesheet">
+
    <!-- Polyfill(s) for Safari (pre-10.x) -->
    <script src="node_modules/intl/dist/Intl.min.js"></script>
    <script src="node_modules/intl/locale-data/jsonp/en.js"></script>
--- a/ng2-components/ng2-alfresco-search/demo/package.json
+++ b/ng2-components/ng2-alfresco-search/demo/package.json
@@ -54,6 +54,7 @@
    "@angular/http": "2.2.2",
    "@angular/platform-browser": "2.2.2",
    "@angular/platform-browser-dynamic": "2.2.2",
+    "@angular/material": "2.0.0-beta.1",
    "@angular/router": "3.2.2",
    "@angular/upgrade": "2.2.2",
    "core-js": "^2.4.1",
--- a/ng2-components/ng2-alfresco-search/karma-test-shim.js
+++ b/ng2-components/ng2-alfresco-search/karma-test-shim.js
@@ -39,6 +39,8 @@ var map = {
    '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
    '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
    '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
+    '@angular/material': 'npm:@angular/material/bundles/material.umd.js',
+
    // testing
    '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
    '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
--- a/ng2-components/ng2-alfresco-search/package.json
+++ b/ng2-components/ng2-alfresco-search/package.json
@@ -62,6 +62,7 @@
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
+    "@angular/material": "2.0.0-beta.1",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.12",
--- a/ng2-components/ng2-alfresco-tag/README.md
+++ b/ng2-components/ng2-alfresco-tag/README.md
@@ -58,6 +58,9 @@ Follow the 3 steps below:
      <script src="node_modules/material-design-lite/material.min.js"></script>
      <link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">

+      <!-- Load the Angular Material 2 stylesheet -->
+      <link href="node_modules/@angular/material/core/theming/prebuilt/deeppurple-amber.css" rel="stylesheet">
+
      <!-- Polyfill(s) for Safari (pre-10.x) -->
      <script src="node_modules/intl/dist/Intl.min.js"></script>
      <script src="node_modules/intl/locale-data/jsonp/en.js"></script>
--- a/ng2-components/ng2-alfresco-tag/demo/package.json
+++ b/ng2-components/ng2-alfresco-tag/demo/package.json
@@ -26,6 +26,7 @@
    "@angular/http": "2.2.2",
    "@angular/platform-browser": "2.2.2",
    "@angular/platform-browser-dynamic": "2.2.2",
+    "@angular/material": "2.0.0-beta.1",
    "@angular/router": "3.2.2",
    "@angular/upgrade": "2.2.2",
    "core-js": "^2.4.1",
--- a/ng2-components/ng2-alfresco-tag/karma-test-shim.js
+++ b/ng2-components/ng2-alfresco-tag/karma-test-shim.js
@@ -39,6 +39,8 @@ var map = {
    '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
    '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
    '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
+    '@angular/material': 'npm:@angular/material/bundles/material.umd.js',
+
    // testing
    '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
    '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
--- a/ng2-components/ng2-alfresco-tag/package.json
+++ b/ng2-components/ng2-alfresco-tag/package.json
@@ -41,6 +41,7 @@
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
+    "@angular/material": "2.0.0-beta.1",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.12",
--- a/ng2-components/ng2-alfresco-upload/README.md
+++ b/ng2-components/ng2-alfresco-upload/README.md
@@ -58,6 +58,9 @@ Follow the 3 steps below:
      <script src="node_modules/material-design-lite/material.min.js"></script>
      <link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">

+      <!-- Load the Angular Material 2 stylesheet -->
+      <link href="node_modules/@angular/material/core/theming/prebuilt/deeppurple-amber.css" rel="stylesheet">
+    
      <!-- Polyfill(s) for Safari (pre-10.x) -->
      <script src="node_modules/intl/dist/Intl.min.js"></script>
      <script src="node_modules/intl/locale-data/jsonp/en.js"></script>
--- a/ng2-components/ng2-alfresco-upload/demo/index.html
+++ b/ng2-components/ng2-alfresco-upload/demo/index.html
@@ -31,6 +31,9 @@
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>

+    <!-- Load the Angular Material 2 stylesheet -->
+    <link href="node_modules/@angular/material/core/theming/prebuilt/deeppurple-amber.css" rel="stylesheet">
+
    <script src="systemjs.config.js"></script>
    <script>
        System.import('app').catch(function(err){ console.error(err); });
--- a/ng2-components/ng2-alfresco-upload/demo/package.json
+++ b/ng2-components/ng2-alfresco-upload/demo/package.json
@@ -54,6 +54,7 @@
    "@angular/http": "2.2.2",
    "@angular/platform-browser": "2.2.2",
    "@angular/platform-browser-dynamic": "2.2.2",
+    "@angular/material": "2.0.0-beta.1",
    "@angular/router": "3.2.2",
    "@angular/upgrade": "2.2.2",
    "core-js": "^2.4.1",
--- a/ng2-components/ng2-alfresco-upload/demo/systemjs.config.js
+++ b/ng2-components/ng2-alfresco-upload/demo/systemjs.config.js
@@ -21,6 +21,8 @@
            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
+            '@angular/material': 'npm:@angular/material/bundles/material.umd.js',
+
            // other libraries
            'rxjs': 'npm:rxjs',
            'ng2-translate': 'npm:ng2-translate',
--- a/ng2-components/ng2-alfresco-upload/karma-test-shim.js
+++ b/ng2-components/ng2-alfresco-upload/karma-test-shim.js
@@ -39,6 +39,8 @@ var map = {
    '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
    '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
    '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
+    '@angular/material': 'npm:@angular/material/bundles/material.umd.js',
+
    // testing
    '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
    '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
--- a/ng2-components/ng2-alfresco-upload/package.json
+++ b/ng2-components/ng2-alfresco-upload/package.json
@@ -63,6 +63,7 @@
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
+    "@angular/material": "2.0.0-beta.1",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.12",
--- a/ng2-components/ng2-alfresco-upload/src/components/upload-button.component.html
+++ b/ng2-components/ng2-alfresco-upload/src/components/upload-button.component.html
@@ -35,10 +35,3 @@
               multiple #uploadFolders>
    </div>
 </form>
-
-<!--Notification bar-->
-<div id="undo-notification-bar"  class="mdl-js-snackbar mdl-snackbar"
-     #undoNotificationBar>
-    <div class="mdl-snackbar__text"></div>
-    <button data-automation-id="undo_upload_button" class="mdl-snackbar__action" type="button">{{'FILE_UPLOAD.ACTION.UNDO' | translate}}</button>
-</div>
--- a/ng2-components/ng2-alfresco-upload/src/components/upload-button.component.spec.ts
+++ b/ng2-components/ng2-alfresco-upload/src/components/upload-button.component.spec.ts
@@ -18,7 +18,7 @@
 import { ComponentFixture, TestBed, async } from '@angular/core/testing';
 import { UploadButtonComponent } from './upload-button.component';
 import { DebugElement }    from '@angular/core';
-import { CoreModule, AlfrescoTranslationService } from 'ng2-alfresco-core';
+import { CoreModule, AlfrescoTranslationService, NotificationService } from 'ng2-alfresco-core';
 import { TranslationMock } from '../assets/translation.service.mock';
 import { UploadService } from '../services/upload.service';

@@ -73,7 +73,8 @@ describe('UploadButtonComponent', () => {
            ],
            providers: [
                UploadService,
-                { provide: AlfrescoTranslationService, useClass: TranslationMock }
+                NotificationService,
+                {provide: AlfrescoTranslationService, useClass: TranslationMock}
            ]
        }).compileComponents();
    }));
--- a/ng2-components/ng2-alfresco-upload/src/components/upload-button.component.ts
+++ b/ng2-components/ng2-alfresco-upload/src/components/upload-button.component.ts
@@ -15,9 +15,9 @@
 * limitations under the License.
 */

-import { Component, ViewChild, ElementRef, Input, Output, EventEmitter } from '@angular/core';
+import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/core';
 import 'rxjs/Rx';
-import { AlfrescoTranslationService, LogService } from 'ng2-alfresco-core';
+import { AlfrescoTranslationService, LogService, NotificationService } from 'ng2-alfresco-core';
 import { UploadService } from '../services/upload.service';
 import { FileModel } from '../models/file.model';

@@ -55,9 +55,6 @@ export class UploadButtonComponent {

    private static DEFAULT_ROOT_ID: string = '-root-';

-    @ViewChild('undoNotificationBar')
-    undoNotificationBar: any;
-
    @Input()
    showUdoNotificationBar: boolean = true;

@@ -91,7 +88,8 @@ export class UploadButtonComponent {
    constructor(private el: ElementRef,
                private uploadService: UploadService,
                private translateService: AlfrescoTranslationService,
-                private logService: LogService) {
+                private logService: LogService,
+                private notificationService: NotificationService) {
        if (translateService) {
            translateService.addTranslationFolder('ng2-alfresco-upload', 'node_modules/ng2-alfresco-upload/src');
        }
@@ -217,27 +215,16 @@ export class UploadButtonComponent {
     * @param {FileModel[]} latestFilesAdded - files in the upload queue enriched with status flag and xhr object.
     */
    private _showUndoNotificationBar(latestFilesAdded: FileModel[]) {
-        if (componentHandler) {
-            componentHandler.upgradeAllRegistered();
-        }
-
        let messageTranslate: any, actionTranslate: any;
        messageTranslate = this.translateService.get('FILE_UPLOAD.MESSAGES.PROGRESS');
        actionTranslate = this.translateService.get('FILE_UPLOAD.ACTION.UNDO');

-        if (this.undoNotificationBar.nativeElement.MaterialSnackbar) {
-            this.undoNotificationBar.nativeElement.MaterialSnackbar.showSnackbar({
-                message: messageTranslate.value,
-                timeout: 3000,
-                actionHandler: function () {
+        this.notificationService.openSnackMessageAction(messageTranslate.value, actionTranslate.value, 3000).afterDismissed().subscribe(() => {
            latestFilesAdded.forEach((uploadingFileModel: FileModel) => {
                uploadingFileModel.emitAbort();
            });
-                },
-                actionText: actionTranslate.value
        });
    }
-    }

    /**
     * Retrive the error message using the error status code
@@ -258,16 +245,7 @@ export class UploadButtonComponent {
     * @private
     */
    private _showErrorNotificationBar(errorMessage: string) {
-        if (componentHandler) {
-            componentHandler.upgradeAllRegistered();
-        }
-
-        if (this.undoNotificationBar.nativeElement.MaterialSnackbar) {
-            this.undoNotificationBar.nativeElement.MaterialSnackbar.showSnackbar({
-                message: errorMessage,
-                timeout: 3000
-            });
-        }
+        this.notificationService.openSnackMessage(errorMessage, 3000);
    }

    /**
--- a/ng2-components/ng2-alfresco-upload/src/components/upload-drag-area.component.html
+++ b/ng2-components/ng2-alfresco-upload/src/components/upload-drag-area.component.html
@@ -5,10 +5,3 @@
     dropzone="" webkitdropzone="*" #droparea>
    <ng-content></ng-content>
 </div>
-
-<!--Notification bar-->
-<div id="undo-notification-bar"  class="mdl-js-snackbar mdl-snackbar"
-     #undoNotificationBar>
-    <div class="mdl-snackbar__text"></div>
-    <button data-automation-id="undo_upload_button" class="mdl-snackbar__action" type="button">{{'FILE_UPLOAD.ACTION.UNDO' | translate}}</button>
-</div>
--- a/ng2-components/ng2-alfresco-upload/src/components/upload-drag-area.component.spec.ts
+++ b/ng2-components/ng2-alfresco-upload/src/components/upload-drag-area.component.spec.ts
@@ -17,7 +17,7 @@

 import { ComponentFixture, TestBed, async } from '@angular/core/testing';
 import { EventEmitter, DebugElement } from '@angular/core';
-import { AlfrescoTranslationService, CoreModule, LogService, LogServiceMock } from 'ng2-alfresco-core';
+import { AlfrescoTranslationService, CoreModule, LogService, LogServiceMock, NotificationService } from 'ng2-alfresco-core';

 import { UploadDragAreaComponent } from './upload-drag-area.component';
 import { TranslationMock } from '../assets/translation.service.mock';
@@ -42,6 +42,7 @@ describe('UploadDragAreaComponent', () => {
            ],
            providers: [
                UploadService,
+                NotificationService,
                { provide: AlfrescoTranslationService, useClass: TranslationMock },
                { provide: LogService, useClass: LogServiceMock }
            ]
--- a/ng2-components/ng2-alfresco-upload/src/components/upload-drag-area.component.ts
+++ b/ng2-components/ng2-alfresco-upload/src/components/upload-drag-area.component.ts
@@ -15,8 +15,8 @@
 * limitations under the License.
 */

-import { Component, ViewChild, Input, Output, EventEmitter } from '@angular/core';
-import { AlfrescoTranslationService, LogService } from 'ng2-alfresco-core';
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { AlfrescoTranslationService, LogService, NotificationService } from 'ng2-alfresco-core';
 import { UploadService } from '../services/upload.service';
 import { FileModel } from '../models/file.model';

@@ -43,9 +43,6 @@ export class UploadDragAreaComponent {

    private static DEFAULT_ROOT_ID: string = '-root-';

-    @ViewChild('undoNotificationBar')
-    undoNotificationBar: any;
-
    @Input()
    showUdoNotificationBar: boolean = true;

@@ -63,7 +60,8 @@ export class UploadDragAreaComponent {

    constructor(private uploadService: UploadService,
                private translateService: AlfrescoTranslationService,
-                private logService: LogService) {
+                private logService: LogService,
+                private notificationService: NotificationService) {
        if (translateService) {
            translateService.addTranslationFolder('ng2-alfresco-upload', 'node_modules/ng2-alfresco-upload/src');
        }
@@ -117,7 +115,7 @@ export class UploadDragAreaComponent {
     * @param item - FileEntity
     */
    onFilesEntityDropped(item: any): void {
-        item.file( (file: any) => {
+        item.file((file: any) => {
            this.uploadService.addToQueue([file]);
            let path = item.fullPath.replace(item.name, '');
            let filePath = this.currentFolderPath + path;
@@ -186,23 +184,14 @@ export class UploadDragAreaComponent {
     * @param {FileModel[]} latestFilesAdded - files in the upload queue enriched with status flag and xhr object.
     */
    showUndoNotificationBar(latestFilesAdded: FileModel[]) {
-        if (componentHandler) {
-            componentHandler.upgradeAllRegistered();
-        }
-
        let messageTranslate: any, actionTranslate: any;
        messageTranslate = this.translateService.get('FILE_UPLOAD.MESSAGES.PROGRESS');
        actionTranslate = this.translateService.get('FILE_UPLOAD.ACTION.UNDO');

-        this.undoNotificationBar.nativeElement.MaterialSnackbar.showSnackbar({
-            message: messageTranslate.value,
-            timeout: 3000,
-            actionHandler: function () {
+        this.notificationService.openSnackMessageAction(messageTranslate.value, actionTranslate.value, 3000).afterDismissed().subscribe(() => {
            latestFilesAdded.forEach((uploadingFileModel: FileModel) => {
                uploadingFileModel.emitAbort();
            });
-            },
-            actionText: actionTranslate.value
        });
    }

@@ -212,14 +201,7 @@ export class UploadDragAreaComponent {
     * @private
     */
    showErrorNotificationBar(errorMessage: string) {
-        if (componentHandler) {
-            componentHandler.upgradeAllRegistered();
-        }
-
-        this.undoNotificationBar.nativeElement.MaterialSnackbar.showSnackbar({
-            message: errorMessage,
-            timeout: 3000
-        });
+        this.notificationService.openSnackMessage(errorMessage, 3000);
    }

    /**
--- a/ng2-components/ng2-alfresco-userinfo/README.md
+++ b/ng2-components/ng2-alfresco-userinfo/README.md
@@ -58,6 +58,9 @@ Follow the 3 steps below:
      <script src="node_modules/material-design-lite/material.min.js"></script>
      <link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">

+      <!-- Load the Angular Material 2 stylesheet -->
+      <link href="node_modules/@angular/material/core/theming/prebuilt/deeppurple-amber.css" rel="stylesheet">
+
      <!-- Polyfill(s) for Safari (pre-10.x) -->
      <script src="node_modules/intl/dist/Intl.min.js"></script>
      <script src="node_modules/intl/locale-data/jsonp/en.js"></script>
--- a/ng2-components/ng2-alfresco-userinfo/demo/package.json
+++ b/ng2-components/ng2-alfresco-userinfo/demo/package.json
@@ -26,6 +26,7 @@
    "@angular/http": "2.2.2",
    "@angular/platform-browser": "2.2.2",
    "@angular/platform-browser-dynamic": "2.2.2",
+    "@angular/material": "2.0.0-beta.1",
    "@angular/router": "3.2.2",
    "@angular/upgrade": "2.2.2",
    "core-js": "^2.4.1",
--- a/ng2-components/ng2-alfresco-userinfo/karma-test-shim.js
+++ b/ng2-components/ng2-alfresco-userinfo/karma-test-shim.js
@@ -39,6 +39,8 @@ var map = {
    '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
    '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
    '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
+    '@angular/material': 'npm:@angular/material/bundles/material.umd.js',
+
    // testing
    '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
    '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
--- a/ng2-components/ng2-alfresco-userinfo/package.json
+++ b/ng2-components/ng2-alfresco-userinfo/package.json
@@ -41,6 +41,7 @@
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
+    "@angular/material": "2.0.0-beta.1",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.12",
--- a/ng2-components/ng2-alfresco-viewer/README.md
+++ b/ng2-components/ng2-alfresco-viewer/README.md
@@ -60,6 +60,9 @@ Follow the 3 steps below:
    <script src="node_modules/material-design-lite/material.min.js"></script>
    <link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">

+    <!-- Load the Angular Material 2 stylesheet -->
+    <link href="node_modules/@angular/material/core/theming/prebuilt/deeppurple-amber.css" rel="stylesheet">
+
    <!-- Polyfill(s) for Safari (pre-10.x) -->
    <script src="node_modules/intl/dist/Intl.min.js"></script>
    <script src="node_modules/intl/locale-data/jsonp/en.js"></script>
--- a/ng2-components/ng2-alfresco-viewer/demo/package.json
+++ b/ng2-components/ng2-alfresco-viewer/demo/package.json
@@ -26,6 +26,7 @@
    "@angular/http": "2.2.2",
    "@angular/platform-browser": "2.2.2",
    "@angular/platform-browser-dynamic": "2.2.2",
+    "@angular/material": "2.0.0-beta.1",
    "@angular/router": "3.2.2",
    "@angular/upgrade": "2.2.2",
    "core-js": "^2.4.1",
--- a/ng2-components/ng2-alfresco-viewer/karma-test-shim.js
+++ b/ng2-components/ng2-alfresco-viewer/karma-test-shim.js
@@ -39,6 +39,8 @@ var map = {
    '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
    '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
    '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
+    '@angular/material': 'npm:@angular/material/bundles/material.umd.js',
+
    // testing
    '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
    '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
--- a/ng2-components/ng2-alfresco-viewer/package.json
+++ b/ng2-components/ng2-alfresco-viewer/package.json
@@ -56,6 +56,7 @@
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
+    "@angular/material": "2.0.0-beta.1",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.12",
--- a/ng2-components/ng2-alfresco-webscript/README.md
+++ b/ng2-components/ng2-alfresco-webscript/README.md
@@ -58,6 +58,9 @@ Follow the 3 steps below:
      <script src="node_modules/material-design-lite/material.min.js"></script>
      <link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">

+      <!-- Load the Angular Material 2 stylesheet -->
+      <link href="node_modules/@angular/material/core/theming/prebuilt/deeppurple-amber.css" rel="stylesheet">
+
      <!-- Polyfill(s) for Safari (pre-10.x) -->
      <script src="node_modules/intl/dist/Intl.min.js"></script>
      <script src="node_modules/intl/locale-data/jsonp/en.js"></script>
--- a/ng2-components/ng2-alfresco-webscript/demo/package.json
+++ b/ng2-components/ng2-alfresco-webscript/demo/package.json
@@ -26,6 +26,7 @@
    "@angular/http": "2.2.2",
    "@angular/platform-browser": "2.2.2",
    "@angular/platform-browser-dynamic": "2.2.2",
+    "@angular/material": "2.0.0-beta.1",
    "@angular/router": "3.2.2",
    "@angular/upgrade": "2.2.2",
    "core-js": "^2.4.1",
--- a/ng2-components/ng2-alfresco-webscript/karma-test-shim.js
+++ b/ng2-components/ng2-alfresco-webscript/karma-test-shim.js
@@ -39,6 +39,8 @@ var map = {
    '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
    '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
    '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
+    '@angular/material': 'npm:@angular/material/bundles/material.umd.js',
+
    // testing
    '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
    '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
--- a/ng2-components/ng2-alfresco-webscript/package.json
+++ b/ng2-components/ng2-alfresco-webscript/package.json
@@ -41,6 +41,7 @@
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
+    "@angular/material": "2.0.0-beta.1",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.12",