CODEWITHSUNDEEP
jsonangulartypescriptstorybook
Konrad Viltersten
Konrad Viltersten

Reputation: 39190

How do I pass an object to @Input in Angular app rendering as a story in StoryBook

My component blopp has the following structure.

@Component({ selector: 'blopp', template: '{{config|json}}', ... })
export class BloppComponent {
  @Input() config: Config; ...    
}

While the config itself is a class shown below.

export class Config {
  constructor(public id: string, public title: string, public active: boolean) { }
}

It all seems to work when I set up a test in StoryBook like this.

export const test1 = () => ({
  ...componentModule,
  template: '<plopp [config]="{id:23,title:22,active:true}"></plopp>'
});

I'd like to set up an object and pass it. However, trying to do the following doesn't render anything, as if the passed entity is null or undefined. What is the proper syntax for it?

export const test2 = () => ({
  ...componentModule,
  template: '<plopp [config]=config></plopp>'
});

export const test3 = () => ({
  ...componentModule,
  template: '<plopp [config]="config"></plopp>'
});

export const test4 = () => ({
  ...componentModule,
  template: '<plopp [config]=configText></plopp>'
});

export const test5 = () => ({
  ...componentModule,
  template: '<plopp [config]="configText"></plopp>'
});

const config = new Config("a1", "donkey", true);
const configText = JSON.stringify(config);

I've tried a bunch of variants only leading to failures and nothing rendered. Is it a limitation in StoryBook? I suspect rather that it's my incompetence that's to blame but I'm ignorant of approach it.

The closest I got was this. It still won't let me enter a string for title, though (the quotations are misinterpreted). And in the end, that's not really like-a-bossy. I want to use an actual object and pass it in.

export const test5 = () => ({
  ...componentModule,
  template: '<plopp [config]=' + configText + '></plopp>'
});

const configText = "{id:23,title:34,active:true}";

Upvotes: 4

Views: 3603

Answers (3)

Oswaldo Zapata
Oswaldo Zapata

Reputation: 693

This could help as an example: https://storybook.js.org/tutorials/intro-to-storybook/angular/en/composite-component/

    // default TaskList state
export const Default = () => ({
  component: TaskListComponent,
  template: `
  <div style="padding: 3rem">
    <app-task-list [tasks]="tasks" (onPinTask)="onPinTask($event)" (onArchiveTask)="onArchiveTask($event)"></app-task-list>
  </div>
`,
  props: {
    tasks: defaultTasksData,
    onPinTask: actionsData.onPinTask,
    onArchiveTask: actionsData.onArchiveTask,
  },
});

Upvotes: 0

Konrad Viltersten
Konrad Viltersten

Reputation: 39190

Not a big fan of answering my own junk but the colleague who presented me with the solution is one of those weirdo leeches who refuses to contribute to the site (because oh, oh, once I asked a question and people were mean 'cause it sucked and I got my ego hurt...). So just to be clear - I haven't figured out it self. Oscar did. And it was easy.

Apparently, StoryBook requires oneself to provide the variable values using a special field in the configuration object of the story. So the moronically easy solution to my moronically stupid problem is to add config as props, like so.

export const useGodDamnProps = () => ({
  ...componentModule,
  template: "<plopp [config]='config'></plopp>",
  props: { config }
});

Upvotes: 8

Sumit Vekariya
Sumit Vekariya

Reputation: 488

Try this:

template: `<plopp [config]="${configText}"></plopp>`

Upvotes: -2

Related Questions