How to move html code from a component function into an html/heex partial?

Question

Let's say I have something like this:

    defmodule MyAppWeb.Live.PostComponents do
      use Phoenix.Component
      use Phoenix.HTML

      def card(assigns) do
        ~H"""
        <div class="row ....">
            <nav class="......"></nav>
            <%= live_redirect "...", to: @content.slug, class: "stretched-link" %>
          <%= if  do %>
            blah-blah-blah-blah-blah-blah
          <% end %>
        </div>
        """
      end

How to move this code into an html or *.heex file to then call render(....) somehow? The end result must remain the same.

jakobfp · Accepted Answer · 2023-08-25T08:08:58.230

0

You can embed *.html.heex files into function components with embed_templates/1 see LiveView docs here.

The template code can be put into a card.html.heex file (by convention the template files can be moved to separate directory near your module, e.g. /pages/card.html.heex. In your MyAppWeb.Live.PostComponents you then call embed_templates/1 on module level with the path to the template folder as an argument and MyAppWeb.Live.PostComponents will have a function component card defined.

defmodule MyAppWeb.Live.PostComponents do
  use Phoenix.Component

  embed_templates "pages/*.html.heex"
end

# somewhere else in another template or render function
~H"""
...
<MyAppWeb.Live.PostComponents.card ... >
  ...
<./MyAppWeb.Live.PostComponents.card>
...
"""

For more information on declarative assigns of function components embedded like this see the embed_templates/1 documentation.

edited Aug 25 '23 at 08:08

answered Aug 23 '23 at 06:56

jakobfp

83
7

what do you mean by `...template of render function`? What `render` function? – Marco C. Stewart Aug 23 '23 at 14:04
Oh sorry, it was a typo. Should be `template or render function`, fixed it in the answer. I mean, that the function component defined by using `embed_templates` can then be used either in another template or e.g. a render function of a LiveView. – jakobfp Aug 25 '23 at 08:07
Ok... I let myself to forgive you – Marco C. Stewart Sep 03 '23 at 00:01

How to move html code from a component function into an html/heex partial?

1 Answers1