Synchronize Story Controls with Component state

[NoNamer777]

Summary

I have a Angular ButtonComponent which can be made toggleable. For this, the toggle input needs to be set to true, which itself is an InputSignal. I've currently configured the button in such a way that whenever the button is clicked its selected state is toggled and a OutputSignal emits whether the button is selected or not. The selected state can also be set from outside the component using the selected InputSignal.

I'm using Storybook to test the component and check the styling. I've configured my Story so that the toggle and selected InputSignals can be controlled by the Story.

My problem is that whenever I click on the button to change the selected state, the controls of the Story go out of sync with the actual component state.

How can I synchronize the Story controls with the state of the component whenever its state changes?

Additional information

My Angular library resides inside a Nx managed mono-repository. I'm using the following package versions:

nx: ~21.4.0
storybook: ~9.1.0
angular: ~20.2.0

Below is my Component's story:

import {
    ButtonShapes,
    ButtonSizes,
    ButtonTypes,
    DEFAULT_BUTTON_SHAPE,
    DEFAULT_BUTTON_SIZE,
    DEFAULT_BUTTON_TYPE,
} from '@dnd-mapp/shared-ui';
import { Meta, StoryObj } from '@storybook/angular';
import { ButtonStoryComponent } from './button-story.component';

const meta = {
    title: 'Components/Buttons/Button',
    tags: ['!dev'],
    component: ButtonStoryComponent,
    args: {
        type: DEFAULT_BUTTON_TYPE,
        size: DEFAULT_BUTTON_SIZE,
        shape: DEFAULT_BUTTON_SHAPE,
        toggle: false,
        selected: false,
        label: 'My Button label',
    },
    argTypes: {
        type: {
            options: Object.values(ButtonTypes),
            control: 'select',
        },
        size: {
            options: Object.values(ButtonSizes),
            control: 'select',
        },
        shape: {
            options: Object.values(ButtonShapes),
            control: 'select',
        },
    },
} satisfies Meta<ButtonStoryComponent>;

export default meta;

type Story = StoryObj<ButtonStoryComponent>;

export const Default: Story = {
    tags: ['dev'],
    name: 'Interactive',
};

The accompanying story component:

import {
    booleanAttribute,
    ChangeDetectionStrategy,
    Component,
    DestroyRef,
    inject,
    input,
    output,
    signal,
} from '@angular/core';
import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
import {
    ButtonComponent,
    buttonShapeAttribute,
    buttonSizeAttribute,
    buttonTypeAttribute,
    ThemeDirective,
} from '@dnd-mapp/shared-ui';

@Component({
    selector: 'dma-story',
    templateUrl: './button-story.component.html',
    styleUrl: './button-story.component.scss',
    changeDetection: ChangeDetectionStrategy.OnPush,
    hostDirectives: [ThemeDirective],
    imports: [ButtonComponent],
})
export class ButtonStoryComponent {
    private readonly destroyRef = inject(DestroyRef);

    public readonly type = input.required({ transform: buttonTypeAttribute });

    public readonly size = input.required({ transform: buttonSizeAttribute });

    public readonly shape = input.required({ transform: buttonShapeAttribute });

    public readonly toggle = input(false, { transform: booleanAttribute });

    public readonly selected = input(false, { transform: booleanAttribute });

    public readonly selectedChange = output<boolean>();

    protected readonly isSelected = signal(false);

    constructor() {
        toObservable(this.selected)
            .pipe(takeUntilDestroyed(this.destroyRef))
            .subscribe({
                next: (selected) => this.isSelected.set(selected),
            });
    }

    public readonly label = input('My Button label');

    protected onSelectedChange(selected: boolean) {
        this.isSelected.set(selected);
        this.selectedChange.emit(selected);
    }
}

And the ButtonComponent itself:

import {
    booleanAttribute,
    ChangeDetectionStrategy,
    Component,
    computed,
    DestroyRef,
    inject,
    input,
    output,
    signal,
} from '@angular/core';
import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
import {
    buttonShapeAttribute,
    buttonSizeAttribute,
    buttonTypeAttribute,
    DEFAULT_BUTTON_SHAPE,
    DEFAULT_BUTTON_SIZE,
    DEFAULT_BUTTON_TYPE,
} from './models';

@Component({
    // eslint-disable-next-line @angular-eslint/component-selector
    selector: 'button[dmaButton]',
    templateUrl: './button.component.html',
    styleUrl: './button.component.scss',
    changeDetection: ChangeDetectionStrategy.OnPush,
    host: {
        '[attr.dma-button]': 'type()',
        '[attr.dma-button-size]': 'size()',
        '[attr.dma-button-shape]': 'shape()',
        '[attr.dma-toggle-button]': 'isToggleButton()',
        '[class.selected]': 'isSelected() && toggle()',
        '(click)': 'onClick()',
    },
    imports: [],
})
export class ButtonComponent {
    private readonly destroyRef = inject(DestroyRef);

    public readonly type = input(DEFAULT_BUTTON_TYPE, { transform: buttonTypeAttribute, alias: 'dmaButton' });

