The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Angular’s @boundary template block catches certain errors while child views render and shows an @error fallback. The feature is currently marked developer preview, so check compatibility with your Angular version before relying on it in production.
How do I catch errors in an Angular template?
Wrap the child content that may fail in @boundary, then provide an @error block for the fallback UI:
As an Amazon Associate I earn from qualifying purchases.
@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 rendering error and displays the fallback. The API reference describes this behavior for the initial render and later child-view change detection as well. See Angular’s error-boundary guide and @boundary API reference.
The boundary is a rendering boundary, not a universal exception handler. It is useful around a part of the view that can fail independently, so the rest of the page can remain available while the fallback explains what happened.
#1 Best Overall
How do error-specific fallbacks and retry work?
The fallback context exposes the caught error as $error and a reset function as $reset. You can also bind those values and provide ordered when conditions. Angular uses the first condition that evaluates to true, so put narrower cases before broader ones and retain an unconditional fallback at the end.
@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. Calling $reset() resets the boundary state and attempts to render the original content again. It does not repair the underlying problem, so a retry can produce the same error.
What does @boundary not catch?
Errors in projected content
A receiving component does not gain ownership of projected content merely by placing <ng-content> inside its boundary. The projected view belongs to the view that declared it, so a boundary around the receiving component’s slot does not catch failures in projected components. Put the boundary in the declaring parent around both the wrapper and the projected child if you need to catch those rendering failures.
Errors from application code
A boundary does not replace local handling for operations your code calls directly, such as a request or business operation. Angular’s unhandled-error guide states: “Angular does not catch errors inside of APIs that are called directly by your code.” Handle those close to the call site with the context needed to recover or update application state—for example, with try...catch or RxJS catchError.
Rank #3
Errors thrown by the fallback
If an @error block itself throws, the error moves to the next outer boundary or becomes an unhandled application error. Keep fallback UI simple and avoid placing fragile rendering work inside it.
Programmatically created views
For dynamically created components or embedded views, Angular’s boundary guide points to an onError option in programmatic rendering. Treat that as a separate mechanism rather than assuming a template boundary covers every dynamically created view.
How does @boundary work with Angular ErrorHandler?
A boundary provides local fallback UI; it can also coexist with central reporting. Angular documents an optional ErrorHandler.onViewError hook on a custom ErrorHandler for errors caught by a boundary, allowing an application to send them to an error-tracking service. Angular’s guide explains: “When a boundary catches an error, Angular can still notify the global ErrorHandler.”
These mechanisms serve different purposes: local handling is best placed where application code can decide how to recover, while ErrorHandler can centralize logging for errors Angular forwards. Do not assume either mechanism automatically catches every thrown error.
| Mechanism | Where it applies | Use it for |
|---|---|---|
Local try...catch or RxJS handling |
Operations directly invoked by application code | Recovery or application-state changes where the caller has context; see Angular’s error-handling guide. |
Template @boundary |
Errors in child views during rendering, initialization, or change detection | Local fallback UI and, where appropriate, an attempt to reset; see the boundary guide. |
Angular ErrorHandler |
Framework-forwarded errors and the optional boundary reporting hook | Central logging or telemetry, not a substitute for local recovery; see the boundary guide and error-handling guide. |
Is @boundary ready for production?
Angular labels @boundary developer preview in its guide and API reference. Preview APIs can change. Verify that the Angular version you use supports the feature and check the current documentation before adopting it in production.
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.
