Bindings and Streams

PHX- What it does
phx-value-* parameters
phx-click , phx-click-away Click Events
phx-change , phx-submit , phx-feedback-for , phx-disable-with , phx-trigger-action , phx-auto-recover Form Events
phx-blur , phx-focus , phx-window-blur , phx-window-focus Focus
phx-keydown , phx-keyup , phx-window-keydown , phx-window-keyup , phx-key Key Events
phx-viewport-top , phx-viewport-bottom Scroll
phx-update , phx-remove DOM Patching
phx-hook JS Interop
phx-mounted , phx-disconnected , phx-connected Lifecycle Events
phx-debounce , phx-throttle Rate Limiting
phx-track-static Static


sends data to the LiveView process through the socket as an event name or a value via JS.exec JS.push or phx-value-


# client
<div phx-click="food" phx-value-veg1="Cucumber" phx-value-veg2="Potato" >

# server
def handle_event("food", %{"veg1" => "Cucumber", "veg2" => "Potato"}, socket) do


runs when a click event happens outside the element. This is useful for hiding drop-downs.

phx-blur and phx-focus

Used for input

<input name="email" phx-focus="myfocus" phx-blur="myblur"/>

phx-window-focus and phx-window-blur


Streams began in Liveview 0.18.16

In server:

In view:

# long version
<div id="list_name" phx-update="stream">
  <%= for {dom_id, i} <- @streams.items do -update="stream" do>
  	<div id={dom_id}>

# for version
<div id="list_name" phx-update="stream">
  <div :for={{dom_id, i} <- @streams.items} id={dom_id} > 


stream_delete(socket, :albums, album)


Needs a boiler plate

def save_post(socket, :new, post_params) do
  case Blog create_post(post_params) do
  	{:ok, post }

defp notify_parent(m), do: send(self(), {__MODULE__, msg})