Using ngx-translate with Storybook stories
How to use ngx-translate with 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.
Note that you still need to load the TranslateModule (not only call TranslateModule.forRoot(…)). You can do that either in the imports of the StorybookTranslateModule (right after the TranslateModule.forRoot line), or in your Storybook module.
In the constructor of the module, the default language is set.
Using this module in a Storybook story is then as simple as importing it:
From then on, your translations will be working also in Storybook.
Conclusions
In this post, I’ve explained a little trick to be able to use NGX Translate in a the context of Storybook, which requires a bit of help to be working.
One thing that I’m still wondering about is how I could integrate language switching in Storybook, without having to touch my components. I imagine that it could be done with a Storybook add-on…
That's it for today! ✨
About Sébastien
I am Sébastien Dubois. You can follow me on X 🐦 and on BlueSky 🦋.
I am an author, founder, and coach. I write books and articles about Knowledge Work, Personal Knowledge Management, Note-taking, Lifelong Learning, Personal Organization, and Zen Productivity. I also craft lovely digital products . You can learn more about my projects here.
If you want to follow my work, then become a member.
Ready to get to the next level?
To embark on your Knowledge Management journey, consider investing in resources that will equip you with the tools and strategies you need. Check out the Obsidian Starter Kit and the accompanying video course. It will give you a rock-solid starting point for your note-taking and Knowledge Management efforts.
If you want to take a more holistic approach, then the Knowledge Worker Kit is for you. It covers PKM, but expands into productivity, personal organization, project/task management, and more:
If you are in a hurry, then do not hesitate to book a coaching session with me:
