Storybook angular examples

Storybook angular examples DEFAULT

Introduction of Storybook using Angular part I

Introduction of Storybook using Angular part I

In this blog, I will be walking you through a series of posts to create isolated UI components using storybooks. In this part, I’ll cover the storybook and start with the angular framework.

What is a Storybook?

Storybook is an environment for defining, developing, and testing UI components. Using storybooks, we can create isolated components that make development faster and allow you to work on one component at a time.

It’s open-source and free to use.

Storybook is an attractive choice for pragmatic teams. It provides a hot-reloading of the dev environment, complete with addons for testing, deploying previews, responsive UI, and more. 

Getting started with Angular Storybook 

Storybook for Angular is also a UI development environment for your Angular components. With a storybook, you create stories for your components. Each story shows the behavior for a single component with specific states set.

Installing Storybook

First, create an Angular project using these commands,

Next, use the Storybook CLI to install it in a single command

Please note that sb init is not made for empty projects,

Storybook will look into your project’s dependencies during its install process and provide you with the best configuration available.

The next command to run on the terminal is:

After the installation completes, storybooks will start locally and output the address. It will open automatically with the address in a new browser tab, and a welcome screen greets you.

The storybook provides example components such as button, header, etc., for our reference on the welcome page. We can further create components referring to these existing components.

Folder Structure of /.storybook

A /.storybook folder is created at the root directory which contains all the configuration files for our global settings in the storybook. New addons can be added by adding an entry to the main.js file.

Create a .storybook/preview.js file to control the way stories are rendered and add global decorator and parameters. This file loads in the Canvas tab, and the “preview” iframe renders the components in isolation. Use preview.js for global code (such as CSS imports or JavaScript mocks) to all stories.

The preview.js file can be an ES module and export the following keys:

  • decorators – an array of global decorators
  • parameters – an object of global parameters
  • globalTypes – definition of global Type

It also adds a /stories folder, which gives us some examples of Storybook usage, providing components that were built and documented.


The ‘.mdx’ extension

MDX captures long-form Markdown documentation and stories in one file. You can also write pure documentation pages in MDX and add them to the Storybook alongside your stories.

Next, we will see the story and how to write it in a storybook with an example.

What is a Story?

A story captures the rendered state of a UI component. Developers write multiple stories per component that describe all the “interesting” states a component can support. The CLI created example components that demonstrate the types of components you can build with Storybook: Button, Header, and Page.

Note: In the newly created component, we have to use a copy-paste method for creating a stories.ts file.

Example of a link button

First, create a button component in that story as a function. This function describes how to render the button component in the primary state and export a story called primary. Also, I will show you how we can enable and disable states in our story.

The Github code shown below shows the example of the “link button.”

We will see the below output after running the project using the command: npm run storybook.

Advantages of a Storybook

  • Storybook provides easy access to all components in one place with documentation and design reference.
  • Storybook provides good collaboration between developers for large projects, ensuring consistent and quality code.
  • It is easier to test and debug isolated components on the storybook.
  • Easier to demo components to clients, get to know the actual working before adding it to the project.

Up until now, I have introduced the storybook concept and installation in this part 1. In part 2 of this series, I will post details about adding add-ons to the storybook and stories.


Introduction to Storybook for Angular

Storybook is a tool for UI development. It makes development faster and easier by isolating components. This allows you to work on one component at a time. You can develop entire UIs without needing to start up a complex dev stack, force certain data into your database, or navigate around your application.

Use Storybook to build small atomic components and complex pages in your web application. If it's a UI, you can build it with Storybook.

Storybook relationship

Storybook helps you document components for reuse and automatically visually test your components to prevent bugs. Extend Storybook with an ecosystem of addons that help you do things like fine-tune responsive layouts or verify accessibility.

Storybook integrates with most popular JavaScript UI frameworks and (experimentally) supports server-rendered component frameworks such as Ruby on Rails.

Learning resources

If you want to learn more about the component-driven approach that Storybook enables, this site is a good place to start.

If you want a guided tutorial through building a simple application with Storybook in your framework and language, our tutorials have your back.

Read on to learn Storybook basics and API!

  1. Abc birds houston
  2. Cba standings
  3. Rare replay pc
  4. Milwaukee wrench drill
  5. Garlic chives pictures

Storybook for Angular tutorial

Storybook runs alongside your app in development mode. It helps you build UI components isolated from the business logic and context of your app. This edition of the Intro to Storybook tutorial is for Angular; other editions exist for React, React Native, Vue, Svelte and Ember.

Storybook and your app

Setup Angular Storybook

We'll need to follow a few steps to get the build process set up in our environment. To start with, we want to use degit to setup our build system. Using this package, you can download "templates" (partially built applications with some default configuration) to help you fast track your development workflow.

Let’s run the following commands:

Now we can quickly check that the various environments of our application are working properly:

Our three frontend app modalities: automated test (Jest), component development (Storybook), and the app itself.

3 modalities

Depending on what part of the app you’re working on, you may want to run one or more of these simultaneously. Since our current focus is creating a single UI component, we’ll stick with running Storybook.

Commit changes

At this stage it's safe to add our files to a local repository. Run the following commands to initialize a local repository, add and commit the changes we've done so far.

Followed by:


And finally:

Let's start building our first component!

angular storybook adding add-ons like knobs

Storybook for Angular

Package StatusPackage StatusBuild StatusBuild Status

