chrisdel101

chrisdel101

Include Flash messages in child components

Using the default liveView setup via the generator, the flash messages are in live.html.heex. These appear to be included in all true LV’s via MyAppWeb module. But they are not in any of the child components. Not sure why. I’ve been copy/pasting so far but that is not sustainable.

How can I import this live.html into the child components too? I can’t find any docs on that layout keyword used below, if this might be the key.

This is the default code that imports the flashes into the main liveViews.

#live.html.heex
<main class="container">
  <p class="alert alert-info" role="alert"
    phx-click="lv:clear-flash"
    phx-value-key="info"><%= live_flash(@flash, :info) %></p>
  # other flashes

  <%= @inner_content %>
</main>

# myapp_web.ex
defmodule MyAppWeb do
    def controller do ...
    def view do ...
 def live_view do
    quote do
      use Phoenix.LiveView,
     # this imports the flashes live.html
        layout: {MyApp.LayoutView, "live.html"}

      unquote(view_helpers())
    end
  end

  def live_component do
    quote do
      use Phoenix.LiveComponent,
   #  but this does not work - has no effect (I added this)
      layout: {MyApp.LayoutView, "live.html"}
      unquote(view_helpers())
    end
  end
...

Most Liked

100phlecs

100phlecs

Phoenix.LiveComponent doesn’t take layout: as an option.

I’m not sure of the structure of your app, but what you could do in order to not copy paste the flash html code around would be to wrap your livecomponents in a function that takes a slot.

Using the embed_templates macro, you can then call live.html.heex as a HEEx tag, i.e.

<.live>

</.live>

Otherwise I would just copy paste it into a HEEx function within a module that is accessible within your live components:

slot :inner_block
def container(assigns) do
~H"""
<main class="container">
  <p class="alert alert-info" role="alert"
    phx-click="lv:clear-flash"
    phx-value-key="info"><%= live_flash(@flash, :info) %></p>
  # other flashes

  <%= render_slot(@inner_block) %>
</main>
"""
end

Last Post!

gerrit

gerrit

You probably updated to LiveView 0.19.0 which removes the previously deprecated let. You now have to use :let instead.

E.g. <.form let={f} for={@changeset}> is replaced by <.form :let={f} for={@changeset}>

Where Next?

Popular in Questions Top

rms.mrcs
Hi, I need to transform a list of numbers into a map where the keys are the indexes and the values are the original values of the list. ...
New
mcarvalho
What is the difference between System.get_env and Application.get_env? For example, what are best practices to use one versus another.
New
sen
Hi All, I set a environment variables in dev.exs , like below code. when i start server, how can i set the ${enable} value? thanks. d...
New
aalberti333
As the title describes, I’m trying to run Enum.map() over a list of key/value pairs, where the value is a map. My data looks like this: ...
New
alice
Hey, Just curious what are the main benefits of Elixir compared to Clojure? When is Elixir more useful than Clojure and vice versa? Th...
New
romenigld
I am trying to run a deploy with docker and I successfully runned with this command: docker build -t romenigld/blog-prod . but when I t...
New
Harrisonl
We have an ECS cluster with 4 services, where each task joins a single cluster, via discovery ECS discovery service. Currently when I de...
New

Other popular topics Top

electic
Hi, I am new to Elixir. I am trying to use the DateTime component to insert a date into MySQL however the there seems to be no way to fo...
New
ashish173
I am using Ecto timestamps with postgres, I can see the timestamps() use the :naive_dateime but for my use case I wanted to store the ti...
New
stefanchrobot
What’s the safe way to decode a JSON string into a struct? I want to avoid calling String.to_atom. Jason.decode can give me a map with st...
New
axelson
This post is a wiki (feel free to hit the edit button near the bottom right of this post to add your own changes!) This post collects co...
239 49266 226
New
sorentwo
Hello! tl;dr Announcing Oban, an Ecto based job processing library with a focus on reliability and historical observability. After spen...
985 44778 311
New
sergio
Kind of like when jquery came out, it was super necessary. Existing drag and drop libraries have a bunch of baggage to support old browse...
New

We're in Beta

About us Mission Statement