Story for a Component With Content Projection

Storybook and Angular components

Context: Angular 12, StoryBook 6.3.9

Hey, I started to use Storybook and I would Like to share my experience. Here’s the use case. I have a simple component which only use content projection:

@Component({
  selector: "adr-label",
  template: `<ng-content></ng-content>`,
})
export class LabelComponent {}

Here’s the associated story:

export default {
  title: "atoms/forms/label",
  component: LabelComponent,
  decorators: [componentWrapperDecorator(LabelComponent)],
} as Meta;

const BasicTemplate: Story<LabelComponent> = (args) => ({
  moduleMetadata: { declarations: [InputDirective] },
  template: `<adr-label>{{ ngContent }}</adr-label>`,
  props: { ...args },
});

export const Default = BasicTemplate.bind({});
Default.args = {
  ngContent: "Un label",
};

The specificity here is to use a componentWrapperDecorator. It allows to wrap our component and to pass it some extras like in my case a text content.

You just have to define a template like in BasicTemplate to emulate the content projection and using it like an input.

In the Default args, I add an ngContent arg to set the content of my label. I choose this name “ngContent” because it appears in the controls list and I find it consistent to let know that’s a content projection in this way.

You can see the result here:

Storybook

You can access to the full code here:

atomic-design/src/components/atoms/forms/label at master · GaetanRdn/atomic-design

Learn More

Story for an Angular Directive

Logger decorator

Install Jest for Angular

Angular for everyone: All about it