2

Is there a way to write a Storybook story for an angular component so the inner html/text is transcluded in the rendered storybook?

Here my attempt which is rendered without the transcluded inner text of testing

Button component:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'open-button',
  templateUrl: './button.component.html',
  styleUrls: ['./button.component.scss']
})
export class ButtonComponent implements OnInit {
  constructor() { }
  ngOnInit() {
  }
}

Button component template:

<button type="button">
  <ng-content></ng-content>
</button>

Story:

storiesOf('Button', module)
  .add('Basic Button', () => ({
      component: ButtonComponent,
      template:
      `
        <open-button class="primary" type="button">testing</open-button>
      `,
  }));

Rendered as:

<open-button _nghost-c8="">
<button _ngcontent-c8="" type="button"> 
</button>
</open-button>
Nicholas Murray
  • 13,305
  • 14
  • 65
  • 84
  • Where did you find the documentation that we can provide `template` for story? – yurzui Jan 20 '18 at 14:08
  • I was modifying this example to see if I could get transclusion to work - https://github.com/storybooks/storybook/blob/master/examples/angular-cli/src/stories/index.ts – Nicholas Murray Jan 20 '18 at 20:30
  • You can't provide template. You should manipulate angular components. `ButtonComponent` is a root component when we use it as story. it can't have projectable nodes by angular design. You can create component and have projectable nodes there like we do it in normal angular scenario – yurzui Jan 20 '18 at 20:34
  • Thanks @yurzui is there an example close to what I am trying to do? – Nicholas Murray Jan 20 '18 at 20:46

1 Answers1

0

Your code works perfectly fine. Plunker.

Consider adding a selector for better content-projection as below,

<button type="button">
  <ng-content select=".button-body"></ng-content>
</button>

Your story-component should use the button-body as a class to project content to the child component as below

<open-button _nghost-c8="">
   <div class="button-body"> <!-----Projecting using this selector------>
      <button _ngcontent-c8="" type="button"> </button>
   </div>
</open-button>

Refer this answer and have a look at the demo in it to understand better

Aravind
  • 40,391
  • 16
  • 91
  • 110