    // eslint-disable-next-line @angular-eslint/no-input-rename
    public readonly size = input(DEFAULT_BUTTON_SIZE, { transform: buttonSizeAttribute, alias: 'dmaButtonSize' });

    // eslint-disable-next-line @angular-eslint/no-input-rename
    public readonly shape = input(DEFAULT_BUTTON_SHAPE, { transform: buttonShapeAttribute, alias: 'dmaButtonShape' });

    public readonly toggle = input(false, { transform: booleanAttribute });

    public readonly selected = input(false, { transform: booleanAttribute });

    public readonly selectedChange = output<boolean>();

    protected readonly isToggleButton = computed(() => (this.toggle() ? '' : undefined));

    protected readonly isSelected = signal(false);

    constructor() {
        toObservable(this.selected)
            .pipe(takeUntilDestroyed(this.destroyRef))
            .subscribe({
                next: (selected) => this.isSelected.set(selected),
            });
    }

    protected onClick() {
        if (!this.toggle()) return;
        this.isSelected.update((selected) => !selected);
        this.selectedChange.emit(this.isSelected());
    }
}

Create a reproduction

No response

[dosubot[bot]]

Storybook controls (args) don't automatically sync with internal component state changes in Angular—when your component updates its state (like toggling selected), the controls panel won't reflect that change unless you update the args yourself. The recommended pattern is to manage the state in your story or a wrapper component and update the Storybook args in response to output events (like selectedChange). This keeps the controls and the component state in sync.

For Angular, you can do this by using a custom render function in your story that binds the component's output to a handler which calls updateArgs (or setArgs in React, but the principle is the same). In your story, you would listen for the selectedChange event and update the selected arg accordingly. Here's a simplified example:

import { Meta, StoryObj } from '@storybook/angular';
import { ButtonComponent } from './button.component';

const meta: Meta<ButtonComponent> = {
  component: ButtonComponent,
  render: (args, { updateArgs }) => ({
    props: {
      ...args,
      selectedChange: (selected: boolean) => {
        updateArgs({ selected });
      },
    },
  }),
};

export default meta;
type Story = StoryObj<ButtonComponent>;

export const Interactive: Story = {
  args: {
    toggle: true,
    selected: false,
    label: 'My Button label',
  },
};

This way, whenever the button emits selectedChange, the Storybook controls will update to reflect the new state. This approach is the recommended workaround, as Storybook does not provide built-in two-way binding for controls and component outputs in Angular. More details and discussion on this pattern can be found here and here.

Keep in mind, the Docs tab's code panel may not always reflect live state changes—this is a known limitation in Storybook's current implementation.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[NoNamer777]

@dosu I tried using updateArgs (I also tried setArgs but the results are the same) like you suggested, but I get an error indicating that these functions do not exist on the Context object. I also tried importing the useArgs function from storybook/preview-api and use that instead, but the I get the following error:

button-story.component.ts:27 ERROR Error: Storybook preview hooks can only be called inside decorators and story functions.
    at invalidHooksError (runtime.js:20896:7)
    at getHooksContextOrThrow (runtime.js:20904:11)
    at useStoryContext (runtime.js:21009:31)
    at useArgs (runtime.js:21022:49)
    at StorybookWrapperComponent.selectedChange (button.stories.ts:34:1)
    at StorybookWrapperComponent_Template_dma_story_selectedChange_0_listener (template.html:1:112)
    at executeListenerWithErrorHandling (debug_node.mjs:12988:1)
    at wrapListenerIn_markDirtyAndPreventDefault (debug_node.mjs:12971:1)
    at OutputEmitterRef.emit (resource.mjs:68:1)
    at ButtonStoryComponent.onSelectedChange (button-story.component.ts:27:1)

[dosubot[bot]]

This error is expected—Storybook hooks like useArgs (and functions like updateArgs/setArgs) can only be used inside story functions or decorators, not inside Angular component code or event handlers. In Angular stories, updateArgs is not reliably available in the context object by default, which is why you see it as undefined or missing in your render function context. This is a known limitation in Storybook 9.x for Angular and is being worked on for future releases [source].

To work around this and enable syncing component state with Storybook controls, you can add a decorator in your .storybook/preview.ts that injects updateArgs into the story context. Here’s how you can do it:

// .storybook/preview.ts
import { useArgs } from '@storybook/preview-api';

export const decorators = [
  (story, context) => {
    const [, updateArgs] = useArgs();
    return story({ ...context, updateArgs });
  },
];

Then, in your story’s render function, you can access updateArgs from the context and use it to update args in response to output events:

// In your story file
export const Interactive: Story = {
  render: (args, { updateArgs }) => ({
    props: {
      ...args,
      selectedChange: (selected: boolean) => {
        updateArgs?.({ selected });
      },
    },
  }),
};

This pattern allows you to keep Storybook controls in sync with your component’s internal state changes [source]. Note that this is a workaround, and there’s currently no official built-in two-way binding for Angular stories in Storybook 9.x. Also, the Docs tab’s code panel may not update dynamically with control changes—this is a known limitation.

Let me know if you need a more detailed example or run into issues with this approach!

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}