CODEWITHSUNDEEP
angularstorybookangular-storybook
Subrata Banerjee
Subrata Banerjee

Reputation: 143

How to add directives to angular storybook

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>`
  }
});

Upvotes: 6

Views: 4834

Answers (2)

Nikolay Nikolov
Nikolay Nikolov

Reputation: 1

    const customizable = ():StoryFn => (args) => ({
      template: `
       <button dropDown></button>
      `,
      props: args,
    });
    
    export const primary = customizable();
    primary.args = {...};

Upvotes: 0

Александр Шатилов
Александр Шатилов

Reputation: 371

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>
  `,
});

Upvotes: 2

Related Questions