I have a dictionary of products, such a Smart TV, to simulate a database. Now, I am trying to lazy load every one of them with a for loop and a defer inside. <main class="flex flex-col items-center justify-center min-h-screen"> @if (userLoginService.isLoggedIn()) { <h1 class="text-5xl font-bold">Hola, {{ userLoginService.getUsername() }}</h1> } <h2 class="text-3xl font-bold">Productos en tendencia:</h2> <div class="w-[70%] grid grid-cols-1 md:grid-cols-2 gap-5"> @for (p of products; track p.id) { @defer (on viewport) { <app-product name="{{ p.name }}" description="{{ p.description }}" /> } @placeholder (minimum 2s) { <app-product-skeleton /> } } </div> </main> <router-outlet /> My problem is, all the app-product's are loading at once, not when they eneter on the viewport as I scroll down the page. I am not sure if this is the way a lazy load should be done in Angular, but this is how I am doing it since I just started learning the framework. Continue reading...
