Skip to content
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
148 lines (110 sloc) 3.51 KB
id title
Storybook for Angular

Automatic setup

You may have tried to use our quick start guide to setup your project for Storybook. If it failed because it couldn't detect you're using angular, you could try forcing it to use angular:

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

Manual setup

If you want to set up Storybook manually for your Angular project, this is the guide for you.

Step 1: Add dependencies

Add @storybook/angular

Add @storybook/angular to your project. To do that, run:

npm install @storybook/angular --save-dev

Add @babel/core, and babel-loader

Make sure that you have @babel/core, and babel-loader in your dependencies as well because we list these as a peer dependencies:

npm install babel-loader @babel/core --save-dev 

Step 2: Add a npm script

Then add the following NPM script to your package.json in order to start the storybook later in this guide:

  "scripts": {
    "storybook": "start-storybook"

Step 3: Create the config file

For a basic Storybook configuration, the only thing you need to do is tell Storybook where to find stories.

To do that, create a file at .storybook/config.js with the following content:

import { configure } from '@storybook/angular';

function loadStories() {
  // You can require as many stories as you need.

configure(loadStories, module);

That'll load stories in ../stories/index.js. You can choose where to place stories, you can co-locate them with source files, or place them in an other directory.

Requiring all your stories becomes bothersome real quick, so you can use this to load all stories matching a glob.

import { configure } from '@storybook/angular';

function loadStories() {
  const req = require.context('../stories', true, /\.stories\.ts$/);
  req.keys().forEach(filename => req(filename));

configure(loadStories, module);

Step 4: Storybook TypeScript configuration

@storybook/angular is using ForkTsCheckerWebpackPlugin to boost the build performance. This makes it necessary to create a tsconfig.json file at .storybook/tsconfig.json with the following content:

  "extends": "../tsconfig.json",
  "exclude": [
  "include": [

Step 5: Write your stories

Now create a ../stories/index.js file, and write your first story like this:

import { storiesOf } from '@storybook/angular';
import { Button } from '@storybook/angular/demo';

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

Each story is a single state of your component. In the above case, there are two stories for the demo button component:

  ├── with text
  └── with emoji

Finally: Run your Storybook

Now everything is ready. Run your storybook with:

npm run storybook

Storybook should start, on a random open port in dev-mode.

Now you can develop your components and write stories and see the changes in Storybook immediately since it uses Webpack's hot module reloading.

You can’t perform that action at this time.