Angular Router Storybook Addon
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:
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.