diff --git a/playground/basic-example/main.html b/playground/basic-example/main.html
index d47c4f78db..b8cae8a69c 100644
--- a/playground/basic-example/main.html
+++ b/playground/basic-example/main.html
@@ -1,6 +1,10 @@
 <ion-tabbar view-title="My Tabs"></ion-tabbar>
 <ion-tabbar view-title="Tabs 2"></ion-tabbar>
 <ion-tabbar view-title="Tabs 4"></ion-tabbar>
+
+<button (click)="showModal()">Show Modal</button>
+<!--
 <ion-modal>
   <h2>I'm a modal!</h2>
 </ion-modal>
+-->
diff --git a/playground/basic-example/main.js b/playground/basic-example/main.js
index baac365ffb..accf4ebd56 100644
--- a/playground/basic-example/main.js
+++ b/playground/basic-example/main.js
@@ -15,6 +15,10 @@ class PlaygroundMain {
   constructor() {
     console.log('Playground Start')
   }
+
+  showModal() {
+    Modal.show()
+  }
 }
 
 bootstrap(PlaygroundMain)
diff --git a/src/components/modal/modal.js b/src/components/modal/modal.js
index 03d8c793e8..e6ea71339e 100644
--- a/src/components/modal/modal.js
+++ b/src/components/modal/modal.js
@@ -1,4 +1,4 @@
-import {Component, Template} from 'angular2/angular2';
+import {NgElement, Component, Template} from 'angular2/angular2';
 import {Ion} from '../ion';
 
 @Component({
@@ -12,9 +12,12 @@ import {Ion} from '../ion';
     </div>`
 })
 class ModalWrapper extends Ion {
-  constructor() {
+  constructor(@NgElement() el : NgElement) {
+    this.element = el
+    console.log('element', el)
   }
   show() {
+    this.element.domElement.classList.add('active')
   }
   hide() {
   }
@@ -34,4 +37,8 @@ class ModalWrapper extends Ion {
 })
 export class Modal extends Ion {
   constructor() {}
+
+  static show() {
+    console.log('Showing modal')
+  }
 }