Angular Defer Blocks (@defer)
Learn Angular @defer blocks including deferred loading, triggers, placeholders, loading states, error handling, lazy rendering, Core Web Vitals optimization, enterprise best practices, and interview questions.
Modern Angular applications often contain components that are not immediately needed when a page first loads.
Examples include:
- Charts
- Reports
- Maps
- Comments
- Analytics dashboards
- Recommendation panels
Loading these components during the initial page render increases:
- Bundle size
- JavaScript execution time
- Initial loading time
- Largest Contentful Paint (LCP)
Angular introduced @defer Blocks to solve this problem by loading and rendering content only when it is actually needed.
This makes applications faster and significantly improves Core Web Vitals.
Table of Contents
- What are Defer Blocks?
- Why Use @defer?
- Basic Syntax
- Deferred Loading Lifecycle
- @placeholder
- @loading
- @error
- Defer Triggers
- Enterprise Banking Example
- Best Practices
- Common Mistakes
- Top 10 Interview Questions
- Interview Cheat Sheet
- Summary
What are Defer Blocks?
@defer is a built-in Angular template feature that delays loading components, templates, and their dependencies until a specified trigger occurs.
Instead of downloading everything during the initial page load, Angular loads deferred content only when needed.
Benefits include:
- Smaller initial bundle
- Faster startup
- Better Core Web Vitals
- Reduced JavaScript execution
- Improved user experience
Defer Block Overview
flowchart LR
Application
Application --> InitialContent
Application --> DeferredContent
DeferredContent --> Trigger
Trigger --> LoadComponent
Why Use @defer?
Large enterprise applications often contain expensive UI elements that users may never open.
Examples
Dashboard
↓
Accounts
↓
Reports
↓
Analytics
↓
Charts
Instead of loading every feature immediately, defer non-critical content until the user requests it.
Basic Syntax
@defer {
<app-report></app-report>
}
Angular loads the component only when the default trigger conditions are satisfied.
Rendering Lifecycle
flowchart TD
PageLoad
PageLoad --> InitialRender
InitialRender --> DeferBlock
DeferBlock --> Trigger
Trigger --> DownloadComponent
DownloadComponent --> RenderComponent
Default Behavior
Without additional configuration:
- Initial page renders.
- Deferred block is skipped.
- Browser becomes idle.
- Angular downloads deferred dependencies.
- Deferred component is rendered.
Defer Workflow
Application Starts
↓
Render Initial UI
↓
Skip Deferred Content
↓
Trigger Occurs
↓
Download Code
↓
Render Component
@placeholder
A placeholder provides temporary content while the deferred component has not yet started loading.
Example
@defer {
<app-chart />
}
@placeholder {
<p>Chart will load when needed...</p>
}
Benefits
- Better user experience
- No blank spaces
- Immediate visual feedback
Placeholder Flow
flowchart LR
Page
Page --> Placeholder
Placeholder --> Trigger
Trigger --> Component
@loading
Display loading content while Angular downloads the deferred resources.
Example
@defer {
<app-dashboard />
}
@loading {
<p>Loading Dashboard...</p>
}
Users receive immediate feedback during loading.
Loading Lifecycle
flowchart LR
Trigger
Trigger --> Download
Download --> LoadingUI
LoadingUI --> Component
@error
Display fallback UI if deferred loading fails.
Example
@defer {
<app-report />
}
@error {
<p>Unable to load report.</p>
}
This improves application resilience and user experience.
Error Flow
flowchart LR
Download
Download --> Success
Download --> Failure
Success --> Component
Failure --> ErrorUI
Defer Triggers
Angular supports multiple triggers that determine when deferred content loads.
Common triggers include:
- Idle
- Viewport
- Interaction
- Hover
- Timer
- Immediate
Idle Trigger
Load content when the browser is idle.
Example
@defer (on idle) {
<app-recommendations />
}
Suitable for:
- Recommendations
- Analytics
- Optional widgets
Viewport Trigger
Load content when it enters the viewport.
Example
@defer (on viewport) {
<app-comments />
}
Ideal for:
- Comments
- Footer content
- Product reviews
- Infinite scrolling
Viewport Architecture
flowchart LR
Scroll
Scroll --> Viewport
Viewport --> Trigger
Trigger --> Component
Interaction Trigger
Load content after user interaction.
Example
@defer (on interaction) {
<app-chat />
}
Examples
- Button click
- Menu selection
- Form interaction
Hover Trigger
Load content when the user hovers over an element.
Example
@defer (on hover) {
<app-preview />
}
Useful for:
- Product previews
- Tooltips
- Quick details
Timer Trigger
Load content after a specified delay.
Example
@defer (on timer(5s)) {
<app-news />
}
Useful for:
- Promotional banners
- Optional widgets
- Background features
Immediate Trigger
Load content immediately after the initial page has rendered.
Example
@defer (on immediate) {
<app-notifications />
}
This avoids blocking the first render while still loading content quickly afterward.
Trigger Comparison
| Trigger | Best Use Case |
|---|---|
| Idle | Background widgets |
| Viewport | Scrollable content |
| Interaction | User actions |
| Hover | Preview panels |
| Timer | Delayed content |
| Immediate | Near-immediate features |
Combining Placeholder, Loading, and Error
@defer (on viewport) {
<app-transactions />
}
@placeholder {
<p>Transactions will appear here.</p>
}
@loading {
<p>Loading transactions...</p>
}
@error {
<p>Unable to load transactions.</p>
}
This provides a complete user experience throughout the loading lifecycle.
Enterprise Banking Example
Banking dashboard
Customer Dashboard
↓
Accounts
↓
Cards
↓
Payments
↓
Investment Charts
↓
Analytics
Optimization strategy
- Accounts load immediately
- Charts use
@defer - Reports load on viewport
- Customer support loads on interaction
- Recommendations load during idle time
Enterprise Architecture
flowchart TD
Dashboard
Dashboard --> Accounts
Dashboard --> Payments
Dashboard --> DeferredReports
Dashboard --> DeferredCharts
DeferredReports --> Viewport
DeferredCharts --> Idle
Performance Benefits
| Optimization | Benefit |
|---|---|
| Smaller Initial Bundle | Faster startup |
| Reduced JavaScript | Better INP |
| Deferred Rendering | Better LCP |
| Lazy Dependencies | Lower memory usage |
| Faster Initial Paint | Better UX |
| Less CPU Work | Better responsiveness |
Best Practices
| Practice | Recommendation |
|---|---|
| Defer Non-Critical Components | Yes |
| Use Placeholders | Yes |
| Show Loading State | Yes |
| Handle Errors | Yes |
| Choose Appropriate Trigger | Yes |
| Monitor Performance | Yes |
| Combine with Lazy Loading | Yes |
| Use Standalone Components | Yes |
Common Mistakes
Deferring Critical Content
Do not defer:
- Login forms
- Navigation
- Hero sections
- Primary call-to-action buttons
Critical content should always render immediately.
No Placeholder
Blank areas create a poor user experience.
Always provide meaningful placeholder content.
Ignoring Loading State
Users should receive visual feedback while deferred content downloads.
Missing Error Handling
Always include an @error block for components that depend on network resources.
Deferring Tiny Components
Very small components often do not benefit from deferred loading.
Reserve @defer for expensive components or features.
Before vs After @defer
| Without @defer | With @defer |
|---|---|
| Large Initial Bundle | Smaller Initial Bundle |
| All Components Loaded | Only Needed Components Loaded |
| Higher Memory Usage | Lower Memory Usage |
| Slower Startup | Faster Startup |
| More JavaScript | Less Initial JavaScript |
| Poorer LCP | Better LCP |
Advantages
| Benefit | Description |
|---|---|
| Faster Startup | Smaller initial download |
| Better Core Web Vitals | Improved LCP and INP |
| Better User Experience | Progressive loading |
| Lower Memory Usage | Deferred resources |
| Enterprise Scalability | Handles large applications |
| Cleaner Templates | Built-in Angular syntax |
Top 10 Defer Blocks Interview Questions
1. What are Angular Defer Blocks?
Answer
Angular Defer Blocks (@defer) delay loading components and their dependencies until a specified trigger occurs, reducing the initial bundle size and improving application performance.
2. Why use @defer?
Answer
@defer improves startup performance, reduces JavaScript execution, decreases initial bundle size, and enhances Core Web Vitals.
3. What is @placeholder?
Answer
@placeholder displays temporary content before deferred loading begins, preventing empty spaces in the user interface.
4. What is @loading?
Answer
@loading displays loading content while Angular downloads deferred resources and prepares the component for rendering.
5. What is @error?
Answer
@error provides fallback UI if deferred loading fails due to network issues or other runtime problems.
6. What defer triggers are available?
Answer
Common triggers include:
- Idle
- Viewport
- Interaction
- Hover
- Timer
- Immediate
7. When should you use on viewport?
Answer
Use it for components that appear later on the page, such as comments, reviews, reports, or footer sections that users reach by scrolling.
8. Should critical UI be deferred?
Answer
No. Essential content such as navigation, login forms, hero sections, and primary actions should load immediately to ensure a good user experience.
9. Can @defer be combined with SSR and Hydration?
Answer
Yes. @defer complements SSR and Hydration by reducing the amount of JavaScript loaded after the initial page render, improving overall performance.
10. What are Angular @defer best practices?
Answer
- Defer only non-critical components
- Use placeholders
- Show loading indicators
- Handle loading errors
- Select the appropriate trigger
- Monitor Core Web Vitals
- Combine with Lazy Loading and Standalone Components
Interview Cheat Sheet
| Feature | Purpose |
|---|---|
@defer |
Deferred Rendering |
@placeholder |
Initial Placeholder UI |
@loading |
Loading Indicator |
@error |
Error Fallback |
on idle |
Background Loading |
on viewport |
Scroll-Based Loading |
on interaction |
User Action |
on hover |
Mouse Hover |
on timer() |
Delayed Loading |
on immediate |
Load After Initial Render |
Summary
Angular Defer Blocks (@defer) provide a powerful way to improve application performance by delaying the loading of non-critical components until they are needed. Combined with @placeholder, @loading, @error, and flexible triggers such as idle, viewport, interaction, and hover, developers can build fast, responsive, and scalable applications. When used alongside SSR, Hydration, Lazy Loading, and Standalone Components, @defer plays a significant role in optimizing Core Web Vitals and delivering an excellent user experience.
Key Takeaways
- ✅
@deferdelays rendering of non-critical components. - ✅ Deferred loading reduces the initial JavaScript bundle size.
- ✅
@placeholderprovides temporary content before loading begins. - ✅
@loadingimproves the user experience during downloads. - ✅
@errorhandles deferred loading failures gracefully. - ✅ Multiple triggers allow flexible loading strategies.
- ✅ Avoid deferring critical application content.
- ✅ Combine
@deferwith SSR, Hydration, and Lazy Loading. - ✅
@deferimproves LCP, INP, and overall application responsiveness. - ✅ Defer Blocks are a frequently discussed feature in modern Angular interviews.
Next Article
➡️ 139-Angular-Signals-QA.md