@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

See documentation for installation instructions, usage examples, APIs, and more.

Changelog

9.0.18

• CLI: Fix Storybook doctor compatibility checks - #32077, thanks @yannbf!
• Svelte: Fix union types generating invalid labels in argTypes - #31980, thanks @grantralls!
• Telemetry: Add nodeLinker to telemetry - #32072, thanks @valentinpalkovic!