@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

8.6.12

• CLI: Only install Visual Test Addon if test feature is selected - #30966, thanks @ghengeveld!
• Core: Fix telemetry error on Storybook UI - #30953, thanks @yannbf!
• Ember: Fix ember-template-compiler import for ember 6+ - #30682, thanks @leoeuclids!
• Next: Upgrade vite-plugin-storybook-nextjs for Next v14 compatibility - #30997, thanks @kasperpeulen!
• Svelte: Exclude node_modules from docgen - #30981, thanks @JReinhold!