DEV Community

Cover image for Passing objects into Angular 10 Storybook 6 stories
Eddie Chen
Eddie Chen

Posted on

Passing objects into Angular 10 Storybook 6 stories

I'd put the most important thing first. The solution is below.

const Template: Story<SomeAngularComponent> = (args: SomeAngularComponent) => ({
  component: SomeAngularComponent,
  template: `<some-angular-component [height]="height" [data]="data">`,
  props: {
    ...args,
    data: { id: 1, name: 'SomeObjects' },
    height: '300px',
  },
});
Enter fullscreen mode Exit fullscreen mode

ENV

Angular version: 10.0.4
Storybook version : 6.1.14

I was trying to pass some objects into my Angular component, so I followed the instruction on https://storybook.js.org/blog/introducing-storybook-args/

Like so...

const Template: Story<LineChartComponent> = (args: LineChartComponent) => ({
  component: LineChartComponent,
  props: args
)};

export const Default = Template.bind({});
Default.args = { data: { id: 1, name: 'SomeObjects' } };

Enter fullscreen mode Exit fullscreen mode

However, my Angular component did not receive the data object.
It took me a while to figure this one out.

Top comments (0)