Create a Storybook by Angular

Ahmadreza Shamimi
2 min readApr 26, 2023

--

First, we need to make sure that you have Angular installed on your machine. If you don’t have it installed, you can follow the instructions on the official Angular website to download and install it.

Once you have Angular installed, you can create a new Angular project using the following command:

ng new my-storybook

This will create a new Angular project in a folder called “my-storybook”.

Next, we need to install Storybook. You can install Storybook using the following command:

npx sb init

This will install Storybook and generate a configuration file for your project.

Now, we need to create our first story. Stories are essentially the building blocks of your Storybook. They define the different states and variations of your components.

To create a story, we’ll first need to create a new component. You can create a new component using the following command:

ng generate component my-component

This will create a new component in a folder called “my-component”.

Now, we can create a story for our component. To create a story, we’ll need to create a file called “my-component.stories.ts” in the same folder as our component.

In this file, we can define our story using the storiesOf function. Here's an example:

import { storiesOf } from '@storybook/angular';
import { MyComponent } from './my-component.component';

storiesOf('MyComponent', module)
.add('Default', () => ({
component: MyComponent,
props: {
text: 'Hello, World!'
}
}));

This defines a story for our MyComponent component with a default state that displays the text "Hello, World!".

Now that we have our story defined, we can start up the Storybook server using the following command:

npm run storybook
or
ng run story:storybook

This will start up the Storybook server and you should be able to see your component and story in the browser.

Congratulations, you have just created your first Storybook with Angular! You can now continue to create more stories for your components and use Storybook to develop and test your components in isolation.

--

--

Ahmadreza Shamimi
Ahmadreza Shamimi

Written by Ahmadreza Shamimi

I'm Ahmadreza Shamimi with an experienced with over 10 years of experience coding with web and mobile platforms.

No responses yet