Using NGX Translate in Storybook stories

If you’re using NGX Translate in your Angular application, you may realize that some additional setup is required to test components relying on the translate pipe, since simply importing the TranslateModule won’t cut it.

When using NGX translate, you not only need to import the TranslateModule module, but also define the default language to use.

Here’s how to do it with Storybook.

StorybookTranslateModule

The thing to keep in mind with Storybook and Angular, is that Storybook creates an Angular module to host your component. And that module, needs to be able to inject whatever your component depends on (i.e., as usual).

Since you don’t want to modify your component’s constructor to set the default language (which doesn’t make sense outside of Storybook), you can instead create a translation module, specifically for Storybook.

Here’s an example:

As you can see, this module uses the .forRoot(…) method in order to define the NGX Translate configuration. I’ve left the configuration out, as it really depends how you prefer to work with ngx-translate, which can vary from application to application.