New
Community Showcase #5Visual test with Chromatic
Star78,835
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
Angular Storysource
Show angular template with args on story tab
npm install storybook-ng-source-addon
Last updated over 1 year ago
76
Downloads per week
Readme View on GitHub

npm version GitHub version

Storybook ng-source Addon

Show your args evaluated on template or splitted into code/HTML.

Ideal for fast prototyping components and copy-paste based development.

(If you like it, please consider giving it a star so I can keep it updated :D)

Splitted Args (.HTML/.TS) Evaluated Args (.HTML)

Getting Started

Install into your project with npm i storybook-ng-source-addon --save

Add to your main.js, inside addons:

module.exports = {
  ...
  "addons": [
    "storybook-ng-source-addon",
    ...
  ],
  ...
}

How to write stories for it to work

Stories should be written in the following format:

export const Template: Story<ButtonComponent> = (args) => ({
  props: args,
  template: `
    <pm-button
        [label]="label"
        [type]="type"
        [busy]="busy"
        [busyText]="busyText"
        [iconClass]="iconClass"
        [outline]="outline"
        [disabled]="disabled"
    >
        Button Content
    </pm-button>
  `
});

export const defaultArgs = {
  label: '',
  type: 'default',
  busy: false,
  busyText: '',
  iconClass: '',
  iconPosition: 'start',
  outline: false,
  disabled: false,
};

export const DefaultButton = Template.bind({});
DefaultButton.args = {
  ...defaultArgs
};
  • should have only the variable template as multiline string using crasis (REQUIRED);
  • should have variables inside double quotes (REQUIRED)

Then the plugin will do all the work :)

Join the community
6,179 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI