How to use angular transclusion in a storybook.js story?

@jerad 

To use Angular transclusion in a Storybook.js story, you can create a simple component that uses transclusion in its template and then showcase it in a Storybook story.

Here's an example of how you can achieve this:

1. Create a simple Angular component that uses transclusion in its template. For example, you can create a component named TransclusionComponent with the following template:

1
2
3
4

<div>
  <h2>Transclusion Component</h2>
  <ng-content></ng-content>
</div>

1. Create a Storybook story for this component. You can create a new file named TransclusionComponent.stories.ts in your Storybook stories directory and add the following code:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

import { moduleMetadata, storiesOf } from '@storybook/angular';
import { TransclusionComponent } from '../app/transclusion/transclusion.component';

storiesOf('TransclusionComponent', module)
  .addDecorator(
    moduleMetadata({
      declarations: [TransclusionComponent],
    })
  )
  .add('default', () => ({
    template: '<app-transclusion>Content inside transclusion component</app-transclusion>',
  }));

1. Run your Storybook server and navigate to the TransclusionComponent story to see the transclusion in action.

This is a basic example of how you can use Angular transclusion in a Storybook story. You can customize the component and the story further to suit your specific needs. Storybook is a great tool for showcasing and testing Angular components, and integrating transclusion is a great way to demonstrate component composition and flexibility.