Sharing Top Content from the Angular-sphere.

Introduction to Using Storybook for Angular ← Alligator.io

  • Storybook has been getting really popular for React projects, and support for Angular and Vue projects was added with v3.3.0 so we can now just as easily use it for creating stories for Angular components.
  • For example, at the time of this writing, the following devDependencies are added to the project: – – And the following npm scripts are also added to the project’s package.json file: – – You can now try it out by invoking the storybook npm script: – – This will start…
  • What you’ll see is an example Storybook that was generated from an index.stories.ts file under a stories folder at the root of the project.
  • Let’s now create a simple Card component and a few stories for it to give you an overview of Storybook’s usage.
  • Now let’s modify index.stories.ts to add a few stories for our card component: – – Here are a few things to note: – – See this page for a list of other addons that can be used with Storybook.

Storybook is a tool that allows you to easily document and visualize your app’s components in a flat hierarchy. See how you can make use of it in an Angular app.

Storybook is a tool that allows to test an app’s components in isolation and in a flat hierarchy. A storybook is a series of stories that display our components with specified inputs and outputs in a nice browser view.

Storybook has been getting really popular for React projects, and support for Angular and Vue projects was added with v3.3.0 so we can now just as easily use it for creating stories for Angular components.

Let’s quickly go over setting up Storybook for Angular as well as basic usage.

Storybook now comes with a CLI tool that makes it really easy to add it to a project. First, install the @storybook/cli package globally:

Now, in the root of an Angular project, run the getstorybook command:

This command will autodetect that it’s an Angular project and will add the necessary configurations, devDependencies and npm scripts.

For example, at the time of this writing, the following devDependencies are added to the project:

And the following npm scripts are also added to the project’s package.json file:

You can now try it out by invoking the storybook npm script:

This will start a local webpack server on port 6006 and you can visit the generated storybook by going to http://localhost:6006/. What you’ll see is an example Storybook that was generated from an index.stories.ts file under a stories folder at the root of the project. Here’s what the…

Introduction to Using Storybook for Angular ← Alligator.io