Backend interview prep

Start

Angular Deferrable Views (@defer)

Learn Angular Deferrable Views (@defer) with triggers, placeholders, loading states, error handling, performance optimization, SSR integration, enterprise examples, architecture diagrams, and interview questions.

Deferrable Views (@defer) are one of the most impactful performance features introduced in modern Angular.

Instead of loading every component during the initial page render, Angular allows developers to defer loading non-critical content until it is actually needed.

This significantly improves:

  • Initial page load
  • First Contentful Paint (FCP)
  • Largest Contentful Paint (LCP)
  • Time to Interactive (TTI)
  • Core Web Vitals
  • User experience

Table of Contents

  • What are Deferrable Views?
  • Why Use @defer?
  • How @defer Works
  • Basic Syntax
  • Defer Triggers
  • Placeholder
  • Loading State
  • Error Handling
  • Nested Deferrable Views
  • SSR & Hydration
  • Enterprise Banking Example
  • Performance Best Practices
  • Common Mistakes
  • Top 10 Interview Questions
  • Summary

What are Deferrable Views?

A Deferrable View delays loading and rendering of a component until a specified trigger occurs.

Instead of downloading and rendering everything immediately,

Angular loads deferred content only when required.

Traditional Rendering

flowchart LR

Browser

Browser --> LoadEverything

LoadEverything --> RenderEverything

RenderEverything --> UI

Problems

  • Larger JavaScript bundle
  • Slower startup
  • Longer rendering time

Deferrable View Rendering

flowchart LR

Browser

Browser --> RenderCriticalUI

RenderCriticalUI --> UserInteraction

UserInteraction --> LoadDeferredComponent

LoadDeferredComponent --> UpdatedUI

Benefits

  • Faster startup
  • Smaller initial bundle
  • Better Core Web Vitals

Why Use @defer?

Ideal for components that are not immediately required.

Examples

  • Charts
  • Analytics
  • Reports
  • Comments
  • Recommendations
  • Maps
  • Help panels
  • Admin widgets

Load them only when users actually need them.

Basic Syntax

@defer {

<app-recommendations />

}

Angular delays loading of app-recommendations.

Architecture

flowchart TD

PageLoad

PageLoad --> CriticalContent

CriticalContent --> User

User --> DeferTrigger

DeferTrigger --> DeferredComponent

DeferredComponent --> DOM

Placeholder

Display temporary content while the deferred component has not yet loaded.

@defer {

<app-dashboard-chart />

}

@placeholder {

<p>Loading dashboard...</p>

}

The placeholder is visible immediately.

Placeholder Flow

flowchart LR

InitialPage

InitialPage --> Placeholder

Placeholder --> DeferredComponent

DeferredComponent --> FinalUI

Loading State

Display a loading indicator while Angular downloads the deferred component.

@defer {

<app-report />

}

@loading {

<p>Loading report...</p>

}

Useful for:

  • Large reports
  • Dashboards
  • Charts
  • Analytics

Loading Flow

flowchart TD

Trigger

Trigger --> DownloadComponent

DownloadComponent --> LoadingState

LoadingState --> ComponentReady

ComponentReady --> UI

Error Handling

Provide fallback UI if loading fails.

@defer {

<app-reports />

}

@error {

<p>

Unable to load reports.

</p>

}

This improves user experience during network failures.

Complete Example

@defer {

<app-recommendations />

}

@placeholder {

<p>

Recommendations will appear here...

</p>

}

@loading {

<p>

Loading recommendations...

</p>

}

@error {

<p>

Unable to load recommendations.

</p>

}

Defer Triggers

Angular supports several triggers for deferred loading.

Trigger Description
on idle Load when the browser is idle
on viewport Load when content enters the viewport
on interaction Load after user interaction
on hover Load when the user hovers
on immediate Load immediately after initial render
when Load when a condition becomes true

on idle

Load when the browser is idle.

@defer (on idle) {

<app-statistics />

}

Best for

  • Reports
  • Analytics
  • Background widgets

on viewport

Load when the component scrolls into view.

@defer (on viewport) {

<app-reviews />

}

Best for

  • Comments
  • Reviews
  • Footer widgets
  • Infinite scrolling

on interaction

Load after user interaction.

@defer (on interaction) {

<app-profile-editor />

}

Best for

  • Edit forms
  • Dialogs
  • Settings pages

on hover

Load when the user hovers.

@defer (on hover) {

<app-product-preview />

}

Useful for

  • Product previews
  • Tooltips
  • Menus

when Condition

Load only when a condition becomes true.

@defer (

when isAdmin()

) {

<app-admin-panel />

}

This is useful for role-based or conditional content.

Trigger Comparison

Trigger Best Use Case
on idle Background widgets
on viewport Content below the fold
on interaction Forms and dialogs
on hover Product previews
on immediate Soon after initial render
when Conditional rendering

Nested Deferrable Views

Large applications may defer multiple independent sections.

@defer {

<app-dashboard />

}

@defer (on viewport) {

<app-reports />

}

Each section loads independently.

Nested Architecture

flowchart TD

Dashboard

Dashboard --> Reports

Dashboard --> Charts

Reports --> Deferred

Charts --> Deferred

SSR and Hydration

Deferrable Views work well with:

  • Server-Side Rendering (SSR)
  • Hydration

Architecture

flowchart LR

Server

Server --> HTML

HTML --> Browser

Browser --> Hydration

Hydration --> DeferredComponents

DeferredComponents --> InteractiveUI

Benefits

  • Better SEO
  • Faster first paint
  • Smaller hydration workload

Signals with Deferrable Views

Signals determine when content changes,

