From 1c21875607ca09cccc44cd621b48acfe52a8f3b5 Mon Sep 17 00:00:00 2001
From: Mario Romano <dnamario@hotmail.com>
Date: Tue, 24 Jan 2017 17:09:13 +0000
Subject: [PATCH] #537 snackbar notification system (#1527)

* #537 snackbar notification system

* #537 add test dependencies

* #537 add export material module

* #537 fix demo project
---
 demo-shell-ng2/app/app.module.ts              |  1 -
 demo-shell-ng2/app/vendor.ts                  |  4 ++
 demo-shell-ng2/index.html                     | 19 +--------
 demo-shell-ng2/package.json                   |  1 +
 demo-shell-ng2/public/css/app.css             | 41 +++++++++++++++----
 .../ng2-activiti-analytics/README.md          |  3 ++
 .../ng2-activiti-analytics/demo/package.json  |  1 +
 .../ng2-activiti-analytics/karma-test-shim.js |  2 +
 .../ng2-activiti-analytics/package.json       |  1 +
 .../ng2-activiti-diagrams/README.md           |  3 ++
 .../ng2-activiti-diagrams/demo/package.json   |  1 +
 .../ng2-activiti-diagrams/karma-test-shim.js  |  2 +
 .../ng2-activiti-diagrams/package.json        |  1 +
 ng2-components/ng2-activiti-form/README.md    |  3 ++
 .../ng2-activiti-form/demo/package.json       |  1 +
 .../ng2-activiti-form/karma-test-shim.js      |  2 +
 ng2-components/ng2-activiti-form/package.json |  1 +
 .../ng2-activiti-processlist/README.md        |  3 ++
 .../demo/package.json                         |  2 +-
 .../karma-test-shim.js                        |  2 +
 .../ng2-activiti-processlist/package.json     |  1 +
 .../ng2-activiti-tasklist/README.md           | 35 ++--------------
 .../ng2-activiti-tasklist/demo/package.json   |  1 +
 .../ng2-activiti-tasklist/karma-test-shim.js  |  2 +
 .../ng2-activiti-tasklist/package.json        |  1 +
 ng2-components/ng2-alfresco-core/README.md    | 38 +++++++++++++++++
 ng2-components/ng2-alfresco-core/index.ts     | 11 ++++-
 .../ng2-alfresco-core/karma-test-shim.js      |  2 +
 ng2-components/ng2-alfresco-core/package.json |  1 +
 .../ng2-alfresco-core/src/services/index.ts   |  2 +-
 .../src/services/notification.service.ts      | 40 ++++++++++++++++++
 .../ng2-alfresco-datatable/README.md          |  3 ++
 .../ng2-alfresco-datatable/demo/package.json  |  1 +
 .../ng2-alfresco-datatable/karma-test-shim.js |  2 +
 .../ng2-alfresco-datatable/package.json       |  1 +
 .../ng2-alfresco-documentlist/README.md       |  3 ++
 .../demo/package.json                         |  1 +
 .../karma-test-shim.js                        |  2 +
 .../ng2-alfresco-documentlist/package.json    |  1 +
 ng2-components/ng2-alfresco-login/README.md   |  3 ++
 .../ng2-alfresco-login/demo/package.json      |  1 +
 .../ng2-alfresco-login/karma-test-shim.js     |  2 +
 .../ng2-alfresco-login/package.json           |  1 +
 ng2-components/ng2-alfresco-search/README.md  |  3 ++
 .../ng2-alfresco-search/demo/package.json     |  1 +
 .../ng2-alfresco-search/karma-test-shim.js    |  2 +
 .../ng2-alfresco-search/package.json          |  1 +
 ng2-components/ng2-alfresco-tag/README.md     |  3 ++
 .../ng2-alfresco-tag/demo/package.json        |  1 +
 .../ng2-alfresco-tag/karma-test-shim.js       |  2 +
 ng2-components/ng2-alfresco-tag/package.json  |  1 +
 ng2-components/ng2-alfresco-upload/README.md  |  3 ++
 .../ng2-alfresco-upload/demo/index.html       |  3 ++
 .../ng2-alfresco-upload/demo/package.json     |  1 +
 .../demo/systemjs.config.js                   |  2 +
 .../ng2-alfresco-upload/karma-test-shim.js    |  2 +
 .../ng2-alfresco-upload/package.json          |  1 +
 .../components/upload-button.component.html   |  7 ----
 .../upload-button.component.spec.ts           |  5 ++-
 .../src/components/upload-button.component.ts | 40 ++++--------------
 .../upload-drag-area.component.html           |  7 ----
 .../upload-drag-area.component.spec.ts        |  3 +-
 .../components/upload-drag-area.component.ts  | 38 +++++------------
 .../ng2-alfresco-userinfo/README.md           |  3 ++
 .../ng2-alfresco-userinfo/demo/package.json   |  1 +
 .../ng2-alfresco-userinfo/karma-test-shim.js  |  2 +
 .../ng2-alfresco-userinfo/package.json        |  1 +
 ng2-components/ng2-alfresco-viewer/README.md  |  3 ++
 .../ng2-alfresco-viewer/demo/package.json     |  1 +
 .../ng2-alfresco-viewer/karma-test-shim.js    |  2 +
 .../ng2-alfresco-viewer/package.json          |  1 +
 .../ng2-alfresco-webscript/README.md          |  3 ++
 .../ng2-alfresco-webscript/demo/package.json  |  1 +
 .../ng2-alfresco-webscript/karma-test-shim.js |  2 +
 .../ng2-alfresco-webscript/package.json       |  1 +
 75 files changed, 256 insertions(+), 140 deletions(-)
 create mode 100644 ng2-components/ng2-alfresco-core/src/services/notification.service.ts

