@storybook/angular

Functions

• applicationConfig()
• argsToTemplate()
• componentWrapperDecorator()
• moduleMetadata()
• setProjectAnnotations()

Interfaces

• AngularOptions

  • enableIvy
  • enableNgcc
• AngularRenderer

  • component
  • storyResult
• IStory

  • applicationConfig
  • moduleMetadata
  • props
  • styles
  • template
  • userDefinedTemplate

Type Aliases

• AngularParameters
• Decorator
• FrameworkOptions
• Loader
• Meta
• Preview
• StorybookConfig
• StoryContext
• StoryFn
• StoryObj

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,
    props?:
        | ICollection
        | ((storyContext: StoryContext<AngularRenderer, TArgs>) => ICollection)
) => DecoratorFunction<AngularRenderer, TArgs>;

function moduleMetadata

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

function setProjectAnnotations

setProjectAnnotations: (
    projectAnnotations:
        | NamedOrDefaultProjectAnnotations<any>
        | NamedOrDefaultProjectAnnotations<any>[]
) => NormalizedProjectAnnotations<AngularRenderer>;

• Function that sets the globalConfig of your storybook. The global config is the preview module of your .storybook folder.

  It should be run a single time, so that your global config (e.g. decorators) is applied to your stories when using composeStories or composeStory.

  Example:

  // setup-file.js
  import { setProjectAnnotations } from '@storybook/angular';
  
  import projectAnnotations from './.storybook/preview';
  
  setProjectAnnotations(projectAnnotations);

  Parameter projectAnnotations

  E.g. (import projectAnnotations from '../.storybook/preview')

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,
    TransformComponentType<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 StorybookConfig

type StorybookConfig = Omit<
    StorybookConfigBase,
    keyof StorybookConfigWebpack | keyof StorybookConfigFramework
> &
    StorybookConfigWebpack &
    StorybookConfigFramework;

• 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,
    TransformComponentType<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,
    TransformComponentType<TArgs>
>;

• Story object that represents a CSFv3 component example.

  See Also

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