while @defer determines when content is loaded.

Example

showDetails = signal(false);

<button

(click)="showDetails.set(true)">

View Details

</button>

@defer (

when showDetails()

) {

<app-account-details />

}

Signals + @defer Architecture

flowchart LR

Signal

Signal --> DeferCondition

DeferCondition --> Component

Component --> UI

Enterprise Banking Example

Online Banking Dashboard

Critical Content

  • Account Balance
  • Recent Transactions
  • Alerts

Deferred Content

  • Investment Charts
  • Spending Analytics
  • Loan Calculator
  • Credit Score
  • Financial Recommendations

Architecture

flowchart TD

Login

Login --> Dashboard

Dashboard --> CriticalWidgets

Dashboard --> DeferredWidgets

DeferredWidgets --> Charts

DeferredWidgets --> Analytics

DeferredWidgets --> Reports

CriticalWidgets --> User

Benefits

  • Faster dashboard load
  • Better responsiveness
  • Smaller initial bundle
  • Excellent scalability

Performance Best Practices

Practice Benefit
Defer non-critical UI Faster initial load
Keep placeholders lightweight Better perceived performance
Use viewport triggers Lazy-load below-the-fold content
Use Signals for conditions Cleaner reactive logic
Combine with Standalone Components Smaller bundles
Use OnPush Efficient rendering
Profile performance Validate improvements

Common Mistakes

Deferring Critical Content

❌ Avoid deferring:

  • Login forms
  • Primary navigation
  • Critical account information
  • Core page layout

Users should see these immediately.

Heavy Placeholders

A placeholder should be lightweight.

❌

@placeholder {

<app-large-chart />

}

✅

@placeholder {

<p>

Loading...

</p>

}

Too Many Deferred Components

Excessive fragmentation can increase network requests and complicate loading behavior.

Group related features when appropriate.

Ignoring Loading and Error States

Always provide:

  • @loading
  • @error

to improve user experience.

Using @defer Everywhere

Only defer content that is not required for the initial user experience.

Deferrable Views vs Lazy Loading

Feature Lazy Loading Deferrable Views
Loads Routes ✅ Yes ❌ No
Loads Components Limited ✅ Yes
Improves Initial Page ✅ Yes ✅ Yes
Route Level ✅ Yes ❌
Component Level ❌ ✅
Can Be Combined ✅ Yes ✅ Yes

Advantages

Feature Benefit
Faster Startup Smaller initial rendering
Smaller Bundle Deferred downloads
Better Core Web Vitals Improved UX
Flexible Triggers Load when needed
SSR Friendly Better SEO
Signals Compatible Modern Angular architecture

Top 10 Deferrable Views Interview Questions

1. What are Deferrable Views in Angular?

Answer

Deferrable Views (@defer) delay loading and rendering of non-critical components until a specified trigger occurs, improving application startup performance.

2. Why should you use @defer?

Answer

It reduces the initial JavaScript downloaded and rendered, improving page load time, Core Web Vitals, and overall user experience.

3. What types of content should be deferred?

Answer

Content that is not immediately required, such as charts, analytics, recommendations, comments, reports, help panels, and maps.

4. What is @placeholder?

Answer

@placeholder displays temporary content before the deferred component begins loading or while it has not yet been triggered.

5. What is @loading?

Answer

@loading displays a loading indicator while Angular downloads and prepares the deferred component.

6. What is @error?

Answer

@error displays fallback UI if the deferred component fails to load.

7. What triggers can be used with @defer?

Answer

Common triggers include:

  • on idle
  • on viewport
  • on interaction
  • on hover
  • on immediate
  • when

8. Can Deferrable Views work with Signals?

Answer

Yes. Signals can determine when deferred content should load by driving when conditions.

9. Can Deferrable Views be combined with Lazy Loading?

Answer

Yes. Lazy Loading optimizes route-level code loading, while Deferrable Views optimize component-level loading. Together they provide excellent performance.

10. What are Deferrable View best practices?

Answer

  • Defer only non-critical content.
  • Keep placeholders lightweight.
  • Provide loading and error states.
  • Combine with Signals and OnPush.
  • Measure performance improvements using Core Web Vitals.

Interview Cheat Sheet

Requirement Recommended Solution
Component-Level Lazy Loading @defer
Temporary UI @placeholder
Download Indicator @loading
Failure UI @error
Below-the-Fold Content on viewport
Background Widgets on idle
User Actions on interaction
Conditional Loading when
UI State Signals
Enterprise Apps @defer + Signals + OnPush

Summary

Angular Deferrable Views (@defer) provide a powerful way to improve application performance by delaying the loading of non-critical components until they are actually needed. Combined with Signals, OnPush Change Detection, Standalone Components, SSR, and Hydration, Deferrable Views help reduce initial bundle size, improve Core Web Vitals, and create a faster, more responsive user experience for enterprise-scale Angular applications.

Key Takeaways

  • ✔ @defer delays loading of non-critical components.
  • ✔ Use @placeholder, @loading, and @error for a polished user experience.
  • ✔ Choose the appropriate trigger (on idle, on viewport, on interaction, on hover, or when).
  • ✔ Combine @defer with Signals for reactive conditional loading.
  • ✔ Use Deferrable Views alongside Lazy Loading for maximum performance.
  • ✔ Avoid deferring critical page content.
  • ✔ Keep placeholders lightweight.
  • ✔ Test deferred components under slow network conditions.
  • ✔ Measure improvements using Core Web Vitals.
  • ✔ Deferrable Views are a key modern Angular performance feature and a common interview topic.

Next Article

➡️ 95-Virtual-Scrolling-QA.md