Free tools Windows power users keep installed
One-click scans. No signup required.
iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Angular deferrable views are @defer blocks that delay loading eligible template dependencies until a trigger fires. Used selectively, they can keep code for below-the-fold or on-demand content out of the initial load. They do not automatically defer everything written inside the block: standalone status and references elsewhere in the same template file determine what Angular can split out.
What an Angular deferrable view does
A deferrable view wraps part of a component template in an @defer block. Angular can compile eligible dependencies in that block into dynamic imports, then fetch them after the rest of the template has rendered. Angular describes the purpose as reducing the initial bundle by postponing code not needed for initial rendering; this can help initial loading and metrics such as LCP or TTFB, but the outcome depends on the application and is not guaranteed. See Angular’s guide to deferred loading.
A minimal example is:
@defer (on viewport) {
<app-recommendations />
} @placeholder {
<p>Recommendations will appear here.</p>
}The placeholder appears until the trigger fires and the deferred content is ready. For a block to reduce initial loading, its dependencies must actually qualify for deferral.
Which dependencies Angular can defer
Angular can defer components, directives, pipes, and associated component CSS. The relevant components, directives, and pipes must be standalone, and they must not also be referenced outside the @defer block in the same file. A reference in a ViewChild query also prevents deferral. Dependencies that are not standalone remain eager even if their use appears inside the braces. Transitive dependencies of an eligible dependency may still use NgModules.
#1 Best Overall
Angular emits dynamic imports for eligible dependencies, but does not guarantee the order in which those imports are generated. If a dependency appears in the eager bundle or no deferred chunk is produced, check standalone status and references elsewhere in the file before investigating the trigger.
Choose when loading starts
The default trigger is on idle. Angular also supports on viewport, on interaction, on hover, on immediate, and on timer. Alternatively, when takes a boolean expression. Multiple triggers separated by semicolons are OR conditions, so any one of them can start loading. The documented behaviors are described in Angular’s defer triggers tutorial and @defer API reference.
| Trigger | What starts loading | Useful consideration |
|---|---|---|
on idle |
When the browser is idle; this is the default. | Can load without a deliberate user action, so consider whether it competes with other work during initial rendering. |
on viewport |
When the block’s placeholder or reference element enters the viewport. | Useful for content farther down the page; consider whether the content could enter the initial viewport. |
on interaction |
When the user interacts with the block’s placeholder or reference element. | Fits content the user explicitly requests, provided the placeholder gives a clear target. |
on hover |
When the user hovers over the block’s placeholder or reference element. | Consider that hover is not an equivalent interaction for every user or input method. |
on immediate |
Immediately after the non-deferred content has rendered. | It postpones loading until that point, but may still load during the initial page experience. |
on timer |
After the specified duration. | Choose the delay in relation to when the content is useful; elapsed time alone does not indicate user intent. |
when |
When the supplied expression first becomes truthy. | The transition is one-way: a later false value does not restore the placeholder. |
Angular also supports prefetch conditions. Prefetching begins fetching dependencies without itself changing the condition that controls when the deferred view is rendered. Choose a trigger based on content position and user intent rather than assuming one option is universally best. Nested blocks using the same trigger can load together and produce cascading requests.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →Use placeholder, loading, and error blocks for different states
The main @defer block contains the content to load. Its optional sub-blocks have separate jobs:
Rank #3
@placeholdersupplies content before the trigger fires. Angular’s tutorial recommends including one.@loadingcan indicate that loading has started and the deferred content is not ready yet.@errorcan display a failure state if loading fails.
Dependencies used in these sub-blocks are eager, not deferred. Keep them light so the scaffolding does not undermine the intended initial-load savings. Angular’s placeholder, loading, and error tutorial documents timing options: @placeholder (minimum ...) can keep placeholder content visible for a minimum duration, while @loading (after ...; minimum ...) can delay the loading indicator and control its minimum display time. These options can reduce flicker when a download finishes quickly.
What happens with SSR, SSG, and hydration
By default, server-side rendering (SSR) and static-site generation (SSG) render the placeholder for a deferred block, or nothing if it has no placeholder. Defer triggers do not run on the server. In the browser, the placeholder is hydrated and the trigger becomes active.
Incremental hydration is a separate option: with it enabled, a hydrate trigger can let the main template render in the server-generated page while deferring its dependencies for hydration in the browser. Angular also documents event replay for matching events that happen before hydration finishes. See Angular’s incremental hydration guide for how that approach works.
Recommended Free Tools
Protect layout stability and screen-reader feedback
Deferring content that should be visible immediately can cause layout shift when the placeholder is replaced. For content likely to appear in the initial viewport, reserve suitable space or avoid a trigger that makes the content appear during initial rendering. Deferring below-the-fold content is less likely to disrupt the first view.
Screen readers may read a placeholder without announcing its later replacement, particularly when focus is in the deferred region. Angular’s guide demonstrates wrapping the region in a polite live region with aria-atomic="true" so the change can be announced:
<div aria-live="polite" aria-atomic="true">
@defer (on interaction) {
<app-details />
} @placeholder {
<p>Activate to load details.</p>
}
</div>Check the experience with assistive technology and ensure the placeholder communicates what the user can do, rather than relying on the replacement to be announced automatically. Angular’s guidance on these concerns is in its deferred loading guide.
Account for HMR when checking trigger behavior
With hot module replacement (HMR) enabled, Angular loads @defer dependencies eagerly instead of waiting for configured triggers, including client-side and incremental-hydration triggers. This can make a trigger appear ineffective during development. Angular’s NG0751 error reference advises disabling HMR when validating trigger behavior.
Verify the result in your application
A deferred block is a loading strategy, not proof of a performance improvement. Confirm that eligible dependencies are split into deferred imports in the built application, then measure the actual user experience. If the block loads eagerly, first check eligibility and references elsewhere in the same file; if it behaves differently only in development, check HMR. Judge the result by whether the initial page experience improves without introducing layout shifts or inaccessible state changes.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
