diff --git a/packages/angular/demo/src/app/my-cool-injectable.ts b/packages/angular/demo/src/app/my-cool-injectable.ts
new file mode 100644
index 0000000000..9a52473815
--- /dev/null
+++ b/packages/angular/demo/src/app/my-cool-injectable.ts
@@ -0,0 +1,64 @@
+import { Injectable } from '@angular/core';
+import { AlertOptions } from '@ionic/core';
+
+import { ensureElementInBody, hydrateElement } from '../util/util';
+
+let alertId = 0;
+
+@Injectable()
+export class AlertController {
+  create(opts?: AlertOptions): any {
+    return getAlertProxy(opts);
+  }
+}
+
+export function getAlertProxy(opts: AlertOptions) {
+  return {
+    id: alertId++,
+    state: PRESENTING,
+    opts: opts,
+    present: function() {
+      return present(this);
+    },
+    dismiss: function() {
+      return dismiss(this);
+    }
+  };
+}
+
+export function present(alertProxy: AlertProxyInternal): Promise<void> {
+  return loadOverlay(alertProxy.opts).then((alertElement: HTMLIonAlertElement) => {
+    if (alertProxy.state === PRESENTING) {
+      return alertElement.present();
+    }
+  });
+}
+
+export function dismiss(alertProxy: AlertProxyInternal): Promise<void> {
+  return loadOverlay(alertProxy.opts).then((alertElement: HTMLIonAlertElement) => {
+    if (alertProxy.state === DISMISSING) {
+      return alertElement.dismiss();
+    }
+  });
+}
+
+export function loadOverlay(opts: AlertOptions) {
+  const element = ensureElementInBody('ion-alert-controller') as HTMLIonAlertControllerElement;
+  return hydrateElement(element).then(() => {
+    return element.create(opts);
+  });
+}
+
+export interface AlertProxy {
+  present(): Promise<void>;
+  dismiss(): Promise<void>;
+}
+
+export interface AlertProxyInternal extends AlertProxy {
+  id: number;
+  opts: AlertOptions;
+  state: number;
+}
+
+export const PRESENTING = 1;
+export const DISMISSING = 2;
diff --git a/packages/angular/demo/src/util/util.ts b/packages/angular/demo/src/util/util.ts
new file mode 100644
index 0000000000..6dc5e2ad37
--- /dev/null
+++ b/packages/angular/demo/src/util/util.ts
@@ -0,0 +1,17 @@
+
+export function hydrateElement(element: any) {
+  return element.componentOnReady();
+}
+
+export function getElement(elementName: string) {
+  return document.querySelector(elementName);
+}
+
+export function ensureElementInBody(elementName: string) {
+  let element = getElement(elementName);
+  if (!element) {
+    element = document.createElement(elementName);
+    document.body.appendChild(element);
+  }
+  return element;
+}