Storybook: [Angular] How to render a component that has <ng-content> in the template

[benbrowning]

Issue details

I'm pretty new to Angular so this is probably a noob question. I have a button component that uses the tags to project content passed into it when it is used:

Component template:

<button class="button">
    <img src={{iconSrc}} *ngIf="iconSrc" class="icon" />
    <ng-content></ng-content>
</button>

but I can't figure out how to pass some content in via my story book story:

storiesOf('Button', module)
  .add('Simple', () => ({
    component: ButtonComponent,
    props: {},
  }))

Are there any docs describing the properties that can be used in the object that you return to describe a component? Have tried 'content', 'text' etc but to no avail.

[igor-dv]

Can you please try v3.4.0-alpha.5, it contains a "template" prop that you can use instead of the "component"

if your ButtonComponent selector is named button-component:

storiesOf('Button', module)
  .add('Simple', () => ({
    moduleMetadata: {
      declarations: [ButtonComponent],
    },
    template: `<button-component> Put your content here </button-component>`,
  }))

[benbrowning]

@igor-dv Just the ticket. Thanks!

[omt66]

@igor-dv How do you add v3.4.0-alpha.5 to try it? Can you explain it please?

[igor-dv]

@omt66 , just install all the @storybook/* related dependencies with the "3.4.0-alpha.5" version. Am I missing something in your question?

[omt66]

@igor-dv sorry I tried that but I am getting some errors.

[igor-dv]

What are the errors ?

[drewbourne]

Using the template & moduleMetadata fields with 3.4.0-alpha.8 is working for me.

I got some errors because I had a custom webpack.config.js (from following the Storybook Angular guide) which appeared to duplicate the module rules for CSS so that that style-loader/css-loader are run twice and error out attempting to parse exports = module.exports = ... as CSS. Fix was to remove the .storybook/webpack.config.js.

[teebszet]

Can you please try v3.4.0-alpha.5, it contains a "template" prop that you can use instead of the "component"

if your ButtonComponent selector is named button-component:

storiesOf('Button', module)
  .add('Simple', () => ({
    moduleMetadata: {
      declarations: [ButtonComponent],
    },
    template: `<button-component> Put your content here </button-component>`,
  }))

Is this (should this be) in the docs?

[benkeil]

That couldn't be the solution. Why I should write the HTML manually again? It already in the component. We need a additional content property or something to include it in the component's HTML.

[neryams]

This is really cumbersome. Now we have to declare the component three(!) redundant times in a MDX story. Once in the Meta, once in the Props, and once in the moduleMetadata.... And then add the html with the selector too. There has to be a better way...