New
Storybook’s Visual Tests addon enters betaVisual test with Chromatic
Star82,099
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon

Integrate Angular Material and Storybook

Google's Material Design spec built into an Angular component library. This recipe shows you how to get the most out of Angular Material in Storybook.

Prerequisites

This recipe assumes that you already have an Angular app using @angular/material and have just set up Storybook >= 7.0 using the getting started guide. Don't have this? Follow the Angular material setup instructions then run:

Terminal
Loading...

1. Bundle fonts and icons for better perf

@angular/material depends on two fonts to render as intended, Google’s Roboto and Material Icons. While you can load these fonts directly from the Google Fonts CDN, bundling fonts with Storybook is better for performance.

  • 🏎️ Fonts load faster because they are coming from the same place as your app
  • ✈️ Font will load offline so you can continue developing your stories anywhere
  • 📸 No more inconsistent snapshot tests because fonts load instantly

To get started, install the fonts as dependencies.

Loading...

Then include the fonts in your angular.json file.

angular.json
Loading...

2. Add Storybook stories

Standalone component

Now that you have Storybook set up, you can start writing stories for your components. Let's start with a NavBarComponent. For Standalone components, any Material components that you import through the @Component decorator will be available to your component in Storybook.

src/app/nav-bar/nav-bar.component.ts
Loading...

This means that you can just supply the NavBarComponent to the component property of the Meta object in your stories file.

src/app/nav-bar/nav-bar.component.stories.ts
Loading...

Module component

For Module components, you will need to import the Material components that you want to use in your stories file. You can supply them to Storybook using the moduleMetadata decorator in the Meta object of the stories file.

src/app/nav-bar/nav-bar.component.stories.ts
Loading...

Live example

Join the community
6,514 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI