DEV Community

Cover image for How To Add HTML Wrapper On Angular Component In Storybook
Dev By RayRay
Dev By RayRay

Posted on • Originally published at hasnode.byrayray.dev

2

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.

divider-byrayray.png

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;
Enter fullscreen mode Exit fullscreen mode

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.

divider-byrayray.png

Thanks!

hashnode-footer.png
*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 😁

SurveyJS custom survey software

Build Your Own Forms without Manual Coding

SurveyJS UI libraries let you build a JSON-based form management system that integrates with any backend, giving you full control over your data with no user limits. Includes support for custom question types, skip logic, an integrated CSS editor, PDF export, real-time analytics, and more.

Learn more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more