Import
import { NotificationModule } from '@backbase/ui-ang/notification'
Usage
Use the bb-notification-ui component to display contextual notifications to users.
<!-- Basic notification usage -->
<bb-notification-ui
[header]="'This is the header of notification'"
[message]="'This is the default notification. It breaks words, so you can have long text here.'"
[modifier]="'info'">
</bb-notification-ui>
Inputs
|
Input |
Type |
Default |
|---|---|---|
|
animation |
boolean |
undefined |
|
autofocus |
boolean |
false |
|
closeAction |
Function |
undefined |
|
dismissible |
boolean |
true |
|
header (required) |
TemplateRef<any> | string |
|
|
headerContext |
any |
undefined |
|
hostAction |
Function |
undefined |
|
message |
TemplateRef<any> | string |
'' |
|
messageContext |
any |
undefined |
|
modifier |
NotificationType |
'info' |
|
primaryAction |
Function |
undefined |
|
primaryActionTemplate |
TemplateRef<any> |
undefined |
|
primaryActionText |
string |
undefined |
|
secondaryAction |
Function |
undefined |
|
secondaryActionTemplate |
TemplateRef<any> |
undefined |
|
secondaryActionText |
string |
undefined |
animation
The animation input enables opening and closing animations for the notification.
<!-- Notification with animation -->
<bb-notification-ui
[header]="'Animated notification'"
[animation]="true">
</bb-notification-ui>
autofocus
The autofocus input automatically focuses the notification when it is rendered.
<!-- Auto-focused notification -->
<bb-notification-ui
[header]="'Important notification'"
[autofocus]="true">
</bb-notification-ui>
closeAction
The closeAction input provides a callback function that is executed when the notification is manually closed.
<!-- Notification with close action -->
<bb-notification-ui
[header]="'Closeable notification'"
[closeAction]="onNotificationClose">
</bb-notification-ui>
dismissible
The dismissible input controls whether the notification can be dismissed by the user.
<!-- Non-dismissible notification -->
<bb-notification-ui
[header]="'Persistent notification'"
[dismissible]="false">
</bb-notification-ui>
header
The header input sets the notification header text or template. This input is required.
<!-- Notification with string header -->
<bb-notification-ui [header]="'Success!'"></bb-notification-ui>
<!-- Notification with template header -->
<bb-notification-ui [header]="headerTemplate"></bb-notification-ui>
headerContext
The headerContext input provides data context when using a template for the header.
<!-- Notification with header context -->
<bb-notification-ui
[header]="headerTemplate"
[headerContext]="{ userName: 'John' }">
</bb-notification-ui>
hostAction
The hostAction input provides a callback function that is executed when the notification container is clicked.
<!-- Clickable notification -->
<bb-notification-ui
[header]="'Clickable notification'"
[hostAction]="onNotificationClick">
</bb-notification-ui>
message
The message input sets the notification message text or template.
<!-- Notification with message -->
<bb-notification-ui
[header]="'Alert'"
[message]="'This is an important message for the user.'">
</bb-notification-ui>
messageContext
The messageContext input provides data context when using a template for the message.
<!-- Notification with message context -->
<bb-notification-ui
[header]="'Welcome'"
[message]="messageTemplate"
[messageContext]="{ itemCount: 5 }">
</bb-notification-ui>
modifier
The modifier input sets the notification type which affects its visual appearance.
<!-- Success notification -->
<bb-notification-ui
[header]="'Success!'"
[modifier]="'success'">
</bb-notification-ui>
<!-- Error notification -->
<bb-notification-ui
[header]="'Error occurred'"
[modifier]="'error'">
</bb-notification-ui>
<!-- Warning notification -->
<bb-notification-ui
[header]="'Warning'"
[modifier]="'warning'">
</bb-notification-ui>
primaryAction
The primaryAction input provides a callback function for the primary action button.
<!-- Notification with primary action -->
<bb-notification-ui
[header]="'Confirm action'"
[primaryActionText]="'Confirm'"
[primaryAction]="onConfirm">
</bb-notification-ui>
primaryActionTemplate
The primaryActionTemplate input provides a custom template for the primary action area.
<!-- Notification with custom primary action template -->
<bb-notification-ui
[header]="'Custom action'"
[primaryActionTemplate]="customActionTemplate">
</bb-notification-ui>
primaryActionText
The primaryActionText input sets the text for the primary action button.
<!-- Notification with primary action button -->
<bb-notification-ui
[header]="'Action required'"
[primaryActionText]="'Take Action'"
[primaryAction]="onPrimaryAction">
</bb-notification-ui>
secondaryAction
The secondaryAction input provides a callback function for the secondary action button.
<!-- Notification with secondary action -->
<bb-notification-ui
[header]="'Multiple actions'"
[primaryActionText]="'Save'"
[primaryAction]="onSave"
[secondaryActionText]="'Cancel'"
[secondaryAction]="onCancel">
</bb-notification-ui>
secondaryActionTemplate
The secondaryActionTemplate input provides a custom template for the secondary action area.
<!-- Notification with custom secondary action template -->
<bb-notification-ui
[header]="'Custom actions'"
[secondaryActionTemplate]="customSecondaryTemplate">
</bb-notification-ui>
secondaryActionText
The secondaryActionText input sets the text for the secondary action button.
<!-- Notification with both action buttons -->
<bb-notification-ui
[header]="'Confirm deletion'"
[primaryActionText]="'Delete'"
[primaryAction]="onDelete"
[secondaryActionText]="'Cancel'"
[secondaryAction]="onCancel">
</bb-notification-ui>
Outputs
|
Event |
Type |
Description |
|---|---|---|
|
close |
EventEmitter<any> |
Emitted when the notification is manually closed by the user |
|
pauseNotification |
EventEmitter<any> |
Emitted when the notification should be paused due to user interaction |
Accessibility
The Notification component includes comprehensive accessibility features:
- Live region: Notifications are announced to screen readers using aria-live="polite" and role="status".
- Focus management: The autofocus input allows notifications to receive focus when rendered.
- Keyboard navigation: Dismissible notifications can be closed using keyboard interactions.
- Semantic structure: Proper heading structure and button semantics for action elements.
- Screen reader support: All interactive elements have appropriate labels and roles.
The component automatically handles accessibility without requiring additional ARIA inputs from developers.