@storybook/angular

What is @storybook/angular?

@storybook/angular is a tool for developing UI components in isolation for Angular applications. It allows developers to build, test, and showcase components independently from the main application, which helps in creating a more modular and maintainable codebase.

What are @storybook/angular's main functionalities?

Component Development

Allows developers to create and showcase individual components in isolation. This example demonstrates how to create a story for a Button component.

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

storiesOf('Button', module)
  .addDecorator(
    moduleMetadata({
      declarations: [ButtonComponent],
    })
  )
  .add('default', () => ({
    component: ButtonComponent,
    props: {
      text: 'Click me',
    },
  }));

Interactive Stories

Enables the creation of interactive stories where components can respond to user actions. This example shows a Button component that displays an alert when clicked.

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

storiesOf('Button', module)
  .addDecorator(
    moduleMetadata({
      declarations: [ButtonComponent],
    })
  )
  .add('with click action', () => ({
    component: ButtonComponent,
    props: {
      text: 'Click me',
      onClick: () => alert('Button clicked!'),
    },
  }));

Addons Integration

Supports integration with various addons to enhance the development experience. This example uses the Knobs addon to dynamically change the text of the Button component.

import { moduleMetadata, storiesOf } from '@storybook/angular';
import { withKnobs, text } from '@storybook/addon-knobs';
import { ButtonComponent } from './button.component';

storiesOf('Button', module)
  .addDecorator(withKnobs)
  .addDecorator(
    moduleMetadata({
      declarations: [ButtonComponent],
    })
  )
  .add('with knobs', () => ({
    component: ButtonComponent,
    props: {
      text: text('Text', 'Click me'),
    },
  }));

Other packages similar to @storybook/angular

@storybook/react

@storybook/react is similar to @storybook/angular but is designed for React applications. It provides the same core functionalities such as component development, interactive stories, and addon integration, but tailored for the React ecosystem.

docz

Docz is a documentation tool that allows developers to create interactive documentation for their React components. It offers similar functionalities to @storybook/angular, such as component isolation and interactive examples, but is more focused on documentation.

README

Storybook for Angular

Storybook for Angular is a UI development environment for your Angular components. With it, you can visualize different states of your UI components and develop them interactively.

Storybook runs outside of your app. So you can develop UI components in isolation without worrying about app specific dependencies and requirements.

Getting Started

npm i -g @storybook/cli
cd my-angular-app
getstorybook

For more information visit: storybook.js.org

---

Storybook also comes with a lot of addons and a great API to customize as you wish. You can also build a static version of your storybook and deploy it anywhere you want.