Notification

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.

expand codeexpand code
Loading...

A notification box with a icon at the left side.

expand codeexpand code
Loading...

The icon can be customized to any TemplateRef<void>.

expand codeexpand code
Loading...

The nzStyle and nzClass are available to customize Notification.

expand codeexpand code
Loading...

Use template to implement more complex interactions.

expand codeexpand code
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.

expand codeexpand code
Loading...

To customize the style or font of the close button.

expand codeexpand code
Loading...

A notification box can pop up from topRight or bottomRight or bottomLeft or topLeft or top or bottom.

expand codeexpand code
Loading...

Update content with unique nzKey.

expand codeexpand code
Loading...

API#

NzNotificationService#

The component provides a number of service methods using the following methods and parameters:

  • NzNotificationService.blank(title, content, [options]) // Notification without icon
  • NzNotificationService.success(title, content, [options])
  • NzNotificationService.error(title, content, [options])
  • NzNotificationService.info(title, content, [options])
  • NzNotificationService.warning(title, content, [options])
ArgumentDescriptionTypeDefault
titleTitlestring | TemplateRef<void>-
contentNotification contentstring | TemplateRef<void>-
optionsSupport setting the parameters for the current notification box, see the table belowobject-

The parameters that are set by the options support are as follows:

ArgumentDescriptionType
nzKeyThe unique identifier of the Notificationstring
nzDurationDuration (milliseconds), does not disappear when set to 0number
nzPauseOnHoverDo not remove automatically when mouse is over while setting to trueboolean
nzAnimateWhether to turn on animationboolean
nzStyleCustom inline styleobject
nzClassCustom CSS classobject
nzDataAnything that would be used as template contextany
nzCloseIconCustom close iconTemplateRef<void> | string
nzButtonCustom buttonTemplateRef<{ $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.

ParameterDescriptionTypeDefault
nzDurationDuration (milliseconds), does not disappear when set to 0number4500
nzMaxStackThe maximum number of notifications that can be displayed at the same timenumber8
nzPauseOnHoverDo not remove automatically when mouse is over while setting to truebooleantrue
nzAnimateWhether to turn on animationbooleantrue
nzTopThe top of the notification when it pops up from the top.string24px
nzBottomThe bottom of the notification when it pops up from the bottom.string24px
nzPlacementPopup position, optional topLefttopRightbottomLeftbottomRighttopbottomstringtopRight
nzDirectionDirection 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>;
}