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.
Add Tailwind CSS
I have tried various solutions to add Tailwind CSS to the Angular application, and despite a small issue that is probably going to be solved soon, the Tailwind schematic provided by the team ngneat is by far the simplest method I tried out.
ng add @ngneat/tailwindRun the above command, follow the prompt, and enjoy.
Service
In order to open and close any modals, we create a service modal.service.ts. It takes care of these operations, and it also takes care of attaching them to the DOM body.
Regarding this operation, to be honest with you, I did not know spontaneously how such things can be coded in Angular, and I had to google for a solution. Fortunately, I found this nice article by Carlos Roso which describes the required steps.
Finally, as the service is provided in root, it is worth noticing that we keep in memory the reference to the component which is currently attached, respectively…
