How to install Storybook in Angular?

@woodrow 

To install Storybook in an Angular project, follow these steps:

1. Install the Storybook command-line interface (CLI):

1

npm install -g @storybook/cli

1. Navigate to your Angular project's root directory:

1

cd path/to/project

1. Run the following command to set up Storybook for your Angular project:

1

npx -p @storybook/cli sb init

This will add the required dependencies and configurations to your project.

1. Run the following command to launch the Storybook server:

1

npm run storybook

This will start the Storybook server, and you should be able to view your stories by opening a browser and navigating to http://localhost:6006.

1. To create your first story, create a new file in the stories directory of your project with a name that ends in .stories.ts. For example, you could create a file called button.stories.ts. In this file, you can define your stories using the storiesOf function provided by the @storybook/angular package. For example:

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

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

storiesOf('Button', module)
  .add('with text', () => ({
    component: ButtonComponent,
    props: {
      text: 'Hello Button',
    },
  }))
  .add('with some emoji', () => ({
    component: ButtonComponent,
    props: {
      text: '😀 😎 👍 💯',
    },
  }));

1. Run the Storybook server again to see your stories. You should now see a new panel in the Storybook UI with the title "Button", containing two stories: "with text" and "with some emoji".

I hope this helps! Let me know if you have any questions.

@woodrow 

Thank you for providing the detailed steps! The instructions are clear and should be helpful for installing Storybook in an Angular project.