How to Create Nested LiveView Components - Revision history

Admin at 00:33, 8 April 2025

2025-04-08T00:33:35Z

← Older revision		Revision as of 00:33, 8 April 2025
Line 37:		Line 37:
	<source>		<source>


	~~# 1. Create component with phx-click attributes for event handlers and a render slot fo text: <%= render_slot(@inner_block) %>~~

	~~defmodule Example do~~
	~~use Phoenix.Component~~

	~~def simple_button(assigns) do~~
	~~~H"""~~
	~~<button~~
	~~style="background-color: #000000; color: #ffffff; padding: 8px 16px; border-radius: 4px; font-weight: bold;"~~
	~~phx-click={@on_click}~~
	>
	~~<%= render_slot(@inner_block) %>~~
	~~</button>~~
	~~"""~~
	~~end~~
	~~end~~


	~~#___________PARENT~~

	defmodule AppWeb.PageLive do		defmodule AppWeb.PageLive do
	use AppWeb, :live_view		use AppWeb, :live_view
	~~import Example~~
	def mount(_params, _session, socket) do		def mount(_params, _session, socket) do
	~~# Initialize state with a counter~~
	socket = assign(socket, count: 0)		socket = assign(socket, count: 0)
	{:ok, socket}		{:ok, socket}
	end		end

			# Event handler in the parent LiveView
			def handle_event("increment", _params, socket) do
			{:noreply, assign(socket, count: socket.assigns.count + 1)}
			end


	def render(assigns) do		def render(assigns) do
Line 76:		Line 61:
	</div>		</div>

			<.simple_button on_click="increment">
	~~<!-- # 2 add component to parent. Event handlers will come from parent-->~~		Increment Counter
	<~~Example~~.simple_button on_click="increment">		</.simple_button>
	~~<span>Click to increment</span>~~
	</~~Example~~.simple_button>
	</div>		</div>
	"""		"""
	end		end

	# ~~Event handler in the parent LiveView~~
	def ~~handle_event~~(~~"increment", _params, socket~~) do
	{~~:noreply, assign~~(~~socket, count: socket.assigns.count + 1~~)}

			#_________________________________________________________BUTTON

			# Simplified button component
			def simple_button(assigns) do
			~H"""
			<button class="btn btn-lg" phx-click={@on_click} >
			<%= render_slot(@inner_block) %>
			</button>
			"""
	end		end

			#___________________________________________________________END BUTTON



	end		end


	</source>		</source>

Admin at 18:32, 13 March 2025

2025-03-13T18:32:24Z

@@ Line 29: / Line 29: @@
     end
 end
 </source>

Admin at 12:25, 6 April 2023

2023-04-06T12:25:17Z

← Older revision		Revision as of 12:25, 6 April 2023
Line 12:		Line 12:
	~H"""		~H"""
	Hello World! YAY		Hello World! YAY
	<MyComponent.greet name="Jane" />		<MyComponent.greet name="Jane" />
	"""		"""
	end		end

Admin at 12:24, 6 April 2023

2023-04-06T12:24:53Z

← Older revision		Revision as of 12:24, 6 April 2023
Line 12:		Line 12:
	~H"""		~H"""
	Hello World! YAY		Hello World! YAY
	<MyComponent.greet name="Jane" />		<MyComponent.greet name="Jane" />
	"""		"""
	end		end

Admin at 12:24, 6 April 2023

2023-04-06T12:24:26Z

← Older revision		Revision as of 12:24, 6 April 2023
Line 25:		Line 25:
	def greet(assigns) do		def greet(assigns) do
	~H"""		~H"""
	<p>Hello, <%= @name %>!</p>		<p>Hello, <%= @name %>!</p>
	"""		"""
	end		end
	end		end
	</source>		</source>

Admin at 12:23, 6 April 2023

2023-04-06T12:23:54Z

← Older revision		Revision as of 12:23, 6 April 2023
Line 11:		Line 11:
	def render(assigns) do		def render(assigns) do
	~H"""		~H"""
	Hello World! YAY		Hello World! YAY
	<MyComponent.greet name="Jane" />		<MyComponent.greet name="Jane" />
	"""		"""
	end		end

Admin at 12:23, 6 April 2023

2023-04-06T12:23:40Z

← Older revision		Revision as of 12:23, 6 April 2023
Line 11:		Line 11:
	def render(assigns) do		def render(assigns) do
	~H"""		~H"""
	Hello World! YAY		Hello World! YAY
	<MyComponent.greet name="Jane" />		<MyComponent.greet name="Jane" />
	"""		"""
	end		end

Admin: Created page with "This example demonstrates a nested LiveView component. defmodule AppxWeb.SandboxLive do use AppxWeb, :live_view import MyComponent def mount(_params, _session, socket) do {:ok, socket} end def render(assigns) do ~H""" Hello World! YAY """ end end defmodule MyComponent do use Phoenix.Component def greet(assigns) do ~H"""
Hello, <%= @name %>!
..."

2023-04-06T12:17:08Z

Created page with "This example demonstrates a nested LiveView component. <source> defmodule AppxWeb.SandboxLive do use AppxWeb, :live_view import MyComponent def mount(_params, _session, socket) do {:ok, socket} end def render(assigns) do ~H""" Hello World! YAY <MyComponent.greet name="Jane" /> """ end end </source> <source> defmodule MyComponent do use Phoenix.Component def greet(assigns) do ~H""" <p>Hello, <%= @name %>!</p>..."

New page

This example demonstrates a nested LiveView component.

<source>
defmodule AppxWeb.SandboxLive do
use AppxWeb, :live_view
import MyComponent
def mount(_params, _session, socket) do
{:ok, socket}
end
def render(assigns) do
~H"""
Hello World! YAY
<MyComponent.greet name="Jane" />
"""
end
end
</source>

<source>

defmodule MyComponent do
use Phoenix.Component

def greet(assigns) do
~H"""
<p>Hello, <%= @name %>!</p>
"""
end
end
</source>