New
NextJS, SvelteKit, Remix and the future of StorybookAutomate with Chromatic
Star75,376
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 Router
Addon to enable logging and mocking for the angular router in storybook
npm install storybook-addon-angular-router
Last updated 5 months ago
6.8k
Downloads per week
Readme View on GitHub

Angular Router Storybook Addon

Storybook npm Release npm

A simple plugin to make working with the angular router in storybook easier

How to use it

Install the addon via npm:

npm i storybook-addon-angular-router

Add it to your storybook configuration:

// .storybook/main.js
module.exports = {
    addons: ["storybook-addon-angular-router"],
};

Every call to navigate and navigateByUrl on the router is now logged in the action panel together with all parameters.

If you want to test the routerLinkActive directive in your story you can set the active route for the story like this:

export const WithActiveLink = Template.bind({});
WithActiveLink.parameters = {
    angularRouter: {active: '/location/1'}
};

If you want to disable the plugin for a single story you can add the following parameter to your story:

export const DisabledPlugin = Template.bind({});
DisabledPlugin.parameters = {
    angularRouter: {disable: true}
}

How it works

The plugin adds the RouterTestingModule and a custom Router implementation to your stories. The custom Router implementation provides only the most basic functionality needed to use it in your stories.

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

Maintained by
Chromatic
Special thanks to Netlify and CircleCI