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 { NzNotificationService } from 'ng-zorro-antd/notification';

private readonly notification = inject(NzNotificationService);

Examples

Basic

The simplest usage that close the notification box after 4.5s.

      Loading...

Notification with icon

A notification box with a icon at the left side.

      Loading...

Customized Icon

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

      Loading...

Customized style

The nzStyle and nzClass are available to customize Notification.

      Loading...

Use a template

Use template to implement more complex interactions.

      Loading...

Duration after which the notification box is closed

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...

Custom close button

To customize the style or font of the close button.

      Loading...

Placement

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

      Loading...

Update Notification Content

Update content with unique nzKey.

      Loading...

API#

NzNotificationServiceservice#

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])

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>;
}