How to use relative angular component in storybook?

@dalton_moen 

To use a relative Angular component in Storybook, you can start by creating a new story file for the component. Here's a step-by-step guide on how to do this:

1. If you haven't already installed Angular Storybook, you can do so by running the following command in your Angular project directory:

1

npx -p @storybook/cli sb init --type angular

1. Create a new story file for your Angular component by creating a new file with the naming convention component-name.stories.ts in the same directory as your component file. For example, if your component is named button.component.ts, you can create a file named button.component.stories.ts.
2. In the newly created story file, import the necessary modules and the component itself.

1
2

import { moduleMetadata } from '@storybook/angular';
import { ButtonComponent } from './button.component';

1. Create a default export for your story with a title and component definition.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

export default {
  title: 'Button',
  decorators: [
    moduleMetadata({
      declarations: [ButtonComponent],
    }),
  ],
};

export const Primary = () => ({
  component: ButtonComponent,
  props: {
    text: 'Click me',
  },
});

1. Run Storybook in watch mode using the following command:

1

npm run storybook

1. You should now be able to see your component displayed in Storybook, where you can interact with it and view different states of the component.

By following these steps, you should be able to use a relative Angular component in Storybook and showcase its functionality in a development environment.