This adds Percy visual testing and review to your Storybook for Angular. It's great for taking snapshots of your components in isolation from your application. If you'd like to take snapshots of your application, take a look at our Puppeteer SDK.


Make sure you have completed Setup of your CI service first. You can also test Percy in your local development environment.

  1. Add as a dev dependency: 
  2. Open your package.json, and add a script: 
  3. Update your .storybook/config.js:

Adjust the existing line that imports :

Still in config.js, add the following before calling  to configure your stories:

Finally, add the following at the end of your config.js file:


Percy Storybook uses headless Chrome process your stories. It’s often installed automatically in your CI environment for you, but if you need help, please ask.

After you've setup the  environment variable, run:

This will run Storybook's build-storybook command to create a static site from your storybook, and will upload your stories to Percy to generate screenshots from them. You'll want to add  to your .gitignore file if you run this locally.

As you start to introduce visual testing into your workflow, you might find that the passing of time or generated data from tools like faker can cause visual diffs.

It's fairly easy to stabilize these diffs. Tools like faker often allow you to provide a seed to ensure that the same data is generated each time faker is run. Libraries like MockDate allow you to override the current date, eliminating variations due to the screenshots being taking at a different date and time. If you use Math.random, you can seed it with seedrandom.

Percy provides an  function that you can use in your Storybook's config.js if you'd prefer that these adjustments only have an effect when running in Percy's rendering environment. Add the @percy-io/in-percy package if you'd like to use inPercy.

You can see an example of how this type of stabilization can be done in this storybook/config.js.

These options can be appended to the percy-storybook command in the script tag in your package.json file:

  • widths - Specify multiple widths to screenshot your stories at. eg. 
  • minimum_height - Specify the minimum height of story screenshots. eg. 
  • build_dir - By default, percy-storybook looks for the static storybook in the  directory. If you use build-storybook with a custom output directory, use build_dir instruct percy-storybook where to find it. eg. 
  • rtl - Process all stories a second time in RTL. eg. 
  • rtl_regex - Process stories with matching names a second time in RTL. eg. 
  • debug - Provides additional debugging information. eg. 

You can override options on a per-story basis by adding stories with  instead of . These options will trump the Global Options specified for the storybook.

 takes 3 parameters: the story name, the percyOptions, and the story function. If you've been calling  to add the story previously, simply change it to  and insert percyOptions as the second parameter.

  • widths - An array of widths as integers for this story.
  • rtl - A boolean value specifying whether this story should additionally be run in a RTL direction.
  • skip - A boolean value specifying whether this story should be skipped (default: false). You might want to use this for stories that use Storybook's knobs addon.

Have a look at the storybook in percy-storybook for an example of how to use . including ways to use it in conjunction with other add-ons. Here's a simple example:

Percy supports taking screenshots of your stories a second time in the RTL direction.

  • To process all stories in the RTL direction, use the  option. To process only a subset in RTL, use the  option and provide a regex that will match the names of the stories you want to capture in RTL.
  • Stories you have selected for RTL processing will be processed twice. Once normally, and then a second time with  appended to their name, and with a  url param provided.
  • It's up to the stories to process the direction url param and respond appropriately. You can see a basic example of how this can be done in our Direction Demo test story.

If you use Percy-specific CSS to override CSS in Percy, add the  code inside a style tag in your preview-head.html file to ensure that it will be applied in the Percy rendering environment.

Percy automatically integrates with your source code so you can do visual reviews with each commit or pull request. See our source code integration docs for more info.

If you're seeing different screenshots on Percy from what you see in Storybook locally, you'll find  helpful.

During installation, you added the "snapshots" script command . The first half of that, , is a built-in Storybook command to convert your storybook to a set of static assets in a folder called .

Inside  you'll find an index.html file. Open index.html in your browser, and you'll see the exact storybook that Percy receives and renders screenshots from. Reviewing this locally as you make configuration changes can help with troubleshooting, and shorten the debugging cycle. After you make changes, you can re-run build-storybook, and refresh index.html to see if you've resolved the issue.

If the built storybook differs from what you see when viewing the live storybook, it may be due to a configuration issue. Perhaps you need to supply build-storybook with the -c option to provide a different config-dir, or supply the -s option to specify a different static folder. i.e. 

If you see an error message  and followed all of the installation instructions, then please add the debug flag to the script command in your package.json file:

Run  again, and email the output to [email protected].

  1. Fork it ( )
  2. Create your feature branch ()
  3. Commit your changes ()
  4. Push to the branch ()
  5. Create a new pull request

Throw a ★ on it!

Updated over 2 years ago


Examples storybook angular


Build bulletproof UI components faster

Build Status on CircleCICodeFactorKnown VulnerabilitiescodecovLicense
Storybook CommunityBackers on Open CollectiveSponsors on Open CollectiveOfficial Twitter Handle

Storybook is a development environment for UI components. It allows you to browse a component library, view the different states of each component, and interactively develop and test components. Find out more at

View README for:

Table of contents

Getting Started

Visit Storybook's website to learn more about Storybook, and to get started.


Documentation can be found Storybook's docs site.


Here are some featured examples that you can reference to see how Storybook works:

Storybook comes with a lot of addons for component design, documentation, testing, interactivity, and so on. Storybook's API makes it possible to configure and extend in various ways. It has even been extended to support React Native, Android, iOS, and Flutter development for mobile.


For additional help, join us in the Storybook Discord.


Supported Frameworks

Storybook with Angular - 5 min Quick Setup Guide


Similar news:


314 315 316 317 318