diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.css b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.css
new file mode 100644
index 0000000000..4f0cc641e0
--- /dev/null
+++ b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.css
@@ -0,0 +1,49 @@
+:host .full-width { width: 100%; }
+
+:host .folder-thumbnail {
+    font-size: 48px;
+    cursor: pointer;
+}
+
+:host .document-thumbnail {
+    width: 48px;
+    height: 48px;
+    cursor: pointer;
+}
+
+:host .content-header {
+    font-size: 15px;
+}
+
+:host .content-header:hover {
+    text-decoration: underline;
+    cursor: pointer;
+}
+
+:host .parent-folder-link { cursor: pointer; }
+:host .parent-folder-link > td { text-align: left; }
+:host .folder-header-cell { cursor: pointer; }
+
+:host .breadcrumb { margin-bottom: 4px; }
+
+:host .folder-icon {
+    float: left;
+    margin-right: 10px;
+    font-size: 4em;
+}
+
+:host .file-icon {
+    width: 52px;
+    height: 52px;
+    float: left;
+    margin-right: 10px;
+}
+
+:host .document-header {
+    font-size: 24px;
+    line-height: 32px;
+}
+
+:host .document-header:hover {
+    text-decoration: underline;
+}
diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.html b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.html
new file mode 100644
index 0000000000..eb39fa7873
--- /dev/null
+++ b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.html
@@ -0,0 +1,105 @@
+<ol *ngIf="breadcrumb" class="breadcrumb">
+    <li *ngFor="#r of route; #last = last" [class.active]="last" [ngSwitch]="last">
+        <span *ngSwitchWhen="true">{{r.name}}</span>
+        <a *ngSwitchDefault href="#" (click)="goToRoute(r, $event)">{{r.name}}</a>
+    </li>
+</ol>
+<table *ngIf="folder" class="mdl-data-table mdl-js-data-table mdl-shadow--2dp full-width">
+    <thead>
+    <tr>
+        <!-- Thumbnails -->
+        <th *ngIf="thumbnails"></th>
+        <!-- Name -->
+        <th class="mdl-data-table__cell--non-numeric full-width">Name</th>
+        <!-- Actions -->
+        <th></th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr class="parent-folder-link" *ngIf="canNavigateParent()" (click)="onNavigateParentClick($event)">
+        <td colspan="3">
+            <button class="mdl-button mdl-js-button mdl-button--icon"
+                    (click)="onNavigateParentClick($event)">
+                <i class="material-icons">arrow_upward</i>
+            </button>
+        </td>
+    </tr>
+
+    <tr *ngFor="#content of folder.items; #idx = index">
+        <!-- Thumbnails: folder -->
+        <td *ngIf="thumbnails && content.isFolder">
+            <i class="material-icons folder-thumbnail"
+               (click)="onItemClick(content, $event)">{{folderIcon || 'folder_open'}}</i>
+        </td>
+
+        <!-- Thumbnails: document -->
+        <td *ngIf="thumbnails && !content.isFolder">
+            <img *ngIf="thumbnails" class="document-thumbnail"
+                 alt=""
+                 src="{{getDocumentThumbnailUrl(content)}}"
+                 (click)="onItemClick(content, $event)">
+        </td>
+
+        <!-- Name: folder -->
+        <td *ngIf="content.isFolder" class="mdl-data-table__cell--non-numeric folder-header-cell"
+            (click)="onItemClick(content, $event)">
+            <span class="content-header">
+                {{content.displayName}}
+            </span>
+        </td>
+
+        <!-- Name: document -->
+        <td *ngIf="!content.isFolder" class="mdl-data-table__cell--non-numeric" >
+            <span class="content-header" (click)="onItemClick(content, $event)">
+                {{content.displayName}}
+            </span>
+        </td>
+
+
+        <!-- Actions: Folder cell template -->
+        <td *ngIf="content.isFolder">
+            <!-- quick action buttons -->
+            <button class="mdl-button mdl-js-button mdl-button--icon"
+                    *ngFor="#action of quickFolderActions"
+                    (click)="executeContentAction(content, action)">
+                <i class="material-icons">{{action.icon}}</i>
+            </button>
+
+            <!-- action menu -->
+            <button [id]="'folder_action_menu_' + idx" class="mdl-button mdl-js-button mdl-button--icon">
+                <i class="material-icons">more_vert</i>
+            </button>
+            <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
+                [attr.for]="'folder_action_menu_' + idx">
+                <li class="mdl-menu__item"
+                    *ngFor="#action of folderActions"
+                    (click)="executeContentAction(content, action)">
+                    {{action.title}}
+                </li>
+            </ul>
+        </td>
+        <!-- Actions: Document cell template -->
+        <td *ngIf="!content.isFolder">
+            <!-- quick action buttons -->
+            <button class="mdl-button mdl-js-button mdl-button--icon"
+                    *ngFor="#action of quickDocumentActions"
+                    (click)="executeContentAction(content, action)">
+                <i class="material-icons">{{action.icon}}</i>
+            </button>
+
+            <!-- action menu -->
+            <button [id]="'document_action_menu_' + idx" class="mdl-button mdl-js-button mdl-button--icon">
+                <i class="material-icons">more_vert</i>
+            </button>
+            <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
+                [attr.for]="'document_action_menu_' + idx">
+                <li class="mdl-menu__item"
+                    *ngFor="#action of documentActions"
+                    (click)="executeContentAction(content, action)">
+                    {{action.title}}
+                </li>
+            </ul>
+        </td>
+    </tr>
+    </tbody>
+</table>
diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.js b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.js
index d0f5f98fa9..f1a60788b8 100644
--- a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.js
+++ b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.js
@@ -162,11 +162,10 @@ System.register(['angular2/core', './../services/alfresco.service'], function(ex
                 ], DocumentList.prototype, "itemClick", void 0);
                 DocumentList = __decorate([
                     core_1.Component({
+                        moduleId: __moduleName,
                         selector: 'alfresco-document-list',
-                        styles: [
-                            "\n            :host .full-width { width: 100%; }\n            \n            :host .folder-thumbnail {\n                font-size: 48px;\n                cursor: pointer;\n            }\n            \n            :host .document-thumbnail {\n                width: 48px;\n                height: 48px;\n                cursor: pointer;\n            }\n            \n            :host .content-header {\n                font-size: 15px;\n            }\n           \n            :host .content-header:hover {\n                text-decoration: underline;\n                cursor: pointer;\n            }\n            \n            :host .parent-folder-link { cursor: pointer; }\n            :host .parent-folder-link > td { text-align: left; }\n            :host .folder-header-cell { cursor: pointer; }\n            \n            :host .breadcrumb { margin-bottom: 4px; }\n\n            :host .folder-icon {\n                float: left;\n                margin-right: 10px;\n                font-size: 4em;\n            }\n\n            :host .file-icon {\n                width: 52px;\n                height: 52px;\n                float: left;\n                margin-right: 10px;\n            }\n            \n            :host .document-header {\n                font-size: 24px;\n                line-height: 32px;\n            }\n            \n            :host .document-header:hover {\n                text-decoration: underline;\n            }\n        "
-                        ],
-                        template: "\n        <ol *ngIf=\"breadcrumb\" class=\"breadcrumb\">\n            <li *ngFor=\"#r of route; #last = last\" [class.active]=\"last\" [ngSwitch]=\"last\">\n                <span *ngSwitchWhen=\"true\">{{r.name}}</span>\n                <a *ngSwitchDefault href=\"#\" (click)=\"goToRoute(r, $event)\">{{r.name}}</a>\n            </li>\n        </ol>\n        <table *ngIf=\"folder\" class=\"mdl-data-table mdl-js-data-table mdl-shadow--2dp full-width\">\n            <thead>\n                <tr>\n                    <!-- Thumbnails -->\n                    <th *ngIf=\"thumbnails\"></th>\n                    <!-- Name -->\n                    <th class=\"mdl-data-table__cell--non-numeric full-width\">Name</th>\n                    <!-- Actions -->\n                    <th></th>\n                </tr>\n            </thead>\n            <tbody>\n                <tr class=\"parent-folder-link\" *ngIf=\"canNavigateParent()\" (click)=\"onNavigateParentClick($event)\">\n                    <td colspan=\"3\">\n                        <button class=\"mdl-button mdl-js-button mdl-button--icon\"\n                                (click)=\"onNavigateParentClick($event)\">\n                            <i class=\"material-icons\">arrow_upward</i>\n                        </button>\n                    </td>\n                </tr>\n                \n                <tr *ngFor=\"#content of folder.items; #idx = index\">\n                    <!-- Thumbnails: folder -->\n                    <td *ngIf=\"thumbnails && content.isFolder\">\n                        <i class=\"material-icons folder-thumbnail\" \n                            (click)=\"onItemClick(content, $event)\">{{folderIcon || 'folder_open'}}</i>\n                    </td>\n                    \n                     <!-- Thumbnails: document -->\n                    <td *ngIf=\"thumbnails && !content.isFolder\">\n                        <img *ngIf=\"thumbnails\" class=\"document-thumbnail\"\n                             alt=\"\"\n                             src=\"{{getDocumentThumbnailUrl(content)}}\"\n                             (click)=\"onItemClick(content, $event)\">\n                    </td>\n                    \n                    <!-- Name: folder -->\n                    <td *ngIf=\"content.isFolder\" class=\"mdl-data-table__cell--non-numeric folder-header-cell\" \n                        (click)=\"onItemClick(content, $event)\">\n                        <span class=\"content-header\">\n                            {{content.displayName}}\n                        </span>\n                    </td>\n                    \n                    <!-- Name: document -->\n                    <td *ngIf=\"!content.isFolder\" class=\"mdl-data-table__cell--non-numeric\" >\n                        <span class=\"content-header\" (click)=\"onItemClick(content, $event)\">\n                            {{content.displayName}}\n                        </span>\n                    </td>\n                    \n                    \n                    <!-- Actions: Folder cell template -->\n                    <td *ngIf=\"content.isFolder\">\n                        <!-- quick action buttons -->\n                        <button class=\"mdl-button mdl-js-button mdl-button--icon\"\n                                *ngFor=\"#action of quickFolderActions\"\n                                (click)=\"executeContentAction(content, action)\">\n                            <i class=\"material-icons\">{{action.icon}}</i>\n                        </button>\n                        \n                        <!-- action menu -->\n                        <button [id]=\"'folder_action_menu_' + idx\" class=\"mdl-button mdl-js-button mdl-button--icon\">\n                            <i class=\"material-icons\">more_vert</i>\n                        </button>\n                        <ul class=\"mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect\"\n                            [attr.for]=\"'folder_action_menu_' + idx\">\n                            <li class=\"mdl-menu__item\"\n                                *ngFor=\"#action of folderActions\"\n                                (click)=\"executeContentAction(content, action)\">\n                                {{action.title}}\n                            </li>\n                        </ul>\n                    </td>\n                    <!-- Actions: Document cell template -->\n                    <td *ngIf=\"!content.isFolder\">\n                        <!-- quick action buttons -->\n                        <button class=\"mdl-button mdl-js-button mdl-button--icon\"\n                                *ngFor=\"#action of quickDocumentActions\"\n                                (click)=\"executeContentAction(content, action)\">\n                            <i class=\"material-icons\">{{action.icon}}</i>\n                        </button>\n                        \n                        <!-- action menu -->\n                        <button [id]=\"'document_action_menu_' + idx\" class=\"mdl-button mdl-js-button mdl-button--icon\">\n                            <i class=\"material-icons\">more_vert</i>\n                        </button>\n                        <ul class=\"mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect\"\n                            [attr.for]=\"'document_action_menu_' + idx\">\n                            <li class=\"mdl-menu__item\"\n                                *ngFor=\"#action of documentActions\"\n                                (click)=\"executeContentAction(content, action)\">\n                                {{action.title}}\n                            </li>\n                        </ul>\n                    </td>\n                </tr>\n            </tbody>\n        </table>\n    ",
+                        styleUrls: ['./document-list.css'],
+                        templateUrl: './document-list.html',
                         providers: [alfresco_service_1.AlfrescoService]
                     }), 
                     __metadata('design:paramtypes', [alfresco_service_1.AlfrescoService])
diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.js.map b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.js.map
index acd91b25ca..45c05c5461 100644
--- a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.js.map
+++ b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.js.map
@@ -1 +1 @@
-{"version":3,"file":"document-list.js","sourceRoot":"","sources":["document-list.ts"],"names":[],"mappings":"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"}
\ No newline at end of file
+{"version":3,"file":"document-list.js","sourceRoot":"","sources":["document-list.ts"],"names":[],"mappings":"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"}
\ No newline at end of file
diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.ts b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.ts
index aaf7146e92..da76d8227c 100644
--- a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.ts
+++ b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.ts
@@ -29,169 +29,13 @@ import {DocumentEntity} from './../core/entities/document.entity';
 import {ContentActionModel} from './../models/content-action.model';
 
 declare var componentHandler;
+declare let __moduleName:string;
 
 @Component({
+    moduleId: __moduleName,
     selector: 'alfresco-document-list',
-    styles: [
-        `
-            :host .full-width { width: 100%; }
-            
-            :host .folder-thumbnail {
-                font-size: 48px;
-                cursor: pointer;
-            }
-            
-            :host .document-thumbnail {
-                width: 48px;
-                height: 48px;
-                cursor: pointer;
-            }
-            
-            :host .content-header {
-                font-size: 15px;
-            }
-           
-            :host .content-header:hover {
-                text-decoration: underline;
-                cursor: pointer;
-            }
-            
-            :host .parent-folder-link { cursor: pointer; }
-            :host .parent-folder-link > td { text-align: left; }
-            :host .folder-header-cell { cursor: pointer; }
-            
-            :host .breadcrumb { margin-bottom: 4px; }
-
-            :host .folder-icon {
-                float: left;
-                margin-right: 10px;
-                font-size: 4em;
-            }
-
-            :host .file-icon {
-                width: 52px;
-                height: 52px;
-                float: left;
-                margin-right: 10px;
-            }
-            
-            :host .document-header {
-                font-size: 24px;
-                line-height: 32px;
-            }
-            
-            :host .document-header:hover {
-                text-decoration: underline;
-            }
-        `
-    ],
-    template: `
-        <ol *ngIf="breadcrumb" class="breadcrumb">
-            <li *ngFor="#r of route; #last = last" [class.active]="last" [ngSwitch]="last">
-                <span *ngSwitchWhen="true">{{r.name}}</span>
-                <a *ngSwitchDefault href="#" (click)="goToRoute(r, $event)">{{r.name}}</a>
-            </li>
-        </ol>
-        <table *ngIf="folder" class="mdl-data-table mdl-js-data-table mdl-shadow--2dp full-width">
-            <thead>
-                <tr>
-                    <!-- Thumbnails -->
-                    <th *ngIf="thumbnails"></th>
-                    <!-- Name -->
-                    <th class="mdl-data-table__cell--non-numeric full-width">Name</th>
-                    <!-- Actions -->
-                    <th></th>
-                </tr>
-            </thead>
-            <tbody>
-                <tr class="parent-folder-link" *ngIf="canNavigateParent()" (click)="onNavigateParentClick($event)">
-                    <td colspan="3">
-                        <button class="mdl-button mdl-js-button mdl-button--icon"
-                                (click)="onNavigateParentClick($event)">
-                            <i class="material-icons">arrow_upward</i>
-                        </button>
-                    </td>
-                </tr>
-                
-                <tr *ngFor="#content of folder.items; #idx = index">
-                    <!-- Thumbnails: folder -->
-                    <td *ngIf="thumbnails && content.isFolder">
-                        <i class="material-icons folder-thumbnail" 
-                            (click)="onItemClick(content, $event)">{{folderIcon || 'folder_open'}}</i>
-                    </td>
-                    
-                     <!-- Thumbnails: document -->
-                    <td *ngIf="thumbnails && !content.isFolder">
-                        <img *ngIf="thumbnails" class="document-thumbnail"
-                             alt=""
-                             src="{{getDocumentThumbnailUrl(content)}}"
-                             (click)="onItemClick(content, $event)">
-                    </td>
-                    
-                    <!-- Name: folder -->
-                    <td *ngIf="content.isFolder" class="mdl-data-table__cell--non-numeric folder-header-cell" 
-                        (click)="onItemClick(content, $event)">
-                        <span class="content-header">
-                            {{content.displayName}}
-                        </span>
-                    </td>
-                    
-                    <!-- Name: document -->
-                    <td *ngIf="!content.isFolder" class="mdl-data-table__cell--non-numeric" >
-                        <span class="content-header" (click)="onItemClick(content, $event)">
-                            {{content.displayName}}
-                        </span>
-                    </td>
-                    
-                    
-                    <!-- Actions: Folder cell template -->
-                    <td *ngIf="content.isFolder">
-                        <!-- quick action buttons -->
-                        <button class="mdl-button mdl-js-button mdl-button--icon"
-                                *ngFor="#action of quickFolderActions"
-                                (click)="executeContentAction(content, action)">
-                            <i class="material-icons">{{action.icon}}</i>
-                        </button>
-                        
-                        <!-- action menu -->
-                        <button [id]="'folder_action_menu_' + idx" class="mdl-button mdl-js-button mdl-button--icon">
-                            <i class="material-icons">more_vert</i>
-                        </button>
-                        <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
-                            [attr.for]="'folder_action_menu_' + idx">
-                            <li class="mdl-menu__item"
-                                *ngFor="#action of folderActions"
-                                (click)="executeContentAction(content, action)">
-                                {{action.title}}
-                            </li>
-                        </ul>
-                    </td>
-                    <!-- Actions: Document cell template -->
-                    <td *ngIf="!content.isFolder">
-                        <!-- quick action buttons -->
-                        <button class="mdl-button mdl-js-button mdl-button--icon"
-                                *ngFor="#action of quickDocumentActions"
-                                (click)="executeContentAction(content, action)">
-                            <i class="material-icons">{{action.icon}}</i>
-                        </button>
-                        
-                        <!-- action menu -->
-                        <button [id]="'document_action_menu_' + idx" class="mdl-button mdl-js-button mdl-button--icon">
-                            <i class="material-icons">more_vert</i>
-                        </button>
-                        <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
-                            [attr.for]="'document_action_menu_' + idx">
-                            <li class="mdl-menu__item"
-                                *ngFor="#action of documentActions"
-                                (click)="executeContentAction(content, action)">
-                                {{action.title}}
-                            </li>
-                        </ul>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-    `,
+    styleUrls: ['./document-list.css'],
+    templateUrl: './document-list.html',
     providers: [AlfrescoService]
 })
 export class DocumentList implements OnInit, AfterViewChecked {