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

@defer { } @placeholder (minimum 2000ms) {

Placeholder content visible for 2 seconds

}

On interaction trigger - lazy load component when user clicks button

@defer (on interaction(triggerLoading)) { } @placeholder {

Lazy load component when user clicks button

}

Lazy load component when it's on the viewport

@defer (on viewport) { } @placeholder {

}