diff --git a/demo-shell-ng2/app/app.module.ts b/demo-shell-ng2/app/app.module.ts
index 560e10aaac..cd3eddb146 100644
--- 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';
diff --git a/demo-shell-ng2/app/vendor.ts b/demo-shell-ng2/app/vendor.ts
index f5333ae066..f8900561ae 100644
--- 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';
 
diff --git a/demo-shell-ng2/index.html b/demo-shell-ng2/index.html
index 5253f85ead..0e8d01209c 100644
--- a/demo-shell-ng2/index.html
+++ b/demo-shell-ng2/index.html
@@ -13,7 +13,7 @@
 
     <!-- IE/FF -->
     <script src=js/element.scrollintoviewifneeded-polyfill.js></script>
-    
+
     <!--[if IE]>
     <script src=js/shim.min.js></script>
     <script src=//cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js></script>
@@ -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) */
diff --git a/demo-shell-ng2/package.json b/demo-shell-ng2/package.json
index f8360b8ee7..5a6af3d26e 100644
--- 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",
diff --git a/demo-shell-ng2/public/css/app.css b/demo-shell-ng2/public/css/app.css
index 3656efa93b..7119266e91 100644
--- 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;
 }
@@ -13,24 +12,24 @@ body, html {
 }
 
 .loader-container {
-    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
-    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
-    display: -webkit-flex;     /* NEW - Chrome */
-    display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
+    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
+    display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
+    display: -webkit-flex; /* NEW - Chrome */
+    display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
     -webkit-box-flex-direction: row;
     -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;
+}
diff --git a/ng2-components/ng2-activiti-analytics/README.md b/ng2-components/ng2-activiti-analytics/README.md
index 166bf6e17c..108952f702 100644
--- 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>
diff --git a/ng2-components/ng2-activiti-analytics/demo/package.json b/ng2-components/ng2-activiti-analytics/demo/package.json
index 17a7b119eb..9fba5aaea5 100644
--- 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",
diff --git a/ng2-components/ng2-activiti-analytics/karma-test-shim.js b/ng2-components/ng2-activiti-analytics/karma-test-shim.js
index db50eb931e..d346348361 100644
--- 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',
diff --git a/ng2-components/ng2-activiti-analytics/package.json b/ng2-components/ng2-activiti-analytics/package.json
index 6055b3bbca..c818b06ccd 100644
--- 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",
diff --git a/ng2-components/ng2-activiti-diagrams/README.md b/ng2-components/ng2-activiti-diagrams/README.md
index 5192d5647a..7b7586e3c8 100644
--- 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>
diff --git a/ng2-components/ng2-activiti-diagrams/demo/package.json b/ng2-components/ng2-activiti-diagrams/demo/package.json
index d00651baa9..ac2ad6c1ab 100644
--- 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",
diff --git a/ng2-components/ng2-activiti-diagrams/karma-test-shim.js b/ng2-components/ng2-activiti-diagrams/karma-test-shim.js
index 680be8a9a1..04a45e501c 100644
--- 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',
diff --git a/ng2-components/ng2-activiti-diagrams/package.json b/ng2-components/ng2-activiti-diagrams/package.json
index 60d1fcf6fe..2838bcf146 100644
--- 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",
diff --git a/ng2-components/ng2-activiti-form/README.md b/ng2-components/ng2-activiti-form/README.md
index 2fa4585432..894a5d102d 100644
--- 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>
diff --git a/ng2-components/ng2-activiti-form/demo/package.json b/ng2-components/ng2-activiti-form/demo/package.json
index c907bf29b1..c73807a4d7 100644
--- 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",
diff --git a/ng2-components/ng2-activiti-form/karma-test-shim.js b/ng2-components/ng2-activiti-form/karma-test-shim.js
index 5445bda93f..ac2dd6fcfb 100644
--- 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',
diff --git a/ng2-components/ng2-activiti-form/package.json b/ng2-components/ng2-activiti-form/package.json
index 0363a7fcbc..c6a7fe2639 100644
--- 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",
diff --git a/ng2-components/ng2-activiti-processlist/README.md b/ng2-components/ng2-activiti-processlist/README.md
index c8f9875c4f..26c13a1830 100644
--- 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>
diff --git a/ng2-components/ng2-activiti-processlist/demo/package.json b/ng2-components/ng2-activiti-processlist/demo/package.json
index 2541196076..04c75f6c01 100644
--- 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",
diff --git a/ng2-components/ng2-activiti-processlist/karma-test-shim.js b/ng2-components/ng2-activiti-processlist/karma-test-shim.js
index b216586a6e..8ab8026459 100644
--- 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',
diff --git a/ng2-components/ng2-activiti-processlist/package.json b/ng2-components/ng2-activiti-processlist/package.json
index 1a783193d8..8fb1cd8bbd 100644
--- 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",
diff --git a/ng2-components/ng2-activiti-tasklist/README.md b/ng2-components/ng2-activiti-tasklist/README.md
index a972fff803..8153a8cce0 100644
--- 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>
diff --git a/ng2-components/ng2-activiti-tasklist/demo/package.json b/ng2-components/ng2-activiti-tasklist/demo/package.json
index f7a2e764d0..5b6f86c590 100644
--- 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",
diff --git a/ng2-components/ng2-activiti-tasklist/karma-test-shim.js b/ng2-components/ng2-activiti-tasklist/karma-test-shim.js
index 3fe29f7e8e..a66c8eb6a9 100644
--- 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',
diff --git a/ng2-components/ng2-activiti-tasklist/package.json b/ng2-components/ng2-activiti-tasklist/package.json
index 2133f10eeb..b72059a693 100644
--- 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",
diff --git a/ng2-components/ng2-alfresco-core/README.md b/ng2-components/ng2-alfresco-core/README.md
index 1e4098830f..e4b893d2d1 100644
--- 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._
diff --git a/ng2-components/ng2-alfresco-core/index.ts b/ng2-components/ng2-alfresco-core/index.ts
index 390f67ab68..444b971424 100644
--- 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,
diff --git a/ng2-components/ng2-alfresco-core/karma-test-shim.js b/ng2-components/ng2-alfresco-core/karma-test-shim.js
index 9560f22e39..c6de4c47e5 100644
--- 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',
diff --git a/ng2-components/ng2-alfresco-core/package.json b/ng2-components/ng2-alfresco-core/package.json
index 29958c0bdd..32e87074a3 100644
--- 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",
diff --git a/ng2-components/ng2-alfresco-core/src/services/index.ts b/ng2-components/ng2-alfresco-core/src/services/index.ts
index bb984b7d80..56390bea87 100644
--- 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';
diff --git a/ng2-components/ng2-alfresco-core/src/services/notification.service.ts b/ng2-components/ng2-alfresco-core/src/services/notification.service.ts
new file mode 100644
index 0000000000..78e2bb5c40
--- /dev/null
+++ 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
+        });
+    }
+}
diff --git a/ng2-components/ng2-alfresco-datatable/README.md b/ng2-components/ng2-alfresco-datatable/README.md
index a988c43703..137445e01e 100644
--- 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>
diff --git a/ng2-components/ng2-alfresco-datatable/demo/package.json b/ng2-components/ng2-alfresco-datatable/demo/package.json
index 46bb5d35a9..83f187f35c 100644
--- 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",
diff --git a/ng2-components/ng2-alfresco-datatable/karma-test-shim.js b/ng2-components/ng2-alfresco-datatable/karma-test-shim.js
index 146cc85001..b922a90bce 100644
--- 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',
diff --git a/ng2-components/ng2-alfresco-datatable/package.json b/ng2-components/ng2-alfresco-datatable/package.json
index 6bc1d2a0ab..5541ede94a 100644
--- 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",
diff --git a/ng2-components/ng2-alfresco-documentlist/README.md b/ng2-components/ng2-alfresco-documentlist/README.md
index c4167bb1b2..2e27715d9e 100644
--- 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>
diff --git a/ng2-components/ng2-alfresco-documentlist/demo/package.json b/ng2-components/ng2-alfresco-documentlist/demo/package.json
index 17925edf9d..87b3dcee53 100644
--- 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",
diff --git a/ng2-components/ng2-alfresco-documentlist/karma-test-shim.js b/ng2-components/ng2-alfresco-documentlist/karma-test-shim.js
index 49ec0cf63a..dcfa63a5ae 100644
--- 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',
diff --git a/ng2-components/ng2-alfresco-documentlist/package.json b/ng2-components/ng2-alfresco-documentlist/package.json
index 042ebc90d3..25d24fcf22 100644
--- 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",
diff --git a/ng2-components/ng2-alfresco-login/README.md b/ng2-components/ng2-alfresco-login/README.md
index 5943ec791b..f1787f3979 100644
--- 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>
diff --git a/ng2-components/ng2-alfresco-login/demo/package.json b/ng2-components/ng2-alfresco-login/demo/package.json
index 5183270c57..d24a59ee35 100644
--- 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",
diff --git a/ng2-components/ng2-alfresco-login/karma-test-shim.js b/ng2-components/ng2-alfresco-login/karma-test-shim.js
index 146cc85001..b922a90bce 100644
--- 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',
diff --git a/ng2-components/ng2-alfresco-login/package.json b/ng2-components/ng2-alfresco-login/package.json
index 39c14ae50f..93b80120ca 100644
--- 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",
diff --git a/ng2-components/ng2-alfresco-search/README.md b/ng2-components/ng2-alfresco-search/README.md
index c19bc899eb..b35fec0c29 100644
--- 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>
diff --git a/ng2-components/ng2-alfresco-search/demo/package.json b/ng2-components/ng2-alfresco-search/demo/package.json
index 53777a69db..8ceb942c6a 100644
--- 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",
diff --git a/ng2-components/ng2-alfresco-search/karma-test-shim.js b/ng2-components/ng2-alfresco-search/karma-test-shim.js
index 146cc85001..b922a90bce 100644
--- 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',
diff --git a/ng2-components/ng2-alfresco-search/package.json b/ng2-components/ng2-alfresco-search/package.json
index 6b5fabd693..30bdac0c8b 100644
--- 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",
diff --git a/ng2-components/ng2-alfresco-tag/README.md b/ng2-components/ng2-alfresco-tag/README.md
index 2e989d0983..f46fb22670 100644
--- 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>
diff --git a/ng2-components/ng2-alfresco-tag/demo/package.json b/ng2-components/ng2-alfresco-tag/demo/package.json
index 6eb6e76e31..493c0d8115 100644
--- 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",
diff --git a/ng2-components/ng2-alfresco-tag/karma-test-shim.js b/ng2-components/ng2-alfresco-tag/karma-test-shim.js
index 146cc85001..b922a90bce 100644
--- 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',
diff --git a/ng2-components/ng2-alfresco-tag/package.json b/ng2-components/ng2-alfresco-tag/package.json
index 541cfc6058..6fc08287c6 100644
--- 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",
diff --git a/ng2-components/ng2-alfresco-upload/README.md b/ng2-components/ng2-alfresco-upload/README.md
index a5f3ea9cef..1e288e215b 100644
--- 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>
diff --git a/ng2-components/ng2-alfresco-upload/demo/index.html b/ng2-components/ng2-alfresco-upload/demo/index.html
index d788c42269..0809dc80d6 100644
--- 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); });
diff --git a/ng2-components/ng2-alfresco-upload/demo/package.json b/ng2-components/ng2-alfresco-upload/demo/package.json
index d1138629f9..5e674eac69 100644
--- 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",
diff --git a/ng2-components/ng2-alfresco-upload/demo/systemjs.config.js b/ng2-components/ng2-alfresco-upload/demo/systemjs.config.js
index cf2504d7b3..a383112368 100644
--- 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',
diff --git a/ng2-components/ng2-alfresco-upload/karma-test-shim.js b/ng2-components/ng2-alfresco-upload/karma-test-shim.js
index 146cc85001..b922a90bce 100644
--- 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',
diff --git a/ng2-components/ng2-alfresco-upload/package.json b/ng2-components/ng2-alfresco-upload/package.json
index 9c185b4ea6..2aced2d6e3 100644
--- 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",
diff --git a/ng2-components/ng2-alfresco-upload/src/components/upload-button.component.html b/ng2-components/ng2-alfresco-upload/src/components/upload-button.component.html
index 45a3cde5c9..eb22f1ab52 100644
--- 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>
diff --git 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
index bdd037fb9f..c5a7e86fea 100644
--- 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();
     }));
