How to include a function in angular storybook args?

user_4400936 0
Viewed 822

I have a component that has event emitters, and I need to provide a function to it for the component to function correctly.

Used as so:

<my-component (onClick)="myFunction()"></my-component>

So I'm trying this in Storybook, but I can't figure out how to define myFunction() in storybook.

Even when I create myFunction as an arg, I get

ERROR TypeError: ctx.myFunction is not a function
    at StorybookWrapperComponent_Template_my_component_onClick_0_listener (template.html)

So how do I properly define this function. I don't see anything in Storybook's docs mentioning it, but I can't be the only person that needs this...

Relevant Story Code:

export default {
  title: 'My Great Component',
  component: MyComponent
} as Meta<MyComponent>;


const Template: Story<any> = (args) => ({
  props: args,
  template: `<my-component (onClick)="myFunction()"></my-component>`
});


export const Primary = Template.bind({});
Primary.args = {
  myFunction: () => { alert('clicked'); }
}

I've also tried this, thinking that maybe hard coding my function as part of this, it would work, but nope...

export const Primary = Template.bind({myFunction: () => { alert('clicked');});

I'm thinking I might need a wrapper component, but doing that just to make storybook work feels excessive.

storybook angular
1 Answers

Ok, I literally figured it out directly after posting this... of course.

I just needed to assign it to the args object in the template function:

const Template: Story<any> = (args) => {

  // this
  args.myFunction = () => { alert('clicked'); };

  return {
    props: args,
    template: `<my-component (onClick)="myFunction()"></my-component>`
  }
};
user_44009360
Related