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
In Angular, @placeholder, @loading, and @error are optional states attached to an @defer block: the placeholder appears before its trigger, the loading block can appear while deferred dependencies load, and the error block appears if that loading fails. They describe separate points in the deferred-content lifecycle, not competing alternatives.
What each block does
| Block | When it appears | What it tells the user |
|---|---|---|
@placeholder |
Before the defer trigger fires. Without a placeholder, the block displays nothing during this stage. | What content is expected or where it will appear. |
@loading |
While Angular loads the deferred dependencies, subject to any configured delay. | That loading is in progress. |
@error |
If loading the deferred dependencies fails. | That the deferred content could not be loaded. |
The placeholder is optional, but Angular’s tutorial recommends including one. Loading and error blocks are also optional. If dependency loading fails and no error block is configured, Angular documents the NG0750 error.
How to write the three states
Place the optional blocks after the main @defer content. For example:
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →@defer {
<article-comments />
} @placeholder (minimum 1s) {
<p>Comments will appear here.</p>
} @loading (after 500ms; minimum 1s) {
<p>Loading comments…</p>
} @error {
<p>Comments could not be loaded.</p>
}The Angular @defer API reference documents these block forms and timing parameters. Choose different messages for each state: set expectations before the trigger, indicate active loading, and explain the failure when the deferred load cannot complete.
#1 Best Overall
Keep fast transitions from flickering
@placeholder (minimum 500ms) keeps the placeholder visible for at least the configured time after it first renders. For loading UI, after delays its appearance, while minimum sets its minimum display time once shown. For instance, @loading (after 100ms; minimum 1s) avoids showing a loading message for a very brief load, then keeps it visible for at least one second if it does appear. Durations use ms or s. These options can reduce distracting flashes; they do not make the underlying load faster.
What Angular actually defers
Only eligible dependencies used inside the main @defer block are deferred. Angular’s compiler generates dynamic imports for eligible components, directives, and pipes. In the guide’s eligibility rules, those dependencies must be standalone and not referenced outside defer blocks in the same file. A dependency that fails those conditions is eagerly loaded instead.
Dependencies used in @placeholder, @loading, or @error are eagerly loaded. Keep fallback templates lightweight if reducing the initial bundle is a goal. The block controls when the main deferred content is requested; triggers include options such as on idle, on viewport, on interaction, on hover, immediate, a timer, or a custom when condition. The state blocks do not choose the trigger.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Fix the driver behind crashes, sound loss and screen glitches3Repair Windows errors before they cause bigger problemsWhat the error block catches
@error is for a failure to load deferred dependencies, which can happen, for example, under poor network conditions. Do not treat it as a universal error boundary for every exception or failure inside the loaded component; Angular’s documented behavior here concerns deferred dependency loading. Provide a useful recovery direction when your application supports one, rather than implying that the content loaded successfully.
Rank #3
Server rendering and accessibility
With server-side rendering or static generation, Angular renders the placeholder by default; if there is no placeholder, it renders nothing for the defer block. The server does not invoke defer triggers. Angular’s guide describes Incremental Hydration as the configuration for rendering the main deferred content on the server.
Assistive technology may announce the placeholder or loading text but not automatically announce later changes. Angular’s defer guide suggests wrapping the relevant block in an element with aria-live="polite" and aria-atomic="true" when announcements are needed. Check that the resulting announcements are clear and not excessive for the component’s context.
Quick Recap
Placement and performance cautions
- Deferring content already visible in the initial viewport can increase cumulative layout shift; reserve appropriate space or reconsider whether that content should be deferred.
- Nested defer blocks using identical triggers can lead to cascading requests. Choose trigger behavior with the dependency and loading sequence in mind.
- Deferrable views can improve initial loading and Core Web Vitals, including LCP and TTFB, but the Angular guide provides no quantified improvement that applies to every application. Measure your own page rather than assuming a fixed gain.
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.
