Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Scan for outdated or missing drivers - takes under a minute3Repair Windows errors before they cause bigger problemsiTechGuides 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’s @boundary template block catches certain errors in child views and renders an @error fallback. It is currently marked developer preview, so check the compatibility and stability notes for your Angular version before relying on it in production.
How do I catch errors in an Angular template?
Wrap the portion of the template that may fail in @boundary, then provide an @error block for the fallback UI:
@boundary {
<app-risky-component />
} @error {
<p>Something went wrong.</p>
}If a component or directive inside the boundary throws during initialization or child-view change detection, Angular catches the error and displays the fallback. The API reference describes the scope as errors during the initial render or later child-view change detection. See Angular’s error-boundary guide and @boundary API reference.
How do I show different fallback UI for different errors?
Use conditional @error blocks with when clauses. Angular selects the first condition that evaluates to true, so place specific conditions before broader ones and finish with an unconditional fallback.
#1 Best Overall
@boundary {
<app-chart-dashboard />
} @error (let err; reset = $reset; when isNetworkError(err)) {
<p>Network issue. Check your connection.</p>
<button (click)="reset()">Retry</button>
} @error {
<p>An unexpected error occurred: {{ $error.message }}</p>
}Here, isNetworkError is application-provided condition logic. Angular supplies the caught error and reset context; your application decides how to classify the error and what the fallback should say.
How do $error and $reset work?
$errorgives the fallback access to the caught error, which can be used to display relevant information or select a response.$reset()resets the boundary state and attempts to render the original content again. It is a retry attempt, not a fix: if the underlying condition persists, the render can fail again.
Keep error details intended for developers out of user-facing messages unless they are safe and useful to expose. A concise recovery instruction is usually a better fallback than showing raw error text.
What does @boundary not catch?
Projected content
A receiving component does not catch failures in projected content merely by placing a boundary around its <ng-content>. Projected content belongs to the view that declared it. To catch a projected child’s rendering failure, put the boundary in the parent around both the wrapper and the projected child.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Errors in operations called by application code
A template boundary handles rendering failures in child views; it is not a general-purpose handler for requests, business logic, or other operations your code calls directly. Angular’s unhandled-error guide states: “Angular does not catch errors inside of APIs that are called directly by your code.” Handle those operations where the application has the context to recover or update state, using approaches such as try...catch or RxJS catchError.
Rank #3
Failures in the fallback
If an @error block itself throws, the error can move to the next outer boundary or be treated as an unhandled application error. Keep fallback rendering simple and avoid making it depend on fragile operations.
Programmatically created views
For dynamically created components or embedded views, Angular’s boundary guide points to an onError option in programmatic rendering. That is a separate mechanism from a template @boundary.
How does @boundary fit with ErrorHandler?
A boundary can provide local fallback UI while Angular also reports a caught error centrally. The error-boundary guide documents an optional ErrorHandler.onViewError hook for custom reporting, such as sending errors to an error-tracking service. Logging and recovery are different jobs: a global handler can centralize telemetry, while the boundary gives the affected part of the interface a local response. Angular does not imply that every error is automatically caught by either mechanism.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Which Angular error-handling approach should I use?
| Mechanism | Where it applies | Use it for |
|---|---|---|
Local try...catch or RxJS handling |
Operations called directly by application code | Recovery or application-state changes where the caller has context |
Template @boundary |
Errors in child views during rendering, initialization, or change detection | Local fallback UI and, where appropriate, an attempted reset |
Angular ErrorHandler |
Framework-forwarded errors and the optional boundary reporting hook | Central logging or telemetry, not a substitute for local recovery |
Angular currently labels @boundary developer preview in its guide and API reference. Because preview APIs can change, confirm that your installed Angular version supports the syntax and behavior before adopting it in a production application.
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.
