Very often when creating a new story for an Angular component onStorybook you might need to insert content into components which have anng-content area inside them.
To do that you need to create atemplate for your story.
Here is a simple component, which has adiv with and anng-content area inside it. The component has two inputs,width andheight.
// paper.component.tsimport{Component,Input}from'@angular/core';@Component({selector:'cx-paper',template:` <div [ngStyle]="{ width: width, height: height }"> <ng-content></ng-content> </div> `,styles:[` .paper { border: navy solid 2px; padding: 10px; } `,],})exportclassPaperComponent{@Input()width:string;@Input()height:string;}The story for this component
// paper.stories.tsimport{Story,Meta}from'@storybook/angular';import{PaperComponent}from'./paper.component';exportdefault{title:'Example/Paper',component:PaperComponent,}asMeta;constTemplate:Story<PaperComponent>=(args:PaperComponent)=>({props:args,template:` <cx-paper [height]="height" [width]="width"> This is a template test. </cx-paper>`,});exportconstSimpleExample=Template.bind({});SimpleExample.args={height:'50px',width:'300px',}asPartial<PaperComponent>;Which should render like this:
Top comments(4)
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
- LocationRio de Janeiro, Brazil
- EducationAutomation and Control Engineering at CEFET/RJ
- WorkSolutions Developer
- Joined
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.
For further actions, you may consider blocking this person and/orreporting abuse
