This is a continuation of Part 1, which you can find here:
https://danieljaouendevelopment.com/2022/12/18/a-brief-introduction-to-phoenix-and-liveview-part-1/

Now, let’s navigate to the index.html.heex file, which is located in lib/todo_web/live/todo_item_live/index.html.heex.

.header

The first thing we encounter is something that looks like an HTML tag, but is actually a LiveView function component. We can tell that it is a function component because it begins with a .. You can find the definition of the header component in lib/todo_web/components/core_components.ex. We can see that it has a class attr, an inner_block, a subtitle, and associated actions slots.

In :actions, we see that there is a .link. This is defined in LiveView itself (see: deps/phoenix_live_view/lib/phoenix_component.ex — search for “def link“. Feel free to also read the documentation at the top of the file). You can find the documentation for the patch attr in the file listed above (search for "attr.(:patch"). The long and short of it is that /todo_items/new is first translated into a Verified Route (note the ~p sigil), which then will call handle_params with the :new action.

.table

Next, we have a .table. You can also view this function component in lib/todo_web/components/core_components.ex. Basically, the table function component has three attrs (id, row_click, and rows) and a slot col which takes an optional attr label plus a slot action. The rows attr passes each list item into the :let slot of the associated slot, and the row_click attr calls JS.navigate, which will, in turn navigate the page to the show.ex LiveView. You can learn more about the JS module here: https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.JS.html

.modal

Next, we have the modal function component, which is displayed only when the @live_action is in [:new, :edit]. Basically, it renders a LiveComponent, which you can find in lib/todo_web/live/todo_item_live/form_component.ex. You can read more about LiveView’s LiveComponent’s here: https://hexdocs.pm/phoenix_live_view/Phoenix.LiveComponent.html

Conclusion

And that’s it! Now we navigated through index.html.heex, so you should have a better understanding of function components and where you can find the docs for them.

Again, if you gained value from this article, feel free to throw me a dollar or two on my Buy Me a Coffee page, which you can find here: https://www.buymeacoffee.com/danieljaouen

Thanks for reading!