NG-ZORRONotification
Display a notification message globally.
When To Use#
To display a notification message at any of the four corners of the viewport. Typically it can be used in the following cases:
- A notification with complex content.
- A notification providing a feedback based on the user interaction. Or it may show some details about upcoming steps the user may have to follow.
- A notification that is pushed by the application.
import { NzNotificationModule } from 'ng-zorro-antd/notification';Examples
The simplest usage that close the notification box after 4.5s.
Loading...
A notification box with a icon at the left side.
Loading...
The icon can be customized to any TemplateRef<void>.
Loading...
The nzStyle and nzClass are available to customize Notification.
Loading...
Use template to implement more complex interactions.
Loading...
nzDuration can be used to specify how long the notification stays open. After the duration time elapses,
the notification closes automatically. If not specified, default value is 4.5 seconds. If you set the value to 0,
the notification box will never close automatically.
Loading...
To customize the style or font of the close button.
Loading...
A notification box can pop up from topRight or bottomRight or bottomLeft or topLeft or top or bottom.
Loading...
Update content with unique nzKey.
Loading...
API#
NzNotificationService#
The component provides a number of service methods using the following methods and parameters:
NzNotificationService.blank(title, content, [options])// Notification without iconNzNotificationService.success(title, content, [options])NzNotificationService.error(title, content, [options])NzNotificationService.info(title, content, [options])NzNotificationService.warning(title, content, [options])
| Argument | Description | Type | Default |
|---|---|---|---|
| title | Title | string | TemplateRef<void> | - |
| content | Notification content | string | TemplateRef<void> | - |
| options | Support setting the parameters for the current notification box, see the table below | object | - |
The parameters that are set by the options support are as follows:
| Argument | Description | Type |
|---|---|---|
| nzKey | The unique identifier of the Notification | string |
| nzDuration | Duration (milliseconds), does not disappear when set to 0 | number |
| nzPauseOnHover | Do not remove automatically when mouse is over while setting to true | boolean |
| nzAnimate | Whether to turn on animation | boolean |
| nzStyle | Custom inline style | object |
| nzClass | Custom CSS class | object |
| nzData | Anything that would be used as template context | any |
| nzCloseIcon | Custom close icon | TemplateRef<void> | string |
| nzButton | Custom button | TemplateRef<{ $implicit: NzNotificationComponent }> | string |
Methods for destruction are also provided:
NzNotificationService.remove(id)// Remove the notification with the specified id. When the id is empty, remove all notifications (the notification id is returned by the above method)
Global Configuration#
You can use NzConfigService to configure this component globally. Please check the Global Configuration chapter for more information.
| Parameter | Description | Type | Default |
|---|---|---|---|
| nzDuration | Duration (milliseconds), does not disappear when set to 0 | number | 4500 |
| nzMaxStack | The maximum number of notifications that can be displayed at the same time | number | 8 |
| nzPauseOnHover | Do not remove automatically when mouse is over while setting to true | boolean | true |
| nzAnimate | Whether to turn on animation | boolean | true |
| nzTop | The top of the notification when it pops up from the top. | string | 24px |
| nzBottom | The bottom of the notification when it pops up from the bottom. | string | 24px |
| nzPlacement | Popup position, optional topLefttopRightbottomLeftbottomRighttopbottom | string | topRight |
| nzDirection | Direction of the text in the notification | 'ltr' | 'rtl' | - |
NzNotificationRef#
It's the object that returned when you call NzNotificationService.success and others.
export interface NzNotificationRef {
messageId: string;
onClose: Subject<boolean>; // It would emit an event when the notification is closed, and emit a `true` if it's closed by user
onClick: Subject<MouseEvent>;
}