Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallCrashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteA deferrable view is an Angular @defer block. It holds template content whose dependencies (components, directives, and pipes) are loaded separately from the main application code, and only when a trigger fires or a condition becomes true. When the deferred content is not needed to paint the first screen, this can reduce the initial bundle. It is a loading and rendering choice, not a guaranteed performance gain, and it comes with eligibility rules, layout and accessibility trade-offs, and server-rendering behavior that you need to plan for before adopting it.
What a deferrable view does
Without @defer, every component used in a template is part of the bundle that the browser downloads before the page can run. Wrapping part of a template in a @defer block tells the Angular compiler to split the eligible dependencies out of that bundle. The compiler creates dynamic imports for them, along with their component CSS, and the block renders once those imports resolve. Angular does not guarantee the order in which the deferred imports resolve, so do not write code that depends on one component being ready before another. (Angular’s deferred loading guide)
As an Amazon Associate I earn from qualifying purchases.
Which components can be deferred
Eligibility is the rule most often missed. A dependency is only split out if it meets all of these conditions:
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →- It is a standalone component, directive, or pipe. Non-standalone declarations stay in the main bundle.
- It is not referenced anywhere else in the same file outside the
@deferblock. - It is not targeted by a
ViewChildquery, because that query would pull it into eager code.
Transitive dependencies, meaning the components that a deferred component itself uses, do not all need to be standalone. If an eligibility condition fails, Angular still renders the content, but the dependency is not deferred, so the expected saving does not happen. Check the bundle output rather than assuming a block is split. (Angular’s deferred loading guide)
#1 Best Overall
Basic syntax
A complete block can contain a main body and up to three optional state blocks:
@defer {
<large-component />
} @placeholder {
<p>Content will load when needed.</p>
} @loading (after 100ms; minimum 1s) {
<p>Loading…</p>
} @error {
<p>Could not load this content.</p>
}The main body is the content whose dependencies are deferred. The @placeholder block is shown before the trigger fires, @loading is shown while the dependencies download, and @error is shown if the download fails. Only the main body is deferred. The three state blocks are loaded eagerly, so any components inside them are not deferred. Keep them light. (Angular’s @defer API reference)
Controlling when the content loads
A block with no trigger loads when the browser becomes idle. You can change that with an on trigger, a when condition, or both. The table lists the documented triggers and the situations they suit.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
| Trigger | Syntax | Loads when | Suits |
|---|---|---|---|
| Idle (default) | @defer or @defer (on idle) |
The browser is idle | Content that is useful but not urgent |
| Viewport | @defer (on viewport) |
The placeholder enters the viewport | Content lower on the page, such as a comments section |
| Interaction | @defer (on interaction) |
The user interacts with the placeholder | Panels or dialogs the user opens on request |
| Hover | @defer (on hover) |
A pointer hovers over the placeholder | Pointer-oriented previews |
| Immediate | @defer (on immediate) |
Right after non-deferred content has rendered | Content that should load soon but not block the first render |
| Timer | @defer (on timer(500ms)) |
After the specified delay | A fixed, predictable delay |
| Custom condition | @defer (when isReady) |
The expression becomes true | App-specific readiness, such as a feature flag or a loaded data set |
Idle, the default
Idle loading suits content that should eventually appear without competing with the work that makes the page usable. It is the right starting point when you are unsure which trigger fits.
Viewport, interaction, and hover
These triggers respond to what the user does or sees. Use viewport for content approaching the visible area, interaction for panels the user explicitly opens, and hover for previews that a pointer device reveals. Hover is not a good fit for touch-only audiences, because the trigger depends on pointer input.
Immediate and timer
immediate loads the deferred content after the non-deferred content renders, which is useful when you want the load to start quickly without delaying the first paint. timer waits a fixed time. Both are predictable, but neither reacts to what the user is doing.
Rank #3
Custom conditions with when
A when expression lets you load content based on app state. Once the condition has caused the block to load, the block stays rendered. It does not revert to the placeholder if the expression later becomes false. Plan for that if your condition can change back.
Multiple triggers act as OR conditions
If a block lists more than one trigger, the block loads when any one of them fires. For example, on viewport; on interaction loads the content on whichever happens first.
Prefetching is separate from rendering
A prefetch condition controls when the dependencies are fetched. It does not control when the block is displayed. Use it to start downloading code early so that the visible trigger finds the code ready. For example, this block fetches the code during idle time but only renders when the user interacts with it:
@defer (on interaction; prefetch on idle) {
<comment-thread />
} @placeholder {
<button>Show comments</button>
}The prefetch option accepts on triggers and when conditions, just like the main block. Prefetching adds network requests earlier, so it is worth using only when you expect the user to need the content soon. (Angular’s deferred loading guide)
Placeholder, loading, and error states
The state blocks shape what the user sees while the deferred code is pending or unavailable. Two timing options on @loading help avoid flicker. after delays showing the loading state, so fast loads never display it. minimum keeps it visible for at least a set duration, so a quick load does not produce a brief flash. In the example above, after 100ms waits 100 milliseconds before showing the loading content, and minimum 1s keeps it visible for at least one second once shown.
Give the @placeholder a size close to the final content. A placeholder that is much smaller than the loaded component causes the page to jump when the content arrives. This matters most for content in the initial viewport, discussed below.
Nested defer blocks
A defer block can contain another defer block. If the inner and outer blocks use identical triggers, they can fire at the same moment and produce a cascade of simultaneous requests. Angular’s guidance is to use different triggers for nested blocks so the requests are spread out. A common pattern is an outer viewport trigger with an inner interaction trigger, so the inner content loads only after the outer content has appeared and the user has acted.
Server rendering and hydration
By default, server-side rendering (SSR) and static site generation (SSG) render the placeholder, or nothing if there is no placeholder. Defer triggers do not run on the server, so the deferred content is not in the server-rendered HTML. If that content matters for search indexing or first paint, you need a different approach.
Incremental Hydration changes this. With it, hydrate triggers can load the dependencies during server rendering and render the main template, and then hydrate the block according to the configured trigger. The Angular Incremental Hydration guide describes the setup and the trigger options. (Angular’s Incremental Hydration guide)
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Layout shift and accessibility
Deferring content that is visible in the initial viewport is the most common layout mistake. When the placeholder is replaced by the loaded component, the surrounding content moves, which can increase cumulative layout shift (CLS). Angular advises against deferring that content. Reserve the space with a placeholder of matching size, or leave initial-viewport content eager.
Screen readers have a related problem. A user may encounter only the placeholder or loading text, and the eventual change may go unannounced. Angular’s guide shows wrapping the block in a live region so that state changes are announced:
<div aria-live='polite'>
@defer (on viewport) {
<comment-thread />
} @placeholder {
<p>Comments are loading when you scroll here.</p>
} @loading {
<p>Loading comments…</p>
}
</div>Test the result with a screen reader on the real page, because a live region announces only the text that changes inside it.
Quick Recap
Before you adopt deferrable views
- Confirm each deferred dependency is standalone and is not referenced eagerly or through a
ViewChildquery. - Check the build output to see whether the expected chunks were actually created.
- Do not defer content that is visible in the initial viewport unless the placeholder reserves the same space.
- Use a different trigger for each level of nested defer blocks.
- Use
prefetchonly where an early network request is justified. - Keep
@placeholder,@loading, and@errorcontent small, since those components are loaded eagerly. - If you use SSR or SSG, decide whether deferred content must appear in the server HTML, and if so, evaluate Incremental Hydration.
- Wrap state changes in a live region and test with a screen reader.
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.
Recommended Free Tools
