How to add directives to angular storybook

Question

I have a dropdown directive which I want to add to my storybook, its not working. When I run the button shows on the storybook but if I click on the button the template is not getting displayed.

import {moduleMetadata} from '@storybook/angular';
import {CommonModule} from '@angular/common';
import {DropdownModule} from '../../app/base-components/dropdown';

export default {
  title: 'dropdown',
  decorators: [
    moduleMetadata({
      declarations: [],
      imports: [CommonModule, DropdownModule]
    })
  ]
};

export const withDropdownTemplate = () => ({
  template: '<button dropDown></button>',
  props: {
    displayTpl: `<ng-template #dropdownTpl>
  <ul>
    Hello World
  </ul>
</ng-template>`
  }
});

Answer 1

I had the same question.

my solution: https://github.com/AnteaterCode/shatilokit/blob/master/src/stories/general/buttons.stories.ts

const modules = {
  imports: [
    ShButtonModule,
  ],
};

export default {
  title: 'general/Button',
  component: ShButton
} as Meta;


export const primary = () => ({
  moduleMetadata: modules,
  template: `
    <button shButton> Button </button>
  `,
});