Back to home

Deferrable Views

Deferrable views can be used in a component template to defer the loading of select dependencies within that template. Those dependencies include components, directives, and pipes, and any associated CSS. To use this feature, you can declaratively wrap a section of your template in a @defer block which specifies the loading conditions. Deferrable views support a series of triggers, prefetching, and several sub blocks used for placeholder, loading, and error state management. You can also create custom conditions with when and prefetch when.

Display @placeholder for 2 seconds

Placeholder content visible for 2 seconds

On interaction trigger - lazy load component when user clicks button

Lazy load component when user clicks button

Lazy load component when it's on the viewport