Member-only story
Angular: Create a Lazy-Loaded Tailwind Modal
Build a generic, lazy-loaded dialog with Angular and Tailwind CSS
I have the opportunity to participate in Owlly, an amazing and meaningful open source project founded by Sandro Scalco which aims to enable digital democracy in Switzerland.
Last week, as we were discussing the need to pre-render the main Angular application using Scully, we also took the decision to migrate it to Tailwind CSS.
As a result, I notably had to create a custom, generic lazy-loaded modal.
Meta
This article has been published in November 2020. The solution has been tested with Angular v11 and Tailwind v2.
Introduction
This tutorial describes the creation of a generic dialog with Angular and Tailwind CSS. By generic, I mean that the goal is the creation of a dialog’s container which can be reused several times in the application, with different content, without the need to rewrite everything multiple times.
In addition, it was and is also important to me that the modal’s content is lazy loaded for suitable best performance.
