Using Angular services in Storybook 6

How to call Angular Injectable directly in Angular Stories by using a custom Storybook decorator

This article is the new version of my previous article:

But when I am using Storybook for creating Angular stories, I want to be able to use Angular services directly in my story.

However, this is not possible without creating a wrapper component to inject the service.

To solve this issue, I created a custom Storybook decorator that is responsible for exposing the Angular Injector in my story props. Then I can access all services available in my Angular story scope.

You can find below the custom decorator used to solve this:

How this is working?

The custom decorator will set up an APP_INITIALIZER provider that will be executed when the Angular story will be bootstrapped.

It will then use the Angular Factory Provider approach to inject the global Injector service.

Then this Injector will be injected into the props of the story.

Then I can use it in the stories. A common use case would be to open a dialog directly in the story:

You can use this approach with all services that are available in your Angular story!