How to use @defer in angular component many times in the same page

Question

Can I use @defer on multiple viewports in the same page? When I use it, all the defers work at the same time, not waiting to enter the viewport to execute. They all get triggered in the beginning.

Can I use a defer for each one? To load each component when it enters the viewport?

How can I achieve this? Please provide a code example for a simple response.

Answer 1

You can use this template:

<app-text/>

@for (n of [1,2,3]; track $index) {
  @defer (on viewport) {
    <app-text/>
  } @placeholder {
    <p>loading...</p>
  }
}

To create app-text, you can run ng g c text and within the template insert enough content to fill the viewport.

If you use VS Code, you can type an Emmet abbreviation like lorem1000 followed by TAB or ENTER. This will generate 1000 words using Emmet's "Lorem Ipsum" generator.

As you scroll down, you should see the scrollbar handle jumping up.