Support styles with knobs

addons/knobs/src/angular/helpers.js

@@ -86,11 +86,12 @@ const getAnnotatedComponent = ({ componentMeta, component, params, knobStore, ch
   return KnobWrapperComponent;
 };
 
-const createComponentFromTemplate = template => {
+const createComponentFromTemplate = (template, styles) => {
   const componentClass = class DynamicComponent {};
 
   return Component({
     template,
+    styles,
   })(componentClass);
 };
 
@@ -106,10 +107,10 @@ export function prepareComponent({ getStory, context, channel, knobStore }) {
   resetKnobs(knobStore, channel);
   const story = getStory(context);
   let { component } = story;
-  const { template } = story;
+  const { template, styles } = story;
 
   if (!component) {
-    component = createComponentFromTemplate(template);
+    component = createComponentFromTemplate(template, styles);
   }
 
   const { componentMeta, props, params, moduleMetadata } = getComponentMetadata({

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

@@ -72,8 +72,8 @@ const createComponentFromTemplate = (template: string, styles: string[]): Functi
   const componentClass = class DynamicComponent {};
 
   return Component({
-    template: template,
-    styles: styles,
+    template,
+    styles,
   })(componentClass);
 };
 

examples/angular-cli/src/stories/__snapshots__/custom-styles.stories.storyshot

@@ -24,3 +24,31 @@ exports[`Storyshots Custom Style Default 1`] = `
   </ng-component>
 </storybook-dynamic-app-root>
 `;
+
+exports[`Storyshots Custom Style With Knobs 1`] = `
+<storybook-dynamic-app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
+>
+  <ng-component
+    _nghost-c10=""
+  >
+    <storybook-button-component
+      _ngcontent-c10=""
+      _nghost-c11=""
+      ng-reflect-text="Button with custom styles"
+    >
+      
+        
+      <button
+        _ngcontent-c11=""
+      >
+        Button with custom styles
+      </button>
+      
+    
+    </storybook-button-component>
+  </ng-component>
+</storybook-dynamic-app-root>
+`;

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

@@ -1,22 +1,43 @@
 import { storiesOf } from '@storybook/angular';
 import { action } from '@storybook/addon-actions';
+import { withKnobs, text } from '@storybook/addon-knobs/angular';
 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;
-    }
-  `,
-  ],
-}));
+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;
+      }
+    `,
+    ],
+  }))
+  .addDecorator(withKnobs)
+  .add('With Knobs', () => ({
+    template: `<storybook-button-component [text]="text" (onClick)="onClick($event)"></storybook-button-component>`,
+    moduleMetadata: {
+      declarations: [Button],
+    },
+    props: {
+      text: text('text', 'Button with custom styles'),
+      onClick: action('log'),
+    },
+    styles: [
+      `
+      storybook-button-component {
+        background-color: red;
+        padding: 25px;
+      }
+    `,
+    ],
+  }));