EEx interpolation of local variable inside a tag in heex templates

Just replace the <%= ... %> tags with handlebars in the html tag arguments and it should work.

Take a look at Phoenix 1.6.0 Released under HEEx extension: Defining attributes.

Thanks @moogle19 for your quick response but the example in the Heex

For instance, the following syntax is invalid:

<div class="<%= @class %>">
  ...
</div>
Instead do:

<div class={@class}>
  ...
</div>

Only works if class is in the assigns. Otherwise the template breaks. Of course dropping the @ has no effect. Could I be missing something ?

If you have optional attribute to the component, you can use assign_new/3 to assign a default value

assigns = assign_new(assigns, :class, fn -> "" end)

Below pages help you in learning more about heex -

https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.Helpers.html

@some_variable expands to assigns.some_variable in heex templates.

If you but it in your comprehension it should work.
E.g this works like expected:

<ul>
  <%= for no <- [1, 2, 3, 4] do %>
    <li tag={no}><%= no %></li>
  <% end %>
</ul>

The brilliant coder, Liron Shimrony, tells me:

<li class={" some classes #{css_class}"} > 

this works.

Yes, if you want more than just the classes in your css_class your best choice is to use string interpolation inside the handlebars.

If you just need the classes in css_class, class={css_class} should be preferred over class={"#{css_class}"}.