diff --git a/ng2-components/ng2-alfresco-core/src/components/context-menu-holder.component.ts b/ng2-components/ng2-alfresco-core/src/components/context-menu-holder.component.ts
index 03eeb3925f..40a3d9960f 100644
--- a/ng2-components/ng2-alfresco-core/src/components/context-menu-holder.component.ts
+++ b/ng2-components/ng2-alfresco-core/src/components/context-menu-holder.component.ts
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component } from '@angular/core';
+import { Component, HostListener } from '@angular/core';
 import { ContextMenuService } from './../services/context-menu.service';
 
 @Component({
@@ -52,10 +52,6 @@ import { ContextMenuService } from './../services/context-menu.service';
         }
         `
     ],
-    host:{
-        '(document:click)':'clickedOutside()'
-        // '(click)':'clickInside()'
-    },
     template: `
         <div [ngStyle]="locationCss" class="menu-container">
             <ul class="context-menu">
@@ -85,6 +81,7 @@ export class ContextMenuHolderComponent {
         };
     }
 
+    @HostListener('document:click')
     clickedOutside() {
         this.isShown = false;
     }
@@ -100,4 +97,11 @@ export class ContextMenuHolderComponent {
             };
         }
     }
+
+    @HostListener('contextmenu', ['$event'])
+    onShowContextMenu(event?: MouseEvent) {
+        if (event) {
+            event.preventDefault();
+        }
+    }
 }
diff --git a/ng2-components/ng2-alfresco-core/src/components/context-menu.directive.ts b/ng2-components/ng2-alfresco-core/src/components/context-menu.directive.ts
index be498b8069..05be1f4309 100644
--- a/ng2-components/ng2-alfresco-core/src/components/context-menu.directive.ts
+++ b/ng2-components/ng2-alfresco-core/src/components/context-menu.directive.ts
@@ -15,14 +15,11 @@
  * limitations under the License.
  */
 
-import { Directive, Input } from '@angular/core';
+import { Directive, Input, HostListener } from '@angular/core';
 import { ContextMenuService } from './../services/context-menu.service';
 
 @Directive({
-    selector:'[context-menu]',
-    host: {
-        '(contextmenu)':'onShowContextMenu($event)'
-    }
+    selector:'[context-menu]'
 })
 export class ContextMenuDirective {
     @Input('context-menu')
@@ -31,6 +28,7 @@ export class ContextMenuDirective {
     constructor(
         private _contextMenuService: ContextMenuService) {}
 
+    @HostListener('contextmenu', ['$event'])
     onShowContextMenu(event?: MouseEvent) {
         if (event) {
             event.preventDefault();