DEV Community

Cover image for Making storybook 6 auto-generated control to work with a story template which contains an Angular component
Eddie Chen
Eddie Chen

Posted on

Making storybook 6 auto-generated control to work with a story template which contains an Angular component

ENV

Angular version: 10.0.4
Storybook version : 6.1.15

When I tried to write a storybook story with an Angular component, it works fine when I followed the Official Docs. However when I add a template to the storybook Template like below, the control stops working.

const Template: Story<ComponentComponent> = (args: ComponentComponent) => ({
  component: ComponentComponent,
  props: args,
  template: `<lib-component label="test"></lib-component>`,
});
Enter fullscreen mode Exit fullscreen mode

I also tried the following and it still does not work.

const Template: Story<ComponentComponent> = (args: ComponentComponent) => ({
  component: ComponentComponent,
  props: args,
  template: `<lib-component [label]="args.label"></lib-component>`,
});
Enter fullscreen mode Exit fullscreen mode

The browser complained that args is undefined.

ERROR TypeError: _co.args is undefined
Enter fullscreen mode Exit fullscreen mode

After several attempts, I finally figured it out.
The correct way to write a template is to get rid of the args for whatever reason.
The following code works for me.

const Template: Story<ComponentComponent> = (args: ComponentComponent) => ({
  component: ComponentComponent,
  props: args,
  template: `<lib-component [label]="label"></lib-component>`,
});
Enter fullscreen mode Exit fullscreen mode

Top comments (0)