diff --git a/ng2-components/ng2-alfresco-upload/src/components/upload-button.component.ts b/ng2-components/ng2-alfresco-upload/src/components/upload-button.component.ts
index ab1a491470..b052a047d3 100644
--- 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,26 +215,15 @@ 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 () {
-                    latestFilesAdded.forEach((uploadingFileModel: FileModel) => {
-                        uploadingFileModel.emitAbort();
-                    });
-                },
-                actionText: actionTranslate.value
+        this.notificationService.openSnackMessageAction(messageTranslate.value, actionTranslate.value, 3000).afterDismissed().subscribe(() => {
+            latestFilesAdded.forEach((uploadingFileModel: FileModel) => {
+                uploadingFileModel.emitAbort();
             });
-        }
+        });
     }
 
     /**
@@ -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);
     }
 
     /**
diff --git 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
index 2ccae1203f..8140a1fec3 100644
--- 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>
\ No newline at end of file
diff --git 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
index 6a513d19ed..19030eccf0 100644
--- 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 }
             ]
diff --git 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
index 799f851247..a530a0cfe7 100644
--- 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 () {
-                latestFilesAdded.forEach((uploadingFileModel: FileModel) => {
-                    uploadingFileModel.emitAbort();
-                });
-            },
-            actionText: actionTranslate.value
+        this.notificationService.openSnackMessageAction(messageTranslate.value, actionTranslate.value, 3000).afterDismissed().subscribe(() => {
+            latestFilesAdded.forEach((uploadingFileModel: FileModel) => {
+                uploadingFileModel.emitAbort();
+            });
         });
     }
 
@@ -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);
     }
 
     /**
diff --git a/ng2-components/ng2-alfresco-userinfo/README.md b/ng2-components/ng2-alfresco-userinfo/README.md
index 373bbd8ab7..7ee340242a 100644
--- 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>
diff --git a/ng2-components/ng2-alfresco-userinfo/demo/package.json b/ng2-components/ng2-alfresco-userinfo/demo/package.json
index a27a8c1b86..2df2b9d199 100644
--- 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",
diff --git a/ng2-components/ng2-alfresco-userinfo/karma-test-shim.js b/ng2-components/ng2-alfresco-userinfo/karma-test-shim.js
index 146cc85001..b922a90bce 100644
--- 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',
diff --git a/ng2-components/ng2-alfresco-userinfo/package.json b/ng2-components/ng2-alfresco-userinfo/package.json
index ba1818b01b..8d1b259bfc 100644
--- 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",
diff --git a/ng2-components/ng2-alfresco-viewer/README.md b/ng2-components/ng2-alfresco-viewer/README.md
index f13e79a148..3151588b35 100644
--- 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>
diff --git a/ng2-components/ng2-alfresco-viewer/demo/package.json b/ng2-components/ng2-alfresco-viewer/demo/package.json
index e1bbf9e8d5..e958fc2b43 100644
--- 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",
diff --git a/ng2-components/ng2-alfresco-viewer/karma-test-shim.js b/ng2-components/ng2-alfresco-viewer/karma-test-shim.js
index 146cc85001..b922a90bce 100644
--- 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',
diff --git a/ng2-components/ng2-alfresco-viewer/package.json b/ng2-components/ng2-alfresco-viewer/package.json
index dcdcc3a085..f7f6c69d60 100644
--- 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",
diff --git a/ng2-components/ng2-alfresco-webscript/README.md b/ng2-components/ng2-alfresco-webscript/README.md
index 4f86f12016..b348028004 100644
--- 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>
diff --git a/ng2-components/ng2-alfresco-webscript/demo/package.json b/ng2-components/ng2-alfresco-webscript/demo/package.json
index 5c65503cdf..9ed0b6724a 100644
--- 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",
diff --git a/ng2-components/ng2-alfresco-webscript/karma-test-shim.js b/ng2-components/ng2-alfresco-webscript/karma-test-shim.js
index 49ec0cf63a..dcfa63a5ae 100644
--- 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',
diff --git a/ng2-components/ng2-alfresco-webscript/package.json b/ng2-components/ng2-alfresco-webscript/package.json
index 3c99269101..8c7110f97c 100644
--- 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",