How To Add HTML Wrapper On Angular Component In Storybook

How To Add HTML Wrapper On Angular Component In Storybook

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.ts
import { Meta, componentWrapperDecorator } from '@storybook/angular'
export default {
    layout: article
navigation: false
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 🚀


How To Format a Value With Angular NGX-Formly

Creating forms in Angular with NGX-Formly is super easy. But sometimes you want a little more, like formatting postal codes, phone numbers, or bank accounts. In this post, I will show you how you can do it.


The Fastest Way To Build Lightweight Angular Content Service

Some applications need multiple languages, but others need one language but have loads of content to re-use. In this article, I want to show you the fastest way to create a ContentService (some call it a dictionary) for your Angular application.