diff --git a/addons/centered/src/angular.js b/addons/centered/src/angular.js
new file mode 100644
index 00000000000..42635b0affc
--- /dev/null
+++ b/addons/centered/src/angular.js
@@ -0,0 +1,58 @@
+import styles from './styles';
+
+function getComponentSelector(component) {
+  // eslint-disable-next-line no-underscore-dangle
+  return component.__annotations__[0].selector;
+}
+
+function getTemplate(metadata) {
+  let tpl = '';
+  if (metadata.component) {
+    const selector = getComponentSelector(metadata.component);
+    tpl = `<${selector}></${selector}>`;
+  }
+
+  if (metadata.template) {
+    tpl = metadata.template;
+  }
+
+  return `      
+      <div [ngStyle]="styles.style">
+        <div [ngStyle]="styles.innerStyle">
+          ${tpl}
+        </div>
+      </div>`;
+}
+
+function getModuleMetadata(metadata) {
+  const { moduleMetadata, component } = metadata;
+
+  if (component && !moduleMetadata) {
+    return {
+      declarations: [metadata.component],
+    };
+  }
+
+  if (component && moduleMetadata) {
+    return {
+      ...moduleMetadata,
+      declarations: [...moduleMetadata.declarations, metadata.component],
+    };
+  }
+
+  return moduleMetadata;
+}
+
+export default function(metadataFn) {
+  const metadata = metadataFn();
+
+  return {
+    ...metadata,
+    template: getTemplate(metadata),
+    moduleMetadata: getModuleMetadata(metadata),
+    props: {
+      ...metadata.props,
+      styles,
+    },
+  };
+}
diff --git a/addons/centered/src/index.js b/addons/centered/src/index.js
index ae0cc4e1f83..8891e1fa6e9 100644
--- a/addons/centered/src/index.js
+++ b/addons/centered/src/index.js
@@ -1,7 +1,9 @@
 import { window } from 'global';
 import ReactCentered from './react';
 import VueCentered from './vue';
+import AngularCentered from './angular';
 
 const Centered = window.STORYBOOK_ENV === 'vue' ? VueCentered : ReactCentered;
-
 export default Centered;
+
+export const centeredAng = AngularCentered;