Search code examples
angularstorybook

How to dynamically update args from the template

I'm using Storybook in my Angular application, and I'm having an issue with args

I have an arg called "clicked" that updates from false to true as soon as a button is clicked, take a look:

const Template: Story = (args) => ({
  props: args,
  template: `
    <button (click)="clicked = true">
      Default
    </button>
  `,
})

export const Primary = Template.bind({})
Primary.args = {
  clicked: false,
}

This update is not two-way, because when looking at the addons page, the value does not seem to change, even if the template has successfully updated it. The main problem is that when trying to access this value via Interactions, the value is never updated, and my tests are failing.

enter image description here

So, my question is - can I update clicked in a way that the controls tab updates as well?

Solution

  • I looked into their code and managed to achieve this:

    import type { Channel } from "@storybook/channels";
import { UPDATE_STORY_ARGS } from "@storybook/core-events";

export const MyStory: StoryObj<MyComponent> = {
  render: (args, { id }) => {
    args.btnClicked = () => {
      const channel = (window as any).__STORYBOOK_ADDONS_CHANNEL__ as Channel;
      channel.emit(UPDATE_STORY_ARGS, {
        storyId: id,
        updatedArgs: { clicked: true },
      });
    };

    ....