Defer triggers

While the default options for @defer offer great options for lazy loading parts of your components it may still be desirable to further customize the deferred loading experience.

By default, deferred content loads when the browser is idle. You can, however, customize when this loading occurs by specifying a trigger. This lets you pick the loading behavior best suited to your component.

Deferrable views offer two types of loading trigger:

on A trigger condition using a trigger from the list of built-in triggers.
For example: @defer (on viewport)
when A condition as an expression which is evaluated for truthiness. When the expression is truthy, the placeholder is swapped with the lazily loaded content.
For example: @defer (when customizedCondition)

If the when condition evaluates to false, the defer block is not reverted back to the placeholder. The swap is a one-time operation.

You can define multiple event triggers at once, these triggers will be evaluated as OR conditions.

  • Ex: @defer (on viewport; on timer(2s))
  • Ex: @defer (on viewport; when customizedCondition)

In this activity, you'll learn how to use triggers to specify the condition to load the deferrable views.

  1. Add on hover trigger

    In your app.component.ts, add an on hover trigger to the @defer block.

          
    @defer (on hover) {  <article-comments />} @placeholder (minimum 1s) {  <p>Placeholder for comments</p>} @loading (minimum 1s; after 500ms) {  <p>Loading comments...</p>} @error {  <p>Failed to load comments</p>}

    Now, the page will not render the comments section until you hover its placeholder.

  2. Add a 'Show all comments' button

    Next, update the template to include a button with the label "Show all comments". Include a template variable called #showComments with the button.

          
    <button type="button" #showComments>Show all comments</button>@defer (on hover) {  <article-comments />} @placeholder (minimum 1s) {  <p>Placeholder for comments</p>} @loading (minimum 1s; after 500ms) {  <p>Loading comments...</p>} @error {  <p>Failed to load comments</p>}

    Note: for more information on template variables check the documentation.

  3. Add on interaction trigger

    Update the @defer block in the template to use the on interaction trigger. Provide the showComments template variable as the parameter to interaction.

          
    <button type="button" #showComments>Show all comments</button>@defer (on hover; on interaction(showComments)) {  <article-comments />} @placeholder (minimum 1s) {  <p>Placeholder for comments</p>} @loading (minimum 1s; after 500ms) {  <p>Loading comments...</p>} @error {  <p>Failed to load comments</p>}

    With these changes, the page will wait for one of the following conditions before rendering the comments section:

    • User hovers the comments section’s placeholder
    • User clicks on the “Show all comments" button

    You can reload the page to try out different triggers to render the comments section.

If you would like to learn more, check out the documentation for Deferrable View. Keep learning to unlock more of Angular's great features.