Using String Interpolation Inside of Phoenix HEEx Template Tags
This came up recently while updating an application to use Phoenix 1.6 and wanting to add a variable to a list of HTML classes.
Quick Jump: Demo Video
My open source Docker / Phoenix example app was updated a few hours after the 1.6 release but I wasn’t sure how to do string interpolation with HEEx templates. Turns out it was pretty easy. You can do {"hey #{name}"} and you’re done! This wasn’t mentioned in the docs or 1.6 guide at the point of recording this video.
The example below is in the context of wanting to set a dynamic Tailwind class based on a flash message being an error, info, warning, etc..
Demo Video
Timestamps
- 0:42 – The TL;DR version of using HEEx templates
- 1:52 – How would you combine a few hard coded string classes and a variable?
- 2:18 – Shout-out to Jose Valim for patching Live View within minutes
- 3:14 – Showing how to do string interpolation in HEEx
- 5:32 – Using your prior knowledge to help learn new things by breaking it down
- 6:56 – Setting up a flash message to see how it looks
Reference Links
- https://nickjanetakis.com/blog/best-practices-around-production-ready-web-apps-with-docker-compose
- https://www.phoenixframework.org/blog/phoenix-1.6-released
- https://github.com/nickjj/docker-phoenix-example
- Phoenix 1.6 update commit for the example app
- Jose’s commit for Live View
What do you think about HEEx templates overall? Let me know below.