• 1 min

How To Add HTML Wrapper On Angular Component In Storybook

How To Add HTML Wrapper On Angular Component In Storybook
Table of Content

Storybook offers a lot of tooling to document all your JavaScript components visually. Getting started with Storybook and Angular is pretty easy too. But some features are hidden or not described enough to know them.

So in our team, we were writing an Angular form component with Angular Material. Some of the elements were not getting the proper styling because they didn’t have our application’s context. We needed A wrapper element.

Storybook Angular Decorators

Storybook Decorators are the answer for creating a bit more markup to add context to your components.

The Storybook team made it super simple to add decorators.

// your-component.stories.tsimport { Meta, componentWrapperDecorator } from '@storybook/angular'export default {    title: 'YourComponent',    component: YourComponent,    decorators: [componentWrapperDecorator(story => `<div class="mat-body">${story}</div>`)]} as Meta

In our case, we only needed a <div> with a class mat-body to get the font family of a form correct.

With these decorators, you can add extra context or styling around your components.

Happy coding 🚀


I’m Ray, a Frontend Developer since 2009 living in the Netherlands. I write about Frontend Development, JavaScript, TypeScript, Angular, CSS, VueJS and a lot more related topics.

Want to reach me for comments or questions on my blog? Send a DM on Twitter @DevByRayRay