brucepomeroy
Specifically when only a substring in an attribute’s value if dynamic. Here’s a concrete example. I’m translating some templates from .leex to .heex. I’m interested in ideas for translating this:
<div class="<%= if @published, do: "bg-green", else: "bg-red" %> text-white text-small border-grey">...</div>
This doesn’t seem to be supported, it generates a compile error:
<div class="{if @published, do: "bg-green", else: "bg-red"} text-white text-small border-grey">...</div>
I could create an additional assign called @bg_color and do this:
<div class="{@bg_color} text-white">...</div>
Or duplicate the common classes like this:
<div class={if @published, do: "bg-green text-white text-small border-grey", else: "bg-red text-white text-small border-grey"}>...</div>
Interested to hear if there are any other approaches.
Thanks!
Where Next?
Trending in Questions
Other Trending Topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
We build reliable cloud platforms for business-critical systems.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #library
- #deployment
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #elixirconf
- #channels
- #exunit
- #discussion
- #code-sync
- #podcasts
- #javascript
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixirconf-us
- #ai
- #blog-post
- #elixir-ls
- #phoenix_html
- #iex
- #graphql
- #genstage
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #hex
- #security
- #metaprogramming
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Elixir, Erlang & BEAM conferences from Code Sync - join us in 2026!
Practical resources that improve the lives of professional developers.
**Building the future of software with AI, trust, and human connection.**
The deployment platform built for Elixir: PaaS ease, VPS control.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"
Showing Posts 1 to 5- Show Best Posts
- Show All (oldest first)
- Show All (newest first)
axelson
One way you could write this is:
<div class={“#{if @published, do: "bg-green", else: "bg-red"} text-white text-small border-grey"}>...</div>Although there may be a clearer way.
trisolaran
Another way to do this:
That is, using a list instead of string interpolation. This is however neither more concise nor better than @axelson’s solution, it’s just different. It may appeal to you if you prefer to use a list for your classes.
A more elegant way would be if LV allowed things like this:
Like some front-end frameworks (e.g. Vuejs) already do. I was told that Surface supports this notation, though I haven’t tested it. I’m sure that LiveView will catch up at some point
brucepomeroy
Great, thanks so much @axelson and @trisolaran , both approaches are big improvements. Thanks again!
emiltin
You can join strings:
Note the space after “border-gray”
krishandley
Depending on your use case you could also do this…