@storybook/angular
- Version 8.2.9
- Published
- 344 kB
- 20 dependencies
- MIT license
Install
npm i @storybook/angular
yarn add @storybook/angular
pnpm add @storybook/angular
Overview
Storybook for Angular: Develop Angular components in isolation with hot reloading.
Index
Functions
Interfaces
Type Aliases
Functions
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.tsimport { 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>;
Interfaces
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, 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)
Package Files (6)
Dependencies (20)
- @storybook/builder-webpack5
- @storybook/components
- @storybook/core-webpack
- @storybook/global
- @storybook/manager-api
- @storybook/preview-api
- @storybook/theming
- @types/node
- @types/react
- @types/react-dom
- @types/semver
- @types/webpack-env
- fd-package-json
- find-up
- semver
- telejson
- ts-dedent
- tsconfig-paths-webpack-plugin
- util-deprecate
- webpack
Dev Dependencies (20)
- @analogjs/vite-plugin-angular
- @angular-devkit/architect
- @angular-devkit/build-angular
- @angular-devkit/core
- @angular/animations
- @angular/cli
- @angular/common
- @angular/compiler
- @angular/compiler-cli
- @angular/core
- @angular/forms
- @angular/platform-browser
- @angular/platform-browser-dynamic
- @types/cross-spawn
- @types/tmp
- cross-spawn
- tmp
- typescript
- webpack
- zone.js
Peer Dependencies (15)
Badge
To add a badge like this oneto 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[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@storybook/angular)
- 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>
- Updated .
Package analyzed in 3775 ms. - Missing or incorrect documentation? Open an issue for this package.