Angular Storybook Functions & Animations

Question

I have created a simple accordion using Angular. The panel in the accordion is animated using Angular animations. I want to replicate what I see working within the app within storybook. It however does not show the animation, it is always open and the click function does not work. I'm new to storybook. How can I get this component to work like it does in the app within storybook?

accordion.component.html

<div class="flex items-start sm:items-center w-full justify-between" (click)="toggleTailwind($event, item)">
    <h3 class="text-base md:text-2xl leading-relaxed text-dark-600 dark:text-gray-400 pointer-events-none">
        {{data.ticker}}</h3>
    <button aria-label="Show/hide data" class="focus:outline-none pointer-events-none">
       </button>
</div>
<div class="panel" [@ToggleCollapse]="{value: item.open ? 'visible' : 'hidden', params: {panelHeight: panelHeight}}">
    <p>SOME TEXT HERE</p>
</div>

accordion.component.ts

import { animate, state, style, transition, trigger } from '@angular/animations';
import { Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'app-tailwind-accordion',
  templateUrl: './tailwind-accordion.component.html',
  styleUrls: ['./tailwind-accordion.component.scss'],
  animations: [
    trigger('ToggleCollapse', [
      state('hidden', style({height : '0px'})),
      state('visible', style({height: '{{panelHeight}}'}), {params: {'panelHeight': '50px'}}),

      transition('hidden <=> visible', animate('500ms ease-in'))
    ])
  ]
})
export class TailwindAccordionComponent {
  state: string = 'hidden'
  panelHeight = '50px'

  data: any

  @Input() item: any

  toggleTailwind(event: any, item: any) {
    item.open = (item.open ? false : true)
    const element = event.target;
    const panel = element.nextElementSibling;
    this.panelHeight = panel.scrollHeight + "px"
  }
 }

accordion.stories.ts

import { TailwindAccordionComponent } from './tailwind-accordion.component';
import { moduleMetadata } from '@storybook/angular';
import { CommonModule } from '@angular/common';
import { Story, Meta } from '@storybook/angular/types-6-0';


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

const Template: Story<TailwindAccordionComponent> = (args: TailwindAccordionComponent) => ({
  component: TailwindAccordionComponent,
  props: args,
});

export const NoData = Template.bind({});
NoData.args = {
  item: '',
};



export const WithDataSet1 = Template.bind({});
WithDataSet1.args = {
item: {
    "heading": "Heading 1",
    "open": false,
    "panelText": "Panel Text 1"
  }
};

export const WithDataSet2 = Template.bind({});
WithDataSet2.args = {
item: 
    {
      "heading": "Heading 2",
      "open": false,
      "panelText": "Panel Text 2"
    },
};

I believe I may need to use actions but the docs only show logging things to the storybook output and not using actions to trigger animations.