I'm having trouble connecting the eventemitter of an Angular button to Storybook actions. The action doesn't seem to be triggering even though I can see in the console that the button is being clicked. However, it's not showing up in the actions tab in Storybook.
Is there a way to get the click event to appear in the actions tab in Storybook?
button.component.html
<button class="button" (click)="handleClick()">Save</button>
button.component.ts
import { Component, EventEmitter, Output } from '@angular/core';
@Component({
selector: 'ad-button',
templateUrl: './button.component.html',
styleUrls: ['./button.component.scss'],
})
export class ButtonComponent {
@Output()
buttonclick = new EventEmitter();
constructor() {}
handleClick() {
this.buttonclick.emit();
console.log('clicked');
}
}
button.stories.ts
import { Story, Meta } from '@storybook/angular';
import { ButtonComponent } from './button.component';
export default {
title: 'Components/Button',
component: ButtonComponent,
argTypes: { buttonClick: { action: 'buttonClick' } },
} as Meta;
const Template: Story<ButtonComponent> = (args: ButtonComponent) => ({
props: args,
});
export const Primary = Template.bind({});
Primary.args = {};