Very often when creating a new story for an Angular component on Storybook you might need to insert content into components which have an ng-content area inside them.
To do that you need to create a template for your story.
Here is a simple component, which has a div with and an ng-content area inside it. The component has two inputs, width and height.
// paper.component.ts
import { Component, Input } from '@angular/core';
@Component({
selector: 'cx-paper',
template: `
<div class="paper" [ngStyle]="{ width: width, height: height }">
<ng-content></ng-content>
</div>
`,
styles: [
`
.paper {
border: navy solid 2px;
padding: 10px;
}
`,
],
})
export class PaperComponent {
@Input()
width: string;
@Input()
height: string;
}
The story for this component
// paper.stories.ts
import { Story, Meta } from '@storybook/angular';
import { PaperComponent } from './paper.component';
export default {
title: 'Example/Paper',
component: PaperComponent,
} as Meta;
const Template: Story<PaperComponent> = (args: PaperComponent) => ({
props: args,
template: `
<cx-paper [height]="height" [width]="width">
This is a template test.
</cx-paper>`,
});
export const SimpleExample = Template.bind({});
SimpleExample.args = {
height: '50px',
width: '300px',
} as Partial<PaperComponent>;
Which should render like this:
Latest comments (4)
Why the show code part is not showing the content?
This text is missing in the code: "This is a template test."
Now this works for writing stories but it doesn't work right with the ArgsTable and doesn't show any output actions for me at least :z
If by ArgsTable you mean the component inputs, it's working fine for me. I change the inputs and can see the component respond to those changes. I haven't been able to figure out how to make Actions work with a template like that yet.
ArgTable works in the story view but doesn’t in the docs view / docs page.
If this actually works someday that would be very nice but right now storybook for angular is such a pain :z