Search code examples
javascriptangularstorybookangular-storybook

set component params in storybook


I have created a simple story in angular, but the story params don't show up in the component. Story:

export const myStory = (args: FileExplorerComponent) => ({
    component: FileExplorerComponent,
      template: `
        <div style="position: relative">
        <common-file-explorer></common-file-explorer>
            <p>Przykładowe użycie Webdav</p>
        </div>
        `,
         directory: 'bip',
         parameters: {
        directory: 'bip',
      },
      props: {
        directory: 'bip',
      menuItems: [
  { directory: 'bip' }
],
}

Component:

 @Input() directory: string;

Constructor:

console.log('directory', this.directory);

It shows undefined. Do I have to set up providers or constructor arguments?


Solution

  • In your example, shouldn't it be:

     template: `
    <div style="position: relative">
       <common-file-explorer [directory]="this.directory" ></common-file-explorer>
       <p>Przykładowe użycie Webdav</p>
    </div>
    `,
    

    ? Or possibly

     template: `
    <div style="position: relative">
       <common-file-explorer [directory]="this.menuItems[0].directory" ></common-file-explorer>
       <p>Przykładowe użycie Webdav</p>
    </div>
    `,