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

Member

by jerad , in category: Javascript , 2 months ago

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

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

by herminia_bruen , 2 months ago

@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.