Black Friday Course Sales, Save 50%!

Ready to learn Flask and Docker this year? This deal applies to Build a SAAS App with Flask and Dive into Docker, it's available for .

Using String Interpolation Inside of Phoenix HEEx Template Tags

blog/cards/using-string-interpolation-inside-of-phoenix-heex-template-tags.jpg

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

What do you think about HEEx templates overall? Let me know below.

Never Miss a Tip, Trick or Tutorial

Like you, I'm super protective of my inbox, so don't worry about getting spammed. You can expect a few emails per month (at most), and you can 1-click unsubscribe at any time. See what else you'll get too.



Comments