Add option to pass custom styles for angular components

app/angular/src/client/preview/angular/helpers.ts

@@ -68,26 +68,27 @@ const getModule = (
   return NgModule(moduleMeta)(moduleClass);
 };
 
-const createComponentFromTemplate = (template: string): Function => {
+const createComponentFromTemplate = (template: string, styles: string[]): Function => {
   const componentClass = class DynamicComponent {};
 
   return Component({
     template: template,
+    styles: styles,
   })(componentClass);
 };
 
 const initModule = (
   currentStory: IGetStoryWithContext,
   context: IContext,
-  reRender: boolean = false,
+  reRender: boolean = false
 ): Function => {
   const storyObj = currentStory(context);
-  const { component, template, props, moduleMetadata = {} } = storyObj;
+  const { component, template, props, styles, moduleMetadata = {} } = storyObj;
 
   let AnnotatedComponent;
 
   if (template) {
-    AnnotatedComponent = createComponentFromTemplate(template);
+    AnnotatedComponent = createComponentFromTemplate(template, styles);
   } else {
     AnnotatedComponent = component;
   }

app/angular/src/client/preview/angular/types.ts

@@ -16,6 +16,7 @@ export interface NgStory {
   propsMeta?: ICollection;
   moduleMetadata?: NgModuleMetadata;
   template?: string;
+  styles?: string[];
 }
 
 export interface NgError {

examples/angular-cli/src/stories/custom-styles.stories.ts

@@ -0,0 +1,22 @@
+import { storiesOf } from '@storybook/angular';
+import { action } from '@storybook/addon-actions';
+import { Button } from '@storybook/angular/demo';
+
+storiesOf('Custom Style', module).add('Default', () => ({
+  template: `<storybook-button-component [text]="text" (onClick)="onClick($event)"></storybook-button-component>`,
+  moduleMetadata: {
+    declarations: [Button],
+  },
+  props: {
+    text: 'Button with custom styles',
+    onClick: action('log'),
+  },
+  styles: [
+    `
+    storybook-button-component {
+      background-color: yellow;
+      padding: 25px;
+    }
+  `,
+  ],
+}));