How to pass object args

[thais-molica]

I'm using angular 12 with storybook 6, in a nrwl workspace.
I have a component that receive an Array of objects as an argument. I was able to preset this argument using args, but when I pass it to my template it gives me an error:

Errors during JIT compilation of template for StorybookWrapperComponent: Parser Error: Missing expected ]

The only way I have to pass this arg to my component is as a string, witch breaks my ngFor loop. Is there an especific way of passing complex objects with storybook essentials?

Here is my args configuration:

Primary.args = {
  files: [
    {
      filename: 'something',
      status: status.SUCCESS,
      id: 'string'
    },
    {
      filename: 'something with error',
      status: status.ERROR,
      id: 'string'
    },
  ]
}

And here is my template story:

const Template: Story<any> = (args) => ({
    component: FileListComponent,
    template: `<is-file-list [files]="${args.files}"></is-file-list>`,
})

If I pass the arg like that, I get that parsing error. If I pass like this (as a string) <is-file-list files="${args.files}"></is-file-list>, it breaks my component as it is expecting an Array.

[mastermsd]

This worked for me

const NbaTemplate = (config) => ({
  template: `<next-best-action [config]="config"></next-best-action>`,
  props: { config },
});

[andrewgtibbetts]

const NbaTemplate = (config) => ({
template: <next-best-action [config]="config"></next-best-action>,
props: { config },
});

@mastermsd is config an array of objects?

[mastermsd]

It depends on the input your component needs.
In my case it needs an object. Then it would look something like this:

const OriginalTemplate = (config) => ({
  template: `<next-best-action [config]="config"></next-best-action>`,
  props: { config },
});

export const Original: Story = OriginalTemplate.bind({});
Original.args = {
  title: 'Go to the next best action',
  hasEmphasis: true,
  isVariant: false,
};

[andrewgtibbetts]

Thanks for the reply.
Ok, so all the args in your example are either a string or boolean.
What if one were an array of objects that needed to be passed separately to a specific input on the component in the template, because you need another arg to control a conditional class (a property that doesn't belong to the component)?

Example:

import { Meta, Story } from '@storybook/angular';
import { Component } from '@path/to/component.component';

export default {
    title: 'Component',
    component: Component,
} as Meta;

export const ComponentStory: Story = (args) => {
    return {
        props: args,
        template: `<component [property]="${args.property}"${args.otherarg ? ' class="conditional_thing"' : ''}></component>`,
    }
};
ComponentStory.argTypes = {
    property: {
        control: 'object',
        name: "Property",
    },
    otherarg: {
        control: 'boolean',
        name: "Class",
    },
};
ComponentStory.args = {
    property: [
        {
            prop1: "foo",
            prop2: false,
        },
        {
            prop1: "bar",
            prop2: false,
        },
    ],
    otherarg: false,
};

[mastermsd]

#17098
Something for you maybe?

[andrewgtibbetts]

I have my Angular flavor setup and behaving the exact same way as @thais-molica. Any resolution?
For some reason arrays and objects are not being handled as expected.
If I change [property]="${args.property}" to [property]="property" in the template, it still doesn't work but reveals more about the error; rendering the component but with ng-reflect-property="[object Object],[object Object" (thus the "Missing expected ]").

[Fawadkhan]

I have my Angular flavor setup and behaving the exact same way as @thais-molica. Any resolution? For some reason arrays and objects are not being handled as expected. If I change [property]="${args.property}" to [property]="property" in the template, it still doesn't work but reveals more about the error; rendering the component but with ng-reflect-property="[object Object],[object Object" (thus the "Missing expected ]").

This somehow helped me fix my error. I was using the curly braces before and i just realised I should be just using [property] = "property" notation instead

[austinthedeveloper]

I couldn't get any of these solutions to work for me however it looks like Storybook has now made it easier. I'm not sure what version it was introduced in but upgrade this package to:

"@storybook/angular": "7.6.17",

You will now have access to the new function argsToTemplate. Docs can be found here:

https://storybook.js.org/docs/essentials/controls#fully-custom-args

Here's an example where I needed to pass data to the ng-content in the component. All the arguments will be assigned to the component:

export const ComponentStory: Story = {
  args: {
    ...Default.args,
   // Additional args if needed
  },
  render: (args) => {
    return {
      props: args,
      template: `
        <component-name ${argsToTemplate(args)}>
          Actions
        </component-name>
      `,
    };
  },
};