• Version 7.6.0
  • Published
  • 328 kB
  • 26 dependencies
  • MIT license


npm i @storybook/angular
yarn add @storybook/angular
pnpm add @storybook/angular


Storybook for Angular: Develop Angular components in isolation with hot reloading.



variable configure

const configure: (loader: Addon_Loadable, module: NodeModule) => void;

    variable forceReRender

    const forceReRender: () => void;

      variable raw

      const raw: () => any;

        variable storiesOf

        const storiesOf: any;


          function applicationConfig

          applicationConfig: <TArgs = any>(
          config: ApplicationConfig
          ) => DecoratorFunction<AngularRenderer, TArgs>;
          • Decorator to set the config options which are available during the application bootstrap operation

          function argsToTemplate

          argsToTemplate: <A extends Record<string, any>>(
          args: A,
          options?: ArgsToTemplateOptions<keyof A>
          ) => string;
          • Converts an object of arguments to a string of property and event bindings and excludes undefined values. Why? Because Angular treats undefined values in property bindings as an actual value and does not apply the default value of the property as soon as the binding is set. This feels counter-intuitive and is a common source of bugs in stories.

            Example 1

            // component.ts
            @Component({ selector: 'example' })
            export class ExampleComponent {
            @Input() input1: string = 'Default Input1';
            @Input() input2: string = 'Default Input2';
            @Output() click = new EventEmitter();
            // component.stories.ts
            import { argsToTemplate } from '@storybook/angular';
            export const Input1: Story = {
            render: (args) => ({
            props: args,
            // Problem1: <example [input1]="input1" [input2]="input2" (click)="click($event)"></example>
            // This will set input2 to undefined and the internal default value will not be used.
            // Problem2: <example [input1]="input1" (click)="click($event)"></example>
            // The default value of input2 will be used, but it is not overridable by the user via controls.
            // Solution: Now the controls will be applicable to both input1 and input2, and the default values will be used if the user does not override them.
            template: `<example ${argsToTemplate(args)}"></example>`,
            args: {
            // In this Story, we want to set the input1 property, and the internal default property of input2 should be used.
            input1: 'Input 1',
            click: { action: 'clicked' },

          function componentWrapperDecorator

          componentWrapperDecorator: <TArgs = any>(
          element: any,
          | ICollection
          | ((storyContext: StoryContext<AngularRenderer, TArgs>) => ICollection)
          ) => DecoratorFunction<AngularRenderer, TArgs>;

            function moduleMetadata

            moduleMetadata: <TArgs = any>(
            metadata: Partial<NgModuleMetadata>
            ) => DecoratorFunction<AngularRenderer, TArgs>;


              interface AngularOptions

              interface AngularOptions {}

                property enableIvy

                enableIvy?: boolean;

                  property enableNgcc

                  enableNgcc?: boolean;

                    interface AngularRenderer

                    interface AngularRenderer extends WebRenderer {}

                      property component

                      component: any;

                        property storyResult

                        storyResult: StoryFnAngularReturnType;

                          interface IStory

                          interface StoryFnAngularReturnType {}

                            property applicationConfig

                            applicationConfig?: ApplicationConfig;

                              property moduleMetadata

                              moduleMetadata?: NgModuleMetadata;

                                property props

                                props?: ICollection;

                                  property styles

                                  styles?: string[];

                                    property template

                                    template?: string;

                                      property userDefinedTemplate

                                      userDefinedTemplate?: boolean;

                                        Type Aliases

                                        type AngularParameters

                                        type Parameters = DefaultParameters & {
                                        bootstrapModuleOptions?: unknown;

                                          type Decorator

                                          type Decorator<TArgs = StrictArgs> = DecoratorFunction<AngularRenderer, TArgs>;

                                            type FrameworkOptions

                                            type FrameworkOptions = AngularOptions & {
                                            builder?: BuilderOptions;

                                              type Loader

                                              type Loader<TArgs = StrictArgs> = LoaderFunction<AngularRenderer, TArgs>;

                                                type Meta

                                                type Meta<TArgs = Args> = ComponentAnnotations<AngularRenderer, TArgs>;
                                                • Metadata to configure the stories for a component.

                                                  See Also

                                                  • [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export)

                                                type Preview

                                                type Preview = ProjectAnnotations<AngularRenderer>;

                                                  type Story

                                                  type Story<TArgs = Args> = StoryFn<TArgs>;
                                                  • See Also

                                                    • [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)


                                                    Use StoryFn instead. Use StoryObj if you want to migrate to CSF3, which uses objects instead of functions to represent stories. You can read more about the CSF3 format here: https://storybook.js.org/blog/component-story-format-3-0/

                                                    Story function that represents a CSFv2 component example.

                                                  type StorybookConfig

                                                  type StorybookConfig = Omit<
                                                  keyof StorybookConfigWebpack | keyof StorybookConfigFramework
                                                  > &
                                                  StorybookConfigWebpack &
                                                  • The interface for Storybook configuration in main.ts files.

                                                  type StoryContext

                                                  type StoryContext<TArgs = StrictArgs> = GenericStoryContext<AngularRenderer, TArgs>;

                                                    type StoryFn

                                                    type StoryFn<TArgs = Args> = AnnotatedStoryFn<AngularRenderer, TArgs>;
                                                    • Story function that represents a CSFv2 component example.

                                                      See Also

                                                      • [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)

                                                    type StoryObj

                                                    type StoryObj<TArgs = Args> = StoryAnnotations<AngularRenderer, TArgs>;
                                                    • Story function that represents a CSFv3 component example.

                                                      See Also

                                                      • [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)

                                                    Package Files (7)

                                                    Dependencies (26)

                                                    Dev Dependencies (22)

                                                    Peer Dependencies (15)


                                                    To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

                                                    You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@storybook/angular.

                                                    • Markdown
                                                    • HTML
                                                      <a href="https://www.jsdocs.io/package/@storybook/angular"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>