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:
You can access to the full code here: