Import
import { ErrorCommonStateModule } from '@backbase/ui-ang/common-error-state'
Usage
Use the bb-common-error-state-ui component to display a standardized error state. Pass an error as a string, an HttpErrorResponse, an Error, or a custom template reference.
<!-- Basic error state with a string -->
<bb-common-error-state-ui [error]="'Failed to open a page'"></bb-common-error-state-ui>
Inputs
|
Input |
Type |
Default |
|---|---|---|
|
error |
HttpErrorResponse | Error | TemplateRef<any> | string |
'' |
error
The error input sets the error to display. It accepts an HttpErrorResponse, a standard Error, a template reference, or a string. The component will display a built-in template for common HTTP errors, a message for standard errors, or render the provided template or string.
<!-- Error state with a forbidden HTTP error -->
<bb-common-error-state-ui
[error]="new HttpErrorResponse({ status: 403 })">
</bb-common-error-state-ui>
<!-- Error state with a custom template -->
<ng-template #customError>
<div>Custom error content</div>
</ng-template>
<bb-common-error-state-ui [error]="customError"></bb-common-error-state-ui>
Accessibility
This component is built with accessibility in mind. See the information below for supported behaviors and configuration options to ensure a fully accessible experience for all users.
- The root element uses role="status" to announce error states to assistive technologies.
- All error states are rendered using the accessible bb-empty-state-ui component.
- Custom templates should be designed with accessibility in mind.