How To Add HTML Wrapper On Angular Component In Storybook

With Storybook Decorators you can add extra HTML around your Angular Component

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.

import { 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.

Thanks!

*I hope you learned something new or are inspired to create something new after reading this story! 🤗 If so, consider subscribing via email (scroll to the top of this page) or follow me here on Hashnode.
*

Did you know that you can create a Developer blog like this one, yourself? It's entirely for free. 👍💰🎉🥳🔥

If I left you with questions or something to say as a response, scroll down and type me a message. Please send me a DM on Twitter @DevByRayRay when you want to keep it private. My DM's are always open 😁